From 82d01ea70430e2af83c9de2b42c35151a66fb4bf Mon Sep 17 00:00:00 2001
From: Viktor Svertoka <victor.svertoka@gmail.com>
Date: Sat, 31 Jan 2026 16:55:06 +0200
Subject: [PATCH 01/24] chore: bump Node.js to 20 for Netlify

---
 netlify.toml | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 netlify.toml

diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 00000000..7c529ca7
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,13 @@
+[build]
+  base = "frontend"
+  command = "npm run build"
+  publish = ".next"
+
+[functions]
+  node_bundler = "esbuild"
+
+[build.environment]
+  NODE_VERSION = "20.11.1"
+
+[[plugins]]
+  package = "@netlify/plugin-nextjs"
\ No newline at end of file

From b7c49a559f79352fd4f778b84e4ed7d048600acb Mon Sep 17 00:00:00 2001
From: Viktor Svertoka <victor.svertoka@gmail.com>
Date: Sat, 31 Jan 2026 17:12:11 +0200
Subject: [PATCH 02/24] feat(md) add netlify status (#234)

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 987c65f9..7e3238e8 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,4 @@
 ## DevLovers - a platform for technical interview preparation in frontend, backend, and full-stack development.
+
+develop
+[![Netlify Status](https://api.netlify.com/api/v1/badges/0d21e84e-ea55-47f0-b841-c8eb91f2c9a0/deploy-status)](https://app.netlify.com/projects/develop-devlovers/deploys)

From 124bc0472b9bcaea46493c17f022ca10dab2ea4b Mon Sep 17 00:00:00 2001
From: liudmylasovetovs <127711697+liudmylasovetovs@users.noreply.github.com>
Date: Sat, 31 Jan 2026 14:01:12 -0800
Subject: [PATCH 03/24] (SP 2) [Shop UI] Unify storefront styles across
 components and interactions (#236)

---
 .../app/[locale]/shop/admin/products/page.tsx | 131 ++++++-------
 frontend/app/[locale]/shop/cart/page.tsx      | 173 ++++++++++--------
 .../app/[locale]/shop/checkout/error/page.tsx | 132 ++++++++++---
 .../checkout/payment/StripePaymentClient.tsx  | 148 ++++++++-------
 .../shop/checkout/payment/[orderId]/page.tsx  | 129 +++++++++----
 .../[locale]/shop/checkout/success/page.tsx   |  95 +++++++---
 .../app/[locale]/shop/orders/[id]/page.tsx    |  88 ++++++---
 frontend/app/[locale]/shop/orders/error.tsx   |  36 ++--
 frontend/app/[locale]/shop/orders/page.tsx    |  43 +++--
 frontend/app/[locale]/shop/page.tsx           |  62 ++++++-
 .../[locale]/shop/products/[slug]/page.tsx    | 132 ++++++-------
 frontend/app/globals.css                      |  89 ++++++++-
 frontend/components/shared/Footer.tsx         |  48 +++--
 frontend/components/shared/HeaderButton.tsx   |  44 ++++-
 .../components/shop/add-to-cart-button.tsx    | 115 +++++++++---
 .../admin/admin-product-delete-button.tsx     |   4 +-
 .../admin/admin-product-status-toggle.tsx     |  15 +-
 .../shop/admin/shop-admin-topbar.tsx          |   4 +-
 .../components/shop/catalog-load-more.tsx     |  16 +-
 frontend/components/shop/category-tile.tsx    |   4 +-
 .../components/shop/header/cart-button.tsx    |  25 +--
 frontend/components/shop/product-card.tsx     |  16 +-
 frontend/components/shop/product-filters.tsx  |  57 ++++--
 frontend/components/shop/product-sort.tsx     |  62 ++++---
 frontend/components/shop/shop-hero.tsx        |  63 ++++++-
 frontend/components/theme/ThemeToggle.tsx     |   2 +-
 frontend/lib/shop/ui-classes.ts               | 118 ++++++++++++
 27 files changed, 1293 insertions(+), 558 deletions(-)
 create mode 100644 frontend/lib/shop/ui-classes.ts

diff --git a/frontend/app/[locale]/shop/admin/products/page.tsx b/frontend/app/[locale]/shop/admin/products/page.tsx
index ee1fa46e..5bfb4d09 100644
--- a/frontend/app/[locale]/shop/admin/products/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/page.tsx
@@ -90,6 +90,8 @@ export default async function AdminProductsPage({
 
   const csrfTokenStatus = issueCsrfToken('admin:products:status');
   const csrfTokenDelete = issueCsrfToken('admin:products:delete');
+  const TH_BASE =
+    'px-3 py-2 text-left text-xs font-semibold text-foreground leading-tight whitespace-normal break-words';
 
   return (
     <>
@@ -109,7 +111,7 @@ export default async function AdminProductsPage({
 
           <Link
             href="/shop/admin/products/new"
-            className="inline-flex items-center justify-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
           >
             {t('newProduct')}
           </Link>
@@ -159,7 +161,9 @@ export default async function AdminProductsPage({
 
                       <dl className="mt-3 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
                         <div className="min-w-0">
-                          <dt className="text-muted-foreground">{t('table.category')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.category')}
+                          </dt>
                           <dd
                             className="truncate text-foreground"
                             title={row.category ?? '-'}
@@ -169,7 +173,9 @@ export default async function AdminProductsPage({
                         </div>
 
                         <div className="min-w-0">
-                          <dt className="text-muted-foreground">{t('table.type')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.type')}
+                          </dt>
                           <dd
                             className="truncate text-foreground"
                             title={row.type ?? '-'}
@@ -179,31 +185,43 @@ export default async function AdminProductsPage({
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">{t('table.stock')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.stock')}
+                          </dt>
                           <dd className="text-foreground">{row.stock}</dd>
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">{t('table.badge')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.badge')}
+                          </dt>
                           <dd className="text-foreground">{badge}</dd>
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">{t('table.active')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.active')}
+                          </dt>
                           <dd className="text-foreground">
                             {row.isActive ? t('actions.yes') : t('actions.no')}
                           </dd>
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">{t('table.featured')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.featured')}
+                          </dt>
                           <dd className="text-foreground">
-                            {row.isFeatured ? t('actions.yes') : t('actions.no')}
+                            {row.isFeatured
+                              ? t('actions.yes')
+                              : t('actions.no')}
                           </dd>
                         </div>
 
                         <div className="col-span-2">
-                          <dt className="text-muted-foreground">{t('table.created')}</dt>
+                          <dt className="text-muted-foreground">
+                            {t('table.created')}
+                          </dt>
                           <dd className="text-foreground">
                             {formatDate(row.createdAt, locale)}
                           </dd>
@@ -214,7 +232,9 @@ export default async function AdminProductsPage({
                         <Link
                           href={`/shop/products/${row.slug}`}
                           className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                          aria-label={t('actions.viewProduct', { title: row.title })}
+                          aria-label={t('actions.viewProduct', {
+                            title: row.title,
+                          })}
                         >
                           {t('actions.view')}
                         </Link>
@@ -222,7 +242,9 @@ export default async function AdminProductsPage({
                         <Link
                           href={`/shop/admin/products/${row.id}/edit`}
                           className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                          aria-label={t('actions.editProduct', { title: row.title })}
+                          aria-label={t('actions.editProduct', {
+                            title: row.title,
+                          })}
                         >
                           {t('actions.edit')}
                         </Link>
@@ -253,73 +275,52 @@ export default async function AdminProductsPage({
             <div className="overflow-x-auto">
               <table className="w-full table-fixed divide-y divide-border text-sm">
                 <caption className="sr-only">{t('listCaption')}</caption>
-
+                <colgroup>
+                  <col className="w-[9.5rem]" />
+                  <col className="w-[8rem]" />
+                  <col className="w-[6.5rem]" />
+                  <col className="w-[6rem]" />
+                  <col className="w-[5.5rem]" />
+                  <col className="w-[5rem]" />
+                  <col className="w-[4rem]" />
+                  <col className="w-[5rem]" />
+                  <col className="w-[5rem]" />
+                  <col className="w-[4.5rem]" />
+                  <col className="w-[11rem]" />
+                </colgroup>
                 <thead className="bg-muted/50">
                   <tr>
-                    <th
-                      scope="col"
-                      className="w-[20%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.title')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[18%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.slug')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.price')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.category')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.type')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[5%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.stock')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[5%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.badge')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[5%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.active')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[6%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.featured')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.created')}
                     </th>
-                    <th
-                      scope="col"
-                      className="w-[9%] px-3 py-2 text-left font-semibold text-foreground"
-                    >
+                    <th scope="col" className={TH_BASE}>
                       {t('table.actions')}
                     </th>
                   </tr>
@@ -379,7 +380,9 @@ export default async function AdminProductsPage({
 
                         <td className="whitespace-nowrap px-3 py-2">
                           <span className="inline-flex rounded-full bg-muted px-2 py-1 text-xs font-medium text-foreground">
-                            {row.isFeatured ? t('actions.yes') : t('actions.no')}
+                            {row.isFeatured
+                              ? t('actions.yes')
+                              : t('actions.no')}
                           </span>
                         </td>
 
@@ -388,19 +391,23 @@ export default async function AdminProductsPage({
                         </td>
 
                         <td className="px-3 py-2">
-                          <div className="flex flex-wrap gap-2">
+                          <div className="grid grid-cols-2 gap-2">
                             <Link
                               href={`/shop/products/${row.slug}`}
-                              className="rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                              aria-label={t('actions.viewProduct', { title: row.title })}
+                              className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary whitespace-normal break-words leading-tight text-center"
+                              aria-label={t('actions.viewProduct', {
+                                title: row.title,
+                              })}
                             >
                               {t('actions.view')}
                             </Link>
 
                             <Link
                               href={`/shop/admin/products/${row.id}/edit`}
-                              className="rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                              aria-label={t('actions.editProduct', { title: row.title })}
+                              className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary whitespace-normal break-words leading-tight text-center"
+                              aria-label={t('actions.editProduct', {
+                                title: row.title,
+                              })}
                             >
                               {t('actions.edit')}
                             </Link>
diff --git a/frontend/app/[locale]/shop/cart/page.tsx b/frontend/app/[locale]/shop/cart/page.tsx
index 5f22926d..658fe356 100644
--- a/frontend/app/[locale]/shop/cart/page.tsx
+++ b/frontend/app/[locale]/shop/cart/page.tsx
@@ -3,15 +3,56 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import { useParams } from 'next/navigation';
-import { useRouter } from '@/i18n/routing';
+import { useRouter, Link } from '@/i18n/routing';
 import { useTranslations } from 'next-intl';
-
+import { cn } from '@/lib/utils';
 import { Minus, Plus, Trash2, ShoppingBag } from 'lucide-react';
 
-import { Link } from '@/i18n/routing';
 import { useCart } from '@/components/shop/cart-provider';
 import { generateIdempotencyKey } from '@/lib/shop/idempotency';
 import { formatMoney } from '@/lib/shop/currency';
+import {
+  SHOP_FOCUS,
+  SHOP_LINK_BASE,
+  SHOP_LINK_MD,
+  SHOP_LINK_XS,
+  SHOP_DISABLED,
+  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_SHADOW_HOVER,
+  SHOP_CHIP_BORDER_HOVER,
+  SHOP_STEPPER_BUTTON_BASE,
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  shopCtaGradient,
+} from '@/lib/shop/ui-classes';
+
+const SHOP_PRODUCT_LINK = cn(
+  'block truncate',
+  SHOP_LINK_BASE,
+  SHOP_LINK_MD,
+  SHOP_FOCUS
+);
+
+const SHOP_STEPPER_BTN = cn(
+  SHOP_STEPPER_BUTTON_BASE,
+  'h-8 w-8',
+  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_SHADOW_HOVER,
+  SHOP_CHIP_BORDER_HOVER,
+  SHOP_FOCUS,
+  SHOP_DISABLED
+);
+
+const SHOP_HERO_CTA = cn(
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  'w-full justify-center gap-2 px-6 py-3 text-sm text-white',
+  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
 
 export default function CartPage() {
   const { cart, updateQuantity, removeFromCart } = useCart();
@@ -32,7 +73,7 @@ export default function CartPage() {
     try {
       return tColors(colorSlug);
     } catch {
-      return color; 
+      return color;
     }
   };
 
@@ -67,9 +108,8 @@ export default function CartPage() {
           typeof data?.message === 'string'
             ? data.message
             : typeof data?.error === 'string'
-            ? data.error
-            : 'Unable to start checkout right now.';
-
+              ? data.error
+              : 'Unable to start checkout right now.';
         setCheckoutError(message);
         return;
       }
@@ -86,7 +126,7 @@ export default function CartPage() {
           ? data.clientSecret
           : null;
 
-      const orderId: string = String(data.orderId);
+      const orderId = String(data.orderId);
       setCreatedOrderId(orderId);
 
       if (paymentProvider === 'stripe' && clientSecret) {
@@ -95,7 +135,6 @@ export default function CartPage() {
             orderId
           )}?clientSecret=${encodeURIComponent(clientSecret)}&clearCart=1`
         );
-
         return;
       }
 
@@ -120,22 +159,28 @@ export default function CartPage() {
     return (
       <main className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
         <div className="flex flex-col items-center justify-center text-center">
-          <ShoppingBag
-            className="h-16 w-16 text-muted-foreground"
-            aria-hidden="true"
-          />
+          <ShoppingBag className="h-16 w-16 text-muted-foreground" aria-hidden="true" />
           <h1 className="mt-6 text-3xl font-bold tracking-tight text-foreground">
             {t('empty')}
           </h1>
-          <p className="mt-4 text-muted-foreground">
-            {t('emptyDescription')}
-          </p>
-          <Link
-            href={`/shop/products`}
-            className="mt-8 inline-flex items-center gap-2 rounded-md bg-accent px-6 py-3 text-sm font-semibold uppercase tracking-wide text-accent-foreground transition-colors hover:bg-accent/90"
-          >
-            {t('startShopping')}
-          </Link>
+          <p className="mt-4 text-muted-foreground">{t('emptyDescription')}</p>
+
+          <div className="mt-8 w-full max-w-md mx-auto">
+            <Link href="/shop/products" className={SHOP_HERO_CTA}>
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
+                aria-hidden="true"
+              />
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
+                aria-hidden="true"
+              />
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+              <span className="relative z-10">{t('startShopping')}</span>
+            </Link>
+          </div>
         </div>
       </main>
     );
@@ -162,9 +207,7 @@ export default function CartPage() {
 
             {cart.items.map(item => (
               <li
-                key={`${item.productId}-${item.selectedSize ?? 'na'}-${
-                  item.selectedColor ?? 'na'
-                }`}
+                key={`${item.productId}-${item.selectedSize ?? 'na'}-${item.selectedColor ?? 'na'}`}
                 className="rounded-lg border border-border p-4"
               >
                 <article className="flex gap-4">
@@ -183,7 +226,7 @@ export default function CartPage() {
                       <div className="min-w-0">
                         <Link
                           href={`/shop/products/${item.slug}`}
-                          className="block truncate text-sm font-medium text-foreground hover:underline"
+                          className={SHOP_PRODUCT_LINK}
                         >
                           {item.title}
                         </Link>
@@ -200,11 +243,7 @@ export default function CartPage() {
                       <button
                         type="button"
                         onClick={() =>
-                          removeFromCart(
-                            item.productId,
-                            item.selectedSize,
-                            item.selectedColor
-                          )
+                          removeFromCart(item.productId, item.selectedSize, item.selectedColor)
                         }
                         className="text-muted-foreground transition-colors hover:text-foreground"
                         aria-label={t('actions.removeItem', { title: item.title })}
@@ -226,7 +265,7 @@ export default function CartPage() {
                             )
                           }
                           disabled={item.quantity <= 1}
-                          className="flex h-8 w-8 items-center justify-center rounded border border-border text-foreground transition-colors hover:bg-secondary disabled:opacity-60"
+                          className={SHOP_STEPPER_BTN}
                           aria-label={t('actions.decreaseQty')}
                         >
                           <Minus className="h-3 w-3" aria-hidden="true" />
@@ -247,28 +286,21 @@ export default function CartPage() {
                             )
                           }
                           disabled={item.quantity >= item.stock}
-                          className="flex h-8 w-8 items-center justify-center rounded border border-border text-foreground transition-colors hover:bg-secondary disabled:opacity-60"
+                          className={SHOP_STEPPER_BTN}
                           aria-label={t('actions.increaseQty')}
                         >
                           <Plus className="h-3 w-3" aria-hidden="true" />
                         </button>
 
                         {item.quantity >= item.stock && (
-                          <span
-                            className="ml-3 text-xs text-muted-foreground"
-                            role="status"
-                          >
+                          <span className="ml-3 text-xs text-muted-foreground" role="status">
                             {t('actions.maxStock', { stock: item.stock })}
                           </span>
                         )}
                       </div>
 
                       <span className="text-sm font-semibold text-foreground">
-                        {formatMoney(
-                          item.lineTotalMinor,
-                          item.currency,
-                          locale
-                        )}
+                        {formatMoney(item.lineTotalMinor, item.currency, locale)}
                       </span>
                     </div>
                   </div>
@@ -278,14 +310,8 @@ export default function CartPage() {
           </ul>
         </section>
 
-        <aside
-          className="h-fit rounded-lg border border-border p-6"
-          aria-labelledby="order-summary"
-        >
-          <h2
-            id="order-summary"
-            className="text-lg font-semibold text-foreground"
-          >
+        <aside className="h-fit rounded-lg border border-border p-6" aria-labelledby="order-summary">
+          <h2 id="order-summary" className="text-lg font-semibold text-foreground">
             {t('summary.heading')}
           </h2>
 
@@ -293,19 +319,13 @@ export default function CartPage() {
             <div className="flex items-center justify-between text-sm">
               <span className="text-muted-foreground">{t('summary.subtotal')}</span>
               <span className="font-medium text-foreground">
-                {formatMoney(
-                  cart.summary.totalAmountMinor,
-                  cart.summary.currency,
-                  locale
-                )}
+                {formatMoney(cart.summary.totalAmountMinor, cart.summary.currency, locale)}
               </span>
             </div>
 
             <div className="flex items-center justify-between text-sm">
               <span className="text-muted-foreground">{t('summary.shipping')}</span>
-              <span className="text-muted-foreground">
-                {t('summary.shippingCalc')}
-              </span>
+              <span className="text-muted-foreground">{t('summary.shippingCalc')}</span>
             </div>
 
             <div className="border-t border-border pt-4">
@@ -314,11 +334,7 @@ export default function CartPage() {
                   {t('summary.total')}
                 </span>
                 <span className="text-lg font-bold text-foreground">
-                  {formatMoney(
-                    cart.summary.totalAmountMinor,
-                    cart.summary.currency,
-                    locale
-                  )}
+                  {formatMoney(cart.summary.totalAmountMinor, cart.summary.currency, locale)}
                 </span>
               </div>
             </div>
@@ -329,10 +345,24 @@ export default function CartPage() {
               type="button"
               onClick={handleCheckout}
               disabled={isCheckingOut}
-              className="flex w-full items-center justify-center gap-2 rounded-md bg-accent px-6 py-3 text-sm font-semibold uppercase tracking-wide text-accent-foreground transition-colors hover:bg-accent/90 disabled:opacity-60"
+              className={SHOP_HERO_CTA}
               aria-busy={isCheckingOut}
             >
-              {isCheckingOut ? t('checkout.placing') : t('checkout.placeOrder')}
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
+                aria-hidden="true"
+              />
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
+                aria-hidden="true"
+              />
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+              <span className="relative z-10">
+                {isCheckingOut ? t('checkout.placing') : t('checkout.placeOrder')}
+              </span>
             </button>
 
             <p className="text-center text-xs text-muted-foreground">
@@ -344,7 +374,7 @@ export default function CartPage() {
               <div className="flex justify-center">
                 <Link
                   href={`/shop/orders/${encodeURIComponent(createdOrderId)}`}
-                  className="text-xs underline underline-offset-4"
+                  className={cn(SHOP_LINK_BASE, SHOP_LINK_XS, SHOP_FOCUS)}
                 >
                   {t('checkout.notRedirected')}
                 </Link>
@@ -353,20 +383,15 @@ export default function CartPage() {
 
             {checkoutError ? (
               <div className="space-y-2">
-                <p
-                  className="text-center text-xs text-destructive"
-                  role="alert"
-                >
+                <p className="text-center text-xs text-destructive" role="alert">
                   {checkoutError}
                 </p>
 
                 {createdOrderId ? (
                   <div className="flex justify-center">
                     <Link
-                      href={`/shop/orders/${encodeURIComponent(
-                        createdOrderId
-                      )}`}
-                      className="text-xs underline underline-offset-4"
+                      href={`/shop/orders/${encodeURIComponent(createdOrderId)}`}
+                      className={cn(SHOP_LINK_BASE, SHOP_LINK_XS, SHOP_FOCUS)}
                     >
                       {t('checkout.goToOrder')}
                     </Link>
diff --git a/frontend/app/[locale]/shop/checkout/error/page.tsx b/frontend/app/[locale]/shop/checkout/error/page.tsx
index a3f9e6e2..b06d402c 100644
--- a/frontend/app/[locale]/shop/checkout/error/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/error/page.tsx
@@ -6,6 +6,19 @@ import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import { OrderNotFoundError } from '@/lib/services/errors';
 import { getOrderSummary } from '@/lib/services/orders';
 import { orderIdParamSchema } from '@/lib/validation/shop';
+import { cn } from '@/lib/utils';
+
+import {
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  shopCtaGradient,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
@@ -26,6 +39,22 @@ function parseOrderId(searchParams?: SearchParams): string | null {
   return parsed.success ? parsed.data.id : null;
 }
 
+const SHOP_HERO_CTA_SM = cn(
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  'px-4 py-2 text-sm text-white',
+  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
+
+const SHOP_OUTLINE_BTN = cn(
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED
+);
+
 export default async function CheckoutErrorPage({
   params,
   searchParams,
@@ -64,17 +93,32 @@ export default async function CheckoutErrorPage({
             className="mt-6 flex flex-wrap justify-center gap-3"
             aria-label="Checkout navigation"
           >
-            <Link
-              href="/shop/cart"
-              className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-            >
+            <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
               {t('actions.backToCart')}
             </Link>
-            <Link
-              href="/shop/products"
-              className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-            >
-              {t('actions.continueShopping')}
+
+            <Link href="/shop/products" className={SHOP_HERO_CTA_SM}>
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg',
+                  '--shop-hero-btn-bg-hover'
+                )}
+                aria-hidden="true"
+              />
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg-hover',
+                  '--shop-hero-btn-bg'
+                )}
+                aria-hidden="true"
+              />
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+              <span className="relative z-10">
+                {t('actions.continueShopping')}
+              </span>
             </Link>
           </nav>
         </section>
@@ -108,17 +152,32 @@ export default async function CheckoutErrorPage({
               className="mt-6 flex flex-wrap justify-center gap-3"
               aria-label="Checkout navigation"
             >
-              <Link
-                href="/shop/cart"
-                className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-              >
+              <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
                 {t('actions.backToCart')}
               </Link>
-              <Link
-                href="/shop/products"
-                className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-              >
-                {t('actions.continueShopping')}
+
+              <Link href="/shop/products" className={SHOP_HERO_CTA_SM}>
+                <span
+                  className="absolute inset-0"
+                  style={shopCtaGradient(
+                    '--shop-hero-btn-bg',
+                    '--shop-hero-btn-bg-hover'
+                  )}
+                  aria-hidden="true"
+                />
+                <span
+                  className={SHOP_CTA_WAVE}
+                  style={shopCtaGradient(
+                    '--shop-hero-btn-bg-hover',
+                    '--shop-hero-btn-bg'
+                  )}
+                  aria-hidden="true"
+                />
+                <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+                <span className="relative z-10">
+                  {t('actions.continueShopping')}
+                </span>
               </Link>
             </nav>
           </section>
@@ -148,7 +207,6 @@ export default async function CheckoutErrorPage({
 
   const isFailed = order.paymentStatus === 'failed';
 
-  // Prefer minor units if available (new schema), fallback to legacy major if present.
   const totalMinor =
     typeof (order as any).totalAmountMinor === 'number'
       ? (order as any).totalAmountMinor
@@ -198,7 +256,9 @@ export default async function CheckoutErrorPage({
             </div>
 
             <div className="flex items-center justify-between gap-4">
-              <dt className="text-muted-foreground">{t('error.statusLabel')}</dt>
+              <dt className="text-muted-foreground">
+                {t('error.statusLabel')}
+              </dt>
               <dd className="font-semibold capitalize text-foreground">
                 {order.paymentStatus}
               </dd>
@@ -207,26 +267,38 @@ export default async function CheckoutErrorPage({
         </section>
 
         <nav className="mt-6 flex flex-wrap gap-3" aria-label="Next steps">
-          <Link
-            href="/shop/cart"
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+          <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
             {t('actions.backToCart')}
           </Link>
 
           {isFailed && order.id ? (
             <Link
               href={`/shop/checkout/payment/${order.id}`}
-              className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
+              className={SHOP_HERO_CTA_SM}
             >
-              {t('error.retryPayment')}
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg',
+                  '--shop-hero-btn-bg-hover'
+                )}
+                aria-hidden="true"
+              />
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg-hover',
+                  '--shop-hero-btn-bg'
+                )}
+                aria-hidden="true"
+              />
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+              <span className="relative z-10">{t('error.retryPayment')}</span>
             </Link>
           ) : null}
 
-          <Link
-            href="/shop/products"
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+          <Link href="/shop/products" className={SHOP_OUTLINE_BTN}>
             {t('actions.continueShopping')}
           </Link>
         </nav>
diff --git a/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx b/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
index 7a2131e5..07c115b9 100644
--- a/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
+++ b/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
@@ -9,11 +9,7 @@ import {
   useElements,
   useStripe,
 } from '@stripe/react-stripe-js';
-import {
-  loadStripe,
-  type StripeElementsOptions,
-  type Stripe,
-} from '@stripe/stripe-js';
+import { loadStripe, type StripeElementsOptions, type Stripe } from '@stripe/stripe-js';
 
 import {
   currencyValues,
@@ -22,6 +18,19 @@ import {
   type CurrencyCode,
 } from '@/lib/shop/currency';
 import { logError } from '@/lib/logging';
+import { cn } from '@/lib/utils';
+
+import {
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  shopCtaGradient,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
 
 type PaymentFormProps = {
   orderId: string;
@@ -64,22 +73,13 @@ function buildInAppPath(path: string): string {
   return `${IN_APP_SHOP_BASE}${p}`;
 }
 
-function buildStripeReturnUrl(params: {
-  locale: string;
-  inAppPath: string; // must be "/shop/..."
-}): string {
+function buildStripeReturnUrl(params: { locale: string; inAppPath: string }): string {
   const loc = normalizeLocale(params.locale);
-  const p = params.inAppPath.startsWith('/')
-    ? params.inAppPath
-    : `/${params.inAppPath}`;
-  // Note: p can contain query string; URL() supports it.
+  const p = params.inAppPath.startsWith('/') ? params.inAppPath : `/${params.inAppPath}`;
   return new URL(`/${loc}${p}`, window.location.origin).toString();
 }
 
-function nextRouteForPaymentResult(params: {
-  orderId: string;
-  status?: string | null;
-}) {
+function nextRouteForPaymentResult(params: { orderId: string; status?: string | null }) {
   const { orderId, status } = params;
   const id = encodeURIComponent(orderId);
 
@@ -87,19 +87,61 @@ function nextRouteForPaymentResult(params: {
   const failure = buildInAppPath(`/checkout/error?orderId=${id}`);
 
   if (!status) return success;
-  if (
-    status === 'succeeded' ||
-    status === 'processing' ||
-    status === 'requires_capture'
-  ) {
+
+  if (status === 'succeeded' || status === 'processing' || status === 'requires_capture') {
     return success;
   }
+
   if (status === 'requires_payment_method' || status === 'canceled') {
     return failure;
   }
+
   return success;
 }
 
+/** Unified CTA (hero) */
+const SHOP_HERO_CTA = cn(
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  'w-full items-center justify-center gap-2',
+  'px-6 py-3 text-sm text-white',
+  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
+
+/** Unified outline */
+const SHOP_OUTLINE = cn(
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  'px-5 py-2.5'
+);
+
+function HeroCtaInner({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {/* base gradient */}
+      <span
+        className="absolute inset-0"
+        style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
+        aria-hidden="true"
+      />
+      {/* hover wave overlay */}
+      <span
+        className={SHOP_CTA_WAVE}
+        style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
+        aria-hidden="true"
+      />
+      {/* glass inset */}
+      <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+      <span className="relative z-10">{children}</span>
+    </>
+  );
+}
+
 function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
   const stripe = useStripe();
   const elements = useElements();
@@ -113,9 +155,7 @@ function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
     setErrorMessage(null);
 
     if (!stripe || !elements) {
-      setErrorMessage(
-        'Payment is not ready yet. Please try again in a moment.'
-      );
+      setErrorMessage('Payment is not ready yet. Please try again in a moment.');
       return;
     }
 
@@ -131,7 +171,6 @@ function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
         elements,
         redirect: 'if_required',
         confirmParams: {
-          // Stripe redirect comes from outside Next.js routing — MUST include locale exactly once.
           return_url: buildStripeReturnUrl({ locale, inAppPath: inAppSuccess }),
         },
       });
@@ -151,29 +190,23 @@ function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
     } catch (error) {
       logError('stripe_payment_confirm_failed', error, { orderId });
       setErrorMessage('We couldn’t confirm your payment. Please try again.');
-      router.push(
-        buildInAppPath(`/checkout/error?orderId=${encodeURIComponent(orderId)}`)
-      );
+      router.push(buildInAppPath(`/checkout/error?orderId=${encodeURIComponent(orderId)}`));
     } finally {
       setSubmitting(false);
     }
   }
 
   return (
-    <form
-      onSubmit={handleSubmit}
-      className="space-y-4"
-      aria-label="Stripe payment form"
-    >
+    <form onSubmit={handleSubmit} className="space-y-4" aria-label="Stripe payment form">
       <PaymentElement />
 
       <button
         type="submit"
         disabled={!stripe || submitting}
-        className="flex w-full items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground transition-colors hover:bg-accent/90 disabled:opacity-60"
+        className={SHOP_HERO_CTA}
         aria-disabled={!stripe || submitting}
       >
-        {submitting ? 'Processing...' : 'Submit payment'}
+        <HeroCtaInner>{submitting ? 'Processing...' : 'Submit payment'}</HeroCtaInner>
       </button>
 
       {errorMessage ? (
@@ -194,10 +227,7 @@ export default function StripePaymentClient({
   currency,
   locale,
 }: StripePaymentClientProps) {
-  const uiCurrency = useMemo(
-    () => toCurrencyCode(currency, locale),
-    [currency, locale]
-  );
+  const uiCurrency = useMemo(() => toCurrencyCode(currency, locale), [currency, locale]);
 
   const stripePromise = useMemo(() => {
     if (!paymentsEnabled || !publishableKey) return null;
@@ -214,24 +244,18 @@ export default function StripePaymentClient({
 
   if (!paymentsEnabled) {
     return (
-      <section
-        className="space-y-3 text-sm text-muted-foreground"
-        aria-label="Payments disabled"
-      >
+      <section className="space-y-3 text-sm text-muted-foreground" aria-label="Payments disabled">
         <p>Payments are disabled in this environment.</p>
-        <nav className="flex gap-3" aria-label="Next steps">
+
+        <nav className="flex flex-col gap-3 sm:flex-row" aria-label="Next steps">
           <Link
-            href={buildInAppPath(
-              `/checkout/success?orderId=${encodeURIComponent(orderId)}`
-            )}
-            className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
+            href={buildInAppPath(`/checkout/success?orderId=${encodeURIComponent(orderId)}`)}
+            className={cn(SHOP_HERO_CTA, 'w-full sm:w-auto')}
           >
-            Continue
+            <HeroCtaInner>Continue</HeroCtaInner>
           </Link>
-          <Link
-            href={buildInAppPath('/cart')}
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+
+          <Link href={buildInAppPath('/cart')} className={cn(SHOP_OUTLINE, 'w-full sm:w-auto')}>
             Back to cart
           </Link>
         </nav>
@@ -241,15 +265,10 @@ export default function StripePaymentClient({
 
   if (!clientSecret || !clientSecret.trim()) {
     return (
-      <section
-        className="space-y-3 text-sm text-muted-foreground"
-        aria-label="Payment initialization failed"
-      >
+      <section className="space-y-3 text-sm text-muted-foreground" aria-label="Payment initialization failed">
         <p>Payment cannot be initialized. Please try again later.</p>
-        <Link
-          href={buildInAppPath('/cart')}
-          className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-        >
+
+        <Link href={buildInAppPath('/cart')} className={cn(SHOP_OUTLINE, 'w-full sm:w-auto')}>
           Return to cart
         </Link>
       </section>
@@ -275,9 +294,8 @@ export default function StripePaymentClient({
                 {formatMoney(amountMinor, uiCurrency, locale)}
               </span>
             </div>
-            <p className="text-xs uppercase tracking-wide text-muted-foreground">
-              {uiCurrency}
-            </p>
+
+            <p className="text-xs uppercase tracking-wide text-muted-foreground">{uiCurrency}</p>
           </div>
 
           <StripePaymentForm orderId={orderId} locale={locale} />
diff --git a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
index a982b1cf..0a76aec6 100644
--- a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
@@ -1,6 +1,7 @@
 import { Link } from '@/i18n/routing';
 import { ClearCartOnMount } from '@/components/shop/clear-cart-on-mount';
 import StripePaymentClient from '../StripePaymentClient';
+
 import { formatMoney } from '@/lib/shop/currency';
 import { getOrderSummary } from '@/lib/services/orders';
 import { OrderNotFoundError } from '@/lib/services/errors';
@@ -9,6 +10,19 @@ import { getStripeEnv } from '@/lib/env/stripe';
 import { logError } from '@/lib/logging';
 import { ensureStripePaymentIntentForOrder } from '@/lib/services/orders/payment-attempts';
 import { getTranslations } from 'next-intl/server';
+import { cn } from '@/lib/utils';
+
+import {
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  shopCtaGradient,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
@@ -31,14 +45,8 @@ function resolveClientSecret(
 async function buildStatusMessage(status: string) {
   const t = await getTranslations('shop.checkout.payment.statusMessages');
 
-  if (status === 'paid') {
-    return t('alreadyPaid');
-  }
-
-  if (status === 'failed') {
-    return t('previousFailed');
-  }
-
+  if (status === 'paid') return t('alreadyPaid');
+  if (status === 'failed') return t('previousFailed');
   return t('completePayment');
 }
 
@@ -55,6 +63,60 @@ type PaymentPageProps = {
   searchParams?: Promise<Record<string, string | string[] | undefined>>;
 };
 
+const SHOP_HERO_CTA_SM = cn(
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  'items-center justify-center gap-2',
+  'px-5 py-2.5 text-xs sm:text-sm text-white',
+  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
+
+const SHOP_OUTLINE_BTN = cn(
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED
+);
+
+function HeroCtaLink({
+  href,
+  children,
+  className,
+}: {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Link href={href} className={cn(SHOP_HERO_CTA_SM, className)}>
+      {/* base gradient */}
+      <span
+        className="absolute inset-0"
+        style={shopCtaGradient(
+          '--shop-hero-btn-bg',
+          '--shop-hero-btn-bg-hover'
+        )}
+        aria-hidden="true"
+      />
+      {/* hover wave overlay */}
+      <span
+        className={SHOP_CTA_WAVE}
+        style={shopCtaGradient(
+          '--shop-hero-btn-bg-hover',
+          '--shop-hero-btn-bg'
+        )}
+        aria-hidden="true"
+      />
+      {/* glass inset */}
+      <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+      <span className="relative z-10">{children}</span>
+    </Link>
+  );
+}
+
 function PageShell({
   title,
   description,
@@ -89,6 +151,7 @@ export default async function PaymentPage(props: PaymentPageProps) {
   const searchParams = props.searchParams
     ? await props.searchParams
     : undefined;
+
   const clearCart = shouldClearCart(searchParams);
   const cc = clearCart ? '&clearCart=1' : '';
   const { locale } = params;
@@ -105,18 +168,13 @@ export default async function PaymentPage(props: PaymentPageProps) {
         description={t('missingOrder.message')}
       >
         <nav className="mt-6 flex justify-center gap-3" aria-label="Next steps">
-          <Link
-            href={`${shopBase}/cart`}
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+          <Link href={`${shopBase}/cart`} className={SHOP_OUTLINE_BTN}>
             {t('actions.goToCart')}
           </Link>
-          <Link
-            href={`${shopBase}/products`}
-            className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-          >
+
+          <HeroCtaLink href={`${shopBase}/products`}>
             {t('actions.continueShopping')}
-          </Link>
+          </HeroCtaLink>
         </nav>
       </PageShell>
     );
@@ -137,18 +195,13 @@ export default async function PaymentPage(props: PaymentPageProps) {
             className="mt-6 flex justify-center gap-3"
             aria-label="Next steps"
           >
-            <Link
-              href={`${shopBase}/cart`}
-              className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-            >
+            <Link href={`${shopBase}/cart`} className={SHOP_OUTLINE_BTN}>
               {t('actions.goToCart')}
             </Link>
-            <Link
-              href={`${shopBase}/products`}
-              className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-            >
+
+            <HeroCtaLink href={`${shopBase}/products`}>
               {t('actions.continueShopping')}
-            </Link>
+            </HeroCtaLink>
           </nav>
         </PageShell>
       );
@@ -165,6 +218,7 @@ export default async function PaymentPage(props: PaymentPageProps) {
   const stripeEnv = getStripeEnv();
   const paymentsEnabled =
     stripeEnv.paymentsEnabled && Boolean(stripeEnv.publishableKey);
+
   let clientSecret = resolveClientSecret(searchParams);
   const publishableKey = paymentsEnabled ? stripeEnv.publishableKey : null;
 
@@ -197,6 +251,7 @@ export default async function PaymentPage(props: PaymentPageProps) {
     return (
       <>
         <ClearCartOnMount enabled={clearCart} />
+
         <PageShell
           title={t('payment.statusMessages.alreadyPaid')}
           description={t('success.paymentConfirmed')}
@@ -205,16 +260,13 @@ export default async function PaymentPage(props: PaymentPageProps) {
             className="mt-6 flex justify-center gap-3"
             aria-label="Next steps"
           >
-            <Link
+            <HeroCtaLink
               href={`${shopBase}/checkout/success?orderId=${order.id}${cc}`}
-              className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
             >
               {t('payment.viewConfirmation')}
-            </Link>
-            <Link
-              href={`${shopBase}/products`}
-              className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-            >
+            </HeroCtaLink>
+
+            <Link href={`${shopBase}/products`} className={SHOP_OUTLINE_BTN}>
               {t('payment.continueShopping')}
             </Link>
           </nav>
@@ -236,9 +288,11 @@ export default async function PaymentPage(props: PaymentPageProps) {
         <p className="text-sm font-semibold uppercase tracking-wide text-accent">
           {t('payment.title')}
         </p>
+
         <h1 id="pay-order-title" className="text-3xl font-bold text-foreground">
           {t('payment.payForOrder', { orderId: order.id.slice(0, 8) })}
         </h1>
+
         <p className="mt-2 text-sm text-muted-foreground">
           {await buildStatusMessage(order.paymentStatus)}
         </p>
@@ -255,17 +309,22 @@ export default async function PaymentPage(props: PaymentPageProps) {
           <h2 className="text-lg font-semibold text-foreground">
             {t('payment.paymentDetails')}
           </h2>
+
           <p className="mt-2 text-sm text-muted-foreground">
             {t('payment.completePayment')}
           </p>
 
           <div className="mt-6 rounded-md border border-border bg-muted/30 p-4">
             <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">{t('payment.amountDue')}</span>
+              <span className="text-sm text-muted-foreground">
+                {t('payment.amountDue')}
+              </span>
+
               <span className="text-xl font-bold text-foreground">
                 {formatMoney(order.totalAmountMinor, order.currency, locale)}
               </span>
             </div>
+
             <p className="mt-1 text-xs text-muted-foreground uppercase tracking-wide">
               {order.currency}
             </p>
@@ -297,12 +356,14 @@ export default async function PaymentPage(props: PaymentPageProps) {
               <dt>{t('payment.items')}</dt>
               <dd className="font-medium text-foreground">{itemsCount}</dd>
             </div>
+
             <div className="flex items-center justify-between">
               <dt>{t('payment.totalAmount')}</dt>
               <dd className="font-semibold text-foreground">
                 {formatMoney(order.totalAmountMinor, order.currency, locale)}
               </dd>
             </div>
+
             <div className="flex items-center justify-between">
               <dt>{t('payment.status')}</dt>
               <dd className="font-semibold capitalize text-foreground">
diff --git a/frontend/app/[locale]/shop/checkout/success/page.tsx b/frontend/app/[locale]/shop/checkout/success/page.tsx
index 67051968..686b3447 100644
--- a/frontend/app/[locale]/shop/checkout/success/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/success/page.tsx
@@ -8,6 +8,18 @@ import { formatMoney } from '@/lib/shop/currency';
 import { getOrderSummary } from '@/lib/services/orders';
 import { OrderNotFoundError } from '@/lib/services/errors';
 import { orderIdParamSchema } from '@/lib/validation/shop';
+import { cn } from '@/lib/utils';
+
+import {
+  SHOP_FOCUS,
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  shopCtaGradient,
+} from '@/lib/shop/ui-classes';
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
@@ -39,6 +51,46 @@ function shouldClearCart(params: SearchParams): boolean {
   return raw === 'true' || raw === '1';
 }
 
+/** Small hero CTA (Link) */
+const SHOP_HERO_CTA_SM = cn(
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_FOCUS,
+  'items-center justify-center overflow-hidden',
+  'px-4 py-2 text-sm text-white',
+  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
+
+/** Outline secondary action (Link) */
+const SHOP_OUTLINE_BTN = cn(
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  SHOP_FOCUS
+);
+
+function HeroCtaInner({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {/* base gradient */}
+      <span
+        className="absolute inset-0"
+        style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
+        aria-hidden="true"
+      />
+      {/* hover wave overlay */}
+      <span
+        className={SHOP_CTA_WAVE}
+        style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
+        aria-hidden="true"
+      />
+      {/* glass inset */}
+      <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+      <span className="relative z-10">{children}</span>
+    </>
+  );
+}
+
 function CheckoutShell({
   title,
   description,
@@ -88,16 +140,11 @@ export default async function CheckoutSuccessPage({
         description={t('missingOrder.message')}
       >
         <nav className="mt-6 flex justify-center gap-3" aria-label="Next steps">
-          <Link
-            href="/shop/products"
-            className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-          >
-            {t('actions.backToProducts')}
+          <Link href="/shop/products" className={SHOP_HERO_CTA_SM}>
+            <HeroCtaInner>{t('actions.backToProducts')}</HeroCtaInner>
           </Link>
-          <Link
-            href="/shop/cart"
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+
+          <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
             {t('actions.goToCart')}
           </Link>
         </nav>
@@ -121,16 +168,11 @@ export default async function CheckoutSuccessPage({
             className="mt-6 flex justify-center gap-3"
             aria-label="Next steps"
           >
-            <Link
-              href="/shop/products"
-              className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-            >
-              {t('actions.backToProducts')}
+            <Link href="/shop/products" className={SHOP_HERO_CTA_SM}>
+              <HeroCtaInner>{t('actions.backToProducts')}</HeroCtaInner>
             </Link>
-            <Link
-              href="/shop/cart"
-              className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-            >
+
+            <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
               {t('actions.goToCart')}
             </Link>
           </nav>
@@ -195,7 +237,9 @@ export default async function CheckoutSuccessPage({
 
             <dl className="mt-3 space-y-2 text-sm">
               <div className="flex items-center justify-between">
-                <dt className="text-muted-foreground">{t('success.totalAmount')}</dt>
+                <dt className="text-muted-foreground">
+                  {t('success.totalAmount')}
+                </dt>
                 <dd className="font-semibold text-foreground">
                   {formatMoney(totalMinor, order.currency, locale)}
                 </dd>
@@ -217,16 +261,11 @@ export default async function CheckoutSuccessPage({
         </section>
 
         <nav className="mt-8 flex flex-wrap gap-3" aria-label="Next steps">
-          <Link
-            href="/shop/products"
-            className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
-          >
-            {t('success.continueShopping')}
+          <Link href="/shop/products" className={SHOP_HERO_CTA_SM}>
+            <HeroCtaInner>{t('success.continueShopping')}</HeroCtaInner>
           </Link>
-          <Link
-            href="/shop/cart"
-            className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
-          >
+
+          <Link href="/shop/cart" className={SHOP_OUTLINE_BTN}>
             {t('success.viewCart')}
           </Link>
         </nav>
diff --git a/frontend/app/[locale]/shop/orders/[id]/page.tsx b/frontend/app/[locale]/shop/orders/[id]/page.tsx
index 32f45078..3f621a8c 100644
--- a/frontend/app/[locale]/shop/orders/[id]/page.tsx
+++ b/frontend/app/[locale]/shop/orders/[id]/page.tsx
@@ -1,5 +1,5 @@
 import 'server-only';
-
+import { cn } from '@/lib/utils';
 import { Link } from '@/i18n/routing';
 import { notFound, redirect } from 'next/navigation';
 import { unstable_noStore as noStore } from 'next/cache';
@@ -13,6 +13,12 @@ import { orderIdParamSchema } from '@/lib/validation/shop';
 import { logError } from '@/lib/logging';
 import { formatMoney, type CurrencyCode } from '@/lib/shop/currency';
 import { fromDbMoney } from '@/lib/shop/money';
+import {
+  SHOP_FOCUS,
+  SHOP_LINK_BASE,
+  SHOP_LINK_MD,
+  SHOP_NAV_LINK_BASE,
+} from '@/lib/shop/ui-classes';
 
 export const dynamic = 'force-dynamic';
 
@@ -200,6 +206,15 @@ export default async function OrderDetailPage({
   const restockedFormatted = order.restockedAt
     ? safeFormatDateTime(order.restockedAt, dtf)
     : '—';
+  const NAV_LINK = cn(SHOP_NAV_LINK_BASE, 'text-lg', SHOP_FOCUS);
+
+  const PRODUCT_LINK = cn(
+    SHOP_LINK_BASE,
+    SHOP_LINK_MD,
+    SHOP_FOCUS,
+    'truncate',
+    '!underline !decoration-2 !underline-offset-4'
+  );
 
   return (
     <main
@@ -211,27 +226,26 @@ export default async function OrderDetailPage({
           <h1 id="order-heading" className="truncate text-2xl font-semibold">
             {t('title')}
           </h1>
-          <div className="mt-1 truncate text-xs opacity-80">{order.id}</div>
+          <div className="mt-1 truncate text-xs text-muted-foreground">
+            {order.id}
+          </div>
         </div>
 
         <nav
           className="flex flex-wrap items-center justify-end gap-3"
           aria-label="Order navigation"
         >
-          <Link
-            className="text-sm underline underline-offset-4"
-            href="/shop/orders"
-          >
+          <Link className={NAV_LINK} href="/shop/orders">
             {t('myOrders')}
           </Link>
-          <Link className="text-sm underline underline-offset-4" href="/shop">
+          <Link className={NAV_LINK} href="/shop">
             {t('shop')}
           </Link>
         </nav>
       </header>
 
       <section
-        className="mb-6 rounded-md border p-4"
+        className="mb-6 rounded-md border border-border p-4"
         aria-labelledby="order-summary-heading"
       >
         <h2 id="order-summary-heading" className="sr-only">
@@ -240,25 +254,27 @@ export default async function OrderDetailPage({
 
         <dl className="grid grid-cols-1 gap-3 sm:grid-cols-2">
           <div>
-            <dt className="text-xs opacity-80">{t('total')}</dt>
+            <dt className="text-xs text-muted-foreground">{t('total')}</dt>
             <dd className="text-sm font-medium">{totalFormatted}</dd>
           </div>
 
           <div>
-            <dt className="text-xs opacity-80">{t('paymentStatus')}</dt>
+            <dt className="text-xs text-muted-foreground">
+              {t('paymentStatus')}
+            </dt>
             <dd className="text-sm font-medium">
               {String(order.paymentStatus)}
             </dd>
           </div>
 
           <div>
-            <dt className="text-xs opacity-80">{t('created')}</dt>
+            <dt className="text-xs text-muted-foreground">{t('created')}</dt>
             <dd className="text-sm">{createdFormatted}</dd>
           </div>
 
           {isAdmin && (
             <div>
-              <dt className="text-xs opacity-80">{t('provider')}</dt>
+              <dt className="text-xs text-muted-foreground">{t('provider')}</dt>
               <dd className="text-sm">{String(order.paymentProvider)}</dd>
             </div>
           )}
@@ -267,13 +283,17 @@ export default async function OrderDetailPage({
         {isAdmin && (
           <dl className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
             <div>
-              <dt className="text-xs opacity-80">{t('paymentReference')}</dt>
+              <dt className="text-xs text-muted-foreground">
+                {t('paymentReference')}
+              </dt>
               <dd className="text-sm break-all">
                 {order.paymentIntentId ?? '—'}
               </dd>
             </div>
             <div>
-              <dt className="text-xs opacity-80">{t('idempotencyKey')}</dt>
+              <dt className="text-xs text-muted-foreground">
+                {t('idempotencyKey')}
+              </dt>
               <dd className="text-sm break-all">{order.idempotencyKey}</dd>
             </div>
           </dl>
@@ -282,13 +302,17 @@ export default async function OrderDetailPage({
         {isAdmin && (
           <dl className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
             <div>
-              <dt className="text-xs opacity-80">{t('stockRestored')}</dt>
+              <dt className="text-xs text-muted-foreground">
+                {t('stockRestored')}
+              </dt>
               <dd className="text-sm">
                 {order.stockRestored ? t('yes') : t('no')}
               </dd>
             </div>
             <div>
-              <dt className="text-xs opacity-80">{t('restockedAt')}</dt>
+              <dt className="text-xs text-muted-foreground">
+                {t('restockedAt')}
+              </dt>
               <dd className="text-sm">{restockedFormatted}</dd>
             </div>
           </dl>
@@ -296,27 +320,37 @@ export default async function OrderDetailPage({
       </section>
 
       <section
-        className="rounded-md border"
+        className="rounded-md border border-border"
         aria-labelledby="order-items-heading"
       >
-        <div className="border-b p-4">
+        <div className="border-b border-border p-4">
           <h2 id="order-items-heading" className="text-lg font-semibold">
             {t('items')}
           </h2>
         </div>
 
-        <ul className="divide-y" aria-label={t('items')}>
+        <ul className="divide-y divide-border" aria-label={t('items')}>
           {order.items.map(it => (
             <li key={it.id} className="p-4">
               <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                 <div className="min-w-0">
-                  <div className="truncate font-medium">
-                    {it.productTitle ??
-                      it.productSlug ??
-                      it.productSku ??
-                      it.productId}
-                  </div>
-                  <div className="mt-1 break-all text-xs opacity-80">
+                  {it.productSlug ? (
+                    <Link
+                      href={`/shop/products/${it.productSlug}`}
+                      className={PRODUCT_LINK}
+                    >
+                      {it.productTitle ??
+                        it.productSlug ??
+                        it.productSku ??
+                        it.productId}
+                    </Link>
+                  ) : (
+                    <div className="truncate font-medium">
+                      {it.productTitle ?? it.productSku ?? it.productId}
+                    </div>
+                  )}
+
+                  <div className="mt-1 break-all text-xs text-muted-foreground">
                     {it.productSku
                       ? t('sku', { sku: it.productSku })
                       : t('product', { productId: it.productId })}
@@ -330,7 +364,7 @@ export default async function OrderDetailPage({
                   </div>
                   <div>
                     <dt className="sr-only">{t('unitPrice')}</dt>
-                    <dd className="text-sm opacity-80">
+                    <dd className="text-sm text-muted-foreground">
                       Unit:{' '}
                       {safeFormatMoneyMajor(it.unitPrice, currency, locale)}
                     </dd>
diff --git a/frontend/app/[locale]/shop/orders/error.tsx b/frontend/app/[locale]/shop/orders/error.tsx
index 3a1b6022..3b084a1a 100644
--- a/frontend/app/[locale]/shop/orders/error.tsx
+++ b/frontend/app/[locale]/shop/orders/error.tsx
@@ -1,25 +1,39 @@
 'use client';
 
+import { cn } from '@/lib/utils';
+import {
+  SHOP_FOCUS,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
+
 type ErrorPageProps = {
   error: Error & { digest?: string };
   reset: () => void;
 };
 
+const SHOP_OUTLINE_BTN = cn(
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+  SHOP_FOCUS
+);
+
 export default function OrdersError({ reset }: ErrorPageProps) {
   return (
     <div className="mx-auto w-full max-w-3xl px-4 py-8">
-      <h1 className="text-2xl font-semibold">Orders</h1>
+      <header className="flex items-start justify-between gap-3">
+        <h1 className="text-2xl font-semibold">Orders</h1>
+      </header>
+
+      <section className="mt-6 rounded-lg border border-border bg-card p-5">
+        <p className="text-sm text-muted-foreground">Failed to load orders.</p>
 
-      <div className="mt-6 rounded-md border p-4">
-        <p className="text-sm">Failed to load orders.</p>
-        <button
-          type="button"
-          className="mt-3 text-sm underline underline-offset-4"
-          onClick={() => reset()}
-        >
-          Try again
-        </button>
-      </div>
+        <div className="mt-4 flex flex-wrap items-center gap-3">
+          <button type="button" className={SHOP_OUTLINE_BTN} onClick={reset}>
+            Try again
+          </button>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/frontend/app/[locale]/shop/orders/page.tsx b/frontend/app/[locale]/shop/orders/page.tsx
index 5f00dd1b..5dbcc0d9 100644
--- a/frontend/app/[locale]/shop/orders/page.tsx
+++ b/frontend/app/[locale]/shop/orders/page.tsx
@@ -1,5 +1,5 @@
 import 'server-only';
-
+import { cn } from '@/lib/utils';
 import { Link } from '@/i18n/routing';
 import { redirect } from 'next/navigation';
 import { unstable_noStore as noStore } from 'next/cache';
@@ -10,7 +10,12 @@ import { db } from '@/db';
 import { orderItems, orders } from '@/db/schema';
 import { getCurrentUser } from '@/lib/auth';
 import { logError } from '@/lib/logging';
-
+import {
+  SHOP_FOCUS,
+  SHOP_LINK_BASE,
+  SHOP_LINK_MD,
+  SHOP_NAV_LINK_BASE,
+} from '@/lib/shop/ui-classes';
 export const dynamic = 'force-dynamic';
 
 type PaymentStatus = (typeof orders.$inferSelect)['paymentStatus'];
@@ -113,7 +118,9 @@ export default async function MyOrdersPage({
 
   const user = await getCurrentUser();
   if (!user) {
-    redirect(`/${locale}/login?returnTo=${encodeURIComponent(`/${locale}/shop/orders`)}`);
+    redirect(
+      `/${locale}/login?returnTo=${encodeURIComponent(`/${locale}/shop/orders`)}`
+    );
   }
 
   let rows: Array<{
@@ -123,7 +130,7 @@ export default async function MyOrdersPage({
     paymentStatus: PaymentStatus;
     createdAt: Date;
     primaryItemLabel: string | null;
-    itemCount: unknown; 
+    itemCount: unknown;
   }> = [];
 
   try {
@@ -172,6 +179,17 @@ export default async function MyOrdersPage({
     logError('My orders page failed', error);
     throw new Error('MY_ORDERS_LOAD_FAILED');
   }
+  // Nav/breadcrumb-ish links ("Back to shop", "Browse products")
+  const NAV_LINK = cn(SHOP_NAV_LINK_BASE, 'text-lg', SHOP_FOCUS);
+
+  // Order headline link in the table: make it match cart product link style
+  // (cart uses: cn('block truncate', SHOP_LINK_BASE, SHOP_LINK_MD, SHOP_FOCUS))
+  const ORDER_HEADLINE_LINK = cn(
+    'block max-w-[24rem] truncate',
+    SHOP_LINK_BASE,
+    SHOP_LINK_MD,
+    SHOP_FOCUS
+  );
 
   return (
     <main
@@ -183,13 +201,11 @@ export default async function MyOrdersPage({
           <h1 id="my-orders-heading" className="text-2xl font-semibold">
             {t('title')}
           </h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {t('subtitle')}
-          </p>
+          <p className="mt-1 text-sm text-muted-foreground">{t('subtitle')}</p>
         </div>
 
         <nav aria-label="Orders navigation" className="flex items-center gap-3">
-          <Link className="text-sm underline underline-offset-4" href="/shop">
+          <Link className={NAV_LINK} href="/shop">
             {t('backToShop')}
           </Link>
         </nav>
@@ -199,10 +215,7 @@ export default async function MyOrdersPage({
         <section className="rounded-md border p-4" aria-label="No orders">
           <p className="text-sm text-muted-foreground">{t('empty.message')}</p>
           <div className="mt-3">
-            <Link
-              className="text-sm underline underline-offset-4"
-              href="/shop/products"
-            >
+            <Link className={NAV_LINK} href="/shop/products">
               {t('empty.browseProducts')}
             </Link>
           </div>
@@ -265,7 +278,7 @@ export default async function MyOrdersPage({
                       <th scope="row" className="px-4 py-3 align-top text-left">
                         <Link
                           href={href}
-                          className="block max-w-[24rem] truncate font-medium underline underline-offset-4"
+                          className={ORDER_HEADLINE_LINK}
                           title={headline}
                           aria-label={t('table.openOrder', { id: o.id })}
                         >
@@ -273,7 +286,9 @@ export default async function MyOrdersPage({
                         </Link>
 
                         <div className="mt-1 text-xs text-muted-foreground">
-                          <span className="sr-only">{t('table.orderId')}: </span>
+                          <span className="sr-only">
+                            {t('table.orderId')}:{' '}
+                          </span>
                           <span className="break-all">
                             {shortOrderId(o.id)}
                           </span>
diff --git a/frontend/app/[locale]/shop/page.tsx b/frontend/app/[locale]/shop/page.tsx
index c715c1c2..8a1c4468 100644
--- a/frontend/app/[locale]/shop/page.tsx
+++ b/frontend/app/[locale]/shop/page.tsx
@@ -4,6 +4,13 @@ import { Hero } from '@/components/shop/shop-hero';
 import { CategoryTile } from '@/components/shop/category-tile';
 import { getHomepageContent } from '@/lib/shop/data';
 import { getTranslations } from 'next-intl/server';
+import {
+  SHOP_CTA_BASE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  SHOP_FOCUS,
+  shopCtaGradient,
+} from '@/lib/shop/ui-classes';
 
 export default async function HomePage({
   params,
@@ -38,10 +45,27 @@ export default async function HomePage({
 
             <Link
               href="/shop/products?filter=new"
-              className="text-sm font-medium text-muted-foreground hover:text-foreground"
+              className="
+              group inline-flex items-center gap-2 rounded-md border border-border
+              px-4 py-2
+              text-xs sm:text-sm font-semibold tracking-[0.25em] uppercase
+              text-muted-foreground hover:text-foreground
+              bg-transparent
+              shadow-none hover:shadow-[var(--shop-card-shadow-hover)]
+              transition-[transform,box-shadow,color,filter] duration-500 ease-out
+              hover:-translate-y-0.5 hover:brightness-110
+              focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)]
+              focus-visible:ring-offset-2 focus-visible:ring-offset-background
+            "
               aria-label={t('viewAll')}
             >
-              {t('viewAll')} <span aria-hidden="true">→</span>
+              <span>{t('viewAll')}</span>
+              <span
+                aria-hidden="true"
+                className="transition-transform duration-300 group-hover:translate-x-0.5"
+              >
+                →
+              </span>
             </Link>
           </header>
 
@@ -98,10 +122,40 @@ export default async function HomePage({
           <div className="mt-8">
             <Link
               href="/shop/products"
-              className="inline-flex items-center gap-2 rounded-md bg-[color:var(--shop-cta-bg)] px-6 py-3 text-sm font-semibold uppercase tracking-wide text-[color:var(--shop-cta-fg)] transition-opacity hover:opacity-90"
+              className={`
+    ${SHOP_CTA_BASE} ${SHOP_FOCUS}
+    px-8 sm:px-10 md:px-12 py-3 md:py-3.5
+    text-[color:var(--shop-cta-fg)]
+    shadow-[var(--shop-cta-shadow)] hover:shadow-[var(--shop-cta-shadow-hover)]
+  `}
               aria-label={t('hero.cta')}
             >
-              {t('hero.cta')}
+              {/* base gradient */}
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient('--shop-cta-bg', '--shop-cta-bg-hover')}
+                aria-hidden="true"
+              />
+
+              {/* hover wave overlay */}
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient('--shop-cta-bg-hover', '--shop-cta-bg')}
+                aria-hidden="true"
+              />
+
+              {/* glass inset */}
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+              <span className="relative z-10 flex items-center gap-2">
+                <span>{t('hero.cta')}</span>
+                <span
+                  aria-hidden="true"
+                  className="transition-transform duration-300 group-hover:translate-x-0.5"
+                >
+                  →
+                </span>
+              </span>
             </Link>
           </div>
         </div>
diff --git a/frontend/app/[locale]/shop/products/[slug]/page.tsx b/frontend/app/[locale]/shop/products/[slug]/page.tsx
index 6f8b7eab..1b7fe732 100644
--- a/frontend/app/[locale]/shop/products/[slug]/page.tsx
+++ b/frontend/app/[locale]/shop/products/[slug]/page.tsx
@@ -4,12 +4,13 @@ import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import { ArrowLeft } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
-
+import { cn } from '@/lib/utils';
 import { AddToCartButton } from '@/components/shop/add-to-cart-button';
 import { getProductPageData } from '@/lib/shop/data';
 import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import { getPublicProductBySlug } from '@/db/queries/shop/products';
 import { Link } from '@/i18n/routing';
+import { SHOP_FOCUS, SHOP_NAV_LINK_BASE } from '@/lib/shop/ui-classes';
 
 export const dynamic = 'force-dynamic';
 
@@ -37,70 +38,24 @@ export default async function ProductPage({
   if (result.kind === 'not_found') {
     notFound();
   }
-
-  if (result.kind === 'unavailable') {
-    const p = result.product;
-
-    return (
-      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-        <nav aria-label="Product navigation">
-          <Link
-            href="/shop/products"
-            className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
-          >
-            <ArrowLeft className="h-4 w-4" aria-hidden="true" />
-            {t('backToProducts')}
-          </Link>
-        </nav>
-
-        <div className="mt-8 grid gap-8 lg:grid-cols-2 lg:gap-16">
-          <div className="relative aspect-square overflow-hidden rounded-lg bg-muted">
-            {p.badge && p.badge !== 'NONE' && (
-              <span className="absolute left-4 top-4 z-10 rounded bg-foreground px-2 py-1 text-xs font-semibold uppercase text-background">
-                {p.badge}
-              </span>
-            )}
-            <Image
-              src={p.image || '/placeholder.svg'}
-              alt={p.name}
-              fill
-              className="object-cover"
-              sizes="(max-width: 1024px) 100vw, 50vw"
-              priority
-            />
-          </div>
-
-          <div className="flex flex-col">
-            <h1 className="text-3xl font-bold tracking-tight text-foreground">
-              {p.name}
-            </h1>
-
-            <div
-              className="mt-4 rounded-md border border-border bg-muted/30 p-4 text-sm text-muted-foreground"
-              role="status"
-              aria-live="polite"
-            >
-              {t('notAvailable')}
-            </div>
-
-            {p.description && (
-              <p className="mt-6 text-muted-foreground">{p.description}</p>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const product = result.product;
-
+  const isUnavailable = result.kind === 'unavailable';
+  const product = result.product as any; // shape differs for unavailable vs available; guard reads below
+  const NAV_LINK = cn(SHOP_NAV_LINK_BASE, SHOP_FOCUS, 'text-lg', 'items-center gap-2');
+  const badge = product?.badge as string | undefined;
+  const badgeLabel =
+    badge && badge !== 'NONE'
+      ? (() => {
+          try {
+            return tProduct(`badges.${badge}`);
+          } catch {
+            return badge;
+          }
+        })()
+      : null;
   return (
     <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
       <nav aria-label="Product navigation">
-        <Link
-          href="/shop/products"
-          className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
-        >
+        <Link href="/shop/products" className={NAV_LINK}>
           <ArrowLeft className="h-4 w-4" aria-hidden="true" />
           {t('backToProducts')}
         </Link>
@@ -108,15 +63,15 @@ export default async function ProductPage({
 
       <div className="mt-8 grid gap-8 lg:grid-cols-2 lg:gap-16">
         <div className="relative aspect-square overflow-hidden rounded-lg bg-muted">
-          {product.badge && product.badge !== 'NONE' && (
+          {product.badge && (
             <span
               className={`absolute left-4 top-4 z-10 rounded px-2 py-1 text-xs font-semibold uppercase ${
-                product.badge === 'SALE'
+                badge === 'SALE'
                   ? 'bg-accent text-accent-foreground'
                   : 'bg-foreground text-background'
               }`}
             >
-              {tProduct(`badges.${product.badge}`)}
+              {badgeLabel}
             </span>
           )}
 
@@ -135,29 +90,44 @@ export default async function ProductPage({
             {product.name}
           </h1>
 
-          <section className="mt-4 flex items-center gap-3" aria-label="Price">
-            <span
-              className={`text-2xl font-bold ${
-                product.badge === 'SALE' ? 'text-accent' : 'text-foreground'
-              }`}
+          {isUnavailable ? (
+            <div
+              className="mt-4 rounded-md border border-border bg-muted/30 p-4 text-sm text-muted-foreground"
+              role="status"
+              aria-live="polite"
             >
-              {formatMoney(product.price, product.currency, locale)}
-            </span>
-
-            {product.originalPrice && (
-              <span className="text-lg text-muted-foreground line-through">
-                {formatMoney(product.originalPrice, product.currency, locale)}
+              {t('notAvailable')}
+            </div>
+          ) : (
+            <section
+              className="mt-4 flex items-center gap-3"
+              aria-label="Price"
+            >
+              <span
+                className={`text-2xl font-bold ${
+                  badge === 'SALE' ? 'text-accent' : 'text-foreground'
+                }`}
+              >
+                {formatMoney(product.price, product.currency, locale)}
               </span>
-            )}
-          </section>
+
+              {product.originalPrice && (
+                <span className="text-lg text-muted-foreground line-through">
+                  {formatMoney(product.originalPrice, product.currency, locale)}
+                </span>
+              )}
+            </section>
+          )}
 
           {product.description && (
             <p className="mt-6 text-muted-foreground">{product.description}</p>
           )}
 
-          <section aria-label="Purchase">
-            <AddToCartButton product={product} />
-          </section>
+          {!isUnavailable && (
+            <section aria-label="Purchase">
+              <AddToCartButton product={product} />
+            </section>
+          )}
         </div>
       </div>
     </div>
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 702d39a7..2743a7c1 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -342,7 +342,7 @@
   .animate-spin-slow {
     animation: spin 20s linear infinite;
   }
-  
+
   .animate-spin-slower {
     animation: spin 30s linear infinite reverse;
   }
@@ -354,7 +354,8 @@
 }
 
 @keyframes float {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateY(0);
   }
   50% {
@@ -375,6 +376,10 @@
 .shop-scope {
   /* keep shop rounding slightly tighter than platform */
   --radius: calc(var(--radius-base) - 2px);
+  
+  /* Shop header/button accent in LIGHT: no platform blue */
+  --accent-primary: var(--foreground);
+  --accent-hover: color-mix(in oklab, var(--foreground) 92%, white);
 
   /* light: shop accent = black */
   --accent: var(--foreground);
@@ -390,6 +395,43 @@
   /* CTA button: light theme (section is black) -> pink bg + white text */
   --shop-cta-bg: #ff2d55;
   --shop-cta-fg: oklch(0.985 0 0);
+
+  /* Hero CTA (top section) */
+  --shop-hero-btn-bg: var(--foreground);
+  --shop-hero-btn-bg-hover: color-mix(in oklab, var(--foreground) 92%, white);
+  --shop-hero-btn-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
+  --shop-hero-btn-shadow-hover: 0 22px 60px rgba(0, 0, 0, 0.45);
+
+  /* Card aura (product + category tiles) */
+  --shop-card-shadow-hover:
+    0 0 0 1px rgba(0, 0, 0, 0.22), 0 18px 45px rgba(0, 0, 0, 0.12);
+
+  /* Bottom CTA (inverted by theme) */
+  --shop-cta-shadow: 0 22px 60px rgba(255, 45, 85, 0.45);
+  --shop-cta-shadow-hover: 0 28px 80px rgba(255, 45, 85, 0.6);
+  --shop-cta-bg-hover: #e0264b;
+
+  /* Filters / chips (stronger than card aura) */
+  --shop-chip-shadow-hover:
+    0 0 0 1px rgba(0, 0, 0, 0.32), 0 0 0 5px rgba(0, 0, 0, 0.08),
+    0 18px 45px rgba(0, 0, 0, 0.22);
+
+  --shop-chip-shadow-selected:
+    0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 0 7px rgba(0, 0, 0, 0.1),
+    0 22px 60px rgba(0, 0, 0, 0.28);
+
+  --shop-hero-btn-success-bg: color-mix(
+    in oklab,
+    var(--shop-hero-btn-bg) 88%,
+    white
+  );
+  --shop-hero-btn-success-bg-hover: color-mix(
+    in oklab,
+    var(--shop-hero-btn-bg) 80%,
+    white
+  );
+  --shop-hero-btn-success-shadow: 0 22px 60px rgba(0, 0, 0, 0.25);
+  --shop-hero-btn-success-shadow-hover: 0 28px 80px rgba(0, 0, 0, 0.32);
 }
 
 .dark .shop-scope {
@@ -402,15 +444,56 @@
   --color-accent: var(--accent-primary);
   --color-accent-foreground: var(--foreground);
   --color-ring: var(--accent-primary);
-
   --card: var(--background);
 
+  /* Shop accent in DARK: keep magenta */
+  --accent-primary: #ff2d55;
+  --accent-hover: #e0264b;
+
   /* keep borders closer to previous shop look, derived (no hex) */
   --border: color-mix(in oklab, var(--foreground) 18%, var(--background));
   --input: color-mix(in oklab, var(--foreground) 18%, var(--background));
+
   /* CTA button: dark theme (section becomes white) -> black bg + white text */
   --shop-cta-bg: var(--background);
   --shop-cta-fg: var(--foreground);
+
+  /* Hero CTA (top section) */
+  --shop-hero-btn-bg: var(--accent-primary);
+  --shop-hero-btn-bg-hover: var(--accent-hover);
+  --shop-hero-btn-shadow: 0 22px 60px rgba(255, 45, 85, 0.45);
+  --shop-hero-btn-shadow-hover: 0 28px 80px rgba(255, 45, 85, 0.6);
+
+  /* Card aura (product + category tiles) */
+  --shop-card-shadow-hover:
+    0 0 0 1px rgba(255, 45, 85, 0.28), 0 18px 45px rgba(255, 45, 85, 0.16);
+
+  /* Bottom CTA (inverted by theme) */
+  --shop-cta-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
+  --shop-cta-shadow-hover: 0 22px 60px rgba(0, 0, 0, 0.45);
+  --shop-cta-bg-hover: color-mix(in oklab, var(--background) 92%, white);
+
+  /* Filters / chips (stronger than card aura) */
+  --shop-chip-shadow-hover:
+    0 0 0 1px rgba(255, 45, 85, 0.55), 0 0 0 5px rgba(255, 45, 85, 0.18),
+    0 18px 50px rgba(255, 45, 85, 0.32);
+
+  --shop-chip-shadow-selected:
+    0 0 0 2px rgba(255, 45, 85, 0.7), 0 0 0 7px rgba(255, 45, 85, 0.22),
+    0 22px 70px rgba(255, 45, 85, 0.38);
+
+  --shop-hero-btn-success-bg: color-mix(
+    in oklab,
+    var(--accent-primary) 82%,
+    black
+  );
+  --shop-hero-btn-success-bg-hover: color-mix(
+    in oklab,
+    var(--accent-primary) 72%,
+    black
+  );
+  --shop-hero-btn-success-shadow: 0 22px 60px rgba(255, 45, 85, 0.45);
+  --shop-hero-btn-success-shadow-hover: 0 28px 80px rgba(255, 45, 85, 0.6);
 }
 
 /* about-community */
diff --git a/frontend/components/shared/Footer.tsx b/frontend/components/shared/Footer.tsx
index a355efa4..d195df3e 100644
--- a/frontend/components/shared/Footer.tsx
+++ b/frontend/components/shared/Footer.tsx
@@ -5,6 +5,8 @@ import { Link } from '@/i18n/routing';
 import { Github, Linkedin, Send } from 'lucide-react';
 import { ThemeToggle } from '@/components/theme/ThemeToggle';
 import { useTranslations } from 'next-intl';
+import { useSelectedLayoutSegments } from 'next/navigation';
+import { cn } from '@/lib/utils';
 
 const SOCIAL = [
   { label: 'GitHub', href: 'https://github.com/DevLoversTeam', Icon: Github },
@@ -18,18 +20,24 @@ const SOCIAL = [
 
 export default function Footer() {
   const t = useTranslations('footer');
-
+  const segments = useSelectedLayoutSegments();
+  const isShop = segments.includes('shop');
   return (
-    <footer className="relative overflow-hidden border-t border-border bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/50">
+    <footer
+      className={cn(
+        'relative overflow-hidden border-t border-border bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/50 ' +
+          '[--footer-brand:var(--accent-primary)] [--footer-hover:var(--accent-hover)] [--theme-toggle-hover:var(--footer-hover)]',
+        isShop &&
+          '[--footer-brand:var(--foreground)] [--footer-hover:var(--foreground)] ' +
+            'dark:[--footer-brand:var(--accent-primary)] dark:[--footer-hover:var(--accent-hover)]'
+      )}
+    >
       <div className="container-main relative py-6">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
           <div className="space-y-3">
             <p className="text-sm text-slate-700 dark:text-slate-200">
               {t('builtWith')}{' '}
-              <span
-                className="font-semibold "
-                style={{ color: 'var(--accent-primary)' }}
-              >
+              <span className="font-semibold text-[color:var(--footer-brand)]">
                 DevLovers
               </span>{' '}
               {t('byCommunity')}
@@ -39,10 +47,10 @@ export default function Footer() {
               <Link
                 href="/privacy-policy"
                 className="
-transition-colors
-hover:[color:var(--accent-hover)]
-active:[color:var(--accent-hover)]
-focus-visible:[color:var(--accent-hover)]
+                  transition-colors
+                  hover:[color:var(--footer-hover)]
+                  active:[color:var(--footer-hover)]
+                  focus-visible:[color:var(--footer-hover)]
 "
               >
                 {t('privacyPolicy')}
@@ -51,10 +59,10 @@ focus-visible:[color:var(--accent-hover)]
               <Link
                 href="/terms-of-service"
                 className="
-transition-colors
-hover:[color:var(--accent-hover)]
-active:[color:var(--accent-hover)]
-focus-visible:[color:var(--accent-hover)]
+                  transition-colors
+                  hover:[color:var(--footer-hover)]
+                  active:[color:var(--footer-hover)]
+                  focus-visible:[color:var(--footer-hover)]
 "
               >
                 {t('termsOfService')}
@@ -91,13 +99,13 @@ focus-visible:[color:var(--accent-hover)]
                       dark:text-slate-300
                       transition-all
 
-hover:-translate-y-0.5
-hover:!text-[var(--accent-hover)]
-hover:!border-[var(--accent-hover)]
+                      hover:-translate-y-0.5
+                      hover:!text-[var(--footer-hover)]
+                      hover:!border-[var(--footer-hover)]
 
-active:!text-[var(--accent-hover)]
-active:!border-[var(--accent-hover)]
-active:scale-95
+                      active:!text-[var(--footer-hover)]
+                      active:!border-[var(--footer-hover)]
+                      active:scale-95
 
 
                     "
diff --git a/frontend/components/shared/HeaderButton.tsx b/frontend/components/shared/HeaderButton.tsx
index 8bf54ce5..c9bd8de1 100644
--- a/frontend/components/shared/HeaderButton.tsx
+++ b/frontend/components/shared/HeaderButton.tsx
@@ -15,6 +15,14 @@ interface HeaderButtonProps {
 
   label?: string;
 
+  /**
+   * Optional badge rendered OUTSIDE the overflow-hidden button/link,
+   * so it will not be clipped by the shine/gradient container.
+   */
+  badge?: React.ReactNode;
+  badgeClassName?: string;
+  badgeAriaLabel?: string;
+
   className?: string;
 }
 
@@ -26,6 +34,9 @@ export function HeaderButton({
   variant = 'default',
   showArrow = false,
   label,
+  badge,
+  badgeClassName = '',
+  badgeAriaLabel,
   className = '',
 }: HeaderButtonProps) {
   const isIconOnly = variant === 'icon';
@@ -120,8 +131,37 @@ export function HeaderButton({
     ${className}
   `;
 
-  if (!href) {
+  const wrapWithBadge = (node: React.ReactNode) => {
+    if (!badge) return node;
+
+    const defaultBadgeClasses = `
+      pointer-events-none
+      absolute -right-1 -top-1
+      flex h-5 min-w-5 items-center justify-center
+      rounded-full px-1
+      text-[11px] font-semibold leading-none tabular-nums
+      ring-2 ring-background
+    `;
+
+    const ariaProps = badgeAriaLabel
+      ? { 'aria-label': badgeAriaLabel }
+      : { 'aria-hidden': true as const };
+
     return (
+      <span className="relative inline-flex">
+        {node}
+        <span
+          className={`${defaultBadgeClasses} ${badgeClassName}`}
+          {...ariaProps}
+        >
+          {badge}
+        </span>
+      </span>
+    );
+  };
+
+  if (!href) {
+    return wrapWithBadge(
       <button
         onClick={onClick}
         className={baseClasses}
@@ -134,7 +174,7 @@ export function HeaderButton({
     );
   }
 
-  return (
+  return wrapWithBadge(
     <Link
       href={href}
       onClick={onClick}
diff --git a/frontend/components/shop/add-to-cart-button.tsx b/frontend/components/shop/add-to-cart-button.tsx
index 4724f6cc..f333952d 100644
--- a/frontend/components/shop/add-to-cart-button.tsx
+++ b/frontend/components/shop/add-to-cart-button.tsx
@@ -5,6 +5,19 @@ import type { ShopProduct } from '@/lib/shop/data';
 import { cn } from '@/lib/utils';
 import { Check, Minus, Plus } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import {
+  SHOP_CTA_BASE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  shopCtaGradient,
+  SHOP_FOCUS,
+  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_HOVER,
+  SHOP_CHIP_SELECTED,
+  SHOP_SWATCH_BASE,
+  SHOP_SIZE_CHIP_BASE,
+  SHOP_STEPPER_BUTTON_BASE,
+} from '@/lib/shop/ui-classes';
 
 import { useCart } from './cart-provider';
 
@@ -30,7 +43,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
     try {
       return tColors(colorSlug);
     } catch {
-      return color; 
+      return color;
     }
   };
 
@@ -55,6 +68,12 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
   const colorGroupId = useId();
   const sizeGroupId = useId();
   const quantityGroupId = useId();
+  const ctaBaseVar = added
+    ? '--shop-hero-btn-success-bg'
+    : '--shop-hero-btn-bg';
+  const ctaHoverVar = added
+    ? '--shop-hero-btn-success-bg-hover'
+    : '--shop-hero-btn-bg-hover';
 
   return (
     <section className="mt-8 space-y-6" aria-label={t('purchaseOptions')}>
@@ -63,7 +82,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         <fieldset className="min-w-0">
           <legend
             id={colorGroupId}
-            className="text-sm font-medium text-foreground"
+            className="text-sm font-semibold uppercase tracking-wide text-foreground"
           >
             {t('color')}
           </legend>
@@ -83,10 +102,15 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
                   role="radio"
                   aria-checked={selectedColor === color}
                   className={cn(
-                    'h-9 w-9 rounded-full border-2 transition-all',
+                    SHOP_SWATCH_BASE,
+                    SHOP_CHIP_INTERACTIVE,
+                    SHOP_FOCUS,
                     selectedColor === color
-                      ? 'border-accent ring-2 ring-accent ring-offset-2 ring-offset-background'
-                      : 'border-border hover:border-muted-foreground'
+                      ? cn(
+                          SHOP_CHIP_SELECTED,
+                          'hover:shadow-[var(--shop-chip-shadow-selected)] hover:border-accent'
+                        )
+                      : 'hover:border-accent/60 hover:shadow-[var(--shop-chip-shadow-hover)]'
                   )}
                   style={{
                     background: colorMap[color] || color,
@@ -105,7 +129,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         <fieldset className="min-w-0">
           <legend
             id={sizeGroupId}
-            className="text-sm font-medium text-foreground"
+            className="text-sm font-semibold uppercase tracking-wide text-foreground"
           >
             {t('size')}
           </legend>
@@ -123,10 +147,12 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
                 role="radio"
                 aria-checked={selectedSize === size}
                 className={cn(
-                  'rounded-md border px-4 py-2 text-sm font-medium transition-colors',
+                  SHOP_SIZE_CHIP_BASE,
+                  SHOP_CHIP_INTERACTIVE,
+                  SHOP_FOCUS,
                   selectedSize === size
-                    ? 'border-accent bg-accent text-accent-foreground'
-                    : 'border-border text-foreground hover:border-foreground'
+                    ? cn('bg-accent text-accent-foreground', SHOP_CHIP_SELECTED)
+                    : 'bg-transparent text-muted-foreground border-border hover:text-foreground hover:shadow-[var(--shop-chip-shadow-hover)] hover:border-accent/60'
                 )}
               >
                 {size}
@@ -140,7 +166,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
       <section aria-labelledby={quantityGroupId}>
         <h3
           id={quantityGroupId}
-          className="text-sm font-medium text-foreground"
+          className="text-sm font-semibold uppercase tracking-wide text-foreground"
         >
           {t('quantity')}
         </h3>
@@ -149,7 +175,12 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
           <button
             type="button"
             onClick={() => setQuantity(Math.max(1, quantity - 1))}
-            className="flex h-10 w-10 items-center justify-center rounded-md border border-border text-foreground transition-colors hover:bg-secondary"
+            className={cn(
+              SHOP_STEPPER_BUTTON_BASE,
+              SHOP_CHIP_INTERACTIVE,
+              SHOP_CHIP_HOVER,
+              SHOP_FOCUS
+            )}
             aria-label={t('decreaseQuantity')}
           >
             <Minus className="h-4 w-4" aria-hidden="true" />
@@ -162,7 +193,12 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
           <button
             type="button"
             onClick={() => setQuantity(quantity + 1)}
-            className="flex h-10 w-10 items-center justify-center rounded-md border border-border text-foreground transition-colors hover:bg-secondary"
+            className={cn(
+              SHOP_STEPPER_BUTTON_BASE,
+              SHOP_CHIP_INTERACTIVE,
+              SHOP_CHIP_HOVER,
+              SHOP_FOCUS
+            )}
             aria-label={t('increaseQuantity')}
           >
             <Plus className="h-4 w-4" aria-hidden="true" />
@@ -176,24 +212,51 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         onClick={handleAddToCart}
         disabled={!product.inStock}
         className={cn(
-          'flex w-full items-center justify-center gap-2 rounded-md px-6 py-3 text-sm font-semibold uppercase tracking-wide transition-colors',
-          product.inStock
-            ? added
-              ? 'bg-green-600 text-white'
-              : 'bg-accent text-accent-foreground hover:bg-accent/90'
-            : 'cursor-not-allowed bg-muted text-muted-foreground'
+          SHOP_CTA_BASE,
+          SHOP_FOCUS,
+          'w-full justify-center gap-2 px-8 py-3',
+          'transition-[transform,filter] duration-700 ease-out', // transform/filter для active states
+          !product.inStock &&
+            'cursor-not-allowed bg-muted text-muted-foreground',
+          product.inStock &&
+            (added
+              ? 'text-white shadow-[var(--shop-hero-btn-success-shadow)] hover:shadow-[var(--shop-hero-btn-success-shadow-hover)]'
+              : 'text-white shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]')
         )}
       >
-        {!product.inStock ? (
-          t('soldOut')
-        ) : added ? (
+        {product.inStock ? (
           <>
-            <Check className="h-5 w-5" aria-hidden="true" />
-            {t('addedToCart')}
+            {/* base gradient */}
+            <span
+              className="absolute inset-0"
+              style={shopCtaGradient(ctaBaseVar, ctaHoverVar)}
+              aria-hidden="true"
+            />
+
+            {/* hover wave overlay */}
+            <span
+              className={SHOP_CTA_WAVE}
+              style={shopCtaGradient(ctaHoverVar, ctaBaseVar)}
+              aria-hidden="true"
+            />
+
+            {/* glass inset */}
+            <span className={SHOP_CTA_INSET} aria-hidden="true" />
           </>
-        ) : (
-          t('addToCart')
-        )}
+        ) : null}
+
+        <span className="relative z-10 flex items-center gap-2">
+          {!product.inStock ? (
+            t('soldOut')
+          ) : added ? (
+            <>
+              <Check className="h-5 w-5" aria-hidden="true" />
+              {t('addedToCart')}
+            </>
+          ) : (
+            t('addToCart')
+          )}
+        </span>
       </button>
     </section>
   );
diff --git a/frontend/components/shop/admin/admin-product-delete-button.tsx b/frontend/components/shop/admin/admin-product-delete-button.tsx
index 065b6b11..5ee73c69 100644
--- a/frontend/components/shop/admin/admin-product-delete-button.tsx
+++ b/frontend/components/shop/admin/admin-product-delete-button.tsx
@@ -85,14 +85,14 @@ export function AdminProductDeleteButton({
   };
 
   return (
-    <div className="flex min-w-0 flex-col gap-1">
+    <div className="flex w-full min-w-0 flex-col gap-1">
       <button
         type="button"
         onClick={onDelete}
         disabled={isLoading}
         aria-busy={isLoading}
         aria-describedby={error ? errorId : undefined}
-        className="whitespace-nowrap rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50"
+        className="w-full max-w-full whitespace-normal break-words leading-tight rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50 text-center"
       >
         {isLoading ? t('deleting') : t('delete')}
       </button>
diff --git a/frontend/components/shop/admin/admin-product-status-toggle.tsx b/frontend/components/shop/admin/admin-product-status-toggle.tsx
index 62899c1c..48ab1edf 100644
--- a/frontend/components/shop/admin/admin-product-status-toggle.tsx
+++ b/frontend/components/shop/admin/admin-product-status-toggle.tsx
@@ -48,7 +48,10 @@ export function AdminProductStatusToggle({
           // ignore
         }
 
-        if (response.status === 403 && (code === 'CSRF_MISSING' || code === 'CSRF_INVALID')) {
+        if (
+          response.status === 403 &&
+          (code === 'CSRF_MISSING' || code === 'CSRF_INVALID')
+        ) {
           setError(t('securityExpired'));
           return;
         }
@@ -68,10 +71,14 @@ export function AdminProductStatusToggle({
     }
   };
 
-  const buttonLabel = isLoading ? t('updating') : isActive ? t('deactivate') : t('activate');
+  const buttonLabel = isLoading
+    ? t('updating')
+    : isActive
+      ? t('deactivate')
+      : t('activate');
 
   return (
-    <div className="flex min-w-0 flex-col gap-1">
+    <div className="flex w-full min-w-0 flex-col gap-1">
       <button
         type="button"
         onClick={toggleStatus}
@@ -79,7 +86,7 @@ export function AdminProductStatusToggle({
         aria-busy={isLoading}
         aria-pressed={isActive}
         aria-describedby={error ? errorId : undefined}
-        className="whitespace-nowrap rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50"
+        className="w-full max-w-full whitespace-normal break-words leading-tight rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50 text-center"
       >
         {buttonLabel}
       </button>
diff --git a/frontend/components/shop/admin/shop-admin-topbar.tsx b/frontend/components/shop/admin/shop-admin-topbar.tsx
index 21ca8c50..2b04f168 100644
--- a/frontend/components/shop/admin/shop-admin-topbar.tsx
+++ b/frontend/components/shop/admin/shop-admin-topbar.tsx
@@ -11,7 +11,7 @@ export async function ShopAdminTopbar() {
           aria-label={t('label')}
           className="flex flex-wrap items-center justify-between gap-3 py-3"
         >
-          <ol className="flex flex-wrap items-center gap-3">
+          <ol className="flex min-w-0 flex-wrap items-center gap-3">
             <li>
               <Link
                 href="/shop/admin"
@@ -44,7 +44,7 @@ export async function ShopAdminTopbar() {
             </li>
           </ol>
 
-          <div className="shrink-0">
+          <div className="shrink-0 whitespace-nowrap">
             <Link
               href="/shop"
               className="inline-flex items-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
diff --git a/frontend/components/shop/catalog-load-more.tsx b/frontend/components/shop/catalog-load-more.tsx
index 385a6c60..29358b8a 100644
--- a/frontend/components/shop/catalog-load-more.tsx
+++ b/frontend/components/shop/catalog-load-more.tsx
@@ -1,7 +1,13 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-
+import { cn } from '@/lib/utils';
+import {
+  SHOP_DISABLED,
+  SHOP_FOCUS,
+  SHOP_OUTLINE_BTN_BASE,
+  SHOP_OUTLINE_BTN_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
 interface CatalogLoadMoreProps {
   hasMore: boolean;
   isLoading: boolean;
@@ -25,7 +31,13 @@ export function CatalogLoadMore({
         onClick={onLoadMore}
         disabled={isLoading}
         aria-busy={isLoading}
-        className="rounded-md border border-border px-6 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-70"
+        className={cn(
+          SHOP_OUTLINE_BTN_BASE,
+          SHOP_OUTLINE_BTN_INTERACTIVE,
+          SHOP_FOCUS,
+          SHOP_DISABLED,
+          'gap-2 px-6 py-2.5'
+        )}
       >
         {isLoading ? tCommon('loading') : t('loadMore')}
       </button>
diff --git a/frontend/components/shop/category-tile.tsx b/frontend/components/shop/category-tile.tsx
index 86028f62..3047f33b 100644
--- a/frontend/components/shop/category-tile.tsx
+++ b/frontend/components/shop/category-tile.tsx
@@ -20,10 +20,10 @@ export async function CategoryTile({ category }: CategoryTileProps) {
       href={href}
       aria-label={tCategoryTile('shopCategory', { name: categoryName })}
       className={[
-        // IMPORTANT: make it block-level so aspect-ratio + Image fill work correctly
         'group relative block w-full',
         'aspect-[4/3] overflow-hidden rounded-lg bg-muted',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+        'transition-[box-shadow] duration-500 hover:shadow-[var(--shop-card-shadow-hover)]',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background',
       ].join(' ')}
     >
       <Image
diff --git a/frontend/components/shop/header/cart-button.tsx b/frontend/components/shop/header/cart-button.tsx
index 94053f6a..7e8ed8c8 100644
--- a/frontend/components/shop/header/cart-button.tsx
+++ b/frontend/components/shop/header/cart-button.tsx
@@ -2,8 +2,8 @@
 
 import { ShoppingBag } from 'lucide-react';
 
-import { Link } from '@/i18n/routing';
 import { useMounted } from '@/hooks/use-mounted';
+import { HeaderButton } from '@/components/shared/HeaderButton';
 
 import { useCart } from '../cart-provider';
 
@@ -14,21 +14,16 @@ export function CartButton() {
   const itemCount = mounted ? cart.summary.itemCount : 0;
   const showCount = itemCount > 0;
 
+  const badgeText = itemCount > 99 ? '99+' : itemCount;
+
   return (
-    <Link
+    <HeaderButton
       href="/shop/cart"
-      className="relative flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-      aria-label={showCount ? `Cart, ${itemCount} items` : 'Cart'}
-    >
-      <ShoppingBag className="h-5 w-5" aria-hidden="true" />
-      {showCount ? (
-        <span
-          className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-accent text-xs font-medium text-accent-foreground"
-          aria-label={`${itemCount} items in cart`}
-        >
-          {itemCount}
-        </span>
-      ) : null}
-    </Link>
+      variant="icon"
+      icon={ShoppingBag}
+      label={showCount ? `Cart, ${itemCount} items` : 'Cart'}
+      badge={showCount ? badgeText : undefined}
+      badgeClassName="bg-[color:var(--accent-primary)] text-white"
+    />
   );
 }
diff --git a/frontend/components/shop/product-card.tsx b/frontend/components/shop/product-card.tsx
index aed911ee..9a4245b3 100644
--- a/frontend/components/shop/product-card.tsx
+++ b/frontend/components/shop/product-card.tsx
@@ -46,7 +46,7 @@ export function ProductCard({ product }: ProductCardProps) {
   return (
     <Link
       href={`/shop/products/${product.slug}`}
-      className="group relative flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
+      className="group relative flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-shadow duration-500 hover:shadow-[var(--shop-card-shadow-hover)] hover:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background"
     >
       {product.badge && product.badge !== 'NONE' && (
         <span
@@ -90,11 +90,15 @@ export function ProductCard({ product }: ProductCardProps) {
           )}
         </div>
 
-        {!product.inStock && (
-          <p className="mt-2 text-xs text-muted-foreground" role="status">
-            {t('soldOut')}
-          </p>
-        )}
+        <p
+          className={cn(
+            'mt-2 text-xs text-muted-foreground min-h-[1rem] leading-4',
+            product.inStock && 'invisible'
+          )}
+          {...(product.inStock ? { 'aria-hidden': true } : { role: 'status' })}
+        >
+          {t('soldOut')}
+        </p>
       </div>
     </Link>
   );
diff --git a/frontend/components/shop/product-filters.tsx b/frontend/components/shop/product-filters.tsx
index e8734097..0d8226f2 100644
--- a/frontend/components/shop/product-filters.tsx
+++ b/frontend/components/shop/product-filters.tsx
@@ -3,7 +3,16 @@
 import { useId } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-
+import {
+  SHOP_FOCUS,
+  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_HOVER,
+  SHOP_CHIP_SELECTED,
+  SHOP_SWATCH_BASE,
+  SHOP_SIZE_CHIP_BASE,
+  SHOP_FILTER_ITEM_BASE,
+  SHOP_CHIP_BORDER_HOVER,
+} from '@/lib/shop/ui-classes';
 import { CATEGORIES, COLORS, PRODUCT_TYPES, SIZES } from '@/lib/config/catalog';
 import { cn } from '@/lib/utils';
 
@@ -55,13 +64,20 @@ export function ProductFilters() {
                 onClick={() => updateFilter('category', cat.slug)}
                 aria-current={currentCategory === cat.slug ? 'true' : undefined}
                 className={cn(
-                  'text-sm transition-colors',
+                  SHOP_FILTER_ITEM_BASE,
+                  SHOP_FOCUS,
                   currentCategory === cat.slug
-                    ? 'font-medium text-accent'
-                    : 'text-muted-foreground hover:text-foreground'
+                    ? 'text-accent'
+                    : 'text-muted-foreground hover:text-accent'
                 )}
               >
-                {tCategories(cat.slug === 'new-arrivals' ? 'newArrivals' : cat.slug === 'best-sellers' ? 'bestSellers' : cat.slug)}
+                {tCategories(
+                  cat.slug === 'new-arrivals'
+                    ? 'newArrivals'
+                    : cat.slug === 'best-sellers'
+                      ? 'bestSellers'
+                      : cat.slug
+                )}
               </button>
             </li>
           ))}
@@ -90,10 +106,11 @@ export function ProductFilters() {
                   }
                   aria-pressed={isSelected}
                   className={cn(
-                    'text-sm transition-colors',
+                    SHOP_FILTER_ITEM_BASE,
+                    SHOP_FOCUS,
                     isSelected
-                      ? 'font-medium text-accent'
-                      : 'text-muted-foreground hover:text-foreground'
+                      ? 'text-accent'
+                      : 'text-muted-foreground hover:text-accent'
                   )}
                 >
                   {tTypes(type.slug)}
@@ -127,10 +144,14 @@ export function ProductFilters() {
                 }
                 aria-pressed={isSelected}
                 className={cn(
-                  'h-7 w-7 rounded-full border-2 transition-all',
+                  SHOP_SWATCH_BASE,
+                  // у фільтрах розмір 8x8, тому override:
+                  'h-8 w-8',
+                  SHOP_CHIP_INTERACTIVE,
+                  SHOP_FOCUS,
                   isSelected
-                    ? 'border-accent ring-2 ring-accent ring-offset-2 ring-offset-background'
-                    : 'border-border hover:border-muted-foreground'
+                    ? SHOP_CHIP_SELECTED
+                    : cn(SHOP_CHIP_HOVER, SHOP_CHIP_BORDER_HOVER)
                 )}
                 style={{ background: color.hex }}
                 title={colorLabel}
@@ -161,10 +182,18 @@ export function ProductFilters() {
                 onClick={() => updateFilter('size', isSelected ? null : size)}
                 aria-pressed={isSelected}
                 className={cn(
-                  'rounded-md border px-3 py-1.5 text-sm transition-colors',
+                  SHOP_SIZE_CHIP_BASE,
+                  // у фільтрах інші паддінги — override:
+                  'px-3 py-1.5 text-sm',
+                  SHOP_CHIP_INTERACTIVE,
+                  SHOP_FOCUS,
                   isSelected
-                    ? 'border-accent bg-accent text-accent-foreground'
-                    : 'border-border text-muted-foreground hover:border-foreground hover:text-foreground'
+                    ? cn('bg-accent text-accent-foreground', SHOP_CHIP_SELECTED)
+                    : cn(
+                        'bg-transparent text-muted-foreground border-border hover:text-foreground',
+                        SHOP_CHIP_HOVER,
+                        SHOP_CHIP_BORDER_HOVER
+                      )
                 )}
               >
                 {size}
diff --git a/frontend/components/shop/product-sort.tsx b/frontend/components/shop/product-sort.tsx
index 5640c4aa..8aae175c 100644
--- a/frontend/components/shop/product-sort.tsx
+++ b/frontend/components/shop/product-sort.tsx
@@ -6,9 +6,15 @@ import { useId } from 'react';
 import { useRouter } from '@/i18n/routing';
 import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-
+import { ChevronDown } from 'lucide-react';
 import { SORT_OPTIONS } from '@/lib/config/catalog';
 import { cn } from '@/lib/utils';
+import {
+  SHOP_DISABLED,
+  SHOP_FOCUS,
+  SHOP_SELECT_BASE,
+  SHOP_SELECT_INTERACTIVE,
+} from '@/lib/shop/ui-classes';
 
 type ProductSortProps = {
   className?: string;
@@ -30,10 +36,10 @@ export function ProductSort({ className }: ProductSortProps) {
 
   const getOptionLabel = (value: string) => {
     const keyMap: Record<string, string> = {
-      'featured': 'featured',
+      featured: 'featured',
       'price-asc': 'priceAsc',
       'price-desc': 'priceDesc',
-      'newest': 'newest',
+      newest: 'newest',
     };
     return tOptions(keyMap[value] || 'featured');
   };
@@ -64,26 +70,36 @@ export function ProductSort({ className }: ProductSortProps) {
         {t('sortBy')}
       </label>
 
-      <select
-        id={selectId}
-        name="sort"
-        value={currentSort}
-        onChange={e => handleSort(e.target.value)}
-        className={[
-          'h-10 w-full rounded-md border border-input px-3 text-sm transition-colors sm:w-48',
-          isActive
-            ? 'bg-muted text-foreground'
-            : 'bg-background text-muted-foreground',
-          'hover:text-foreground',
-          'focus:outline-none focus:ring-0 focus:ring-offset-0',
-        ].join(' ')}
-      >
-        {SORT_OPTIONS.map(option => (
-          <option key={option.value} value={option.value}>
-            {getOptionLabel(option.value)}
-          </option>
-        ))}
-      </select>
+      <div className="relative w-full sm:w-52">
+        <select
+          id={selectId}
+          name="sort"
+          value={currentSort}
+          onChange={e => handleSort(e.target.value)}
+          className={cn(
+            SHOP_SELECT_BASE,
+            SHOP_SELECT_INTERACTIVE,
+            SHOP_FOCUS,
+            SHOP_DISABLED,
+            isActive ? 'text-foreground' : 'text-muted-foreground'
+          )}
+        >
+          {SORT_OPTIONS.map(option => (
+            <option key={option.value} value={option.value}>
+              {getOptionLabel(option.value)}
+            </option>
+          ))}
+        </select>
+
+        <ChevronDown
+          className={cn(
+            'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2',
+            'text-muted-foreground transition-colors',
+            'peer-hover:text-foreground peer-focus-visible:text-foreground'
+          )}
+          aria-hidden="true"
+        />
+      </div>
     </form>
   );
 }
diff --git a/frontend/components/shop/shop-hero.tsx b/frontend/components/shop/shop-hero.tsx
index 6eebe123..c76cba58 100644
--- a/frontend/components/shop/shop-hero.tsx
+++ b/frontend/components/shop/shop-hero.tsx
@@ -5,6 +5,13 @@ interface HeroProps {
   ctaText: string;
   ctaLink: string;
 }
+import {
+  SHOP_CTA_BASE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  SHOP_FOCUS,
+  shopCtaGradient,
+} from '@/lib/shop/ui-classes';
 
 export function Hero({ headline, subheadline, ctaText, ctaLink }: HeroProps) {
   return (
@@ -16,22 +23,66 @@ export function Hero({ headline, subheadline, ctaText, ctaLink }: HeroProps) {
         <div className="mx-auto max-w-3xl text-center">
           <h1
             id="shop-hero-title"
-            className="text-balance text-4xl font-bold tracking-tight text-foreground sm:text-5xl lg:text-6xl"
+            className="relative inline-block text-balance text-4xl font-black leading-[1.08] tracking-tight sm:text-5xl lg:text-6xl pb-2"
           >
-            {headline}
+            <span className="relative inline-block bg-gradient-to-r from-foreground/80 via-foreground to-foreground/80 bg-clip-text text-transparent dark:from-[var(--accent-primary)]/70 dark:via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 dark:to-[var(--accent-hover)]/70">
+              {headline}
+            </span>
+
+            <span
+              className="pointer-events-none absolute inset-0 inline-block bg-gradient-to-r from-foreground via-foreground to-foreground bg-clip-text text-transparent wave-text-gradient dark:from-[var(--accent-primary)] dark:via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] dark:to-[var(--accent-hover)]"
+              aria-hidden="true"
+            >
+              {headline}
+            </span>
           </h1>
 
-          <p className="mx-auto mt-6 max-w-xl text-pretty text-lg text-muted-foreground">
+          <p className="mx-auto mt-6 max-w-xl text-pretty text-sm sm:text-base md:text-lg text-muted-foreground font-light">
             {subheadline}
           </p>
 
           <div className="mt-10">
             <Link
               href={ctaLink}
-              className="inline-flex items-center gap-2 rounded-md bg-foreground px-6 py-3 text-sm font-semibold uppercase tracking-wide text-background transition-colors hover:bg-foreground/90 dark:bg-[color:var(--accent-primary)] dark:hover:bg-[color:var(--accent-hover)] dark:text-[color:var(--foreground)]"
+              className={`
+    ${SHOP_CTA_BASE} ${SHOP_FOCUS}
+    px-8 sm:px-10 md:px-12 py-3 md:py-3.5 lg:py-4
+    text-white
+    shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]
+  `}
             >
-              <span>{ctaText}</span>
-              <span aria-hidden="true">→</span>
+              {/* base gradient */}
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg',
+                  '--shop-hero-btn-bg-hover'
+                )}
+                aria-hidden="true"
+              />
+
+              {/* hover wave overlay */}
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg-hover',
+                  '--shop-hero-btn-bg'
+                )}
+                aria-hidden="true"
+              />
+
+              {/* glass inset */}
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+              <span className="relative z-10 flex items-center gap-2">
+                <span>{ctaText}</span>
+                <span
+                  aria-hidden="true"
+                  className="transition-transform duration-300 group-hover:translate-x-0.5"
+                >
+                  →
+                </span>
+              </span>
             </Link>
           </div>
         </div>
diff --git a/frontend/components/theme/ThemeToggle.tsx b/frontend/components/theme/ThemeToggle.tsx
index 874d69fa..515f96d4 100644
--- a/frontend/components/theme/ThemeToggle.tsx
+++ b/frontend/components/theme/ThemeToggle.tsx
@@ -58,7 +58,7 @@ export function ThemeToggle() {
         .theme-toggle-btn:hover :global(svg),
         .theme-toggle-btn:focus-visible :global(svg),
         .theme-toggle-btn:active :global(svg) {
-          color: var(--accent-hover);
+          color: var(--theme-toggle-hover, var(--accent-hover));
         }
       `}</style>
     </div>
diff --git a/frontend/lib/shop/ui-classes.ts b/frontend/lib/shop/ui-classes.ts
new file mode 100644
index 00000000..22c6c737
--- /dev/null
+++ b/frontend/lib/shop/ui-classes.ts
@@ -0,0 +1,118 @@
+export const SHOP_FOCUS = `
+  focus-visible:outline-none
+  focus-visible:ring-2
+  focus-visible:ring-[color:var(--color-ring)]
+  focus-visible:ring-offset-2
+  focus-visible:ring-offset-background
+`;
+
+export const SHOP_CTA_BASE = `
+  group relative inline-flex items-center overflow-hidden rounded-2xl
+  text-xs md:text-sm font-semibold tracking-[0.25em] uppercase
+  active:scale-95 active:brightness-110
+  transition-shadow duration-700 ease-out
+`;
+
+export const SHOP_CTA_WAVE = `
+  absolute inset-0 opacity-0
+  group-hover:opacity-100 group-active:opacity-100
+  group-hover:animate-wave-slide-up
+`;
+
+export const SHOP_CTA_INSET = `
+  pointer-events-none absolute inset-[2px] rounded-2xl
+  bg-gradient-to-r from-white/20 via-white/5 to-white/20
+  opacity-40 supports-[hover:hover]:group-hover:opacity-60 transition-opacity
+`;
+
+// Shared interaction for “chips” (swatches, size pills, +/- stepper)
+export const SHOP_CHIP_INTERACTIVE =
+  'transition-[box-shadow,border-color,color,background-color,filter] duration-500 ease-out hover:brightness-110';
+
+// Optional “lift” (НЕ використовуй для size/+/- якщо хочеш без тремтіння)
+export const SHOP_CHIP_LIFT =
+  'transition-transform duration-500 ease-out hover:-translate-y-0.5';
+
+export const SHOP_CHIP_HOVER =
+  'hover:shadow-[var(--shop-chip-shadow-hover)] hover:border-accent/60';
+
+export const SHOP_CHIP_SELECTED =
+  'border-accent ring-2 ring-accent ring-offset-2 ring-offset-background shadow-[var(--shop-chip-shadow-selected)]';
+
+// Optional: base shapes (so you don’t repeat layout primitives)
+export const SHOP_SWATCH_BASE =
+  'group relative h-9 w-9 rounded-full border border-border shadow-none';
+
+export const SHOP_SIZE_CHIP_BASE =
+  'group rounded-md border px-4 py-2 text-sm font-medium';
+
+export const SHOP_STEPPER_BUTTON_BASE =
+  'flex h-10 w-10 items-center justify-center rounded-md border border-border text-foreground bg-transparent';
+
+/**
+ * Builds a horizontal gradient background from two CSS vars.
+ * Example: shopCtaGradient('--shop-cta-bg', '--shop-cta-bg-hover')
+ */
+
+// Text-link-ish filter items (category/type lists)
+export const SHOP_FILTER_ITEM_BASE =
+  'inline-flex text-sm font-medium transition-[color,transform] duration-300 ease-out hover:-translate-y-[1px]';
+
+// If you want the “chip hover border” to be consistent (used in filters + size)
+export const SHOP_CHIP_BORDER_HOVER = 'hover:border-foreground/60';
+
+export const SHOP_DISABLED = 'disabled:pointer-events-none disabled:opacity-60';
+
+export const SHOP_CHIP_SHADOW_HOVER =
+  'hover:shadow-[var(--shop-chip-shadow-hover)]';
+
+/**
+ * Reusable “text link” for product names / order links / “go to order”, etc.
+ * Size додаєш окремо (text-xs, text-[15px], …).
+ */
+export const SHOP_LINK_BASE =
+  'inline-flex font-medium text-foreground underline underline-offset-4 decoration-2 decoration-foreground/30 ' +
+  'transition-[color,transform,text-decoration-color] duration-300 ease-out ' +
+  'hover:-translate-y-[1px] hover:text-accent hover:decoration-[color:var(--accent-primary)]';
+
+export const SHOP_LINK_MD = 'text-[15px]';
+export const SHOP_LINK_XS = 'text-xs';
+
+/**
+ * CTA interaction (додатково до SHOP_CTA_BASE).
+ * SHOP_CTA_BASE залишаємо як layout+typography+active.
+ */
+export const SHOP_CTA_INTERACTIVE =
+  'transition-[transform,filter,box-shadow] duration-700 ease-out';
+
+// Outline button (inverted to CTA; used in error pages, secondary actions)
+export const SHOP_OUTLINE_BTN_BASE =
+  'inline-flex items-center justify-center rounded-xl border px-4 py-2 ' +
+  'text-sm font-semibold uppercase tracking-[0.25em] ' +
+  'border-border text-foreground bg-transparent';
+
+export const SHOP_OUTLINE_BTN_INTERACTIVE =
+  'transition-[transform,box-shadow,border-color,color,background-color,filter] duration-500 ease-out ' +
+  'hover:-translate-y-[1px] hover:shadow-[var(--shop-chip-shadow-hover)] hover:brightness-110 ' +
+  'hover:border-[color:var(--accent-primary)] hover:text-[color:var(--accent-primary)]';
+
+// Nav/breadcrumb-ish links (e.g. "My orders", "Shop", "Back to ...")
+export const SHOP_NAV_LINK_BASE =
+  'inline-flex font-medium underline underline-offset-4 decoration-2 ' +
+  'text-muted-foreground decoration-foreground/30 ' +
+  'transition-[color,transform,text-decoration-color] duration-300 ease-out ' +
+  'hover:-translate-y-[1px] hover:text-accent hover:decoration-[color:var(--accent-primary)]';
+
+// Select / dropdown (e.g. sort)
+export const SHOP_SELECT_BASE =
+  'peer h-10 w-full appearance-none rounded-xl border border-border bg-background pl-3 pr-11 text-sm font-medium';
+
+export const SHOP_SELECT_INTERACTIVE =
+  'transition-[transform,box-shadow,border-color,color,background-color,filter] duration-500 ease-out ' +
+  'hover:-translate-y-[1px] hover:shadow-[var(--shop-chip-shadow-hover)] hover:border-foreground/40 hover:brightness-110';
+
+export function shopCtaGradient(baseVar: string, hoverVar: string) {
+  return {
+    background: `linear-gradient(90deg, var(${baseVar}) 0%, var(${hoverVar}) 100%)`,
+  } as const;
+}

From be2ddbbb279eee8c99ea116496e5ee60eaf2f0c9 Mon Sep 17 00:00:00 2001
From: Viktor Svertoka <victor.svertoka@gmail.com>
Date: Sun, 1 Feb 2026 00:23:20 +0200
Subject: [PATCH 04/24] Host (#237)

* feat(md) add netlify status

* feat(files): add packages

* fix(auth): use currentTarget for email input validity
---
 .../components/auth/fields/EmailField.tsx     |    6 +-
 frontend/package-lock.json                    | 6421 +++++++----------
 frontend/package.json                         |    4 +-
 studio/package-lock.json                      |  620 +-
 studio/package.json                           |    2 +-
 5 files changed, 2780 insertions(+), 4273 deletions(-)

diff --git a/frontend/components/auth/fields/EmailField.tsx b/frontend/components/auth/fields/EmailField.tsx
index 972b448e..5a3344f5 100644
--- a/frontend/components/auth/fields/EmailField.tsx
+++ b/frontend/components/auth/fields/EmailField.tsx
@@ -12,7 +12,7 @@ export function EmailField({
     const t = useTranslations("auth.fields");
 
     const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
-        const input = e.target;
+        const input = e.currentTarget;
         if (input.validity.valueMissing) {
             input.setCustomValidity(t("validation.required"));
         } else if (input.validity.typeMismatch) {
@@ -35,9 +35,9 @@ export function EmailField({
             onInput={handleInput}
             onChange={
                 onChange
-                    ? e => onChange(e.target.value)
+                    ? e => onChange(e.currentTarget.value)
                     : undefined
             }
         />
     );
-}
\ No newline at end of file
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 124f811a..1feeeba8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "frontend",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "0.5.0",
+      "version": "0.5.1",
       "dependencies": {
         "@neondatabase/serverless": "^1.0.2",
         "@portabletext/react": "^5.0.0",
@@ -40,10 +40,11 @@
         "react-dom": "^19.2.1",
         "sonner": "^2.0.7",
         "stripe": "20.0.0",
-        "tailwind-merge": "^3.4.0"
+        "tailwind-merge": "^3.4.0",
+        "zod": "^3.24.0"
       },
       "devDependencies": {
-        "@netlify/plugin-nextjs": "^5.15.1",
+        "@netlify/plugin-nextjs": "^5.15.7",
         "@tailwindcss/postcss": "^4",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.8.0",
@@ -119,9 +120,9 @@
       }
     },
     "node_modules/@asamuzakjp/dom-selector": {
-      "version": "6.7.6",
-      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.7.6.tgz",
-      "integrity": "sha512-hBaJER6A9MpdG3WgdlOolHmbOYvSk46y7IQN/1+iqiCuUu6iWdQrs9DGKF8ocqsEqWujWf/V7b7vaDgiUmIvUg==",
+      "version": "6.7.7",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.7.7.tgz",
+      "integrity": "sha512-8CO/UQ4tzDd7ula+/CVimJIVWez99UJlbMyIgk8xOnhAVPKLnBZmUFYVgugS441v2ZqUq5EnSh6B0Ua0liSFAA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -129,7 +130,7 @@
         "bidi-js": "^1.0.3",
         "css-tree": "^3.1.0",
         "is-potential-custom-element-name": "^1.0.1",
-        "lru-cache": "^11.2.4"
+        "lru-cache": "^11.2.5"
       }
     },
     "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
@@ -149,4552 +150,3106 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@aws-crypto/sha256-browser": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@aws-crypto/sha256-browser/-/sha256-browser-5.2.0.tgz",
-      "integrity": "sha512-AXfN/lGotSQwu6HNcEsIASo7kWXZ5HYWvfOmSNKDsEqC4OashTp8alTmaz+F7TC2L083SFv5RdB+qU3Vs1kZqw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-crypto/sha256-js": "^5.2.0",
-        "@aws-crypto/supports-web-crypto": "^5.2.0",
-        "@aws-crypto/util": "^5.2.0",
-        "@aws-sdk/types": "^3.222.0",
-        "@aws-sdk/util-locate-window": "^3.0.0",
-        "@smithy/util-utf8": "^2.0.0",
-        "tslib": "^2.6.2"
-      }
-    },
-    "node_modules/@aws-crypto/sha256-browser/node_modules/@smithy/is-array-buffer": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/is-array-buffer/-/is-array-buffer-2.2.0.tgz",
-      "integrity": "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA==",
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^2.6.2"
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-crypto/sha256-browser/node_modules/@smithy/util-buffer-from": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-buffer-from/-/util-buffer-from-2.2.0.tgz",
-      "integrity": "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA==",
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz",
+      "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/is-array-buffer": "^2.2.0",
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-crypto/sha256-browser/node_modules/@smithy/util-utf8": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-utf8/-/util-utf8-2.3.0.tgz",
-      "integrity": "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A==",
+    "node_modules/@babel/core": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/util-buffer-from": "^2.2.0",
-        "tslib": "^2.6.2"
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
       },
       "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@aws-crypto/sha256-js": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@aws-crypto/sha256-js/-/sha256-js-5.2.0.tgz",
-      "integrity": "sha512-FFQQyu7edu4ufvIZ+OadFpHHOt+eSTBaYaki44c+akjg7qZg9oOQeLlk77F6tSYqjDAFClrHJk9tMf0HdVyOvA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-crypto/util": "^5.2.0",
-        "@aws-sdk/types": "^3.222.0",
-        "tslib": "^2.6.2"
+        "node": ">=6.9.0"
       },
-      "engines": {
-        "node": ">=16.0.0"
-      }
-    },
-    "node_modules/@aws-crypto/supports-web-crypto": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@aws-crypto/supports-web-crypto/-/supports-web-crypto-5.2.0.tgz",
-      "integrity": "sha512-iAvUotm021kM33eCdNfwIN//F77/IADDSs58i+MDaOqFrVjZo9bAal0NK7HurRuWLLpF1iLX7gbWrjHjeo+YFg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.6.2"
-      }
-    },
-    "node_modules/@aws-crypto/util": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@aws-crypto/util/-/util-5.2.0.tgz",
-      "integrity": "sha512-4RkU9EsI6ZpBve5fseQlGNUWKMa1RLPQ1dnjnQoe07ldfIzcsGb5hC5W0Dm7u423KWzawlrpbjXBrXCEv9zazQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/types": "^3.222.0",
-        "@smithy/util-utf8": "^2.0.0",
-        "tslib": "^2.6.2"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
       }
     },
-    "node_modules/@aws-crypto/util/node_modules/@smithy/is-array-buffer": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/is-array-buffer/-/is-array-buffer-2.2.0.tgz",
-      "integrity": "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA==",
+    "node_modules/@babel/generator": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.0.tgz",
+      "integrity": "sha512-vSH118/wwM/pLR38g/Sgk05sNtro6TlTJKuiMXDaZqPUfjTFcudpCOt00IhOfj+1BFAX+UFAlzCU+6WXr3GLFQ==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^2.6.2"
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-crypto/util/node_modules/@smithy/util-buffer-from": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-buffer-from/-/util-buffer-from-2.2.0.tgz",
-      "integrity": "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA==",
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/is-array-buffer": "^2.2.0",
-        "tslib": "^2.6.2"
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-crypto/util/node_modules/@smithy/util-utf8": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-utf8/-/util-utf8-2.3.0.tgz",
-      "integrity": "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A==",
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/util-buffer-from": "^2.2.0",
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-sdk/client-sesv2": {
-      "version": "3.975.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/client-sesv2/-/client-sesv2-3.975.0.tgz",
-      "integrity": "sha512-4R+hR6N2LbvTIf6Y2e9b9PQlVkAD5WmSRMAGslul5L/jCE0LzOYC+4RQ7u5EOv0mERozcYleLPK2Zc0jTn4gTg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-crypto/sha256-browser": "5.2.0",
-        "@aws-crypto/sha256-js": "5.2.0",
-        "@aws-sdk/core": "^3.973.1",
-        "@aws-sdk/credential-provider-node": "^3.972.1",
-        "@aws-sdk/middleware-host-header": "^3.972.1",
-        "@aws-sdk/middleware-logger": "^3.972.1",
-        "@aws-sdk/middleware-recursion-detection": "^3.972.1",
-        "@aws-sdk/middleware-user-agent": "^3.972.2",
-        "@aws-sdk/region-config-resolver": "^3.972.1",
-        "@aws-sdk/signature-v4-multi-region": "3.972.0",
-        "@aws-sdk/types": "^3.973.0",
-        "@aws-sdk/util-endpoints": "3.972.0",
-        "@aws-sdk/util-user-agent-browser": "^3.972.1",
-        "@aws-sdk/util-user-agent-node": "^3.972.1",
-        "@smithy/config-resolver": "^4.4.6",
-        "@smithy/core": "^3.21.1",
-        "@smithy/fetch-http-handler": "^5.3.9",
-        "@smithy/hash-node": "^4.2.8",
-        "@smithy/invalid-dependency": "^4.2.8",
-        "@smithy/middleware-content-length": "^4.2.8",
-        "@smithy/middleware-endpoint": "^4.4.11",
-        "@smithy/middleware-retry": "^4.4.27",
-        "@smithy/middleware-serde": "^4.2.9",
-        "@smithy/middleware-stack": "^4.2.8",
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/node-http-handler": "^4.4.8",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/smithy-client": "^4.10.12",
-        "@smithy/types": "^4.12.0",
-        "@smithy/url-parser": "^4.2.8",
-        "@smithy/util-base64": "^4.3.0",
-        "@smithy/util-body-length-browser": "^4.2.0",
-        "@smithy/util-body-length-node": "^4.2.1",
-        "@smithy/util-defaults-mode-browser": "^4.3.26",
-        "@smithy/util-defaults-mode-node": "^4.2.29",
-        "@smithy/util-endpoints": "^3.2.8",
-        "@smithy/util-middleware": "^4.2.8",
-        "@smithy/util-retry": "^4.2.8",
-        "@smithy/util-utf8": "^4.2.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/client-sso": {
-      "version": "3.974.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/client-sso/-/client-sso-3.974.0.tgz",
-      "integrity": "sha512-ci+GiM0c4ULo4D79UMcY06LcOLcfvUfiyt8PzNY0vbt5O8BfCPYf4QomwVgkNcLLCYmroO4ge2Yy1EsLUlcD6g==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-crypto/sha256-browser": "5.2.0",
-        "@aws-crypto/sha256-js": "5.2.0",
-        "@aws-sdk/core": "^3.973.0",
-        "@aws-sdk/middleware-host-header": "^3.972.1",
-        "@aws-sdk/middleware-logger": "^3.972.1",
-        "@aws-sdk/middleware-recursion-detection": "^3.972.1",
-        "@aws-sdk/middleware-user-agent": "^3.972.1",
-        "@aws-sdk/region-config-resolver": "^3.972.1",
-        "@aws-sdk/types": "^3.973.0",
-        "@aws-sdk/util-endpoints": "3.972.0",
-        "@aws-sdk/util-user-agent-browser": "^3.972.1",
-        "@aws-sdk/util-user-agent-node": "^3.972.1",
-        "@smithy/config-resolver": "^4.4.6",
-        "@smithy/core": "^3.21.0",
-        "@smithy/fetch-http-handler": "^5.3.9",
-        "@smithy/hash-node": "^4.2.8",
-        "@smithy/invalid-dependency": "^4.2.8",
-        "@smithy/middleware-content-length": "^4.2.8",
-        "@smithy/middleware-endpoint": "^4.4.10",
-        "@smithy/middleware-retry": "^4.4.26",
-        "@smithy/middleware-serde": "^4.2.9",
-        "@smithy/middleware-stack": "^4.2.8",
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/node-http-handler": "^4.4.8",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/smithy-client": "^4.10.11",
-        "@smithy/types": "^4.12.0",
-        "@smithy/url-parser": "^4.2.8",
-        "@smithy/util-base64": "^4.3.0",
-        "@smithy/util-body-length-browser": "^4.2.0",
-        "@smithy/util-body-length-node": "^4.2.1",
-        "@smithy/util-defaults-mode-browser": "^4.3.25",
-        "@smithy/util-defaults-mode-node": "^4.2.28",
-        "@smithy/util-endpoints": "^3.2.8",
-        "@smithy/util-middleware": "^4.2.8",
-        "@smithy/util-retry": "^4.2.8",
-        "@smithy/util-utf8": "^4.2.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/core": {
-      "version": "3.973.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/core/-/core-3.973.1.tgz",
-      "integrity": "sha512-Ocubx42QsMyVs9ANSmFpRm0S+hubWljpPLjOi9UFrtcnVJjrVJTzQ51sN0e5g4e8i8QZ7uY73zosLmgYL7kZTQ==",
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@aws-sdk/types": "^3.973.0",
-        "@aws-sdk/xml-builder": "^3.972.1",
-        "@smithy/core": "^3.21.1",
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/signature-v4": "^5.3.8",
-        "@smithy/smithy-client": "^4.10.12",
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-base64": "^4.3.0",
-        "@smithy/util-middleware": "^4.2.8",
-        "@smithy/util-utf8": "^4.2.0",
-        "tslib": "^2.6.2"
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-sdk/credential-provider-env": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-env/-/credential-provider-env-3.972.1.tgz",
-      "integrity": "sha512-/etNHqnx96phy/SjI0HRC588o4vKH5F0xfkZ13yAATV7aNrb+5gYGNE6ePWafP+FuZ3HkULSSlJFj0AxgrAqYw==",
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.0",
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@aws-sdk/credential-provider-http": {
-      "version": "3.972.2",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-http/-/credential-provider-http-3.972.2.tgz",
-      "integrity": "sha512-mXgdaUfe5oM+tWKyeZ7Vh/iQ94FrkMky1uuzwTOmFADiRcSk5uHy/e3boEFedXiT/PRGzgBmqvJVK4F6lUISCg==",
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.973.1",
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/fetch-http-handler": "^5.3.9",
-        "@smithy/node-http-handler": "^4.4.8",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/smithy-client": "^4.10.12",
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-stream": "^4.5.10",
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-sdk/credential-provider-ini": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-ini/-/credential-provider-ini-3.972.1.tgz",
-      "integrity": "sha512-OdbJA3v+XlNDsrYzNPRUwr8l7gw1r/nR8l4r96MDzSBDU8WEo8T6C06SvwaXR8SpzsjO3sq5KMP86wXWg7Rj4g==",
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.973.0",
-        "@aws-sdk/credential-provider-env": "^3.972.1",
-        "@aws-sdk/credential-provider-http": "^3.972.1",
-        "@aws-sdk/credential-provider-login": "^3.972.1",
-        "@aws-sdk/credential-provider-process": "^3.972.1",
-        "@aws-sdk/credential-provider-sso": "^3.972.1",
-        "@aws-sdk/credential-provider-web-identity": "^3.972.1",
-        "@aws-sdk/nested-clients": "3.974.0",
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/credential-provider-imds": "^4.2.8",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/shared-ini-file-loader": "^4.4.3",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-sdk/credential-provider-login": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-login/-/credential-provider-login-3.972.1.tgz",
-      "integrity": "sha512-CccqDGL6ZrF3/EFWZefvKW7QwwRdxlHUO8NVBKNVcNq6womrPDvqB6xc9icACtE0XB0a7PLoSTkAg8bQVkTO2w==",
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.973.0",
-        "@aws-sdk/nested-clients": "3.974.0",
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/shared-ini-file-loader": "^4.4.3",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-sdk/credential-provider-node": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-node/-/credential-provider-node-3.972.1.tgz",
-      "integrity": "sha512-DwXPk9GfuU/xG9tmCyXFVkCr6X3W8ZCoL5Ptb0pbltEx1/LCcg7T+PBqDlPiiinNCD6ilIoMJDWsnJ8ikzZA7Q==",
+    "node_modules/@babel/helpers": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.6.tgz",
+      "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@aws-sdk/credential-provider-env": "^3.972.1",
-        "@aws-sdk/credential-provider-http": "^3.972.1",
-        "@aws-sdk/credential-provider-ini": "^3.972.1",
-        "@aws-sdk/credential-provider-process": "^3.972.1",
-        "@aws-sdk/credential-provider-sso": "^3.972.1",
-        "@aws-sdk/credential-provider-web-identity": "^3.972.1",
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/credential-provider-imds": "^4.2.8",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/shared-ini-file-loader": "^4.4.3",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.28.6"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-sdk/credential-provider-process": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-process/-/credential-provider-process-3.972.1.tgz",
-      "integrity": "sha512-bi47Zigu3692SJwdBvo8y1dEwE6B61stCwCFnuRWJVTfiM84B+VTSCV661CSWJmIZzmcy7J5J3kWyxL02iHj0w==",
+    "node_modules/@babel/parser": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
+      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.0",
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/shared-ini-file-loader": "^4.4.3",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@aws-sdk/credential-provider-sso": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-sso/-/credential-provider-sso-3.972.1.tgz",
-      "integrity": "sha512-dLZVNhM7wSgVUFsgVYgI5hb5Z/9PUkT46pk/SHrSmUqfx6YDvoV4YcPtaiRqviPpEGGiRtdQMEadyOKIRqulUQ==",
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/client-sso": "3.974.0",
-        "@aws-sdk/core": "^3.973.0",
-        "@aws-sdk/token-providers": "3.974.0",
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/shared-ini-file-loader": "^4.4.3",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-sdk/credential-provider-web-identity": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-web-identity/-/credential-provider-web-identity-3.972.1.tgz",
-      "integrity": "sha512-YMDeYgi0u687Ay0dAq/pFPKuijrlKTgsaB/UATbxCs/FzZfMiG4If5ksywHmmW7MiYUF8VVv+uou3TczvLrN4w==",
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@aws-sdk/core": "^3.973.0",
-        "@aws-sdk/nested-clients": "3.974.0",
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/shared-ini-file-loader": "^4.4.3",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-sdk/middleware-host-header": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-host-header/-/middleware-host-header-3.972.1.tgz",
-      "integrity": "sha512-/R82lXLPmZ9JaUGSUdKtBp2k/5xQxvBT3zZWyKiBOhyulFotlfvdlrO8TnqstBimsl4lYEYySDL+W6ldFh6ALg==",
+    "node_modules/@babel/traverse": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0",
+        "debug": "^4.3.1"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-sdk/middleware-logger": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-logger/-/middleware-logger-3.972.1.tgz",
-      "integrity": "sha512-JGgFl6cHg9G2FHu4lyFIzmFN8KESBiRr84gLC3Aeni0Gt1nKm+KxWLBuha/RPcXxJygGXCcMM4AykkIwxor8RA==",
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@aws-sdk/middleware-recursion-detection": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-recursion-detection/-/middleware-recursion-detection-3.972.1.tgz",
-      "integrity": "sha512-taGzNRe8vPHjnliqXIHp9kBgIemLE/xCaRTMH1NH0cncHeaPcjxtnCroAAM9aOlPuKvBe2CpZESyvM1+D8oI7Q==",
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/types": "^3.973.0",
-        "@aws/lambda-invoke-store": "^0.2.2",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@aws-sdk/middleware-sdk-s3": {
-      "version": "3.972.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-sdk-s3/-/middleware-sdk-s3-3.972.0.tgz",
-      "integrity": "sha512-0bcKFXWx+NZ7tIlOo7KjQ+O2rydiHdIQahrq+fN6k9Osky29v17guy68urUKfhTobR6iY6KvxkroFWaFtTgS5w==",
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "3.972.0",
-        "@aws-sdk/types": "3.972.0",
-        "@aws-sdk/util-arn-parser": "3.972.0",
-        "@smithy/core": "^3.20.6",
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/signature-v4": "^5.3.8",
-        "@smithy/smithy-client": "^4.10.8",
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-config-provider": "^4.2.0",
-        "@smithy/util-middleware": "^4.2.8",
-        "@smithy/util-stream": "^4.5.10",
-        "@smithy/util-utf8": "^4.2.0",
-        "tslib": "^2.6.2"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@aws-sdk/middleware-sdk-s3/node_modules/@aws-sdk/core": {
-      "version": "3.972.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/core/-/core-3.972.0.tgz",
-      "integrity": "sha512-nEeUW2M9F+xdIaD98F5MBcQ4ITtykj3yKbgFZ6J0JtL3bq+Z90szQ6Yy8H/BLPYXTs3V4n9ifnBo8cprRDiE6A==",
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/types": "3.972.0",
-        "@aws-sdk/xml-builder": "3.972.0",
-        "@smithy/core": "^3.20.6",
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/signature-v4": "^5.3.8",
-        "@smithy/smithy-client": "^4.10.8",
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-base64": "^4.3.0",
-        "@smithy/util-middleware": "^4.2.8",
-        "@smithy/util-utf8": "^4.2.0",
-        "tslib": "^2.6.2"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
       }
     },
-    "node_modules/@aws-sdk/middleware-sdk-s3/node_modules/@aws-sdk/types": {
-      "version": "3.972.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/types/-/types-3.972.0.tgz",
-      "integrity": "sha512-U7xBIbLSetONxb2bNzHyDgND3oKGoIfmknrEVnoEU4GUSs+0augUOIn9DIWGUO2ETcRFdsRUnmx9KhPT9Ojbug==",
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
       "dev": true,
-      "license": "Apache-2.0",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
       },
       "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/middleware-sdk-s3/node_modules/@aws-sdk/xml-builder": {
-      "version": "3.972.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/xml-builder/-/xml-builder-3.972.0.tgz",
-      "integrity": "sha512-POaGMcXnozzqBUyJM3HLUZ9GR6OKJWPGJEmhtTnxZXt8B6JcJ/6K3xRJ5H/j8oovVLz8Wg6vFxAHv8lvuASxMg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "fast-xml-parser": "5.2.5",
-        "tslib": "^2.6.2"
+        "node": ">=18"
       },
-      "engines": {
-        "node": ">=20.0.0"
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
       }
     },
-    "node_modules/@aws-sdk/middleware-user-agent": {
-      "version": "3.972.2",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-user-agent/-/middleware-user-agent-3.972.2.tgz",
-      "integrity": "sha512-d+Exq074wy0X6wvShg/kmZVtkah+28vMuqCtuY3cydg8LUZOJBtbAolCpEJizSyb8mJJZF9BjWaTANXL4OYnkg==",
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.973.1",
-        "@aws-sdk/types": "^3.973.0",
-        "@aws-sdk/util-endpoints": "3.972.0",
-        "@smithy/core": "^3.21.1",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
       }
     },
-    "node_modules/@aws-sdk/nested-clients": {
-      "version": "3.974.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/nested-clients/-/nested-clients-3.974.0.tgz",
-      "integrity": "sha512-k3dwdo/vOiHMJc9gMnkPl1BA5aQfTrZbz+8fiDkWrPagqAioZgmo5oiaOaeX0grObfJQKDtcpPFR4iWf8cgl8Q==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-crypto/sha256-browser": "5.2.0",
-        "@aws-crypto/sha256-js": "5.2.0",
-        "@aws-sdk/core": "^3.973.0",
-        "@aws-sdk/middleware-host-header": "^3.972.1",
-        "@aws-sdk/middleware-logger": "^3.972.1",
-        "@aws-sdk/middleware-recursion-detection": "^3.972.1",
-        "@aws-sdk/middleware-user-agent": "^3.972.1",
-        "@aws-sdk/region-config-resolver": "^3.972.1",
-        "@aws-sdk/types": "^3.973.0",
-        "@aws-sdk/util-endpoints": "3.972.0",
-        "@aws-sdk/util-user-agent-browser": "^3.972.1",
-        "@aws-sdk/util-user-agent-node": "^3.972.1",
-        "@smithy/config-resolver": "^4.4.6",
-        "@smithy/core": "^3.21.0",
-        "@smithy/fetch-http-handler": "^5.3.9",
-        "@smithy/hash-node": "^4.2.8",
-        "@smithy/invalid-dependency": "^4.2.8",
-        "@smithy/middleware-content-length": "^4.2.8",
-        "@smithy/middleware-endpoint": "^4.4.10",
-        "@smithy/middleware-retry": "^4.4.26",
-        "@smithy/middleware-serde": "^4.2.9",
-        "@smithy/middleware-stack": "^4.2.8",
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/node-http-handler": "^4.4.8",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/smithy-client": "^4.10.11",
-        "@smithy/types": "^4.12.0",
-        "@smithy/url-parser": "^4.2.8",
-        "@smithy/util-base64": "^4.3.0",
-        "@smithy/util-body-length-browser": "^4.2.0",
-        "@smithy/util-body-length-node": "^4.2.1",
-        "@smithy/util-defaults-mode-browser": "^4.3.25",
-        "@smithy/util-defaults-mode-node": "^4.2.28",
-        "@smithy/util-endpoints": "^3.2.8",
-        "@smithy/util-middleware": "^4.2.8",
-        "@smithy/util-retry": "^4.2.8",
-        "@smithy/util-utf8": "^4.2.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/region-config-resolver": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/region-config-resolver/-/region-config-resolver-3.972.1.tgz",
-      "integrity": "sha512-voIY8RORpxLAEgEkYaTFnkaIuRwVBEc+RjVZYcSSllPV+ZEKAacai6kNhJeE3D70Le+JCfvRb52tng/AVHY+jQ==",
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.26.tgz",
+      "integrity": "sha512-6boXK0KkzT5u5xOgF6TKB+CLq9SOpEGmkZw0g5n9/7yg85wab3UzSxB8TxhLJ31L4SGJ6BCFRw/iftTha1CJXA==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/config-resolver": "^4.4.6",
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0"
     },
-    "node_modules/@aws-sdk/signature-v4-multi-region": {
-      "version": "3.972.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/signature-v4-multi-region/-/signature-v4-multi-region-3.972.0.tgz",
-      "integrity": "sha512-2udiRijmjpN81Pvajje4TsjbXDZNP6K9bYUanBYH8hXa/tZG5qfGCySD+TyX0sgDxCQmEDMg3LaQdfjNHBDEgQ==",
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/middleware-sdk-s3": "3.972.0",
-        "@aws-sdk/types": "3.972.0",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/signature-v4": "^5.3.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@aws-sdk/signature-v4-multi-region/node_modules/@aws-sdk/types": {
-      "version": "3.972.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/types/-/types-3.972.0.tgz",
-      "integrity": "sha512-U7xBIbLSetONxb2bNzHyDgND3oKGoIfmknrEVnoEU4GUSs+0augUOIn9DIWGUO2ETcRFdsRUnmx9KhPT9Ojbug==",
+    "node_modules/@emnapi/core": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
+      "integrity": "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@aws-sdk/token-providers": {
-      "version": "3.974.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/token-providers/-/token-providers-3.974.0.tgz",
-      "integrity": "sha512-cBykL0LiccKIgNhGWvQRTPvsBLPZxnmJU3pYxG538jpFX8lQtrCy1L7mmIHNEdxIdIGEPgAEHF8/JQxgBToqUQ==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
+      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@aws-sdk/core": "^3.973.0",
-        "@aws-sdk/nested-clients": "3.974.0",
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/shared-ini-file-loader": "^4.4.3",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@aws-sdk/types": {
-      "version": "3.973.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/types/-/types-3.973.0.tgz",
-      "integrity": "sha512-jYIdB7a7jhRTvyb378nsjyvJh1Si+zVduJ6urMNGpz8RjkmHZ+9vM2H07XaIB2Cfq0GhJRZYOfUCH8uqQhqBkQ==",
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@aws-sdk/util-arn-parser": {
-      "version": "3.972.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/util-arn-parser/-/util-arn-parser-3.972.0.tgz",
-      "integrity": "sha512-RM5Mmo/KJ593iMSrALlHEOcc9YOIyOsDmS5x2NLOMdEmzv1o00fcpAkCQ02IGu1eFneBFT7uX0Mpag0HI+Cz2g==",
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
+      "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@aws-sdk/util-endpoints": {
-      "version": "3.972.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/util-endpoints/-/util-endpoints-3.972.0.tgz",
-      "integrity": "sha512-6JHsl1V/a1ZW8D8AFfd4R52fwZPnZ5H4U6DS8m/bWT8qad72NvbOFAC7U2cDtFs2TShqUO3TEiX/EJibtY3ijg==",
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
+      "integrity": "sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/types": "3.972.0",
-        "@smithy/types": "^4.12.0",
-        "@smithy/url-parser": "^4.2.8",
-        "@smithy/util-endpoints": "^3.2.8",
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@aws-sdk/util-endpoints/node_modules/@aws-sdk/types": {
-      "version": "3.972.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/types/-/types-3.972.0.tgz",
-      "integrity": "sha512-U7xBIbLSetONxb2bNzHyDgND3oKGoIfmknrEVnoEU4GUSs+0augUOIn9DIWGUO2ETcRFdsRUnmx9KhPT9Ojbug==",
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
+      "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@aws-sdk/util-locate-window": {
-      "version": "3.965.3",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/util-locate-window/-/util-locate-window-3.965.3.tgz",
-      "integrity": "sha512-FNUqAjlKAGA7GM05kywE99q8wiPHPZqrzhq3wXRga6PRD6A0kzT85Pb0AzYBVTBRpSrKyyr6M92Y6bnSBVp2BA==",
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
+      "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@aws-sdk/util-user-agent-browser": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/util-user-agent-browser/-/util-user-agent-browser-3.972.1.tgz",
-      "integrity": "sha512-IgF55NFmJX8d9Wql9M0nEpk2eYbuD8G4781FN4/fFgwTXBn86DvlZJuRWDCMcMqZymnBVX7HW9r+3r9ylqfW0w==",
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
+      "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/types": "^4.12.0",
-        "bowser": "^2.11.0",
-        "tslib": "^2.6.2"
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
-    "node_modules/@aws-sdk/util-user-agent-node": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/util-user-agent-node/-/util-user-agent-node-3.972.1.tgz",
-      "integrity": "sha512-oIs4JFcADzoZ0c915R83XvK2HltWupxNsXUIuZse2rgk7b97zTpkxaqXiH0h9ylh31qtgo/t8hp4tIqcsMrEbQ==",
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
+      "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/middleware-user-agent": "^3.972.1",
-        "@aws-sdk/types": "^3.973.0",
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "aws-crt": ">=1.0.0"
-      },
-      "peerDependenciesMeta": {
-        "aws-crt": {
-          "optional": true
-        }
+        "node": ">=18"
       }
     },
-    "node_modules/@aws-sdk/xml-builder": {
-      "version": "3.972.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/xml-builder/-/xml-builder-3.972.1.tgz",
-      "integrity": "sha512-6zZGlPOqn7Xb+25MAXGb1JhgvaC5HjZj6GzszuVrnEgbhvzBRFGKYemuHBV4bho+dtqeYKPgaZUv7/e80hIGNg==",
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "fast-xml-parser": "5.2.5",
-        "tslib": "^2.6.2"
-      },
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@aws/lambda-invoke-store": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@aws/lambda-invoke-store/-/lambda-invoke-store-0.2.3.tgz",
-      "integrity": "sha512-oLvsaPMTBejkkmHhjf09xTgk71mOqyr/409NKhRIL08If7AhVfUsJhVsx386uJaqNd42v9kWamQ9lFbkoC2dYw==",
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
+      "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": ">=18.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/code-frame": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz",
-      "integrity": "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==",
-      "dev": true,
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
+      "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.1.1"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/compat-data": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.6.tgz",
-      "integrity": "sha512-2lfu57JtzctfIrcGMz992hyLlByuzgIk58+hhGCxjKZ3rWI82NnVLjXcaTqkI2NvlcvOskZaiZ5kjUALo3Lpxg==",
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
+      "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/core": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.6.tgz",
-      "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
+      "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/generator": "^7.28.6",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helpers": "^7.28.6",
-        "@babel/parser": "^7.28.6",
-        "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6",
-        "@jridgewell/remapping": "^2.3.5",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/generator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.6.tgz",
-      "integrity": "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw==",
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz",
+      "integrity": "sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==",
+      "cpu": [
+        "loong64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.28.6",
-        "@babel/types": "^7.28.6",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "jsesc": "^3.0.2"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
-      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
+      "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
+      "cpu": [
+        "mips64el"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.28.6",
-        "@babel/helper-validator-option": "^7.27.1",
-        "browserslist": "^4.24.0",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
+      "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
-      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
+      "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
-      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
+      "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
+      "cpu": [
+        "s390x"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.28.6",
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "@babel/traverse": "^7.28.6"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
+      "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
-      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/helpers": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.6.tgz",
-      "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==",
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.28.6"
-      },
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/parser": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.6.tgz",
-      "integrity": "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.28.6"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/runtime": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
-      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/template": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
-      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/parser": "^7.28.6",
-        "@babel/types": "^7.28.6"
-      },
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/traverse": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.6.tgz",
-      "integrity": "sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg==",
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
+      "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/generator": "^7.28.6",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.6",
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.28.6",
-        "debug": "^4.3.1"
-      },
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/types": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.6.tgz",
-      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
+      "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.28.5"
-      },
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@bcoe/v8-coverage": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
-      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
+      "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
         "node": ">=18"
       }
     },
-    "node_modules/@csstools/color-helpers": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
-      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
+      "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
       ],
-      "license": "MIT-0",
       "engines": {
         "node": ">=18"
       }
     },
-    "node_modules/@csstools/css-calc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
-      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
+      "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
+      "cpu": [
+        "x64"
       ],
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
         "node": ">=18"
-      },
-      "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^3.0.5",
-        "@csstools/css-tokenizer": "^3.0.4"
       }
     },
-    "node_modules/@csstools/css-color-parser": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
-      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
       "license": "MIT",
       "dependencies": {
-        "@csstools/color-helpers": "^5.1.0",
-        "@csstools/css-calc": "^2.1.4"
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
-        "node": ">=18"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       },
       "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^3.0.5",
-        "@csstools/css-tokenizer": "^3.0.4"
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
-    "node_modules/@csstools/css-parser-algorithms": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
-      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "license": "MIT",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=18"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
-      "peerDependencies": {
-        "@csstools/css-tokenizer": "^3.0.4"
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@csstools/css-syntax-patches-for-csstree": {
-      "version": "1.0.26",
-      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.26.tgz",
-      "integrity": "sha512-6boXK0KkzT5u5xOgF6TKB+CLq9SOpEGmkZw0g5n9/7yg85wab3UzSxB8TxhLJ31L4SGJ6BCFRw/iftTha1CJXA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "license": "MIT-0"
-    },
-    "node_modules/@csstools/css-tokenizer": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
-      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
       "license": "MIT",
       "engines": {
-        "node": ">=18"
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
-      "integrity": "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==",
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@emnapi/wasi-threads": "1.1.0",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
-      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@emnapi/wasi-threads": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
-      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "tslib": "^2.4.0"
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
-      "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
-      "cpu": [
-        "ppc64"
-      ],
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "*"
       }
     },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
-      "integrity": "sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
       "engines": {
-        "node": ">=12"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
-      "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
-      "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
+      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
-      "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
-      "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "*"
       }
     },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@eslint/js": {
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
       }
     },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
-      "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=18"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
-      "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
-      "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@exodus/bytes": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.10.0.tgz",
+      "integrity": "sha512-tf8YdcbirXdPnJ+Nd4UN1EXnz+IP2DI45YVEr3vvzcVTOyrApkmIB4zvOQVd3XPr7RXnfBtAx+PXImXOIU0Ajg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
-      "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-3.1.0.tgz",
+      "integrity": "sha512-CjP1sUzM7XiQW6YluDreN+dMvcKZysO/J4ikvuDjDyd6nSOoSqAK9gvD1s75ZFaJVXtYOsz+y3CUXPZ1sKxcxw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "@formatjs/fast-memoize": "3.1.0",
+        "@formatjs/intl-localematcher": "0.8.0",
+        "decimal.js": "^10.6.0",
+        "tslib": "^2.8.1"
       }
     },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz",
-      "integrity": "sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
+    "node_modules/@formatjs/ecma402-abstract/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.8.0.tgz",
+      "integrity": "sha512-zgMYWdUlmEZpX2Io+v3LHrfq9xZ6khpQVf9UAw2xYWhGerGgI9XgH1HvL/A34jWiruUJpYlP5pk4g8nIcaDrXQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "@formatjs/fast-memoize": "3.1.0",
+        "tslib": "^2.8.1"
       }
     },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
-      "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-3.1.0.tgz",
+      "integrity": "sha512-b5mvSWCI+XVKiz5WhnBCY3RJ4ZwfjAidU0yVlKa3d3MSgKmH1hC3tBGEAtYyN5mqL7N0G5x0BOUYyO8CEupWgg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "tslib": "^2.8.1"
       }
     },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
-      "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.0.tgz",
+      "integrity": "sha512-Q01XuvtbDVCJQsG/E2MSfMZ+UdUoZV8v4Aex8tTH44SqKJZCeu5LjuclaKFUS0o1YoXndfEinJen5k1T1GR1vg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "3.1.0",
+        "@formatjs/icu-skeleton-parser": "2.1.0",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-2.1.0.tgz",
+      "integrity": "sha512-wNer4imHDFBVAJnMb2OGoSyM4wL/uuLnuo5mrenliqkDaNjRbG4jzlJcwTTDEBhai8iCjnzUsE7xwNJC29SfWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "3.1.0",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.10.tgz",
+      "integrity": "sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=18"
+        "node": ">=18.18.0"
       }
     },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
-      "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
-      "cpu": [
-        "riscv64"
-      ],
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=18.18.0"
       }
     },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
-      "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
-      "cpu": [
-        "s390x"
-      ],
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=18"
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
-      "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
       "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
       "license": "MIT",
       "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
         "node": ">=18"
       }
     },
-    "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
-        "netbsd"
+        "darwin"
       ],
       "engines": {
-        "node": ">=18"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
       }
     },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
-      "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
-        "netbsd"
+        "darwin"
       ],
       "engines": {
-        "node": ">=18"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
       }
     },
-    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
-        "openbsd"
+        "darwin"
       ],
-      "engines": {
-        "node": ">=18"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
-      "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
-        "openbsd"
+        "darwin"
       ],
-      "engines": {
-        "node": ">=18"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
-      "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
       "cpu": [
-        "arm64"
+        "arm"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
-        "openharmony"
+        "linux"
       ],
-      "engines": {
-        "node": ">=18"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
-      "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
-        "sunos"
+        "linux"
       ],
-      "engines": {
-        "node": ">=18"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
-      "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
-        "win32"
+        "linux"
       ],
-      "engines": {
-        "node": ">=18"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
-      "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
       "cpu": [
-        "ia32"
+        "x64"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
-        "win32"
+        "linux"
       ],
-      "engines": {
-        "node": ">=18"
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
-      "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
       "cpu": [
-        "x64"
+        "arm"
       ],
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
-        "win32"
+        "linux"
       ],
       "engines": {
-        "node": ">=18"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
       }
     },
-    "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
-      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eslint-visitor-keys": "^3.4.3"
-      },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
+        "url": "https://opencollective.com/libvips"
       },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
       }
     },
-    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
       "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
       }
     },
-    "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
-      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
-      "dev": true,
-      "license": "MIT",
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
       }
     },
-    "node_modules/@eslint/config-array": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
-      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
-      "dev": true,
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
       "license": "Apache-2.0",
-      "dependencies": {
-        "@eslint/object-schema": "^2.1.7",
-        "debug": "^4.3.1",
-        "minimatch": "^3.1.2"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
       }
     },
-    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@eslint/config-array/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "*"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
       }
     },
-    "node_modules/@eslint/config-helpers": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
-      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
-      "dev": true,
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
       "license": "Apache-2.0",
-      "dependencies": {
-        "@eslint/core": "^0.17.0"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
       }
     },
-    "node_modules/@eslint/core": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
-      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
-      "dev": true,
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
       "license": "Apache-2.0",
-      "dependencies": {
-        "@types/json-schema": "^7.0.15"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
       }
     },
-    "node_modules/@eslint/eslintrc": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
-      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
-      "dev": true,
-      "license": "MIT",
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
       "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^10.0.1",
-        "globals": "^14.0.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.1",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
+        "@emnapi/runtime": "^1.7.0"
       },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": "*"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@eslint/js": {
-      "version": "9.39.2",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
-      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
-      "dev": true,
-      "license": "MIT",
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
-        "url": "https://eslint.org/donate"
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@eslint/object-schema": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
-      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
       "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
-    "node_modules/@eslint/plugin-kit": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
-      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
       "dependencies": {
-        "@eslint/core": "^0.17.0",
-        "levn": "^0.4.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
-    "node_modules/@exodus/bytes": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.10.0.tgz",
-      "integrity": "sha512-tf8YdcbirXdPnJ+Nd4UN1EXnz+IP2DI45YVEr3vvzcVTOyrApkmIB4zvOQVd3XPr7RXnfBtAx+PXImXOIU0Ajg==",
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "@noble/hashes": "^1.8.0 || ^2.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@noble/hashes": {
-          "optional": true
-        }
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@formatjs/ecma402-abstract": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.6.tgz",
-      "integrity": "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==",
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@formatjs/fast-memoize": "2.2.7",
-        "@formatjs/intl-localematcher": "0.6.2",
-        "decimal.js": "^10.4.3",
-        "tslib": "^2.8.0"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@formatjs/ecma402-abstract/node_modules/@formatjs/intl-localematcher": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.2.tgz",
-      "integrity": "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
-    "node_modules/@formatjs/fast-memoize": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.7.tgz",
-      "integrity": "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
-    "node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.11.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.4.tgz",
-      "integrity": "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==",
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@formatjs/ecma402-abstract": "2.3.6",
-        "@formatjs/icu-skeleton-parser": "1.8.16",
-        "tslib": "^2.8.0"
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
       }
     },
-    "node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.8.16",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.16.tgz",
-      "integrity": "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==",
+    "node_modules/@neondatabase/serverless": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@neondatabase/serverless/-/serverless-1.0.2.tgz",
+      "integrity": "sha512-I5sbpSIAHiB+b6UttofhrN/UJXII+4tZPAq1qugzwCwLIL8EZLV7F/JyHUrEIiGgQpEXzpnjlJ+zwcEhheGvCw==",
       "license": "MIT",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "2.3.6",
-        "tslib": "^2.8.0"
+        "@types/node": "^22.15.30",
+        "@types/pg": "^8.8.0"
+      },
+      "engines": {
+        "node": ">=19.0.0"
       }
     },
-    "node_modules/@formatjs/intl-localematcher": {
-      "version": "0.5.10",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.10.tgz",
-      "integrity": "sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==",
+    "node_modules/@neondatabase/serverless/node_modules/@types/node": {
+      "version": "22.19.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.7.tgz",
+      "integrity": "sha512-MciR4AKGHWl7xwxkBa6xUGxQJ4VBOmPTF7sL+iGzuahOFaO0jHCsuEfS80pan1ef4gWId1oWOweIhrDEYLuaOw==",
       "license": "MIT",
       "dependencies": {
-        "tslib": "2"
-      }
-    },
-    "node_modules/@humanfs/core": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
-      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=18.18.0"
+        "undici-types": "~6.21.0"
       }
     },
-    "node_modules/@humanfs/node": {
-      "version": "0.16.7",
-      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
-      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+    "node_modules/@netlify/plugin-nextjs": {
+      "version": "5.15.7",
+      "resolved": "https://registry.npmjs.org/@netlify/plugin-nextjs/-/plugin-nextjs-5.15.7.tgz",
+      "integrity": "sha512-tSlGTwOR/dFZMrjhCxynlwc/NkOwY+bc0gurOranLtwASH5wat2WqZaPkyIdfVdNd/zNpmGxgbkH0uppg1Lsxg==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@humanfs/core": "^0.19.1",
-        "@humanwhocodes/retry": "^0.4.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=18.18.0"
+        "node": ">=18.0.0"
       }
     },
-    "node_modules/@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=12.22"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
-      }
+    "node_modules/@next/env": {
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.6.tgz",
+      "integrity": "sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==",
+      "license": "MIT"
     },
-    "node_modules/@humanwhocodes/retry": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
-      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.0.1.tgz",
+      "integrity": "sha512-g4Cqmv/gyFEXNeVB2HkqDlYKfy+YrlM2k8AVIO/YQVEPfhVruH1VA99uT1zELLnPLIeOnx8IZ6Ddso0asfTIdw==",
       "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=18.18"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
-      }
-    },
-    "node_modules/@img/colour": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
-      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
       "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=18"
+      "dependencies": {
+        "fast-glob": "3.3.1"
       }
     },
-    "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
-      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.6.tgz",
+      "integrity": "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==",
       "cpu": [
         "arm64"
       ],
-      "license": "Apache-2.0",
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+        "node": ">= 10"
       }
     },
-    "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
-      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.6.tgz",
+      "integrity": "sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==",
       "cpu": [
         "x64"
       ],
-      "license": "Apache-2.0",
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.2.4"
+        "node": ">= 10"
       }
     },
-    "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
-      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.6.tgz",
+      "integrity": "sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==",
       "cpu": [
         "arm64"
       ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
-      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
-      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "LGPL-3.0-or-later",
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
-      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.6.tgz",
+      "integrity": "sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==",
       "cpu": [
         "arm64"
       ],
-      "license": "LGPL-3.0-or-later",
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
-      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.6.tgz",
+      "integrity": "sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==",
       "cpu": [
-        "ppc64"
+        "x64"
       ],
-      "license": "LGPL-3.0-or-later",
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-riscv64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
-      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.6.tgz",
+      "integrity": "sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==",
       "cpu": [
-        "riscv64"
+        "x64"
       ],
-      "license": "LGPL-3.0-or-later",
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
-      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.6.tgz",
+      "integrity": "sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==",
       "cpu": [
-        "s390x"
+        "arm64"
       ],
-      "license": "LGPL-3.0-or-later",
+      "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
+        "win32"
       ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
-      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.6.tgz",
+      "integrity": "sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==",
       "cpu": [
         "x64"
       ],
-      "license": "LGPL-3.0-or-later",
+      "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
+        "win32"
       ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
-      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
       }
     },
-    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
-      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.6",
+        "@parcel/watcher-darwin-arm64": "2.5.6",
+        "@parcel/watcher-darwin-x64": "2.5.6",
+        "@parcel/watcher-freebsd-x64": "2.5.6",
+        "@parcel/watcher-linux-arm-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm-musl": "2.5.6",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm64-musl": "2.5.6",
+        "@parcel/watcher-linux-x64-glibc": "2.5.6",
+        "@parcel/watcher-linux-x64-musl": "2.5.6",
+        "@parcel/watcher-win32-arm64": "2.5.6",
+        "@parcel/watcher-win32-ia32": "2.5.6",
+        "@parcel/watcher-win32-x64": "2.5.6"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
       "cpu": [
-        "x64"
+        "arm64"
       ],
-      "license": "LGPL-3.0-or-later",
+      "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
+        "android"
       ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
       "funding": {
-        "url": "https://opencollective.com/libvips"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
-      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
       "cpu": [
-        "arm"
+        "arm64"
       ],
-      "license": "Apache-2.0",
+      "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
+        "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.2.4"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
-      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
       "cpu": [
-        "arm64"
+        "x64"
       ],
-      "license": "Apache-2.0",
+      "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
+        "darwin"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.2.4"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
-      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
       "cpu": [
-        "ppc64"
+        "x64"
       ],
-      "license": "Apache-2.0",
+      "license": "MIT",
       "optional": true,
       "os": [
-        "linux"
+        "freebsd"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-linux-riscv64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
-      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
       "cpu": [
-        "riscv64"
+        "arm"
       ],
-      "license": "Apache-2.0",
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
-      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
       "cpu": [
-        "s390x"
+        "arm"
       ],
-      "license": "Apache-2.0",
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.2.4"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
-      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
       "cpu": [
-        "x64"
+        "arm64"
       ],
-      "license": "Apache-2.0",
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.2.4"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
-      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
       "cpu": [
         "arm64"
       ],
-      "license": "Apache-2.0",
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
-      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
       "cpu": [
         "x64"
       ],
-      "license": "Apache-2.0",
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
-      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
       "cpu": [
-        "wasm32"
+        "x64"
       ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "license": "MIT",
       "optional": true,
-      "dependencies": {
-        "@emnapi/runtime": "^1.7.0"
-      },
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
-      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
       "cpu": [
         "arm64"
       ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
-      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
       "cpu": [
         "ia32"
       ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@img/sharp-win32-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
-      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
       "cpu": [
         "x64"
       ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ],
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+        "node": ">= 10.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/libvips"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
-      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
+    "node_modules/@parcel/watcher/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
-      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
+    "node_modules/@portabletext/react": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@portabletext/react/-/react-5.0.0.tgz",
+      "integrity": "sha512-ZEYhjsiUn2Dvrhyao3qAvi6C/re9ZBt2atp14dtwWtPruMNgp1uMf3p+URf0pEEhu+rMEh9JeK0A8FgNejEWCg==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
+        "@portabletext/toolkit": "^4.0.0",
+        "@portabletext/types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=20.19 <22 || >=22.12"
+      },
+      "peerDependencies": {
+        "react": "^18.2 || ^19"
       }
     },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
+    "node_modules/@portabletext/toolkit": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@portabletext/toolkit/-/toolkit-4.0.0.tgz",
+      "integrity": "sha512-Jj/QIy3vzZCNcxiUGM7KjGhUhyVjch+9pOzotWRARPNe07R6nbF/cRsKL70q5Xizf+6PVtFYwks4CSXKInC+wg==",
       "license": "MIT",
+      "dependencies": {
+        "@portabletext/types": "^3.0.0"
+      },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=20.19 <22 || >=22.12"
       }
     },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
-      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.31",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
-      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
+    "node_modules/@portabletext/types": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@portabletext/types/-/types-3.0.1.tgz",
+      "integrity": "sha512-Axessc2mZ6tjbD2qIZdTZIEfBtzJBe/1pzKF372cUar6ccUCfgXU4vaKgIbqB33mB6rI75omx9rrm+SgR4rIAA==",
       "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
+      "engines": {
+        "node": ">=20.19 <22 || >=22.12"
       }
     },
-    "node_modules/@napi-rs/wasm-runtime": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
-      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
-      "dev": true,
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.3",
-        "@emnapi/runtime": "^1.4.3",
-        "@tybys/wasm-util": "^0.10.0"
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@neondatabase/serverless": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@neondatabase/serverless/-/serverless-1.0.2.tgz",
-      "integrity": "sha512-I5sbpSIAHiB+b6UttofhrN/UJXII+4tZPAq1qugzwCwLIL8EZLV7F/JyHUrEIiGgQpEXzpnjlJ+zwcEhheGvCw==",
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
       "license": "MIT",
       "dependencies": {
-        "@types/node": "^22.15.30",
-        "@types/pg": "^8.8.0"
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
-      "engines": {
-        "node": ">=19.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@neondatabase/serverless/node_modules/@types/node": {
-      "version": "22.19.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.7.tgz",
-      "integrity": "sha512-MciR4AKGHWl7xwxkBa6xUGxQJ4VBOmPTF7sL+iGzuahOFaO0jHCsuEfS80pan1ef4gWId1oWOweIhrDEYLuaOw==",
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.21.0"
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@netlify/plugin-nextjs": {
-      "version": "5.15.6",
-      "resolved": "https://registry.npmjs.org/@netlify/plugin-nextjs/-/plugin-nextjs-5.15.6.tgz",
-      "integrity": "sha512-SZa4a0nBllKNaVV19kIFBuZ6p8Lt3Hagrw5gxysm2qs5AMQJRQfJq6av+rnRwCk8w/zNn2FShF4Fckk4+L1Hzg==",
-      "dev": true,
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
       "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@next/env": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.4.tgz",
-      "integrity": "sha512-gkrXnZyxPUy0Gg6SrPQPccbNVLSP3vmW8LU5dwEttEEC1RwDivk8w4O+sZIjFvPrSICXyhQDCG+y3VmjlJf+9A==",
-      "license": "MIT"
-    },
-    "node_modules/@next/eslint-plugin-next": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.0.1.tgz",
-      "integrity": "sha512-g4Cqmv/gyFEXNeVB2HkqDlYKfy+YrlM2k8AVIO/YQVEPfhVruH1VA99uT1zELLnPLIeOnx8IZ6Ddso0asfTIdw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fast-glob": "3.3.1"
-      }
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.4.tgz",
-      "integrity": "sha512-T8atLKuvk13XQUdVLCv1ZzMPgLPW0+DWWbHSQXs0/3TjPrKNxTmUIhOEaoEyl3Z82k8h/gEtqyuoZGv6+Ugawg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.4.tgz",
-      "integrity": "sha512-AKC/qVjUGUQDSPI6gESTx0xOnOPQ5gttogNS3o6bA83yiaSZJek0Am5yXy82F1KcZCx3DdOwdGPZpQCluonuxg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.4.tgz",
-      "integrity": "sha512-POQ65+pnYOkZNdngWfMEt7r53bzWiKkVNbjpmCt1Zb3V6lxJNXSsjwRuTQ8P/kguxDC8LRkqaL3vvsFrce4dMQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.4.tgz",
-      "integrity": "sha512-3Wm0zGYVCs6qDFAiSSDL+Z+r46EdtCv/2l+UlIdMbAq9hPJBvGu/rZOeuvCaIUjbArkmXac8HnTyQPJFzFWA0Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.4.tgz",
-      "integrity": "sha512-lWAYAezFinaJiD5Gv8HDidtsZdT3CDaCeqoPoJjeB57OqzvMajpIhlZFce5sCAH6VuX4mdkxCRqecCJFwfm2nQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.4.tgz",
-      "integrity": "sha512-fHaIpT7x4gA6VQbdEpYUXRGyge/YbRrkG6DXM60XiBqDM2g2NcrsQaIuj375egnGFkJow4RHacgBOEsHfGbiUw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.4.tgz",
-      "integrity": "sha512-MCrXxrTSE7jPN1NyXJr39E+aNFBrQZtO154LoCz7n99FuKqJDekgxipoodLNWdQP7/DZ5tKMc/efybx1l159hw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.4.tgz",
-      "integrity": "sha512-JSVlm9MDhmTXw/sO2PE/MRj+G6XOSMZB+BcZ0a7d6KwVFZVpkHcb2okyoYFBaco6LeiL53BBklRlOrDDbOeE5w==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nolyfill/is-core-module": {
-      "version": "1.0.39",
-      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
-      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.4.0"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@parcel/watcher": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
-      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
-      "hasInstallScript": true,
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
       "license": "MIT",
-      "dependencies": {
-        "detect-libc": "^2.0.3",
-        "is-glob": "^4.0.3",
-        "node-addon-api": "^7.0.0",
-        "picomatch": "^4.0.3"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
-      "optionalDependencies": {
-        "@parcel/watcher-android-arm64": "2.5.6",
-        "@parcel/watcher-darwin-arm64": "2.5.6",
-        "@parcel/watcher-darwin-x64": "2.5.6",
-        "@parcel/watcher-freebsd-x64": "2.5.6",
-        "@parcel/watcher-linux-arm-glibc": "2.5.6",
-        "@parcel/watcher-linux-arm-musl": "2.5.6",
-        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
-        "@parcel/watcher-linux-arm64-musl": "2.5.6",
-        "@parcel/watcher-linux-x64-glibc": "2.5.6",
-        "@parcel/watcher-linux-x64-musl": "2.5.6",
-        "@parcel/watcher-win32-arm64": "2.5.6",
-        "@parcel/watcher-win32-ia32": "2.5.6",
-        "@parcel/watcher-win32-x64": "2.5.6"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
-      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
-      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-x64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
-      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
-      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
-      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-musl": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
-      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
-      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
-      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
-      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
-      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-arm64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
-      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-ia32": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
-      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
-      "cpu": [
-        "ia32"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-x64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
-      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/@portabletext/react": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@portabletext/react/-/react-5.0.0.tgz",
-      "integrity": "sha512-ZEYhjsiUn2Dvrhyao3qAvi6C/re9ZBt2atp14dtwWtPruMNgp1uMf3p+URf0pEEhu+rMEh9JeK0A8FgNejEWCg==",
-      "license": "MIT",
-      "dependencies": {
-        "@portabletext/toolkit": "^4.0.0",
-        "@portabletext/types": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=20.19 <22 || >=22.12"
-      },
-      "peerDependencies": {
-        "react": "^18.2 || ^19"
-      }
-    },
-    "node_modules/@portabletext/toolkit": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@portabletext/toolkit/-/toolkit-4.0.0.tgz",
-      "integrity": "sha512-Jj/QIy3vzZCNcxiUGM7KjGhUhyVjch+9pOzotWRARPNe07R6nbF/cRsKL70q5Xizf+6PVtFYwks4CSXKInC+wg==",
-      "license": "MIT",
-      "dependencies": {
-        "@portabletext/types": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=20.19 <22 || >=22.12"
-      }
-    },
-    "node_modules/@portabletext/types": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@portabletext/types/-/types-3.0.1.tgz",
-      "integrity": "sha512-Axessc2mZ6tjbD2qIZdTZIEfBtzJBe/1pzKF372cUar6ccUCfgXU4vaKgIbqB33mB6rI75omx9rrm+SgR4rIAA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.19 <22 || >=22.12"
-      }
-    },
-    "node_modules/@radix-ui/primitive": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
-      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
-      "license": "MIT"
-    },
-    "node_modules/@radix-ui/react-accordion": {
-      "version": "1.2.12",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
-      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.3",
-        "@radix-ui/react-collapsible": "1.1.12",
-        "@radix-ui/react-collection": "1.1.7",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-collapsible": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
-      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.3",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-presence": "1.1.5",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-collection": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
-      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-slot": "1.2.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
-      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-context": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
-      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-direction": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
-      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-id": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
-      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-presence": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
-      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-primitive": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
-      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-slot": "1.2.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-radio-group": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
-      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.3",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-presence": "1.1.5",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-roving-focus": "1.1.11",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-use-previous": "1.1.1",
-        "@radix-ui/react-use-size": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-roving-focus": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
-      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.3",
-        "@radix-ui/react-collection": "1.1.7",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
-      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-tabs": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
-      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.3",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-presence": "1.1.5",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-roving-focus": "1.1.11",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
-      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
-      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-effect-event": "0.0.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-effect-event": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
-      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
-      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-previous": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
-      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-size": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
-      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.56.0.tgz",
-      "integrity": "sha512-LNKIPA5k8PF1+jAFomGe3qN3bbIgJe/IlpDBwuVjrDKrJhVWywgnJvflMt/zkbVNLFtF1+94SljYQS6e99klnw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.56.0.tgz",
-      "integrity": "sha512-lfbVUbelYqXlYiU/HApNMJzT1E87UPGvzveGg2h0ktUNlOCxKlWuJ9jtfvs1sKHdwU4fzY7Pl8sAl49/XaEk6Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.56.0.tgz",
-      "integrity": "sha512-EgxD1ocWfhoD6xSOeEEwyE7tDvwTgZc8Bss7wCWe+uc7wO8G34HHCUH+Q6cHqJubxIAnQzAsyUsClt0yFLu06w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.56.0.tgz",
-      "integrity": "sha512-1vXe1vcMOssb/hOF8iv52A7feWW2xnu+c8BV4t1F//m9QVLTfNVpEdja5ia762j/UEJe2Z1jAmEqZAK42tVW3g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.56.0.tgz",
-      "integrity": "sha512-bof7fbIlvqsyv/DtaXSck4VYQ9lPtoWNFCB/JY4snlFuJREXfZnm+Ej6yaCHfQvofJDXLDMTVxWscVSuQvVWUQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.56.0.tgz",
-      "integrity": "sha512-KNa6lYHloW+7lTEkYGa37fpvPq+NKG/EHKM8+G/g9WDU7ls4sMqbVRV78J6LdNuVaeeK5WB9/9VAFbKxcbXKYg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.56.0.tgz",
-      "integrity": "sha512-E8jKK87uOvLrrLN28jnAAAChNq5LeCd2mGgZF+fGF5D507WlG/Noct3lP/QzQ6MrqJ5BCKNwI9ipADB6jyiq2A==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.56.0.tgz",
-      "integrity": "sha512-jQosa5FMYF5Z6prEpTCCmzCXz6eKr/tCBssSmQGEeozA9tkRUty/5Vx06ibaOP9RCrW1Pvb8yp3gvZhHwTDsJw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.56.0.tgz",
-      "integrity": "sha512-uQVoKkrC1KGEV6udrdVahASIsaF8h7iLG0U0W+Xn14ucFwi6uS539PsAr24IEF9/FoDtzMeeJXJIBo5RkbNWvQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.56.0.tgz",
-      "integrity": "sha512-vLZ1yJKLxhQLFKTs42RwTwa6zkGln+bnXc8ueFGMYmBTLfNu58sl5/eXyxRa2RarTkJbXl8TKPgfS6V5ijNqEA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.56.0.tgz",
-      "integrity": "sha512-FWfHOCub564kSE3xJQLLIC/hbKqHSVxy8vY75/YHHzWvbJL7aYJkdgwD/xGfUlL5UV2SB7otapLrcCj2xnF1dg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.56.0.tgz",
-      "integrity": "sha512-z1EkujxIh7nbrKL1lmIpqFTc/sr0u8Uk0zK/qIEFldbt6EDKWFk/pxFq3gYj4Bjn3aa9eEhYRlL3H8ZbPT1xvA==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.56.0.tgz",
-      "integrity": "sha512-iNFTluqgdoQC7AIE8Q34R3AuPrJGJirj5wMUErxj22deOcY7XwZRaqYmB6ZKFHoVGqRcRd0mqO+845jAibKCkw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.56.0.tgz",
-      "integrity": "sha512-MtMeFVlD2LIKjp2sE2xM2slq3Zxf9zwVuw0jemsxvh1QOpHSsSzfNOTH9uYW9i1MXFxUSMmLpeVeUzoNOKBaWg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.56.0.tgz",
-      "integrity": "sha512-in+v6wiHdzzVhYKXIk5U74dEZHdKN9KH0Q4ANHOTvyXPG41bajYRsy7a8TPKbYPl34hU7PP7hMVHRvv/5aCSew==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.56.0.tgz",
-      "integrity": "sha512-yni2raKHB8m9NQpI9fPVwN754mn6dHQSbDTwxdr9SE0ks38DTjLMMBjrwvB5+mXrX+C0npX0CVeCUcvvvD8CNQ==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.56.0.tgz",
-      "integrity": "sha512-zhLLJx9nQPu7wezbxt2ut+CI4YlXi68ndEve16tPc/iwoylWS9B3FxpLS2PkmfYgDQtosah07Mj9E0khc3Y+vQ==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.56.0.tgz",
-      "integrity": "sha512-MVC6UDp16ZSH7x4rtuJPAEoE1RwS8N4oK9DLHy3FTEdFoUTCFVzMfJl/BVJ330C+hx8FfprA5Wqx4FhZXkj2Kw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.56.0.tgz",
-      "integrity": "sha512-ZhGH1eA4Qv0lxaV00azCIS1ChedK0V32952Md3FtnxSqZTBTd6tgil4nZT5cU8B+SIw3PFYkvyR4FKo2oyZIHA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.56.0.tgz",
-      "integrity": "sha512-O16XcmyDeFI9879pEcmtWvD/2nyxR9mF7Gs44lf1vGGx8Vg2DRNx11aVXBEqOQhWb92WN4z7fW/q4+2NYzCbBA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.56.0.tgz",
-      "integrity": "sha512-LhN/Reh+7F3RCgQIRbgw8ZMwUwyqJM+8pXNT6IIJAqm2IdKkzpCh/V9EdgOMBKuebIrzswqy4ATlrDgiOwbRcQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.56.0.tgz",
-      "integrity": "sha512-kbFsOObXp3LBULg1d3JIUQMa9Kv4UitDmpS+k0tinPBz3watcUiV2/LUDMMucA6pZO3WGE27P7DsfaN54l9ing==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.56.0.tgz",
-      "integrity": "sha512-vSSgny54D6P4vf2izbtFm/TcWYedw7f8eBrOiGGecyHyQB9q4Kqentjaj8hToe+995nob/Wv48pDqL5a62EWtg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.56.0.tgz",
-      "integrity": "sha512-FeCnkPCTHQJFbiGG49KjV5YGW/8b9rrXAM2Mz2kiIoktq2qsJxRD5giEMEOD2lPdgs72upzefaUvS+nc8E3UzQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.56.0.tgz",
-      "integrity": "sha512-H8AE9Ur/t0+1VXujj90w0HrSOuv0Nq9r1vSZF2t5km20NTfosQsGGUXDaKdQZzwuLts7IyL1fYT4hM95TI9c4g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rtsao/scc": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
-      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@sanity/client": {
-      "version": "7.14.1",
-      "resolved": "https://registry.npmjs.org/@sanity/client/-/client-7.14.1.tgz",
-      "integrity": "sha512-lCDx0vuNUgg9FL2E5Hiv1q7u6iHd1Z+jjMZAaYtfzzFPoBKOiyZlaFwqyLVHRyTbwnXQdIGDPmx2AvfBTbGQsQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@sanity/eventsource": "^5.0.2",
-        "get-it": "^8.7.0",
-        "nanoid": "^3.3.11",
-        "rxjs": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=20"
-      }
-    },
-    "node_modules/@sanity/eventsource": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@sanity/eventsource/-/eventsource-5.0.2.tgz",
-      "integrity": "sha512-/B9PMkUvAlUrpRq0y+NzXgRv5lYCLxZNsBJD2WXVnqZYOfByL9oQBV7KiTaARuObp5hcQYuPfOAVjgXe3hrixA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/event-source-polyfill": "1.0.5",
-        "@types/eventsource": "1.1.15",
-        "event-source-polyfill": "1.0.31",
-        "eventsource": "2.0.2"
-      }
-    },
-    "node_modules/@sanity/image-url": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@sanity/image-url/-/image-url-1.2.0.tgz",
-      "integrity": "sha512-pYRhti+lDi22it+npWXkEGuYyzbXJLF+d0TYLiyWbKu46JHhYhTDKkp6zmGu4YKF5cXUjT6pnUjFsaf2vlB9nQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/@schummar/icu-type-parser": {
-      "version": "1.21.5",
-      "resolved": "https://registry.npmjs.org/@schummar/icu-type-parser/-/icu-type-parser-1.21.5.tgz",
-      "integrity": "sha512-bXHSaW5jRTmke9Vd0h5P7BtWZG9Znqb8gSDxZnxaGSJnGwPLDPfS+3g0BKzeWqzgZPsIVZkM7m2tbo18cm5HBw==",
-      "license": "MIT"
-    },
-    "node_modules/@smithy/abort-controller": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/abort-controller/-/abort-controller-4.2.8.tgz",
-      "integrity": "sha512-peuVfkYHAmS5ybKxWcfraK7WBBP0J+rkfUcbHJJKQ4ir3UAUNQI+Y4Vt/PqSzGqgloJ5O1dk7+WzNL8wcCSXbw==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/config-resolver": {
-      "version": "4.4.6",
-      "resolved": "https://registry.npmjs.org/@smithy/config-resolver/-/config-resolver-4.4.6.tgz",
-      "integrity": "sha512-qJpzYC64kaj3S0fueiu3kXm8xPrR3PcXDPEgnaNMRn0EjNSZFoFjvbUp0YUDsRhN1CB90EnHJtbxWKevnH99UQ==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-config-provider": "^4.2.0",
-        "@smithy/util-endpoints": "^3.2.8",
-        "@smithy/util-middleware": "^4.2.8",
-        "tslib": "^2.6.2"
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/core": {
-      "version": "3.21.1",
-      "resolved": "https://registry.npmjs.org/@smithy/core/-/core-3.21.1.tgz",
-      "integrity": "sha512-NUH8R4O6FkN8HKMojzbGg/5pNjsfTjlMmeFclyPfPaXXUrbr5TzhWgbf7t92wfrpCHRgpjyz7ffASIS3wX28aA==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/middleware-serde": "^4.2.9",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-base64": "^4.3.0",
-        "@smithy/util-body-length-browser": "^4.2.0",
-        "@smithy/util-middleware": "^4.2.8",
-        "@smithy/util-stream": "^4.5.10",
-        "@smithy/util-utf8": "^4.2.0",
-        "@smithy/uuid": "^1.1.0",
-        "tslib": "^2.6.2"
+        "@radix-ui/react-slot": "1.2.3"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/credential-provider-imds": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/credential-provider-imds/-/credential-provider-imds-4.2.8.tgz",
-      "integrity": "sha512-FNT0xHS1c/CPN8upqbMFP83+ul5YgdisfCfkZ86Jh2NSmnqw/AJ6x5pEogVCTVvSm7j9MopRU89bmDelxuDMYw==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/types": "^4.12.0",
-        "@smithy/url-parser": "^4.2.8",
-        "tslib": "^2.6.2"
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/fetch-http-handler": {
-      "version": "5.3.9",
-      "resolved": "https://registry.npmjs.org/@smithy/fetch-http-handler/-/fetch-http-handler-5.3.9.tgz",
-      "integrity": "sha512-I4UhmcTYXBrct03rwzQX1Y/iqQlzVQaPxWjCjula++5EmWq9YGBrx6bbGqluGc1f0XEfhSkiY4jhLgbsJUMKRA==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/querystring-builder": "^4.2.8",
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-base64": "^4.3.0",
-        "tslib": "^2.6.2"
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/hash-node": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/hash-node/-/hash-node-4.2.8.tgz",
-      "integrity": "sha512-7ZIlPbmaDGxVoxErDZnuFG18WekhbA/g2/i97wGj+wUBeS6pcUeAym8u4BXh/75RXWhgIJhyC11hBzig6MljwA==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-buffer-from": "^4.2.0",
-        "@smithy/util-utf8": "^4.2.0",
-        "tslib": "^2.6.2"
+        "@radix-ui/react-compose-refs": "1.1.2"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/invalid-dependency": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/invalid-dependency/-/invalid-dependency-4.2.8.tgz",
-      "integrity": "sha512-N9iozRybwAQ2dn9Fot9kI6/w9vos2oTXLhtK7ovGqwZjlOcxu6XhPlpLpC+INsxktqHinn5gS2DXDjDF2kG5sQ==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/is-array-buffer": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/is-array-buffer/-/is-array-buffer-4.2.0.tgz",
-      "integrity": "sha512-DZZZBvC7sjcYh4MazJSGiWMI2L7E0oCiRHREDzIxi/M2LY79/21iXt6aPLHge82wi5LsuRF5A06Ds3+0mlh6CQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.6.2"
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/middleware-content-length": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/middleware-content-length/-/middleware-content-length-4.2.8.tgz",
-      "integrity": "sha512-RO0jeoaYAB1qBRhfVyq0pMgBoUK34YEJxVxyjOWYZiOKOq2yMZ4MnVXMZCUDenpozHue207+9P5ilTV1zeda0A==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/middleware-endpoint": {
-      "version": "4.4.11",
-      "resolved": "https://registry.npmjs.org/@smithy/middleware-endpoint/-/middleware-endpoint-4.4.11.tgz",
-      "integrity": "sha512-/WqsrycweGGfb9sSzME4CrsuayjJF6BueBmkKlcbeU5q18OhxRrvvKlmfw3tpDsK5ilx2XUJvoukwxHB0nHs/Q==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/core": "^3.21.1",
-        "@smithy/middleware-serde": "^4.2.9",
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/shared-ini-file-loader": "^4.4.3",
-        "@smithy/types": "^4.12.0",
-        "@smithy/url-parser": "^4.2.8",
-        "@smithy/util-middleware": "^4.2.8",
-        "tslib": "^2.6.2"
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/middleware-retry": {
-      "version": "4.4.27",
-      "resolved": "https://registry.npmjs.org/@smithy/middleware-retry/-/middleware-retry-4.4.27.tgz",
-      "integrity": "sha512-xFUYCGRVsfgiN5EjsJJSzih9+yjStgMTCLANPlf0LVQkPDYCe0hz97qbdTZosFOiYlGBlHYityGRxrQ/hxhfVQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/service-error-classification": "^4.2.8",
-        "@smithy/smithy-client": "^4.10.12",
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-middleware": "^4.2.8",
-        "@smithy/util-retry": "^4.2.8",
-        "@smithy/uuid": "^1.1.0",
-        "tslib": "^2.6.2"
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/middleware-serde": {
-      "version": "4.2.9",
-      "resolved": "https://registry.npmjs.org/@smithy/middleware-serde/-/middleware-serde-4.2.9.tgz",
-      "integrity": "sha512-eMNiej0u/snzDvlqRGSN3Vl0ESn3838+nKyVfF2FKNXFbi4SERYT6PR392D39iczngbqqGG0Jl1DlCnp7tBbXQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/middleware-stack": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/middleware-stack/-/middleware-stack-4.2.8.tgz",
-      "integrity": "sha512-w6LCfOviTYQjBctOKSwy6A8FIkQy7ICvglrZFl6Bw4FmcQ1Z420fUtIhxaUZZshRe0VCq4kvDiPiXrPZAe8oRA==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
-      "engines": {
-        "node": ">=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@smithy/node-config-provider": {
-      "version": "4.3.8",
-      "resolved": "https://registry.npmjs.org/@smithy/node-config-provider/-/node-config-provider-4.3.8.tgz",
-      "integrity": "sha512-aFP1ai4lrbVlWjfpAfRSL8KFcnJQYfTl5QxLJXY32vghJrDuFyPZ6LtUL+JEGYiFRG1PfPLHLoxj107ulncLIg==",
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
+      "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/shared-ini-file-loader": "^4.4.3",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
     },
-    "node_modules/@smithy/node-http-handler": {
-      "version": "4.4.8",
-      "resolved": "https://registry.npmjs.org/@smithy/node-http-handler/-/node-http-handler-4.4.8.tgz",
-      "integrity": "sha512-q9u+MSbJVIJ1QmJ4+1u+cERXkrhuILCBDsJUBAW1MPE6sFonbCNaegFuwW9ll8kh5UdyY3jOkoOGlc7BesoLpg==",
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
+      "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/abort-controller": "^4.2.8",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/querystring-builder": "^4.2.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
     },
-    "node_modules/@smithy/property-provider": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/property-provider/-/property-provider-4.2.8.tgz",
-      "integrity": "sha512-EtCTbyIveCKeOXDSWSdze3k612yCPq1YbXsbqX3UHhkOSW8zKsM9NOJG5gTIya0vbY2DIaieG8pKo1rITHYL0w==",
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
+      "integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
     },
-    "node_modules/@smithy/protocol-http": {
-      "version": "5.3.8",
-      "resolved": "https://registry.npmjs.org/@smithy/protocol-http/-/protocol-http-5.3.8.tgz",
-      "integrity": "sha512-QNINVDhxpZ5QnP3aviNHQFlRogQZDfYlCkQT+7tJnErPQbDhysondEjhikuANxgMsZrkGeiAxXy4jguEGsDrWQ==",
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
+      "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
     },
-    "node_modules/@smithy/querystring-builder": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/querystring-builder/-/querystring-builder-4.2.8.tgz",
-      "integrity": "sha512-Xr83r31+DrE8CP3MqPgMJl+pQlLLmOfiEUnoyAlGzzJIrEsbKsPy1hqH0qySaQm4oWrCBlUqRt+idEgunKB+iw==",
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
+      "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-uri-escape": "^4.2.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
     },
-    "node_modules/@smithy/querystring-parser": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/querystring-parser/-/querystring-parser-4.2.8.tgz",
-      "integrity": "sha512-vUurovluVy50CUlazOiXkPq40KGvGWSdmusa3130MwrR1UNnNgKAlj58wlOe61XSHRpUfIIh6cE0zZ8mzKaDPA==",
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
+      "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
     },
-    "node_modules/@smithy/service-error-classification": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/service-error-classification/-/service-error-classification-4.2.8.tgz",
-      "integrity": "sha512-mZ5xddodpJhEt3RkCjbmUQuXUOaPNTkbMGR0bcS8FE0bJDLMZlhmpgrvPNCYglVw5rsYTpSnv19womw9WWXKQQ==",
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
+      "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.12.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/shared-ini-file-loader": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/@smithy/shared-ini-file-loader/-/shared-ini-file-loader-4.4.3.tgz",
-      "integrity": "sha512-DfQjxXQnzC5UbCUPeC3Ie8u+rIWZTvuDPAGU/BxzrOGhRvgUanaP68kDZA+jaT3ZI+djOf+4dERGlm9mWfFDrg==",
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
+      "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/signature-v4": {
-      "version": "5.3.8",
-      "resolved": "https://registry.npmjs.org/@smithy/signature-v4/-/signature-v4-5.3.8.tgz",
-      "integrity": "sha512-6A4vdGj7qKNRF16UIcO8HhHjKW27thsxYci+5r/uVRkdcBEkOEiY8OMPuydLX4QHSrJqGHPJzPRwwVTqbLZJhg==",
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
+      "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/is-array-buffer": "^4.2.0",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-hex-encoding": "^4.2.0",
-        "@smithy/util-middleware": "^4.2.8",
-        "@smithy/util-uri-escape": "^4.2.0",
-        "@smithy/util-utf8": "^4.2.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/smithy-client": {
-      "version": "4.10.12",
-      "resolved": "https://registry.npmjs.org/@smithy/smithy-client/-/smithy-client-4.10.12.tgz",
-      "integrity": "sha512-VKO/HKoQ5OrSHW6AJUmEnUKeXI1/5LfCwO9cwyao7CmLvGnZeM1i36Lyful3LK1XU7HwTVieTqO1y2C/6t3qtA==",
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
+      "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/core": "^3.21.1",
-        "@smithy/middleware-endpoint": "^4.4.11",
-        "@smithy/middleware-stack": "^4.2.8",
-        "@smithy/protocol-http": "^5.3.8",
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-stream": "^4.5.10",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/types": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-4.12.0.tgz",
-      "integrity": "sha512-9YcuJVTOBDjg9LWo23Qp0lTQ3D7fQsQtwle0jVfpbUHy9qBwCEgKuVH4FqFB3VYu0nwdHKiEMA+oXz7oV8X1kw==",
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
+      "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
+      "cpu": [
+        "loong64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/url-parser": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/url-parser/-/url-parser-4.2.8.tgz",
-      "integrity": "sha512-NQho9U68TGMEU639YkXnVMV3GEFFULmmaWdlu1E9qzyIePOHsoSnagTGSDv1Zi8DCNN6btxOSdgmy5E/hsZwhA==",
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
+      "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
+      "cpu": [
+        "loong64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/querystring-parser": "^4.2.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/util-base64": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-base64/-/util-base64-4.3.0.tgz",
-      "integrity": "sha512-GkXZ59JfyxsIwNTWFnjmFEI8kZpRNIBfxKjv09+nkAWPt/4aGaEWMM04m4sxgNVWkbt2MdSvE3KF/PfX4nFedQ==",
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
+      "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/util-buffer-from": "^4.2.0",
-        "@smithy/util-utf8": "^4.2.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/util-body-length-browser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-body-length-browser/-/util-body-length-browser-4.2.0.tgz",
-      "integrity": "sha512-Fkoh/I76szMKJnBXWPdFkQJl2r9SjPt3cMzLdOB6eJ4Pnpas8hVoWPYemX/peO0yrrvldgCUVJqOAjUrOLjbxg==",
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
+      "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/util-body-length-node": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@smithy/util-body-length-node/-/util-body-length-node-4.2.1.tgz",
-      "integrity": "sha512-h53dz/pISVrVrfxV1iqXlx5pRg3V2YWFcSQyPyXZRrZoZj4R4DeWRDo1a7dd3CPTcFi3kE+98tuNyD2axyZReA==",
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
+      "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/util-buffer-from": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-buffer-from/-/util-buffer-from-4.2.0.tgz",
-      "integrity": "sha512-kAY9hTKulTNevM2nlRtxAG2FQ3B2OR6QIrPY3zE5LqJy1oxzmgBGsHLWTcNhWXKchgA0WHW+mZkQrng/pgcCew==",
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
+      "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
+      "cpu": [
+        "s390x"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/is-array-buffer": "^4.2.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/util-config-provider": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-config-provider/-/util-config-provider-4.2.0.tgz",
-      "integrity": "sha512-YEjpl6XJ36FTKmD+kRJJWYvrHeUvm5ykaUS5xK+6oXffQPHeEM4/nXlZPe+Wu0lsgRUcNZiliYNh/y7q9c2y6Q==",
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/util-defaults-mode-browser": {
-      "version": "4.3.26",
-      "resolved": "https://registry.npmjs.org/@smithy/util-defaults-mode-browser/-/util-defaults-mode-browser-4.3.26.tgz",
-      "integrity": "sha512-vva0dzYUTgn7DdE0uaha10uEdAgmdLnNFowKFjpMm6p2R0XDk5FHPX3CBJLzWQkQXuEprsb0hGz9YwbicNWhjw==",
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
+      "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/smithy-client": "^4.10.12",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@smithy/util-defaults-mode-node": {
-      "version": "4.2.29",
-      "resolved": "https://registry.npmjs.org/@smithy/util-defaults-mode-node/-/util-defaults-mode-node-4.2.29.tgz",
-      "integrity": "sha512-c6D7IUBsZt/aNnTBHMTf+OVh+h/JcxUUgfTcIJaWRe6zhOum1X+pNKSZtZ+7fbOn5I99XVFtmrnXKv8yHHErTQ==",
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
+      "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/config-resolver": "^4.4.6",
-        "@smithy/credential-provider-imds": "^4.2.8",
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/property-provider": "^4.2.8",
-        "@smithy/smithy-client": "^4.10.12",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
     },
-    "node_modules/@smithy/util-endpoints": {
-      "version": "3.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/util-endpoints/-/util-endpoints-3.2.8.tgz",
-      "integrity": "sha512-8JaVTn3pBDkhZgHQ8R0epwWt+BqPSLCjdjXXusK1onwJlRuN69fbvSK66aIKKO7SwVFM6x2J2ox5X8pOaWcUEw==",
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
+      "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/node-config-provider": "^4.3.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
     },
-    "node_modules/@smithy/util-hex-encoding": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-hex-encoding/-/util-hex-encoding-4.2.0.tgz",
-      "integrity": "sha512-CCQBwJIvXMLKxVbO88IukazJD9a4kQ9ZN7/UMGBjBcJYvatpWk+9g870El4cB8/EJxfe+k+y0GmR9CAzkF+Nbw==",
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
+      "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/@smithy/util-middleware": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/util-middleware/-/util-middleware-4.2.8.tgz",
-      "integrity": "sha512-PMqfeJxLcNPMDgvPbbLl/2Vpin+luxqTGPpW3NAQVLbRrFRzTa4rNAASYeIGjRV9Ytuhzny39SpyU04EQreF+A==",
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
+      "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/@smithy/util-retry": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@smithy/util-retry/-/util-retry-4.2.8.tgz",
-      "integrity": "sha512-CfJqwvoRY0kTGe5AkQokpURNCT1u/MkRzMTASWMPPo2hNSnKtF1D45dQl3DE2LKLr4m+PW9mCeBMJr5mCAVThg==",
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/service-error-classification": "^4.2.8",
-        "@smithy/types": "^4.12.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/@smithy/util-stream": {
-      "version": "4.5.10",
-      "resolved": "https://registry.npmjs.org/@smithy/util-stream/-/util-stream-4.5.10.tgz",
-      "integrity": "sha512-jbqemy51UFSZSp2y0ZmRfckmrzuKww95zT9BYMmuJ8v3altGcqjwoV1tzpOwuHaKrwQrCjIzOib499ymr2f98g==",
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
+      "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/fetch-http-handler": "^5.3.9",
-        "@smithy/node-http-handler": "^4.4.8",
-        "@smithy/types": "^4.12.0",
-        "@smithy/util-base64": "^4.3.0",
-        "@smithy/util-buffer-from": "^4.2.0",
-        "@smithy/util-hex-encoding": "^4.2.0",
-        "@smithy/util-utf8": "^4.2.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/@smithy/util-uri-escape": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-uri-escape/-/util-uri-escape-4.2.0.tgz",
-      "integrity": "sha512-igZpCKV9+E/Mzrpq6YacdTQ0qTiLm85gD6N/IrmyDvQFA4UnU3d5g3m8tMT/6zG/vVkWSU+VxeUyGonL62DuxA==",
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT"
+    },
+    "node_modules/@sanity/client": {
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/@sanity/client/-/client-7.14.1.tgz",
+      "integrity": "sha512-lCDx0vuNUgg9FL2E5Hiv1q7u6iHd1Z+jjMZAaYtfzzFPoBKOiyZlaFwqyLVHRyTbwnXQdIGDPmx2AvfBTbGQsQ==",
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^2.6.2"
+        "@sanity/eventsource": "^5.0.2",
+        "get-it": "^8.7.0",
+        "nanoid": "^3.3.11",
+        "rxjs": "^7.0.0"
       },
       "engines": {
-        "node": ">=18.0.0"
+        "node": ">=20"
       }
     },
-    "node_modules/@smithy/util-utf8": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-utf8/-/util-utf8-4.2.0.tgz",
-      "integrity": "sha512-zBPfuzoI8xyBtR2P6WQj63Rz8i3AmfAaJLuNG8dWsfvPe8lO4aCPYLn879mEgHndZH1zQ2oXmG8O1GGzzaoZiw==",
-      "dev": true,
-      "license": "Apache-2.0",
+    "node_modules/@sanity/eventsource": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@sanity/eventsource/-/eventsource-5.0.2.tgz",
+      "integrity": "sha512-/B9PMkUvAlUrpRq0y+NzXgRv5lYCLxZNsBJD2WXVnqZYOfByL9oQBV7KiTaARuObp5hcQYuPfOAVjgXe3hrixA==",
+      "license": "MIT",
       "dependencies": {
-        "@smithy/util-buffer-from": "^4.2.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
+        "@types/event-source-polyfill": "1.0.5",
+        "@types/eventsource": "1.1.15",
+        "event-source-polyfill": "1.0.31",
+        "eventsource": "2.0.2"
       }
     },
-    "node_modules/@smithy/uuid": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@smithy/uuid/-/uuid-1.1.0.tgz",
-      "integrity": "sha512-4aUIteuyxtBUhVdiQqcDhKFitwfd9hqoSDYY2KRXiWtgoWJ9Bmise+KfEPDiVHWeJepvF8xJO9/9+WDIciMFFw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.6.2"
-      },
+    "node_modules/@sanity/image-url": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@sanity/image-url/-/image-url-1.2.0.tgz",
+      "integrity": "sha512-pYRhti+lDi22it+npWXkEGuYyzbXJLF+d0TYLiyWbKu46JHhYhTDKkp6zmGu4YKF5cXUjT6pnUjFsaf2vlB9nQ==",
+      "license": "MIT",
       "engines": {
-        "node": ">=18.0.0"
+        "node": ">=10.0.0"
       }
     },
+    "node_modules/@schummar/icu-type-parser": {
+      "version": "1.21.5",
+      "resolved": "https://registry.npmjs.org/@schummar/icu-type-parser/-/icu-type-parser-1.21.5.tgz",
+      "integrity": "sha512-bXHSaW5jRTmke9Vd0h5P7BtWZG9Znqb8gSDxZnxaGSJnGwPLDPfS+3g0BKzeWqzgZPsIVZkM7m2tbo18cm5HBw==",
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
@@ -4703,9 +3258,9 @@
       "license": "MIT"
     },
     "node_modules/@stripe/react-stripe-js": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-5.4.1.tgz",
-      "integrity": "sha512-ipeYcAHa4EPmjwfv0lFE+YDVkOQ0TMKkFWamW+BqmnSkEln/hO8rmxGPPWcd9WjqABx6Ro8Xg4pAS7evCcR9cw==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-5.6.0.tgz",
+      "integrity": "sha512-tucu/vTGc+5NXbo2pUiaVjA4ENdRBET8qGS00BM4BAU8J4Pi3eY6BHollsP2+VSuzzlvXwMg0it3ZLhbCj2fPg==",
       "license": "MIT",
       "dependencies": {
         "prop-types": "^15.7.2"
@@ -4717,18 +3272,18 @@
       }
     },
     "node_modules/@stripe/stripe-js": {
-      "version": "8.6.4",
-      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.6.4.tgz",
-      "integrity": "sha512-ipBq9+YEt5i4FxotkwNlQDqXvt//9ts23XQ4zgwm7yOkU/k3ZHnNRnm7dR418r5nC455dVYEzP7eERUHLrIYhA==",
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.7.0.tgz",
+      "integrity": "sha512-tNUerSstwNC1KuHgX4CASGO0Md3CB26IJzSXmVlSuFvhsBP4ZaEPpY4jxWOn9tfdDscuVT4Kqb8cZ2o9nLCgRQ==",
       "license": "MIT",
       "engines": {
         "node": ">=12.16"
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.10.tgz",
-      "integrity": "sha512-U72pGqmJYbjrLhMndIemZ7u9Q9owcJczGxwtfJlz/WwMaGYAV/g4nkGiUVk/+QSX8sFCAjanovcU1IUsP2YulA==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.11.tgz",
+      "integrity": "sha512-QoIupRWVH8AF1TgxYyeA5nS18dtqMuxNwchjBIwJo3RdwLEFiJq6onOx9JAxHtuPwUkIVuU2Xbp+jCJ7Vzmgtg==",
       "cpu": [
         "arm64"
       ],
@@ -4742,9 +3297,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.10.tgz",
-      "integrity": "sha512-NZpDXtwHH083L40xdyj1sY31MIwLgOxKfZEAGCI8xHXdHa+GWvEiVdGiu4qhkJctoHFzAEc7ZX3GN5phuJcPuQ==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.11.tgz",
+      "integrity": "sha512-S52Gu1QtPSfBYDiejlcfp9GlN+NjTZBRRNsz8PNwBgSE626/FUf2PcllVUix7jqkoMC+t0rS8t+2/aSWlMuQtA==",
       "cpu": [
         "x64"
       ],
@@ -4758,9 +3313,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.10.tgz",
-      "integrity": "sha512-ioieF5iuRziUF1HkH1gg1r93e055dAdeBAPGAk40VjqpL5/igPJ/WxFHGvc6WMLhUubSJI4S0AiZAAhEAp1jDg==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.11.tgz",
+      "integrity": "sha512-lXJs8oXo6Z4yCpimpQ8vPeCjkgoHu5NoMvmJZ8qxDyU99KVdg6KwU9H79vzrmB+HfH+dCZ7JGMqMF//f8Cfvdg==",
       "cpu": [
         "arm"
       ],
@@ -4774,9 +3329,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.10.tgz",
-      "integrity": "sha512-tD6BClOrxSsNus9cJL7Gxdv7z7Y2hlyvZd9l0NQz+YXzmTWqnfzLpg16ovEI7gknH2AgDBB5ywOsqu8hUgSeEQ==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.11.tgz",
+      "integrity": "sha512-chRsz1K52/vj8Mfq/QOugVphlKPWlMh10V99qfH41hbGvwAU6xSPd681upO4bKiOr9+mRIZZW+EfJqY42ZzRyA==",
       "cpu": [
         "arm64"
       ],
@@ -4790,9 +3345,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.10.tgz",
-      "integrity": "sha512-4uAHO3nbfbrTcmO/9YcVweTQdx5fN3l7ewwl5AEK4yoC4wXmoBTEPHAVdKNe4r9+xrTgd4BgyPsy0409OjjlMw==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.11.tgz",
+      "integrity": "sha512-PYftgsTaGnfDK4m6/dty9ryK1FbLk+LosDJ/RJR2nkXGc8rd+WenXIlvHjWULiBVnS1RsjHHOXmTS4nDhe0v0w==",
       "cpu": [
         "arm64"
       ],
@@ -4806,9 +3361,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.10.tgz",
-      "integrity": "sha512-W0h9ONNw1pVIA0cN7wtboOSTl4Jk3tHq+w2cMPQudu9/+3xoCxpFb9ZdehwCAk29IsvdWzGzY6P7dDVTyFwoqg==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.11.tgz",
+      "integrity": "sha512-DKtnJKIHiZdARyTKiX7zdRjiDS1KihkQWatQiCHMv+zc2sfwb4Glrodx2VLOX4rsa92NLR0Sw8WLcPEMFY1szQ==",
       "cpu": [
         "x64"
       ],
@@ -4822,9 +3377,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.10.tgz",
-      "integrity": "sha512-XQNZlLZB62S8nAbw7pqoqwy91Ldy2RpaMRqdRN3T+tAg6Xg6FywXRKCsLh6IQOadr4p1+lGnqM/Wn35z5a/0Vw==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.11.tgz",
+      "integrity": "sha512-mUjjntHj4+8WBaiDe5UwRNHuEzLjIWBTSGTw0JT9+C9/Yyuh4KQqlcEQ3ro6GkHmBGXBFpGIj/o5VMyRWfVfWw==",
       "cpu": [
         "x64"
       ],
@@ -4838,9 +3393,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.10.tgz",
-      "integrity": "sha512-qnAGrRv5Nj/DATxAmCnJQRXXQqnJwR0trxLndhoHoxGci9MuguNIjWahS0gw8YZFjgTinbTxOwzatkoySihnmw==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.11.tgz",
+      "integrity": "sha512-ZkNNG5zL49YpaFzfl6fskNOSxtcZ5uOYmWBkY4wVAvgbSAQzLRVBp+xArGWh2oXlY/WgL99zQSGTv7RI5E6nzA==",
       "cpu": [
         "arm64"
       ],
@@ -4854,9 +3409,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.10.tgz",
-      "integrity": "sha512-i4X/q8QSvzVlaRtv1xfnfl+hVKpCfiJ+9th484rh937fiEZKxZGf51C+uO0lfKDP1FfnT6C1yBYwHy7FLBVXFw==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.11.tgz",
+      "integrity": "sha512-6XnzORkZCQzvTQ6cPrU7iaT9+i145oLwnin8JrfsLG41wl26+5cNQ2XV3zcbrnFEV6esjOceom9YO1w9mGJByw==",
       "cpu": [
         "ia32"
       ],
@@ -4870,9 +3425,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.10.tgz",
-      "integrity": "sha512-HvY8XUFuoTXn6lSccDLYFlXv1SU/PzYi4PyUqGT++WfTnbw/68N/7BdUZqglGRwiSqr0qhYt/EhmBpULj0J9rA==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.11.tgz",
+      "integrity": "sha512-IQ2n6af7XKLL6P1gIeZACskSxK8jWtoKpJWLZmdXTDj1MGzktUy4i+FvpdtxFmJWNavRWH1VmTr6kAubRDHeKw==",
       "cpu": [
         "x64"
       ],
@@ -5385,13 +3940,12 @@
       }
     },
     "node_modules/@types/nodemailer": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-7.0.5.tgz",
-      "integrity": "sha512-7WtR4MFJUNN2UFy0NIowBRJswj5KXjXDhlZY43Hmots5eGu5q/dTeFd/I6GgJA/qj3RqO6dDy4SvfcV3fOVeIA==",
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-7.0.9.tgz",
+      "integrity": "sha512-vI8oF1M+8JvQhsId0Pc38BdUP2evenIIys7c7p+9OZXSPOH5c1dyINP1jT8xQ2xPuBUXmIC87s+91IZMDjH8Ow==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@aws-sdk/client-sesv2": "^3.839.0",
         "@types/node": "*"
       }
     },
@@ -5413,9 +3967,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.2.9",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.9.tgz",
-      "integrity": "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==",
+      "version": "19.2.10",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
+      "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -5433,17 +3987,17 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.53.1.tgz",
-      "integrity": "sha512-cFYYFZ+oQFi6hUnBTbLRXfTJiaQtYE3t4O692agbBl+2Zy+eqSKWtPjhPXJu1G7j4RLjKgeJPDdq3EqOwmX5Ag==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.54.0.tgz",
+      "integrity": "sha512-hAAP5io/7csFStuOmR782YmTthKBJ9ND3WVL60hcOjvtGFb+HJxH4O5huAcmcZ9v9G8P+JETiZ/G1B8MALnWZQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/type-utils": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/type-utils": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.4.0"
@@ -5456,7 +4010,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.53.1",
+        "@typescript-eslint/parser": "^8.54.0",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
@@ -5472,16 +4026,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.53.1.tgz",
-      "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.54.0.tgz",
+      "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -5497,14 +4051,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.53.1.tgz",
-      "integrity": "sha512-WYC4FB5Ra0xidsmlPb+1SsnaSKPmS3gsjIARwbEkHkoWloQmuzcfypljaJcR78uyLA1h8sHdWWPHSLDI+MtNog==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.54.0.tgz",
+      "integrity": "sha512-YPf+rvJ1s7MyiWM4uTRhE4DvBXrEV+d8oC3P9Y2eT7S+HBS0clybdMIPnhiATi9vZOYDc7OQ1L/i6ga6NFYK/g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.53.1",
-        "@typescript-eslint/types": "^8.53.1",
+        "@typescript-eslint/tsconfig-utils": "^8.54.0",
+        "@typescript-eslint/types": "^8.54.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -5519,14 +4073,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.53.1.tgz",
-      "integrity": "sha512-Lu23yw1uJMFY8cUeq7JlrizAgeQvWugNQzJp8C3x8Eo5Jw5Q2ykMdiiTB9vBVOOUBysMzmRRmUfwFrZuI2C4SQ==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.54.0.tgz",
+      "integrity": "sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1"
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5537,9 +4091,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.53.1.tgz",
-      "integrity": "sha512-qfvLXS6F6b1y43pnf0pPbXJ+YoXIC7HKg0UGZ27uMIemKMKA6XH2DTxsEDdpdN29D+vHV07x/pnlPNVLhdhWiA==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.54.0.tgz",
+      "integrity": "sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5554,15 +4108,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.53.1.tgz",
-      "integrity": "sha512-MOrdtNvyhy0rHyv0ENzub1d4wQYKb2NmIqG7qEqPWFW7Mpy2jzFC3pQ2yKDvirZB7jypm5uGjF2Qqs6OIqu47w==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.54.0.tgz",
+      "integrity": "sha512-hiLguxJWHjjwL6xMBwD903ciAwd7DmK30Y9Axs/etOkftC3ZNN9K44IuRD/EB08amu+Zw6W37x9RecLkOo3pMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.4.0"
       },
@@ -5579,9 +4133,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.53.1.tgz",
-      "integrity": "sha512-jr/swrr2aRmUAUjW5/zQHbMaui//vQlsZcJKijZf3M26bnmLj8LyZUpj8/Rd6uzaek06OWsqdofN/Thenm5O8A==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.54.0.tgz",
+      "integrity": "sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5593,16 +4147,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.53.1.tgz",
-      "integrity": "sha512-RGlVipGhQAG4GxV1s34O91cxQ/vWiHJTDHbXRr0li2q/BGg3RR/7NM8QDWgkEgrwQYCvmJV9ichIwyoKCQ+DTg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.54.0.tgz",
+      "integrity": "sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.53.1",
-        "@typescript-eslint/tsconfig-utils": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/project-service": "8.54.0",
+        "@typescript-eslint/tsconfig-utils": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "debug": "^4.4.3",
         "minimatch": "^9.0.5",
         "semver": "^7.7.3",
@@ -5650,16 +4204,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.53.1.tgz",
-      "integrity": "sha512-c4bMvGVWW4hv6JmDUEG7fSYlWOl3II2I4ylt0NM+seinYQlZMQIaKaXIIVJWt9Ofh6whrpM+EdDQXKXjNovvrg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.54.0.tgz",
+      "integrity": "sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1"
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5674,13 +4228,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.53.1.tgz",
-      "integrity": "sha512-oy+wV7xDKFPRyNggmXuZQSBzvoLnpmJs+GhzRhPjrxl2b/jIlyjVokzm47CZCDUdXKr2zd7ZLodPfOBpOPyPlg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.54.0.tgz",
+      "integrity": "sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
+        "@typescript-eslint/types": "8.54.0",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -6449,21 +5003,21 @@
       "license": "MIT"
     },
     "node_modules/ast-v8-to-istanbul": {
-      "version": "0.3.10",
-      "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-0.3.10.tgz",
-      "integrity": "sha512-p4K7vMz2ZSk3wN8l5o3y2bJAoZXT3VuJI5OLTATY/01CYWumWvwkUw0SqDBnNq6IiTO3qDa1eSQDibAV8g7XOQ==",
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-0.3.11.tgz",
+      "integrity": "sha512-Qya9fkoofMjCBNVdWINMjB5KZvkYfaO9/anwkWnjxibpWUxo5iHl2sOdP7/uAqaRuUYuoo8rDwnbaaKVFxoUvw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.31",
         "estree-walker": "^3.0.3",
-        "js-tokens": "^9.0.1"
+        "js-tokens": "^10.0.0"
       }
     },
     "node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
-      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
       "dev": true,
       "license": "MIT"
     },
@@ -6527,9 +5081,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.9.18",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.18.tgz",
-      "integrity": "sha512-e23vBV1ZLfjb9apvfPk4rHVu2ry6RIr2Wfs+O324okSidrX7pTAnEJPCh/O5BtRlr7QtZI7ktOP3vsqr7Z5XoA==",
+      "version": "2.9.19",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
+      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
@@ -6554,13 +5108,6 @@
         "require-from-string": "^2.0.2"
       }
     },
-    "node_modules/bowser": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.13.1.tgz",
-      "integrity": "sha512-OHawaAbjwx6rqICCKgSG0SAnT05bzd7ppyKLVUITZpANBaaMFBAsaNkto3LoQ31tyFP5kNujE8Cdx85G9VzOkw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/brace-expansion": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
@@ -7129,9 +5676,9 @@
       }
     },
     "node_modules/diff": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
-      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.1.tgz",
+      "integrity": "sha512-Z3u54A8qGyqFOSr2pk0ijYs8mOE9Qz8kTvtKeBI+upoG9j04Sq+oI7W8zAJiQybDcESET8/uIdHzs0p3k4fZlw==",
       "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
@@ -7365,9 +5912,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.278",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.278.tgz",
-      "integrity": "sha512-dQ0tM1svDRQOwxnXxm+twlGTjr9Upvt8UFWAgmLsxEzFQxhbti4VwxmMjsDxVC51Zo84swW7FVCXEV+VAkhuPw==",
+      "version": "1.5.283",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.283.tgz",
+      "integrity": "sha512-3vifjt1HgrGW/h76UEeny+adYApveS9dH2h3p57JYzBSXJIKUJAvtmIytDKjcSCt9xHfrNCFJ7gts6vkhuq++w==",
       "dev": true,
       "license": "ISC"
     },
@@ -8760,25 +7307,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fast-xml-parser": {
-      "version": "5.2.5",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.2.5.tgz",
-      "integrity": "sha512-pfX9uG9Ki0yekDHx2SiuRIyFdyAr1kMIMitPvb0YBo8SUfKvia7w7FIyd/l6av85pFYRhZscS75MwMnbvY+hcQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "strnum": "^2.1.0"
-      },
-      "bin": {
-        "fxparser": "src/cli/cli.js"
-      }
-    },
     "node_modules/fastq": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -9106,9 +7634,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
-      "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.1.tgz",
+      "integrity": "sha512-EoY1N2xCn44xU6750Sx7OjOIT59FkmstNc3X6y5xpz7D5cBtZRe/3pSlTkDJgqsOk3WwZPkWfonhhUJfttQo3w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9459,6 +7987,21 @@
         "ms": "^2.0.0"
       }
     },
+    "node_modules/icu-minify": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/icu-minify/-/icu-minify-4.8.1.tgz",
+      "integrity": "sha512-RhXrTA19/PUt5/xs3B/eyx3DCjnMmcfdgqNYBE5vdrEqM4PQK2GWjHa1zdArTxPGgEc4jfuDMH1LkKhmIxwLFw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/amannn"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/icu-messageformat-parser": "^3.4.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -9540,15 +8083,15 @@
       }
     },
     "node_modules/intl-messageformat": {
-      "version": "10.7.18",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.18.tgz",
-      "integrity": "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-11.1.1.tgz",
+      "integrity": "sha512-vnrF2f4vfsdaFY6tuLZfzGcx1GZFMFAq6c7QdK3HSXNcGXEIQncNgbeAcnpjAOszQzq3Jbol2SwgshIGY08WyA==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "2.3.6",
-        "@formatjs/fast-memoize": "2.2.7",
-        "@formatjs/icu-messageformat-parser": "2.11.4",
-        "tslib": "^2.8.0"
+        "@formatjs/ecma402-abstract": "3.1.0",
+        "@formatjs/fast-memoize": "3.1.0",
+        "@formatjs/icu-messageformat-parser": "3.5.0",
+        "tslib": "^2.8.1"
       }
     },
     "node_modules/is-array-buffer": {
@@ -10986,12 +9529,12 @@
       }
     },
     "node_modules/next": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.1.4.tgz",
-      "integrity": "sha512-gKSecROqisnV7Buen5BfjmXAm7Xlpx9o2ueVQRo5DxQcjC8d330dOM1xiGWc2k3Dcnz0In3VybyRPOsudwgiqQ==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
+      "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.1.4",
+        "@next/env": "16.1.6",
         "@swc/helpers": "0.5.15",
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001579",
@@ -11005,14 +9548,14 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.1.4",
-        "@next/swc-darwin-x64": "16.1.4",
-        "@next/swc-linux-arm64-gnu": "16.1.4",
-        "@next/swc-linux-arm64-musl": "16.1.4",
-        "@next/swc-linux-x64-gnu": "16.1.4",
-        "@next/swc-linux-x64-musl": "16.1.4",
-        "@next/swc-win32-arm64-msvc": "16.1.4",
-        "@next/swc-win32-x64-msvc": "16.1.4",
+        "@next/swc-darwin-arm64": "16.1.6",
+        "@next/swc-darwin-x64": "16.1.6",
+        "@next/swc-linux-arm64-gnu": "16.1.6",
+        "@next/swc-linux-arm64-musl": "16.1.6",
+        "@next/swc-linux-x64-gnu": "16.1.6",
+        "@next/swc-linux-x64-musl": "16.1.6",
+        "@next/swc-win32-arm64-msvc": "16.1.6",
+        "@next/swc-win32-x64-msvc": "16.1.6",
         "sharp": "^0.34.4"
       },
       "peerDependencies": {
@@ -11039,9 +9582,9 @@
       }
     },
     "node_modules/next-intl": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-4.7.0.tgz",
-      "integrity": "sha512-gvROzcNr/HM0jTzQlKWQxUNk8jrZ0bREz+bht3wNbv+uzlZ5Kn3J+m+viosub18QJ72S08UJnVK50PXWcUvwpQ==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-4.8.1.tgz",
+      "integrity": "sha512-7V0Ewm6bP12Lgn6cjcKi6NbVy0JeIp1K9EzHfTIsuLAUn4NuH8dhon2WYJywHCyWnxKepm34xF6G1fR2dsNoqA==",
       "funding": [
         {
           "type": "individual",
@@ -11053,10 +9596,11 @@
         "@formatjs/intl-localematcher": "^0.5.4",
         "@parcel/watcher": "^2.4.1",
         "@swc/core": "^1.15.2",
+        "icu-minify": "^4.8.1",
         "negotiator": "^1.0.0",
-        "next-intl-swc-plugin-extractor": "^4.7.0",
+        "next-intl-swc-plugin-extractor": "^4.8.1",
         "po-parser": "^2.1.1",
-        "use-intl": "^4.7.0"
+        "use-intl": "^4.8.1"
       },
       "peerDependencies": {
         "next": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
@@ -11070,15 +9614,15 @@
       }
     },
     "node_modules/next-intl-swc-plugin-extractor": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/next-intl-swc-plugin-extractor/-/next-intl-swc-plugin-extractor-4.7.0.tgz",
-      "integrity": "sha512-iAqflu2FWdQMWhwB0B2z52X7LmEpvnMNJXqVERZQ7bK5p9iqQLu70ur6Ka6NfiXLxfb+AeAkUX5qIciQOg+87A==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/next-intl-swc-plugin-extractor/-/next-intl-swc-plugin-extractor-4.8.1.tgz",
+      "integrity": "sha512-4RXyce0ZrQl/6lkfwvDpP8r5B7wbAQakCW9BuMPh+7/DgXFyE+cBXxcmfDkxFDkpXvBFqBZ2HsN4pav49reAZQ==",
       "license": "MIT"
     },
     "node_modules/next-intl/node_modules/@swc/core": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.10.tgz",
-      "integrity": "sha512-udNofxftduMUEv7nqahl2nvodCiCDQ4Ge0ebzsEm6P8s0RC2tBM0Hqx0nNF5J/6t9uagFJyWIDjXy3IIWMHDJw==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.11.tgz",
+      "integrity": "sha512-iLmLTodbYxU39HhMPaMUooPwO/zqJWvsqkrXv1ZI38rMb048p6N7qtAtTp37sw9NzSrvH6oli8EdDygo09IZ/w==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -11093,16 +9637,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.15.10",
-        "@swc/core-darwin-x64": "1.15.10",
-        "@swc/core-linux-arm-gnueabihf": "1.15.10",
-        "@swc/core-linux-arm64-gnu": "1.15.10",
-        "@swc/core-linux-arm64-musl": "1.15.10",
-        "@swc/core-linux-x64-gnu": "1.15.10",
-        "@swc/core-linux-x64-musl": "1.15.10",
-        "@swc/core-win32-arm64-msvc": "1.15.10",
-        "@swc/core-win32-ia32-msvc": "1.15.10",
-        "@swc/core-win32-x64-msvc": "1.15.10"
+        "@swc/core-darwin-arm64": "1.15.11",
+        "@swc/core-darwin-x64": "1.15.11",
+        "@swc/core-linux-arm-gnueabihf": "1.15.11",
+        "@swc/core-linux-arm64-gnu": "1.15.11",
+        "@swc/core-linux-arm64-musl": "1.15.11",
+        "@swc/core-linux-x64-gnu": "1.15.11",
+        "@swc/core-linux-x64-musl": "1.15.11",
+        "@swc/core-win32-arm64-msvc": "1.15.11",
+        "@swc/core-win32-ia32-msvc": "1.15.11",
+        "@swc/core-win32-x64-msvc": "1.15.11"
       },
       "peerDependencies": {
         "@swc/helpers": ">=0.5.17"
@@ -11117,8 +9661,8 @@
       "version": "0.5.18",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
       "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
-      "optional": true,
-      "peer": true,
+      "extraneous": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.8.0"
       }
@@ -11244,9 +9788,9 @@
       "license": "MIT"
     },
     "node_modules/nodemailer": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.12.tgz",
-      "integrity": "sha512-H+rnK5bX2Pi/6ms3sN4/jRQvYSMltV6vqup/0SFOrxYYY/qoNvhXPlYq3e+Pm9RFJRwrMGbMIwi81M4dxpomhA==",
+      "version": "7.0.13",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.13.tgz",
+      "integrity": "sha512-PNDFSJdP+KFgdsG3ZzMXCgquO7I6McjY2vlqILjtJd0hy8wEvtugS9xKRF2NWlPNGxvLCXlTNIae4serI7dinw==",
       "license": "MIT-0",
       "engines": {
         "node": ">=6.0.0"
@@ -11536,12 +10080,12 @@
       "license": "MIT"
     },
     "node_modules/pg": {
-      "version": "8.17.2",
-      "resolved": "https://registry.npmjs.org/pg/-/pg-8.17.2.tgz",
-      "integrity": "sha512-vjbKdiBJRqzcYw1fNU5KuHyYvdJ1qpcQg1CeBrHFqV1pWgHeVR6j/+kX0E1AAXfyuLUGY1ICrN2ELKA/z2HWzw==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.18.0.tgz",
+      "integrity": "sha512-xqrUDL1b9MbkydY/s+VZ6v+xiMUmOUk7SS9d/1kpyQxoJ6U9AO1oIJyUWVZojbfe5Cc/oluutcgFG4L9RDP1iQ==",
       "license": "MIT",
       "dependencies": {
-        "pg-connection-string": "^2.10.1",
+        "pg-connection-string": "^2.11.0",
         "pg-pool": "^3.11.0",
         "pg-protocol": "^1.11.0",
         "pg-types": "2.2.0",
@@ -11570,9 +10114,9 @@
       "optional": true
     },
     "node_modules/pg-connection-string": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.10.1.tgz",
-      "integrity": "sha512-iNzslsoeSH2/gmDDKiyMqF64DATUCWj3YJ0wP14kqcsf2TUklwimd+66yYojKwZCA7h2yRNLGug71hCBA2a4sw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.11.0.tgz",
+      "integrity": "sha512-kecgoJwhOpxYU21rZjULrmrBJ698U2RxXofKVzOn5UDj61BPj/qMb7diYUR1nLScCDbrztQFl1TaQZT0t1EtzQ==",
       "license": "MIT"
     },
     "node_modules/pg-int8": {
@@ -11852,24 +10396,24 @@
       "license": "MIT"
     },
     "node_modules/react": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
-      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
-      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.2.3"
+        "react": "^19.2.4"
       }
     },
     "node_modules/react-is": {
@@ -12014,9 +10558,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.56.0.tgz",
-      "integrity": "sha512-9FwVqlgUHzbXtDg9RCMgodF3Ua4Na6Gau+Sdt9vyCN4RhHfVKX2DCHy3BjMLTDd47ITDhYAnTwGulWTblJSDLg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
+      "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -12030,31 +10574,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.56.0",
-        "@rollup/rollup-android-arm64": "4.56.0",
-        "@rollup/rollup-darwin-arm64": "4.56.0",
-        "@rollup/rollup-darwin-x64": "4.56.0",
-        "@rollup/rollup-freebsd-arm64": "4.56.0",
-        "@rollup/rollup-freebsd-x64": "4.56.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.56.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.56.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.56.0",
-        "@rollup/rollup-linux-arm64-musl": "4.56.0",
-        "@rollup/rollup-linux-loong64-gnu": "4.56.0",
-        "@rollup/rollup-linux-loong64-musl": "4.56.0",
-        "@rollup/rollup-linux-ppc64-gnu": "4.56.0",
-        "@rollup/rollup-linux-ppc64-musl": "4.56.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.56.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.56.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.56.0",
-        "@rollup/rollup-linux-x64-gnu": "4.56.0",
-        "@rollup/rollup-linux-x64-musl": "4.56.0",
-        "@rollup/rollup-openbsd-x64": "4.56.0",
-        "@rollup/rollup-openharmony-arm64": "4.56.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.56.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.56.0",
-        "@rollup/rollup-win32-x64-gnu": "4.56.0",
-        "@rollup/rollup-win32-x64-msvc": "4.56.0",
+        "@rollup/rollup-android-arm-eabi": "4.57.1",
+        "@rollup/rollup-android-arm64": "4.57.1",
+        "@rollup/rollup-darwin-arm64": "4.57.1",
+        "@rollup/rollup-darwin-x64": "4.57.1",
+        "@rollup/rollup-freebsd-arm64": "4.57.1",
+        "@rollup/rollup-freebsd-x64": "4.57.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.57.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.57.1",
+        "@rollup/rollup-linux-arm64-musl": "4.57.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.57.1",
+        "@rollup/rollup-linux-loong64-musl": "4.57.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.57.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.57.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.57.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.57.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.57.1",
+        "@rollup/rollup-linux-x64-gnu": "4.57.1",
+        "@rollup/rollup-linux-x64-musl": "4.57.1",
+        "@rollup/rollup-openbsd-x64": "4.57.1",
+        "@rollup/rollup-openharmony-arm64": "4.57.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.57.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.57.1",
+        "@rollup/rollup-win32-x64-gnu": "4.57.1",
+        "@rollup/rollup-win32-x64-msvc": "4.57.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -12698,19 +11242,6 @@
         }
       }
     },
-    "node_modules/strnum": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.1.2.tgz",
-      "integrity": "sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -13335,16 +11866,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.53.1.tgz",
-      "integrity": "sha512-gB+EVQfP5RDElh9ittfXlhZJdjSU4jUSTyE2+ia8CYyNvet4ElfaLlAIqDvQV9JPknKx0jQH1racTYe/4LaLSg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.54.0.tgz",
+      "integrity": "sha512-CKsJ+g53QpsNPqbzUsfKVgd3Lny4yKZ1pP4qN3jdMOg/sisIDLGyDMezycquXLE5JsEU0wp3dGNdzig0/fmSVQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.53.1",
-        "@typescript-eslint/parser": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1"
+        "@typescript-eslint/eslint-plugin": "8.54.0",
+        "@typescript-eslint/parser": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -13460,14 +11991,21 @@
       }
     },
     "node_modules/use-intl": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-4.7.0.tgz",
-      "integrity": "sha512-jyd8nSErVRRsSlUa+SDobKHo9IiWs5fjcPl9VBUnzUyEQpVM5mwJCgw8eUiylhvBpLQzUGox1KN0XlRivSID9A==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-4.8.1.tgz",
+      "integrity": "sha512-wH85ro36JAw9NrtogpEsqHghD21Ul6/zAKxTqHktnO6WTQzqhbcfPkO5iXu3YOnJBA8Anm7IvWSTqSzRE+2PsA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/amannn"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "@formatjs/fast-memoize": "^2.2.0",
+        "@formatjs/fast-memoize": "^3.1.0",
         "@schummar/icu-type-parser": "1.21.5",
-        "intl-messageformat": "^10.5.14"
+        "icu-minify": "^4.8.1",
+        "intl-messageformat": "^11.1.0"
       },
       "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
@@ -14064,7 +12602,6 @@
       "version": "3.25.76",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/frontend/package.json b/frontend/package.json
index 16826716..356af09c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -57,7 +57,7 @@
     "zod": "^3.24.0"
   },
   "devDependencies": {
-    "@netlify/plugin-nextjs": "^5.15.1",
+    "@netlify/plugin-nextjs": "^5.15.7",
     "@tailwindcss/postcss": "^4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",
diff --git a/studio/package-lock.json b/studio/package-lock.json
index 0fefa5d7..88d15a89 100644
--- a/studio/package-lock.json
+++ b/studio/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "devlovers",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "devlovers",
-      "version": "0.5.0",
+      "version": "0.5.1",
       "license": "UNLICENSED",
       "dependencies": {
         "@sanity/orderable-document-list": "^1.4.2",
@@ -289,9 +289,9 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz",
-      "integrity": "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.28.5",
@@ -303,30 +303,29 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.6.tgz",
-      "integrity": "sha512-2lfu57JtzctfIrcGMz992hyLlByuzgIk58+hhGCxjKZ3rWI82NnVLjXcaTqkI2NvlcvOskZaiZ5kjUALo3Lpxg==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz",
+      "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.6.tgz",
-      "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/generator": "^7.28.6",
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
         "@babel/helper-compilation-targets": "^7.28.6",
         "@babel/helper-module-transforms": "^7.28.6",
         "@babel/helpers": "^7.28.6",
-        "@babel/parser": "^7.28.6",
+        "@babel/parser": "^7.29.0",
         "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
         "@jridgewell/remapping": "^2.3.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
@@ -343,13 +342,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.6.tgz",
-      "integrity": "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.0.tgz",
+      "integrity": "sha512-vSH118/wwM/pLR38g/Sgk05sNtro6TlTJKuiMXDaZqPUfjTFcudpCOt00IhOfj+1BFAX+UFAlzCU+6WXr3GLFQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.6",
-        "@babel/types": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -635,12 +634,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.6.tgz",
-      "integrity": "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
+      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.6"
+        "@babel/types": "^7.29.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -832,14 +831,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.28.6.tgz",
-      "integrity": "sha512-9knsChgsMzBV5Yh3kkhrZNxH3oCYAfMBkNNaVN4cP2RVlFPe8wYdwwcnOsAbkdDoV9UjFtOXWrWB52M8W4jNeA==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.29.0.tgz",
+      "integrity": "sha512-va0VdWro4zlBr2JsXC+ofCPB2iG12wPtVGTWFx2WLDOM3nYQZZIGP82qku2eW/JR83sD+k2k+CsNtyEbUqhU6w==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.28.6",
         "@babel/helper-remap-async-to-generator": "^7.27.1",
-        "@babel/traverse": "^7.28.6"
+        "@babel/traverse": "^7.29.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1011,9 +1010,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.28.6.tgz",
-      "integrity": "sha512-5suVoXjC14lUN6ZL9OLKIHCNVWCrqGqlmEp/ixdXjvgnEl/kauLvvMO/Xw9NyMc95Joj1AeLVPVMvibBgSoFlA==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.29.0.tgz",
+      "integrity": "sha512-zBPcW2lFGxdiD8PUnPwJjag2J9otbcLQzvbiOzDxpYXyCuYX9agOwMPGn1prVH0a4qzhCKu24rlH4c1f7yA8rw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.28.5",
@@ -1213,15 +1212,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.28.5.tgz",
-      "integrity": "sha512-vn5Jma98LCOeBy/KpeQhXcV2WZgaRUtjwQmjoBuLNlOmkg0fB5pdvYVeWRYI69wWKwK2cD1QbMiUQnoujWvrew==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.29.0.tgz",
+      "integrity": "sha512-PrujnVFbOdUpw4UHiVwKvKRLMMic8+eC0CuNlxjsyZUiBjhFdPsewdXCkveh2KqBA9/waD0W1b4hXSOBQJezpQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.28.3",
-        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
         "@babel/helper-validator-identifier": "^7.28.5",
-        "@babel/traverse": "^7.28.5"
+        "@babel/traverse": "^7.29.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1247,13 +1246,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.27.1.tgz",
-      "integrity": "sha512-SstR5JYy8ddZvD6MhV0tM/j16Qds4mIpJTOd1Yu9J9pJjH93bxHECF7pgtc28XvkzTD6Pxcm/0Z73Hvk7kb3Ng==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.29.0.tgz",
+      "integrity": "sha512-1CZQA5KNAD6ZYQLPw7oi5ewtDNxH/2vuCh+6SmvgDfhumForvs8a1o9n0UrEoBD8HU4djO2yWngTQlXl1NDVEQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1532,9 +1531,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.28.6.tgz",
-      "integrity": "sha512-eZhoEZHYQLL5uc1gS5e9/oTknS0sSSAtd5TkKMUp3J+S/CaUjagc0kOUPsEbDmMeva0nC3WWl4SxVY6+OBuxfw==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.29.0.tgz",
+      "integrity": "sha512-FijqlqMA7DmRdg/aINBSs04y8XNTYw/lr1gJ2WsmBnnaNw1iS43EPkJW+zK7z65auG3AWRFXWj+NcTQwYptUog==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.28.6"
@@ -1736,12 +1735,12 @@
       }
     },
     "node_modules/@babel/preset-env": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.28.6.tgz",
-      "integrity": "sha512-GaTI4nXDrs7l0qaJ6Rg06dtOXTBCG6TMDB44zbqofCIC4PqC7SEvmFFtpxzCDw9W5aJ7RKVshgXTLvLdBFV/qw==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.29.0.tgz",
+      "integrity": "sha512-fNEdfc0yi16lt6IZo2Qxk3knHVdfMYX33czNb4v8yWhemoBhibCpQK/uYHtSKIiO+p/zd3+8fYVXhQdOVV608w==",
       "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.28.6",
+        "@babel/compat-data": "^7.29.0",
         "@babel/helper-compilation-targets": "^7.28.6",
         "@babel/helper-plugin-utils": "^7.28.6",
         "@babel/helper-validator-option": "^7.27.1",
@@ -1755,7 +1754,7 @@
         "@babel/plugin-syntax-import-attributes": "^7.28.6",
         "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
         "@babel/plugin-transform-arrow-functions": "^7.27.1",
-        "@babel/plugin-transform-async-generator-functions": "^7.28.6",
+        "@babel/plugin-transform-async-generator-functions": "^7.29.0",
         "@babel/plugin-transform-async-to-generator": "^7.28.6",
         "@babel/plugin-transform-block-scoped-functions": "^7.27.1",
         "@babel/plugin-transform-block-scoping": "^7.28.6",
@@ -1766,7 +1765,7 @@
         "@babel/plugin-transform-destructuring": "^7.28.5",
         "@babel/plugin-transform-dotall-regex": "^7.28.6",
         "@babel/plugin-transform-duplicate-keys": "^7.27.1",
-        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.28.6",
+        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.29.0",
         "@babel/plugin-transform-dynamic-import": "^7.27.1",
         "@babel/plugin-transform-explicit-resource-management": "^7.28.6",
         "@babel/plugin-transform-exponentiation-operator": "^7.28.6",
@@ -1779,9 +1778,9 @@
         "@babel/plugin-transform-member-expression-literals": "^7.27.1",
         "@babel/plugin-transform-modules-amd": "^7.27.1",
         "@babel/plugin-transform-modules-commonjs": "^7.28.6",
-        "@babel/plugin-transform-modules-systemjs": "^7.28.5",
+        "@babel/plugin-transform-modules-systemjs": "^7.29.0",
         "@babel/plugin-transform-modules-umd": "^7.27.1",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.27.1",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.29.0",
         "@babel/plugin-transform-new-target": "^7.27.1",
         "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6",
         "@babel/plugin-transform-numeric-separator": "^7.28.6",
@@ -1793,7 +1792,7 @@
         "@babel/plugin-transform-private-methods": "^7.28.6",
         "@babel/plugin-transform-private-property-in-object": "^7.28.6",
         "@babel/plugin-transform-property-literals": "^7.27.1",
-        "@babel/plugin-transform-regenerator": "^7.28.6",
+        "@babel/plugin-transform-regenerator": "^7.29.0",
         "@babel/plugin-transform-regexp-modifiers": "^7.28.6",
         "@babel/plugin-transform-reserved-words": "^7.27.1",
         "@babel/plugin-transform-shorthand-properties": "^7.27.1",
@@ -1806,10 +1805,10 @@
         "@babel/plugin-transform-unicode-regex": "^7.27.1",
         "@babel/plugin-transform-unicode-sets-regex": "^7.28.6",
         "@babel/preset-modules": "0.1.6-no-external-plugins",
-        "babel-plugin-polyfill-corejs2": "^0.4.14",
-        "babel-plugin-polyfill-corejs3": "^0.13.0",
-        "babel-plugin-polyfill-regenerator": "^0.6.5",
-        "core-js-compat": "^3.43.0",
+        "babel-plugin-polyfill-corejs2": "^0.4.15",
+        "babel-plugin-polyfill-corejs3": "^0.14.0",
+        "babel-plugin-polyfill-regenerator": "^0.6.6",
+        "core-js-compat": "^3.48.0",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -1915,17 +1914,17 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.6.tgz",
-      "integrity": "sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/generator": "^7.28.6",
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
         "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.6",
+        "@babel/parser": "^7.29.0",
         "@babel/template": "^7.28.6",
-        "@babel/types": "^7.28.6",
+        "@babel/types": "^7.29.0",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -1933,9 +1932,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.6.tgz",
-      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -1999,9 +1998,9 @@
       }
     },
     "node_modules/@codemirror/lint": {
-      "version": "6.9.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.2.tgz",
-      "integrity": "sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==",
+      "version": "6.9.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.3.tgz",
+      "integrity": "sha512-y3YkYhdnhjDBAe0VIA0c4wVoFOvnp8CnAvfLqi0TqotIv92wIlAAP7HELOpLBsKwjAX6W92rSflA6an/2zBvXw==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/state": "^6.0.0",
@@ -2042,11 +2041,10 @@
       }
     },
     "node_modules/@codemirror/view": {
-      "version": "6.39.11",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.11.tgz",
-      "integrity": "sha512-bWdeR8gWM87l4DB/kYSF9A+dVackzDb/V56Tq7QVrQ7rn86W0rgZFtlL3g3pem6AeGcb9NQNoy3ao4WpW4h5tQ==",
+      "version": "6.39.12",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.12.tgz",
+      "integrity": "sha512-f+/VsHVn/kOA9lltk/GFzuYwVVAKmOnNjxbrhkk3tPHntFqjWeI2TbIXx006YkBkqC10wZ4NsnWXCQiFPeAISQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.5.0",
         "crelt": "^1.0.6",
@@ -2138,7 +2136,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -2161,7 +2158,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2195,7 +2191,6 @@
       "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
       "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -2251,7 +2246,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
       "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@emotion/memoize": "^0.9.0"
       }
@@ -2838,31 +2832,31 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
-      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz",
+      "integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/utils": "^0.2.10"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
-      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz",
+      "integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/core": "^1.7.4",
         "@floating-ui/utils": "^0.2.10"
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
-      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.7.tgz",
+      "integrity": "sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.7.4"
+        "@floating-ui/dom": "^1.7.5"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -3750,7 +3744,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.2.tgz",
       "integrity": "sha512-/g2d4sW9nUDJOMz3mabVQvOGhVa4e/BN/Um7yca9Bb2XTzPPnfTWHWQg+IsEYO7M3Vx+EXvaM/I2pJWIMun1bg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/auth-token": "^4.0.0",
         "@octokit/graphql": "^7.1.0",
@@ -3961,11 +3954,10 @@
       }
     },
     "node_modules/@portabletext/editor": {
-      "version": "3.3.16",
-      "resolved": "https://registry.npmjs.org/@portabletext/editor/-/editor-3.3.16.tgz",
-      "integrity": "sha512-Z+/HXuOf1zwDpwp54uR9lsQtJ0tak5rr/9FgwObjUB1LAPNZm8IUezfQO56U3gvoQSZ7Rhj5/+BC+6hnnAKfyw==",
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/@portabletext/editor/-/editor-3.3.18.tgz",
+      "integrity": "sha512-K+504jYuodi4b4C+U1SibeHELIBsTDwF30pUZd2IAKp4+avfzpvgX5qKxtPg3aW8z++L3U5Y33ggC9IbJDIVOg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@portabletext/block-tools": "^4.1.11",
         "@portabletext/keyboard-shortcuts": "^2.1.1",
@@ -4218,9 +4210,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.56.0.tgz",
-      "integrity": "sha512-LNKIPA5k8PF1+jAFomGe3qN3bbIgJe/IlpDBwuVjrDKrJhVWywgnJvflMt/zkbVNLFtF1+94SljYQS6e99klnw==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
+      "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
       "cpu": [
         "arm"
       ],
@@ -4231,9 +4223,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.56.0.tgz",
-      "integrity": "sha512-lfbVUbelYqXlYiU/HApNMJzT1E87UPGvzveGg2h0ktUNlOCxKlWuJ9jtfvs1sKHdwU4fzY7Pl8sAl49/XaEk6Q==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
+      "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
       "cpu": [
         "arm64"
       ],
@@ -4244,9 +4236,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.56.0.tgz",
-      "integrity": "sha512-EgxD1ocWfhoD6xSOeEEwyE7tDvwTgZc8Bss7wCWe+uc7wO8G34HHCUH+Q6cHqJubxIAnQzAsyUsClt0yFLu06w==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
+      "integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
       "cpu": [
         "arm64"
       ],
@@ -4257,9 +4249,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.56.0.tgz",
-      "integrity": "sha512-1vXe1vcMOssb/hOF8iv52A7feWW2xnu+c8BV4t1F//m9QVLTfNVpEdja5ia762j/UEJe2Z1jAmEqZAK42tVW3g==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
+      "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
       "cpu": [
         "x64"
       ],
@@ -4270,9 +4262,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.56.0.tgz",
-      "integrity": "sha512-bof7fbIlvqsyv/DtaXSck4VYQ9lPtoWNFCB/JY4snlFuJREXfZnm+Ej6yaCHfQvofJDXLDMTVxWscVSuQvVWUQ==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
+      "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
       "cpu": [
         "arm64"
       ],
@@ -4283,9 +4275,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.56.0.tgz",
-      "integrity": "sha512-KNa6lYHloW+7lTEkYGa37fpvPq+NKG/EHKM8+G/g9WDU7ls4sMqbVRV78J6LdNuVaeeK5WB9/9VAFbKxcbXKYg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
+      "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
       "cpu": [
         "x64"
       ],
@@ -4296,9 +4288,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.56.0.tgz",
-      "integrity": "sha512-E8jKK87uOvLrrLN28jnAAAChNq5LeCd2mGgZF+fGF5D507WlG/Noct3lP/QzQ6MrqJ5BCKNwI9ipADB6jyiq2A==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
+      "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
       "cpu": [
         "arm"
       ],
@@ -4309,9 +4301,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.56.0.tgz",
-      "integrity": "sha512-jQosa5FMYF5Z6prEpTCCmzCXz6eKr/tCBssSmQGEeozA9tkRUty/5Vx06ibaOP9RCrW1Pvb8yp3gvZhHwTDsJw==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
+      "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
       "cpu": [
         "arm"
       ],
@@ -4322,9 +4314,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.56.0.tgz",
-      "integrity": "sha512-uQVoKkrC1KGEV6udrdVahASIsaF8h7iLG0U0W+Xn14ucFwi6uS539PsAr24IEF9/FoDtzMeeJXJIBo5RkbNWvQ==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
+      "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
       "cpu": [
         "arm64"
       ],
@@ -4335,9 +4327,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.56.0.tgz",
-      "integrity": "sha512-vLZ1yJKLxhQLFKTs42RwTwa6zkGln+bnXc8ueFGMYmBTLfNu58sl5/eXyxRa2RarTkJbXl8TKPgfS6V5ijNqEA==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
+      "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
       "cpu": [
         "arm64"
       ],
@@ -4348,9 +4340,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.56.0.tgz",
-      "integrity": "sha512-FWfHOCub564kSE3xJQLLIC/hbKqHSVxy8vY75/YHHzWvbJL7aYJkdgwD/xGfUlL5UV2SB7otapLrcCj2xnF1dg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
+      "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
       "cpu": [
         "loong64"
       ],
@@ -4361,9 +4353,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.56.0.tgz",
-      "integrity": "sha512-z1EkujxIh7nbrKL1lmIpqFTc/sr0u8Uk0zK/qIEFldbt6EDKWFk/pxFq3gYj4Bjn3aa9eEhYRlL3H8ZbPT1xvA==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
+      "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
       "cpu": [
         "loong64"
       ],
@@ -4374,9 +4366,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.56.0.tgz",
-      "integrity": "sha512-iNFTluqgdoQC7AIE8Q34R3AuPrJGJirj5wMUErxj22deOcY7XwZRaqYmB6ZKFHoVGqRcRd0mqO+845jAibKCkw==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
+      "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
       "cpu": [
         "ppc64"
       ],
@@ -4387,9 +4379,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.56.0.tgz",
-      "integrity": "sha512-MtMeFVlD2LIKjp2sE2xM2slq3Zxf9zwVuw0jemsxvh1QOpHSsSzfNOTH9uYW9i1MXFxUSMmLpeVeUzoNOKBaWg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
+      "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
       "cpu": [
         "ppc64"
       ],
@@ -4400,9 +4392,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.56.0.tgz",
-      "integrity": "sha512-in+v6wiHdzzVhYKXIk5U74dEZHdKN9KH0Q4ANHOTvyXPG41bajYRsy7a8TPKbYPl34hU7PP7hMVHRvv/5aCSew==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
       "cpu": [
         "riscv64"
       ],
@@ -4413,9 +4405,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.56.0.tgz",
-      "integrity": "sha512-yni2raKHB8m9NQpI9fPVwN754mn6dHQSbDTwxdr9SE0ks38DTjLMMBjrwvB5+mXrX+C0npX0CVeCUcvvvD8CNQ==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
+      "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
       "cpu": [
         "riscv64"
       ],
@@ -4426,9 +4418,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.56.0.tgz",
-      "integrity": "sha512-zhLLJx9nQPu7wezbxt2ut+CI4YlXi68ndEve16tPc/iwoylWS9B3FxpLS2PkmfYgDQtosah07Mj9E0khc3Y+vQ==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
+      "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
       "cpu": [
         "s390x"
       ],
@@ -4439,9 +4431,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.56.0.tgz",
-      "integrity": "sha512-MVC6UDp16ZSH7x4rtuJPAEoE1RwS8N4oK9DLHy3FTEdFoUTCFVzMfJl/BVJ330C+hx8FfprA5Wqx4FhZXkj2Kw==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
       "cpu": [
         "x64"
       ],
@@ -4452,9 +4444,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.56.0.tgz",
-      "integrity": "sha512-ZhGH1eA4Qv0lxaV00azCIS1ChedK0V32952Md3FtnxSqZTBTd6tgil4nZT5cU8B+SIw3PFYkvyR4FKo2oyZIHA==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
+      "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
       "cpu": [
         "x64"
       ],
@@ -4465,9 +4457,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.56.0.tgz",
-      "integrity": "sha512-O16XcmyDeFI9879pEcmtWvD/2nyxR9mF7Gs44lf1vGGx8Vg2DRNx11aVXBEqOQhWb92WN4z7fW/q4+2NYzCbBA==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
+      "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
       "cpu": [
         "x64"
       ],
@@ -4478,9 +4470,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.56.0.tgz",
-      "integrity": "sha512-LhN/Reh+7F3RCgQIRbgw8ZMwUwyqJM+8pXNT6IIJAqm2IdKkzpCh/V9EdgOMBKuebIrzswqy4ATlrDgiOwbRcQ==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
+      "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
       "cpu": [
         "arm64"
       ],
@@ -4491,9 +4483,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.56.0.tgz",
-      "integrity": "sha512-kbFsOObXp3LBULg1d3JIUQMa9Kv4UitDmpS+k0tinPBz3watcUiV2/LUDMMucA6pZO3WGE27P7DsfaN54l9ing==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
+      "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
       "cpu": [
         "arm64"
       ],
@@ -4504,9 +4496,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.56.0.tgz",
-      "integrity": "sha512-vSSgny54D6P4vf2izbtFm/TcWYedw7f8eBrOiGGecyHyQB9q4Kqentjaj8hToe+995nob/Wv48pDqL5a62EWtg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
+      "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
       "cpu": [
         "ia32"
       ],
@@ -4517,9 +4509,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.56.0.tgz",
-      "integrity": "sha512-FeCnkPCTHQJFbiGG49KjV5YGW/8b9rrXAM2Mz2kiIoktq2qsJxRD5giEMEOD2lPdgs72upzefaUvS+nc8E3UzQ==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
       "cpu": [
         "x64"
       ],
@@ -4530,9 +4522,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.56.0.tgz",
-      "integrity": "sha512-H8AE9Ur/t0+1VXujj90w0HrSOuv0Nq9r1vSZF2t5km20NTfosQsGGUXDaKdQZzwuLts7IyL1fYT4hM95TI9c4g==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
+      "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
       "cpu": [
         "x64"
       ],
@@ -4635,7 +4627,6 @@
       "resolved": "https://registry.npmjs.org/@sanity/client/-/client-7.14.1.tgz",
       "integrity": "sha512-lCDx0vuNUgg9FL2E5Hiv1q7u6iHd1Z+jjMZAaYtfzzFPoBKOiyZlaFwqyLVHRyTbwnXQdIGDPmx2AvfBTbGQsQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@sanity/eventsource": "^5.0.2",
         "get-it": "^8.7.0",
@@ -5405,9 +5396,9 @@
       }
     },
     "node_modules/@sanity/orderable-document-list": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@sanity/orderable-document-list/-/orderable-document-list-1.4.2.tgz",
-      "integrity": "sha512-tnomvVsUElB70ZY7kh5LYoA3cZe/oCUu49bLper+CZm9QxoIF5336KeEw95Y/YL0oipiTkdaqiiIjgCwx+emgg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@sanity/orderable-document-list/-/orderable-document-list-1.5.0.tgz",
+      "integrity": "sha512-Ed1cykbRW/UrW4JC+KRVWAvm6TN7Z80DBUkf9qbNzFUnykFR8Yxtmmdcbx5Q1HwzTzA7uUR6agWYuw4COqt7YQ==",
       "license": "MIT",
       "dependencies": {
         "@hello-pangea/dnd": "^18.0.1",
@@ -5710,9 +5701,9 @@
       }
     },
     "node_modules/@sanity/runtime-cli/node_modules/string-width": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.0.tgz",
-      "integrity": "sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.1.tgz",
+      "integrity": "sha512-KpqHIdDL9KwYk22wEOg/VIqYbrnLeSApsKT/bSj6Ez7pn3CftUiLAv2Lccpq1ALcpLV9UX1Ppn92npZWu2w/aw==",
       "license": "MIT",
       "dependencies": {
         "get-east-asian-width": "^1.3.0",
@@ -5953,7 +5944,6 @@
       "resolved": "https://registry.npmjs.org/@sanity/types/-/types-4.22.0.tgz",
       "integrity": "sha512-VWAUc8Xtj4IipQt99SzudRldJWHfBVnde+g5qnLZ/Nc1MpFjGiRWu/3smRN5mPOqlrtUfrr0ho/fBZnjE1CEMg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@sanity/client": "^7.13.2",
         "@sanity/media-library-types": "^1.0.1"
@@ -6582,11 +6572,10 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "25.0.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.10.tgz",
-      "integrity": "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==",
+      "version": "25.1.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.1.0.tgz",
+      "integrity": "sha512-t7frlewr6+cbx+9Ohpl0NOTKXZNV9xHRmNOvql47BFJKcEG1CxtxlPEEe+gR9uhVWM4DwhnvTF110mIL4yP9RA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -6604,11 +6593,10 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.2.9",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.9.tgz",
-      "integrity": "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==",
+      "version": "19.2.10",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
+      "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -6681,17 +6669,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.53.1.tgz",
-      "integrity": "sha512-cFYYFZ+oQFi6hUnBTbLRXfTJiaQtYE3t4O692agbBl+2Zy+eqSKWtPjhPXJu1G7j4RLjKgeJPDdq3EqOwmX5Ag==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.54.0.tgz",
+      "integrity": "sha512-hAAP5io/7csFStuOmR782YmTthKBJ9ND3WVL60hcOjvtGFb+HJxH4O5huAcmcZ9v9G8P+JETiZ/G1B8MALnWZQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/type-utils": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/type-utils": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.4.0"
@@ -6704,7 +6692,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.53.1",
+        "@typescript-eslint/parser": "^8.54.0",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
@@ -6720,17 +6708,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.53.1.tgz",
-      "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.54.0.tgz",
+      "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -6746,14 +6733,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.53.1.tgz",
-      "integrity": "sha512-WYC4FB5Ra0xidsmlPb+1SsnaSKPmS3gsjIARwbEkHkoWloQmuzcfypljaJcR78uyLA1h8sHdWWPHSLDI+MtNog==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.54.0.tgz",
+      "integrity": "sha512-YPf+rvJ1s7MyiWM4uTRhE4DvBXrEV+d8oC3P9Y2eT7S+HBS0clybdMIPnhiATi9vZOYDc7OQ1L/i6ga6NFYK/g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.53.1",
-        "@typescript-eslint/types": "^8.53.1",
+        "@typescript-eslint/tsconfig-utils": "^8.54.0",
+        "@typescript-eslint/types": "^8.54.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -6768,14 +6755,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.53.1.tgz",
-      "integrity": "sha512-Lu23yw1uJMFY8cUeq7JlrizAgeQvWugNQzJp8C3x8Eo5Jw5Q2ykMdiiTB9vBVOOUBysMzmRRmUfwFrZuI2C4SQ==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.54.0.tgz",
+      "integrity": "sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1"
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -6786,9 +6773,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.53.1.tgz",
-      "integrity": "sha512-qfvLXS6F6b1y43pnf0pPbXJ+YoXIC7HKg0UGZ27uMIemKMKA6XH2DTxsEDdpdN29D+vHV07x/pnlPNVLhdhWiA==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.54.0.tgz",
+      "integrity": "sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6803,15 +6790,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.53.1.tgz",
-      "integrity": "sha512-MOrdtNvyhy0rHyv0ENzub1d4wQYKb2NmIqG7qEqPWFW7Mpy2jzFC3pQ2yKDvirZB7jypm5uGjF2Qqs6OIqu47w==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.54.0.tgz",
+      "integrity": "sha512-hiLguxJWHjjwL6xMBwD903ciAwd7DmK30Y9Axs/etOkftC3ZNN9K44IuRD/EB08amu+Zw6W37x9RecLkOo3pMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.4.0"
       },
@@ -6828,9 +6815,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.53.1.tgz",
-      "integrity": "sha512-jr/swrr2aRmUAUjW5/zQHbMaui//vQlsZcJKijZf3M26bnmLj8LyZUpj8/Rd6uzaek06OWsqdofN/Thenm5O8A==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.54.0.tgz",
+      "integrity": "sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6842,16 +6829,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.53.1.tgz",
-      "integrity": "sha512-RGlVipGhQAG4GxV1s34O91cxQ/vWiHJTDHbXRr0li2q/BGg3RR/7NM8QDWgkEgrwQYCvmJV9ichIwyoKCQ+DTg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.54.0.tgz",
+      "integrity": "sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.53.1",
-        "@typescript-eslint/tsconfig-utils": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/project-service": "8.54.0",
+        "@typescript-eslint/tsconfig-utils": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "debug": "^4.4.3",
         "minimatch": "^9.0.5",
         "semver": "^7.7.3",
@@ -6909,16 +6896,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.53.1.tgz",
-      "integrity": "sha512-c4bMvGVWW4hv6JmDUEG7fSYlWOl3II2I4ylt0NM+seinYQlZMQIaKaXIIVJWt9Ofh6whrpM+EdDQXKXjNovvrg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.54.0.tgz",
+      "integrity": "sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1"
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -6933,13 +6920,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.53.1.tgz",
-      "integrity": "sha512-oy+wV7xDKFPRyNggmXuZQSBzvoLnpmJs+GhzRhPjrxl2b/jIlyjVokzm47CZCDUdXKr2zd7ZLodPfOBpOPyPlg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.54.0.tgz",
+      "integrity": "sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
+        "@typescript-eslint/types": "8.54.0",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -7065,7 +7052,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -7523,13 +7509,13 @@
       }
     },
     "node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.13.0.tgz",
-      "integrity": "sha512-U+GNwMdSFgzVmfhNm8GJUX88AadB3uo9KpJqS3FaqNIPKgySuvMb+bHPsOmmuWyIcuqZj/pzt1RUIUZns4y2+A==",
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.14.0.tgz",
+      "integrity": "sha512-AvDcMxJ34W4Wgy4KBIIePQTAOP1Ie2WFwkQp3dB7FQ/f0lI5+nM96zUnYEOE1P9sEg0es5VCP0HxiWu5fUHZAQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.5",
-        "core-js-compat": "^3.43.0"
+        "@babel/helper-define-polyfill-provider": "^0.6.6",
+        "core-js-compat": "^3.48.0"
       },
       "peerDependencies": {
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
@@ -7588,9 +7574,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.9.18",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.18.tgz",
-      "integrity": "sha512-e23vBV1ZLfjb9apvfPk4rHVu2ry6RIr2Wfs+O324okSidrX7pTAnEJPCh/O5BtRlr7QtZI7ktOP3vsqr7Z5XoA==",
+      "version": "2.9.19",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
+      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
@@ -7696,7 +7682,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -8963,9 +8948,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.278",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.278.tgz",
-      "integrity": "sha512-dQ0tM1svDRQOwxnXxm+twlGTjr9Upvt8UFWAgmLsxEzFQxhbti4VwxmMjsDxVC51Zo84swW7FVCXEV+VAkhuPw==",
+      "version": "1.5.283",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.283.tgz",
+      "integrity": "sha512-3vifjt1HgrGW/h76UEeny+adYApveS9dH2h3p57JYzBSXJIKUJAvtmIytDKjcSCt9xHfrNCFJ7gts6vkhuq++w==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -9183,7 +9168,6 @@
       "integrity": "sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA==",
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -9258,7 +9242,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -10607,9 +10590,9 @@
       }
     },
     "node_modules/groq-js": {
-      "version": "1.25.0",
-      "resolved": "https://registry.npmjs.org/groq-js/-/groq-js-1.25.0.tgz",
-      "integrity": "sha512-ShVrNkIg/IRxyyNQoh1orC/UD8FIUSKwwV5BKF4opIaoPCPeI0V/iFQL4jgB8ve67f5LZkDlmd4PCMT7I+3swA==",
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/groq-js/-/groq-js-1.26.0.tgz",
+      "integrity": "sha512-1WxWfmeownBbB2UhvFGyLT3yl/NFGF2qUoev+650Or2qDnoyXjvL83lwspUFuG4piWdDRh2iETljXKoDxacH+w==",
       "license": "MIT",
       "dependencies": {
         "debug": "^4.3.4"
@@ -10954,7 +10937,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.2"
       }
@@ -12196,7 +12178,6 @@
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
       "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssstyle": "^4.2.1",
         "data-urls": "^5.0.0",
@@ -14241,9 +14222,9 @@
       }
     },
     "node_modules/react": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
-      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -14271,16 +14252,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
-      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.2.3"
+        "react": "^19.2.4"
       }
     },
     "node_modules/react-fast-compare": {
@@ -14339,11 +14319,10 @@
       }
     },
     "node_modules/react-is": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
-      "integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==",
-      "license": "MIT",
-      "peer": true
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
+      "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==",
+      "license": "MIT"
     },
     "node_modules/react-redux": {
       "version": "9.2.0",
@@ -14663,8 +14642,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
@@ -14907,9 +14885,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.56.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.56.0.tgz",
-      "integrity": "sha512-9FwVqlgUHzbXtDg9RCMgodF3Ua4Na6Gau+Sdt9vyCN4RhHfVKX2DCHy3BjMLTDd47ITDhYAnTwGulWTblJSDLg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
+      "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -14922,31 +14900,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.56.0",
-        "@rollup/rollup-android-arm64": "4.56.0",
-        "@rollup/rollup-darwin-arm64": "4.56.0",
-        "@rollup/rollup-darwin-x64": "4.56.0",
-        "@rollup/rollup-freebsd-arm64": "4.56.0",
-        "@rollup/rollup-freebsd-x64": "4.56.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.56.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.56.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.56.0",
-        "@rollup/rollup-linux-arm64-musl": "4.56.0",
-        "@rollup/rollup-linux-loong64-gnu": "4.56.0",
-        "@rollup/rollup-linux-loong64-musl": "4.56.0",
-        "@rollup/rollup-linux-ppc64-gnu": "4.56.0",
-        "@rollup/rollup-linux-ppc64-musl": "4.56.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.56.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.56.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.56.0",
-        "@rollup/rollup-linux-x64-gnu": "4.56.0",
-        "@rollup/rollup-linux-x64-musl": "4.56.0",
-        "@rollup/rollup-openbsd-x64": "4.56.0",
-        "@rollup/rollup-openharmony-arm64": "4.56.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.56.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.56.0",
-        "@rollup/rollup-win32-x64-gnu": "4.56.0",
-        "@rollup/rollup-win32-x64-msvc": "4.56.0",
+        "@rollup/rollup-android-arm-eabi": "4.57.1",
+        "@rollup/rollup-android-arm64": "4.57.1",
+        "@rollup/rollup-darwin-arm64": "4.57.1",
+        "@rollup/rollup-darwin-x64": "4.57.1",
+        "@rollup/rollup-freebsd-arm64": "4.57.1",
+        "@rollup/rollup-freebsd-x64": "4.57.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.57.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.57.1",
+        "@rollup/rollup-linux-arm64-musl": "4.57.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.57.1",
+        "@rollup/rollup-linux-loong64-musl": "4.57.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.57.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.57.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.57.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.57.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.57.1",
+        "@rollup/rollup-linux-x64-gnu": "4.57.1",
+        "@rollup/rollup-linux-x64-musl": "4.57.1",
+        "@rollup/rollup-openbsd-x64": "4.57.1",
+        "@rollup/rollup-openharmony-arm64": "4.57.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.57.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.57.1",
+        "@rollup/rollup-win32-x64-gnu": "4.57.1",
+        "@rollup/rollup-win32-x64-msvc": "4.57.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -14993,7 +14971,6 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -15105,7 +15082,6 @@
       "resolved": "https://registry.npmjs.org/sanity/-/sanity-4.22.0.tgz",
       "integrity": "sha512-wBmr/euVC6Kvni1gKP2qwkEsyxGQlfnPOhjowT7tjm0a0eOvBwS6uHnHtjr24wjhf8PeongurQzMewx2tTP8Wg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@date-fns/tz": "^1.4.1",
         "@dnd-kit/core": "^6.3.1",
@@ -16145,8 +16121,7 @@
       "version": "0.120.0",
       "resolved": "https://registry.npmjs.org/slate/-/slate-0.120.0.tgz",
       "integrity": "sha512-CXK/DADGgMZb4z9RTtXylzIDOxvmNJEF9bXV2bAGkLWhQ3rm7GORY9q0H/W41YJvAGZsLbH7nnrhMYr550hWDQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/slate-dom": {
       "version": "0.119.0",
@@ -16650,7 +16625,6 @@
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.3.8.tgz",
       "integrity": "sha512-Kq/W41AKQloOqKM39zfaMdJ4BcYDw/N5CIq4/GTI0YjU6pKcZ1KKhk6b4du0a+6RA9pIfOP/eu94Ge7cu+PDCA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@emotion/is-prop-valid": "1.4.0",
         "@emotion/unitless": "0.10.0",
@@ -16844,7 +16818,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -17128,7 +17101,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -17138,16 +17110,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.53.1.tgz",
-      "integrity": "sha512-gB+EVQfP5RDElh9ittfXlhZJdjSU4jUSTyE2+ia8CYyNvet4ElfaLlAIqDvQV9JPknKx0jQH1racTYe/4LaLSg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.54.0.tgz",
+      "integrity": "sha512-CKsJ+g53QpsNPqbzUsfKVgd3Lny4yKZ1pP4qN3jdMOg/sisIDLGyDMezycquXLE5JsEU0wp3dGNdzig0/fmSVQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.53.1",
-        "@typescript-eslint/parser": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1"
+        "@typescript-eslint/eslint-plugin": "8.54.0",
+        "@typescript-eslint/parser": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -17485,7 +17457,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -17596,7 +17567,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -18041,9 +18011,9 @@
       }
     },
     "node_modules/xstate": {
-      "version": "5.25.1",
-      "resolved": "https://registry.npmjs.org/xstate/-/xstate-5.25.1.tgz",
-      "integrity": "sha512-oyvsNH5pF2qkHmiHEMdWqc3OjDtoZOH2MTAI35r01f/ZQWOD+VLOiYqo65UgQET0XMA5s9eRm8fnsIo+82biEw==",
+      "version": "5.26.0",
+      "resolved": "https://registry.npmjs.org/xstate/-/xstate-5.26.0.tgz",
+      "integrity": "sha512-Fvi9VBoqHgsGYLU2NTag8xDTWtKqUC0+ue7EAhBNBb06wf620QEy05upBaEI1VLMzIn63zugLV8nHb69ZUWYAA==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
diff --git a/studio/package.json b/studio/package.json
index 0137d201..576dfaa3 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -1,7 +1,7 @@
 {
   "name": "devlovers",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.5.1",
   "main": "package.json",
   "license": "UNLICENSED",
   "scripts": {

From 0b726bf73b6d23c5ddd819f2355f7136f9bfebbc Mon Sep 17 00:00:00 2001
From: Viktor Svertoka <victor.svertoka@gmail.com>
Date: Sun, 1 Feb 2026 00:44:07 +0200
Subject: [PATCH 05/24] Host (#238)

* feat(md) add netlify status

* feat(files): add packages

* fix(auth): use currentTarget for email input validity

* fix(auth): use currentTarget for email input validity

* fix(auth): use currentTarget in password field
---
 frontend/components/auth/fields/NameField.tsx     | 4 ++--
 frontend/components/auth/fields/PasswordField.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/components/auth/fields/NameField.tsx b/frontend/components/auth/fields/NameField.tsx
index b143b0e0..f2ddcee7 100644
--- a/frontend/components/auth/fields/NameField.tsx
+++ b/frontend/components/auth/fields/NameField.tsx
@@ -12,7 +12,7 @@ export function NameField({
     const t = useTranslations("auth.fields");
 
     const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
-        const input = e.target;
+        const input = e.currentTarget;
         if (input.validity.valueMissing) {
             input.setCustomValidity(t("validation.required"));
         }
@@ -33,4 +33,4 @@ export function NameField({
             onInput={handleInput}
         />
     );
-}
\ No newline at end of file
+}
diff --git a/frontend/components/auth/fields/PasswordField.tsx b/frontend/components/auth/fields/PasswordField.tsx
index cbc36d87..4f78d772 100644
--- a/frontend/components/auth/fields/PasswordField.tsx
+++ b/frontend/components/auth/fields/PasswordField.tsx
@@ -16,7 +16,7 @@ export function PasswordField({
     const [visible, setVisible] = useState(false);
 
     const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
-        const input = e.target;
+        const input = e.currentTarget;
         if (input.validity.valueMissing) {
             input.setCustomValidity(t("validation.required"));
         } else if (input.validity.tooShort && minLength) {
@@ -53,4 +53,4 @@ export function PasswordField({
             </button>
         </div>
     );
-}
\ No newline at end of file
+}

From d0a0586676a9de9521881fe216d6b49048d3e15d Mon Sep 17 00:00:00 2001
From: liudmylasovetovs <127711697+liudmylasovetovs@users.noreply.github.com>
Date: Sat, 31 Jan 2026 15:09:31 -0800
Subject: [PATCH 06/24] (SP 1) [Shop UI] Add page metadata across shop routes
 (#239)

* (SP 2) [Shop UI] Unify storefront styles across components and interactions

* (SP 1) [Shop UI] Add page metadata across shop routes
---
 .../[locale]/shop/admin/orders/[id]/page.tsx  |   6 +
 .../app/[locale]/shop/admin/orders/page.tsx   |   7 +
 frontend/app/[locale]/shop/admin/page.tsx     |   7 +-
 .../shop/admin/products/[id]/edit/page.tsx    |   8 +-
 .../[locale]/shop/admin/products/new/page.tsx |   7 +-
 .../app/[locale]/shop/admin/products/page.tsx |   6 +-
 .../app/[locale]/shop/cart/CartPageClient.tsx | 463 ++++++++++++++++++
 frontend/app/[locale]/shop/cart/page.tsx      | 410 +---------------
 .../app/[locale]/shop/checkout/error/page.tsx |   8 +-
 .../shop/checkout/payment/[orderId]/page.tsx  |   6 +
 .../success/OrderStatusAutoRefresh.tsx        |   1 -
 .../[locale]/shop/checkout/success/page.tsx   |  18 +-
 .../app/[locale]/shop/orders/[id]/page.tsx    |   5 +
 frontend/app/[locale]/shop/orders/page.tsx    |   7 +
 frontend/app/[locale]/shop/page.tsx           |   6 +
 .../[locale]/shop/products/[slug]/page.tsx    |   7 +-
 frontend/app/[locale]/shop/products/page.tsx  |   6 +
 17 files changed, 564 insertions(+), 414 deletions(-)
 create mode 100644 frontend/app/[locale]/shop/cart/CartPageClient.tsx

diff --git a/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx b/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx
index 007b076f..af75a718 100644
--- a/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx
+++ b/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx
@@ -12,6 +12,12 @@ import {
 import { fromDbMoney } from '@/lib/shop/money';
 import { ShopAdminTopbar } from '@/components/shop/admin/shop-admin-topbar';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Admin Order | DevLovers',
+  description: 'Review and manage order, including refunds and status checks.',
+};
 
 export const dynamic = 'force-dynamic';
 
diff --git a/frontend/app/[locale]/shop/admin/orders/page.tsx b/frontend/app/[locale]/shop/admin/orders/page.tsx
index 5cf475e6..7979aa7f 100644
--- a/frontend/app/[locale]/shop/admin/orders/page.tsx
+++ b/frontend/app/[locale]/shop/admin/orders/page.tsx
@@ -13,6 +13,13 @@ import { AdminPagination } from '@/components/shop/admin/admin-pagination';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
 import { CSRF_FORM_FIELD, issueCsrfToken } from '@/lib/security/csrf';
 import { parsePage } from '@/lib/pagination';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Admin Orders | DevLovers',
+  description: 'View and manage orders in the DevLovers shop catalog.',
+};
+
 
 export const dynamic = 'force-dynamic';
 
diff --git a/frontend/app/[locale]/shop/admin/page.tsx b/frontend/app/[locale]/shop/admin/page.tsx
index 1f980916..4c8a3fb9 100644
--- a/frontend/app/[locale]/shop/admin/page.tsx
+++ b/frontend/app/[locale]/shop/admin/page.tsx
@@ -1,9 +1,14 @@
-// frontend/app/[locale]/shop/admin/page.tsx
 import { Link } from '@/i18n/routing';
 import { getTranslations } from 'next-intl/server';
 
 import { ShopAdminTopbar } from '@/components/shop/admin/shop-admin-topbar';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Shop Admin | DevLovers',
+  description: 'Manage products, orders, and settings for your shop.',
+};
 
 export const dynamic = 'force-dynamic';
 
diff --git a/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx b/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
index c117697d..32c71ae8 100644
--- a/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
@@ -1,4 +1,3 @@
-// frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
 import { notFound } from 'next/navigation';
 import { eq } from 'drizzle-orm';
 import { z } from 'zod';
@@ -12,6 +11,13 @@ import { products, productPrices } from '@/db/schema';
 import type { CurrencyCode } from '@/lib/shop/currency';
 import { currencyValues } from '@/lib/shop/currency';
 import { issueCsrfToken } from '@/lib/security/csrf';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Edit Product | DevLovers',
+  description: 'Edit an existing product in the DevLovers shop catalog.',
+};
+
 
 export const dynamic = 'force-dynamic';
 
diff --git a/frontend/app/[locale]/shop/admin/products/new/page.tsx b/frontend/app/[locale]/shop/admin/products/new/page.tsx
index b40a26d0..89cc4de4 100644
--- a/frontend/app/[locale]/shop/admin/products/new/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/new/page.tsx
@@ -1,9 +1,14 @@
-// frontend/app/[locale]/shop/admin/products/new/page.tsx
 import { ShopAdminTopbar } from '@/components/shop/admin/shop-admin-topbar';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
 import { issueCsrfToken } from '@/lib/security/csrf';
 
 import { ProductForm } from '../_components/product-form';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'New Product | DevLovers',
+  description: 'Create a new product for the DevLovers shop catalog.',
+};
 
 export const dynamic = 'force-dynamic';
 
diff --git a/frontend/app/[locale]/shop/admin/products/page.tsx b/frontend/app/[locale]/shop/admin/products/page.tsx
index 5bfb4d09..ed1dccf1 100644
--- a/frontend/app/[locale]/shop/admin/products/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/page.tsx
@@ -1,4 +1,3 @@
-// frontend/app/[locale]/shop/admin/products/page.tsx
 import { Link } from '@/i18n/routing';
 import { and, desc, eq, sql } from 'drizzle-orm';
 import { issueCsrfToken } from '@/lib/security/csrf';
@@ -17,7 +16,12 @@ import {
 import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import { parsePage } from '@/lib/pagination';
 import { getTranslations } from 'next-intl/server';
+import { Metadata } from 'next';
 
+export const metadata: Metadata = {
+  title: 'Admin Products | DevLovers',
+  description: 'Create, edit, activate, and manage product catalog.',
+};
 export const dynamic = 'force-dynamic';
 
 const PAGE_SIZE = 25;
diff --git a/frontend/app/[locale]/shop/cart/CartPageClient.tsx b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
new file mode 100644
index 00000000..acf8dc50
--- /dev/null
+++ b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
@@ -0,0 +1,463 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import { useParams } from 'next/navigation';
+import { useRouter, Link } from '@/i18n/routing';
+import { useTranslations } from 'next-intl';
+import { cn } from '@/lib/utils';
+import { Minus, Plus, Trash2, ShoppingBag } from 'lucide-react';
+
+import { useCart } from '@/components/shop/cart-provider';
+import { generateIdempotencyKey } from '@/lib/shop/idempotency';
+import { formatMoney } from '@/lib/shop/currency';
+import {
+  SHOP_FOCUS,
+  SHOP_LINK_BASE,
+  SHOP_LINK_MD,
+  SHOP_LINK_XS,
+  SHOP_DISABLED,
+  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_SHADOW_HOVER,
+  SHOP_CHIP_BORDER_HOVER,
+  SHOP_STEPPER_BUTTON_BASE,
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_CTA_INSET,
+  SHOP_CTA_WAVE,
+  shopCtaGradient,
+} from '@/lib/shop/ui-classes';
+
+const SHOP_PRODUCT_LINK = cn(
+  'block truncate',
+  SHOP_LINK_BASE,
+  SHOP_LINK_MD,
+  SHOP_FOCUS
+);
+
+const SHOP_STEPPER_BTN = cn(
+  SHOP_STEPPER_BUTTON_BASE,
+  'h-8 w-8',
+  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_SHADOW_HOVER,
+  SHOP_CHIP_BORDER_HOVER,
+  SHOP_FOCUS,
+  SHOP_DISABLED
+);
+
+const SHOP_HERO_CTA = cn(
+  SHOP_CTA_BASE,
+  SHOP_CTA_INTERACTIVE,
+  SHOP_FOCUS,
+  SHOP_DISABLED,
+  'w-full justify-center gap-2 px-6 py-3 text-sm text-white',
+  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
+);
+
+export default function CartPage() {
+  const { cart, updateQuantity, removeFromCart } = useCart();
+  const router = useRouter();
+  const t = useTranslations('shop.cart');
+  const tColors = useTranslations('shop.catalog.colors');
+  const [isCheckingOut, setIsCheckingOut] = useState(false);
+  const [checkoutError, setCheckoutError] = useState<string | null>(null);
+  const [createdOrderId, setCreatedOrderId] = useState<string | null>(null);
+
+  const params = useParams<{ locale?: string }>();
+  const locale = params.locale ?? 'en';
+  const shopBase = '/shop';
+
+  const translateColor = (color: string | null | undefined): string | null => {
+    if (!color) return null;
+    const colorSlug = color.toLowerCase();
+    try {
+      return tColors(colorSlug);
+    } catch {
+      return color;
+    }
+  };
+
+  async function handleCheckout() {
+    setCheckoutError(null);
+    setCreatedOrderId(null);
+    setIsCheckingOut(true);
+
+    try {
+      const idempotencyKey = generateIdempotencyKey();
+
+      const response = await fetch('/api/shop/checkout', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Idempotency-Key': idempotencyKey,
+        },
+        body: JSON.stringify({
+          items: cart.items.map(item => ({
+            productId: item.productId,
+            quantity: item.quantity,
+            selectedSize: item.selectedSize,
+            selectedColor: item.selectedColor,
+          })),
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        const message =
+          typeof data?.message === 'string'
+            ? data.message
+            : typeof data?.error === 'string'
+              ? data.error
+              : 'Unable to start checkout right now.';
+        setCheckoutError(message);
+        return;
+      }
+
+      if (!data?.orderId) {
+        setCheckoutError('Unexpected checkout response.');
+        return;
+      }
+
+      const paymentProvider: string = data.paymentProvider ?? 'none';
+      const clientSecret: string | null =
+        typeof data.clientSecret === 'string' &&
+        data.clientSecret.trim().length > 0
+          ? data.clientSecret
+          : null;
+
+      const orderId = String(data.orderId);
+      setCreatedOrderId(orderId);
+
+      if (paymentProvider === 'stripe' && clientSecret) {
+        router.push(
+          `${shopBase}/checkout/payment/${encodeURIComponent(
+            orderId
+          )}?clientSecret=${encodeURIComponent(clientSecret)}&clearCart=1`
+        );
+        return;
+      }
+
+      const paymentsDisabledFlag =
+        paymentProvider !== 'stripe' || !clientSecret
+          ? '&paymentsDisabled=true'
+          : '';
+
+      router.push(
+        `${shopBase}/checkout/success?orderId=${encodeURIComponent(
+          orderId
+        )}&clearCart=1${paymentsDisabledFlag}`
+      );
+    } catch {
+      setCheckoutError('Unable to start checkout right now.');
+    } finally {
+      setIsCheckingOut(false);
+    }
+  }
+
+  if (cart.items.length === 0) {
+    return (
+      <main className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
+        <div className="flex flex-col items-center justify-center text-center">
+          <ShoppingBag
+            className="h-16 w-16 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <h1 className="mt-6 text-3xl font-bold tracking-tight text-foreground">
+            {t('empty')}
+          </h1>
+          <p className="mt-4 text-muted-foreground">{t('emptyDescription')}</p>
+
+          <div className="mt-8 w-full max-w-md mx-auto">
+            <Link href="/shop/products" className={SHOP_HERO_CTA}>
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg',
+                  '--shop-hero-btn-bg-hover'
+                )}
+                aria-hidden="true"
+              />
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg-hover',
+                  '--shop-hero-btn-bg'
+                )}
+                aria-hidden="true"
+              />
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+              <span className="relative z-10">{t('startShopping')}</span>
+            </Link>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="text-3xl font-bold tracking-tight text-foreground">
+        {t('title')}
+      </h1>
+
+      <div className="mt-8 grid gap-8 lg:grid-cols-[1fr_380px]">
+        <section aria-label={t('itemsLabel')}>
+          <ul className="space-y-4">
+            {cart.removed.length > 0 && (
+              <li
+                className="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900"
+                role="status"
+                aria-live="polite"
+              >
+                {t('alerts.itemsRemoved')}
+              </li>
+            )}
+
+            {cart.items.map(item => (
+              <li
+                key={`${item.productId}-${item.selectedSize ?? 'na'}-${item.selectedColor ?? 'na'}`}
+                className="rounded-lg border border-border p-4"
+              >
+                <article className="flex gap-4">
+                  <div className="relative h-24 w-24 flex-shrink-0 overflow-hidden rounded-md bg-muted">
+                    <Image
+                      src={item.imageUrl || '/placeholder.svg'}
+                      alt={item.title}
+                      fill
+                      className="object-cover"
+                      sizes="96px"
+                    />
+                  </div>
+
+                  <div className="flex flex-1 flex-col">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <Link
+                          href={`/shop/products/${item.slug}`}
+                          className={SHOP_PRODUCT_LINK}
+                        >
+                          {item.title}
+                        </Link>
+
+                        {(item.selectedSize || item.selectedColor) && (
+                          <p className="mt-1 text-xs text-muted-foreground">
+                            {[
+                              translateColor(item.selectedColor),
+                              item.selectedSize,
+                            ]
+                              .filter(Boolean)
+                              .join(' / ')}
+                          </p>
+                        )}
+                      </div>
+
+                      <button
+                        type="button"
+                        onClick={() =>
+                          removeFromCart(
+                            item.productId,
+                            item.selectedSize,
+                            item.selectedColor
+                          )
+                        }
+                        className="text-muted-foreground transition-colors hover:text-foreground"
+                        aria-label={t('actions.removeItem', {
+                          title: item.title,
+                        })}
+                      >
+                        <Trash2 className="h-4 w-4" aria-hidden="true" />
+                      </button>
+                    </div>
+
+                    <div className="mt-auto flex items-center justify-between pt-2">
+                      <div className="flex items-center gap-2">
+                        <button
+                          type="button"
+                          onClick={() =>
+                            updateQuantity(
+                              item.productId,
+                              item.quantity - 1,
+                              item.selectedSize,
+                              item.selectedColor
+                            )
+                          }
+                          disabled={item.quantity <= 1}
+                          className={SHOP_STEPPER_BTN}
+                          aria-label={t('actions.decreaseQty')}
+                        >
+                          <Minus className="h-3 w-3" aria-hidden="true" />
+                        </button>
+
+                        <span className="w-8 text-center text-sm font-medium">
+                          {item.quantity}
+                        </span>
+
+                        <button
+                          type="button"
+                          onClick={() =>
+                            updateQuantity(
+                              item.productId,
+                              item.quantity + 1,
+                              item.selectedSize,
+                              item.selectedColor
+                            )
+                          }
+                          disabled={item.quantity >= item.stock}
+                          className={SHOP_STEPPER_BTN}
+                          aria-label={t('actions.increaseQty')}
+                        >
+                          <Plus className="h-3 w-3" aria-hidden="true" />
+                        </button>
+
+                        {item.quantity >= item.stock && (
+                          <span
+                            className="ml-3 text-xs text-muted-foreground"
+                            role="status"
+                          >
+                            {t('actions.maxStock', { stock: item.stock })}
+                          </span>
+                        )}
+                      </div>
+
+                      <span className="text-sm font-semibold text-foreground">
+                        {formatMoney(
+                          item.lineTotalMinor,
+                          item.currency,
+                          locale
+                        )}
+                      </span>
+                    </div>
+                  </div>
+                </article>
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <aside
+          className="h-fit rounded-lg border border-border p-6"
+          aria-labelledby="order-summary"
+        >
+          <h2
+            id="order-summary"
+            className="text-lg font-semibold text-foreground"
+          >
+            {t('summary.heading')}
+          </h2>
+
+          <div className="mt-6 space-y-4">
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-muted-foreground">
+                {t('summary.subtotal')}
+              </span>
+              <span className="font-medium text-foreground">
+                {formatMoney(
+                  cart.summary.totalAmountMinor,
+                  cart.summary.currency,
+                  locale
+                )}
+              </span>
+            </div>
+
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-muted-foreground">
+                {t('summary.shipping')}
+              </span>
+              <span className="text-muted-foreground">
+                {t('summary.shippingCalc')}
+              </span>
+            </div>
+
+            <div className="border-t border-border pt-4">
+              <div className="flex items-center justify-between">
+                <span className="text-base font-semibold text-foreground">
+                  {t('summary.total')}
+                </span>
+                <span className="text-lg font-bold text-foreground">
+                  {formatMoney(
+                    cart.summary.totalAmountMinor,
+                    cart.summary.currency,
+                    locale
+                  )}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-6 space-y-3">
+            <button
+              type="button"
+              onClick={handleCheckout}
+              disabled={isCheckingOut}
+              className={SHOP_HERO_CTA}
+              aria-busy={isCheckingOut}
+            >
+              <span
+                className="absolute inset-0"
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg',
+                  '--shop-hero-btn-bg-hover'
+                )}
+                aria-hidden="true"
+              />
+              <span
+                className={SHOP_CTA_WAVE}
+                style={shopCtaGradient(
+                  '--shop-hero-btn-bg-hover',
+                  '--shop-hero-btn-bg'
+                )}
+                aria-hidden="true"
+              />
+              <span className={SHOP_CTA_INSET} aria-hidden="true" />
+
+              <span className="relative z-10">
+                {isCheckingOut
+                  ? t('checkout.placing')
+                  : t('checkout.placeOrder')}
+              </span>
+            </button>
+
+            <p className="text-center text-xs text-muted-foreground">
+              {t('checkout.message')}
+            </p>
+
+            {/* Fallback CTA if navigation fails after order was created */}
+            {createdOrderId && !checkoutError ? (
+              <div className="flex justify-center">
+                <Link
+                  href={`/shop/orders/${encodeURIComponent(createdOrderId)}`}
+                  className={cn(SHOP_LINK_BASE, SHOP_LINK_XS, SHOP_FOCUS)}
+                >
+                  {t('checkout.notRedirected')}
+                </Link>
+              </div>
+            ) : null}
+
+            {checkoutError ? (
+              <div className="space-y-2">
+                <p
+                  className="text-center text-xs text-destructive"
+                  role="alert"
+                >
+                  {checkoutError}
+                </p>
+
+                {createdOrderId ? (
+                  <div className="flex justify-center">
+                    <Link
+                      href={`/shop/orders/${encodeURIComponent(createdOrderId)}`}
+                      className={cn(SHOP_LINK_BASE, SHOP_LINK_XS, SHOP_FOCUS)}
+                    >
+                      {t('checkout.goToOrder')}
+                    </Link>
+                  </div>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        </aside>
+      </div>
+    </main>
+  );
+}
diff --git a/frontend/app/[locale]/shop/cart/page.tsx b/frontend/app/[locale]/shop/cart/page.tsx
index 658fe356..dd15d65e 100644
--- a/frontend/app/[locale]/shop/cart/page.tsx
+++ b/frontend/app/[locale]/shop/cart/page.tsx
@@ -1,407 +1,11 @@
-'use client';
+import type { Metadata } from 'next';
+import CartPageClient from './CartPageClient';
 
-import { useState } from 'react';
-import Image from 'next/image';
-import { useParams } from 'next/navigation';
-import { useRouter, Link } from '@/i18n/routing';
-import { useTranslations } from 'next-intl';
-import { cn } from '@/lib/utils';
-import { Minus, Plus, Trash2, ShoppingBag } from 'lucide-react';
-
-import { useCart } from '@/components/shop/cart-provider';
-import { generateIdempotencyKey } from '@/lib/shop/idempotency';
-import { formatMoney } from '@/lib/shop/currency';
-import {
-  SHOP_FOCUS,
-  SHOP_LINK_BASE,
-  SHOP_LINK_MD,
-  SHOP_LINK_XS,
-  SHOP_DISABLED,
-  SHOP_CHIP_INTERACTIVE,
-  SHOP_CHIP_SHADOW_HOVER,
-  SHOP_CHIP_BORDER_HOVER,
-  SHOP_STEPPER_BUTTON_BASE,
-  SHOP_CTA_BASE,
-  SHOP_CTA_INTERACTIVE,
-  SHOP_CTA_INSET,
-  SHOP_CTA_WAVE,
-  shopCtaGradient,
-} from '@/lib/shop/ui-classes';
-
-const SHOP_PRODUCT_LINK = cn(
-  'block truncate',
-  SHOP_LINK_BASE,
-  SHOP_LINK_MD,
-  SHOP_FOCUS
-);
-
-const SHOP_STEPPER_BTN = cn(
-  SHOP_STEPPER_BUTTON_BASE,
-  'h-8 w-8',
-  SHOP_CHIP_INTERACTIVE,
-  SHOP_CHIP_SHADOW_HOVER,
-  SHOP_CHIP_BORDER_HOVER,
-  SHOP_FOCUS,
-  SHOP_DISABLED
-);
-
-const SHOP_HERO_CTA = cn(
-  SHOP_CTA_BASE,
-  SHOP_CTA_INTERACTIVE,
-  SHOP_FOCUS,
-  SHOP_DISABLED,
-  'w-full justify-center gap-2 px-6 py-3 text-sm text-white',
-  'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
-);
+export const metadata: Metadata = {
+  title: 'Cart | DevLovers',
+  description: 'Review items in your cart and proceed to checkout.',
+};
 
 export default function CartPage() {
-  const { cart, updateQuantity, removeFromCart } = useCart();
-  const router = useRouter();
-  const t = useTranslations('shop.cart');
-  const tColors = useTranslations('shop.catalog.colors');
-  const [isCheckingOut, setIsCheckingOut] = useState(false);
-  const [checkoutError, setCheckoutError] = useState<string | null>(null);
-  const [createdOrderId, setCreatedOrderId] = useState<string | null>(null);
-
-  const params = useParams<{ locale?: string }>();
-  const locale = params.locale ?? 'en';
-  const shopBase = '/shop';
-
-  const translateColor = (color: string | null | undefined): string | null => {
-    if (!color) return null;
-    const colorSlug = color.toLowerCase();
-    try {
-      return tColors(colorSlug);
-    } catch {
-      return color;
-    }
-  };
-
-  async function handleCheckout() {
-    setCheckoutError(null);
-    setCreatedOrderId(null);
-    setIsCheckingOut(true);
-
-    try {
-      const idempotencyKey = generateIdempotencyKey();
-
-      const response = await fetch('/api/shop/checkout', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Idempotency-Key': idempotencyKey,
-        },
-        body: JSON.stringify({
-          items: cart.items.map(item => ({
-            productId: item.productId,
-            quantity: item.quantity,
-            selectedSize: item.selectedSize,
-            selectedColor: item.selectedColor,
-          })),
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        const message =
-          typeof data?.message === 'string'
-            ? data.message
-            : typeof data?.error === 'string'
-              ? data.error
-              : 'Unable to start checkout right now.';
-        setCheckoutError(message);
-        return;
-      }
-
-      if (!data?.orderId) {
-        setCheckoutError('Unexpected checkout response.');
-        return;
-      }
-
-      const paymentProvider: string = data.paymentProvider ?? 'none';
-      const clientSecret: string | null =
-        typeof data.clientSecret === 'string' &&
-        data.clientSecret.trim().length > 0
-          ? data.clientSecret
-          : null;
-
-      const orderId = String(data.orderId);
-      setCreatedOrderId(orderId);
-
-      if (paymentProvider === 'stripe' && clientSecret) {
-        router.push(
-          `${shopBase}/checkout/payment/${encodeURIComponent(
-            orderId
-          )}?clientSecret=${encodeURIComponent(clientSecret)}&clearCart=1`
-        );
-        return;
-      }
-
-      const paymentsDisabledFlag =
-        paymentProvider !== 'stripe' || !clientSecret
-          ? '&paymentsDisabled=true'
-          : '';
-
-      router.push(
-        `${shopBase}/checkout/success?orderId=${encodeURIComponent(
-          orderId
-        )}&clearCart=1${paymentsDisabledFlag}`
-      );
-    } catch {
-      setCheckoutError('Unable to start checkout right now.');
-    } finally {
-      setIsCheckingOut(false);
-    }
-  }
-
-  if (cart.items.length === 0) {
-    return (
-      <main className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
-        <div className="flex flex-col items-center justify-center text-center">
-          <ShoppingBag className="h-16 w-16 text-muted-foreground" aria-hidden="true" />
-          <h1 className="mt-6 text-3xl font-bold tracking-tight text-foreground">
-            {t('empty')}
-          </h1>
-          <p className="mt-4 text-muted-foreground">{t('emptyDescription')}</p>
-
-          <div className="mt-8 w-full max-w-md mx-auto">
-            <Link href="/shop/products" className={SHOP_HERO_CTA}>
-              <span
-                className="absolute inset-0"
-                style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
-                aria-hidden="true"
-              />
-              <span
-                className={SHOP_CTA_WAVE}
-                style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
-                aria-hidden="true"
-              />
-              <span className={SHOP_CTA_INSET} aria-hidden="true" />
-              <span className="relative z-10">{t('startShopping')}</span>
-            </Link>
-          </div>
-        </div>
-      </main>
-    );
-  }
-
-  return (
-    <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <h1 className="text-3xl font-bold tracking-tight text-foreground">
-        {t('title')}
-      </h1>
-
-      <div className="mt-8 grid gap-8 lg:grid-cols-[1fr_380px]">
-        <section aria-label={t('itemsLabel')}>
-          <ul className="space-y-4">
-            {cart.removed.length > 0 && (
-              <li
-                className="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900"
-                role="status"
-                aria-live="polite"
-              >
-                {t('alerts.itemsRemoved')}
-              </li>
-            )}
-
-            {cart.items.map(item => (
-              <li
-                key={`${item.productId}-${item.selectedSize ?? 'na'}-${item.selectedColor ?? 'na'}`}
-                className="rounded-lg border border-border p-4"
-              >
-                <article className="flex gap-4">
-                  <div className="relative h-24 w-24 flex-shrink-0 overflow-hidden rounded-md bg-muted">
-                    <Image
-                      src={item.imageUrl || '/placeholder.svg'}
-                      alt={item.title}
-                      fill
-                      className="object-cover"
-                      sizes="96px"
-                    />
-                  </div>
-
-                  <div className="flex flex-1 flex-col">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="min-w-0">
-                        <Link
-                          href={`/shop/products/${item.slug}`}
-                          className={SHOP_PRODUCT_LINK}
-                        >
-                          {item.title}
-                        </Link>
-
-                        {(item.selectedSize || item.selectedColor) && (
-                          <p className="mt-1 text-xs text-muted-foreground">
-                            {[translateColor(item.selectedColor), item.selectedSize]
-                              .filter(Boolean)
-                              .join(' / ')}
-                          </p>
-                        )}
-                      </div>
-
-                      <button
-                        type="button"
-                        onClick={() =>
-                          removeFromCart(item.productId, item.selectedSize, item.selectedColor)
-                        }
-                        className="text-muted-foreground transition-colors hover:text-foreground"
-                        aria-label={t('actions.removeItem', { title: item.title })}
-                      >
-                        <Trash2 className="h-4 w-4" aria-hidden="true" />
-                      </button>
-                    </div>
-
-                    <div className="mt-auto flex items-center justify-between pt-2">
-                      <div className="flex items-center gap-2">
-                        <button
-                          type="button"
-                          onClick={() =>
-                            updateQuantity(
-                              item.productId,
-                              item.quantity - 1,
-                              item.selectedSize,
-                              item.selectedColor
-                            )
-                          }
-                          disabled={item.quantity <= 1}
-                          className={SHOP_STEPPER_BTN}
-                          aria-label={t('actions.decreaseQty')}
-                        >
-                          <Minus className="h-3 w-3" aria-hidden="true" />
-                        </button>
-
-                        <span className="w-8 text-center text-sm font-medium">
-                          {item.quantity}
-                        </span>
-
-                        <button
-                          type="button"
-                          onClick={() =>
-                            updateQuantity(
-                              item.productId,
-                              item.quantity + 1,
-                              item.selectedSize,
-                              item.selectedColor
-                            )
-                          }
-                          disabled={item.quantity >= item.stock}
-                          className={SHOP_STEPPER_BTN}
-                          aria-label={t('actions.increaseQty')}
-                        >
-                          <Plus className="h-3 w-3" aria-hidden="true" />
-                        </button>
-
-                        {item.quantity >= item.stock && (
-                          <span className="ml-3 text-xs text-muted-foreground" role="status">
-                            {t('actions.maxStock', { stock: item.stock })}
-                          </span>
-                        )}
-                      </div>
-
-                      <span className="text-sm font-semibold text-foreground">
-                        {formatMoney(item.lineTotalMinor, item.currency, locale)}
-                      </span>
-                    </div>
-                  </div>
-                </article>
-              </li>
-            ))}
-          </ul>
-        </section>
-
-        <aside className="h-fit rounded-lg border border-border p-6" aria-labelledby="order-summary">
-          <h2 id="order-summary" className="text-lg font-semibold text-foreground">
-            {t('summary.heading')}
-          </h2>
-
-          <div className="mt-6 space-y-4">
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-muted-foreground">{t('summary.subtotal')}</span>
-              <span className="font-medium text-foreground">
-                {formatMoney(cart.summary.totalAmountMinor, cart.summary.currency, locale)}
-              </span>
-            </div>
-
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-muted-foreground">{t('summary.shipping')}</span>
-              <span className="text-muted-foreground">{t('summary.shippingCalc')}</span>
-            </div>
-
-            <div className="border-t border-border pt-4">
-              <div className="flex items-center justify-between">
-                <span className="text-base font-semibold text-foreground">
-                  {t('summary.total')}
-                </span>
-                <span className="text-lg font-bold text-foreground">
-                  {formatMoney(cart.summary.totalAmountMinor, cart.summary.currency, locale)}
-                </span>
-              </div>
-            </div>
-          </div>
-
-          <div className="mt-6 space-y-3">
-            <button
-              type="button"
-              onClick={handleCheckout}
-              disabled={isCheckingOut}
-              className={SHOP_HERO_CTA}
-              aria-busy={isCheckingOut}
-            >
-              <span
-                className="absolute inset-0"
-                style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
-                aria-hidden="true"
-              />
-              <span
-                className={SHOP_CTA_WAVE}
-                style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
-                aria-hidden="true"
-              />
-              <span className={SHOP_CTA_INSET} aria-hidden="true" />
-
-              <span className="relative z-10">
-                {isCheckingOut ? t('checkout.placing') : t('checkout.placeOrder')}
-              </span>
-            </button>
-
-            <p className="text-center text-xs text-muted-foreground">
-              {t('checkout.message')}
-            </p>
-
-            {/* Fallback CTA if navigation fails after order was created */}
-            {createdOrderId && !checkoutError ? (
-              <div className="flex justify-center">
-                <Link
-                  href={`/shop/orders/${encodeURIComponent(createdOrderId)}`}
-                  className={cn(SHOP_LINK_BASE, SHOP_LINK_XS, SHOP_FOCUS)}
-                >
-                  {t('checkout.notRedirected')}
-                </Link>
-              </div>
-            ) : null}
-
-            {checkoutError ? (
-              <div className="space-y-2">
-                <p className="text-center text-xs text-destructive" role="alert">
-                  {checkoutError}
-                </p>
-
-                {createdOrderId ? (
-                  <div className="flex justify-center">
-                    <Link
-                      href={`/shop/orders/${encodeURIComponent(createdOrderId)}`}
-                      className={cn(SHOP_LINK_BASE, SHOP_LINK_XS, SHOP_FOCUS)}
-                    >
-                      {t('checkout.goToOrder')}
-                    </Link>
-                  </div>
-                ) : null}
-              </div>
-            ) : null}
-          </div>
-        </aside>
-      </div>
-    </main>
-  );
+  return <CartPageClient />;
 }
diff --git a/frontend/app/[locale]/shop/checkout/error/page.tsx b/frontend/app/[locale]/shop/checkout/error/page.tsx
index b06d402c..86a4d5a0 100644
--- a/frontend/app/[locale]/shop/checkout/error/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/error/page.tsx
@@ -1,4 +1,3 @@
-// frontend/app/[locale]/shop/checkout/error/page.tsx
 import { Link } from '@/i18n/routing';
 import { getTranslations } from 'next-intl/server';
 
@@ -19,6 +18,13 @@ import {
   SHOP_OUTLINE_BTN_BASE,
   SHOP_OUTLINE_BTN_INTERACTIVE,
 } from '@/lib/shop/ui-classes';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Checkout Error | DevLovers',
+  description:
+    'We couldn’t complete the checkout. Try again or contact support.',
+};
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
diff --git a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
index 0a76aec6..182dc50d 100644
--- a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
@@ -23,6 +23,12 @@ import {
   SHOP_OUTLINE_BTN_BASE,
   SHOP_OUTLINE_BTN_INTERACTIVE,
 } from '@/lib/shop/ui-classes';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Checkout | DevLovers',
+  description: 'Complete payment securely for order',
+};
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
diff --git a/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx b/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx
index 1d1ff451..909bd0f2 100644
--- a/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx
+++ b/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx
@@ -1,4 +1,3 @@
-// frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx
 'use client';
 
 import { useEffect, useRef } from 'react';
diff --git a/frontend/app/[locale]/shop/checkout/success/page.tsx b/frontend/app/[locale]/shop/checkout/success/page.tsx
index 686b3447..06813c66 100644
--- a/frontend/app/[locale]/shop/checkout/success/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/success/page.tsx
@@ -1,4 +1,3 @@
-// frontend/app/[locale]/shop/checkout/success/page.tsx
 import { Link } from '@/i18n/routing';
 import { getTranslations } from 'next-intl/server';
 
@@ -20,6 +19,13 @@ import {
   SHOP_OUTLINE_BTN_INTERACTIVE,
   shopCtaGradient,
 } from '@/lib/shop/ui-classes';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Order Confirmed| DevLovers',
+  description:
+    'Your order has been placed. You can track its status on the order page.',
+};
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
@@ -74,13 +80,19 @@ function HeroCtaInner({ children }: { children: React.ReactNode }) {
       {/* base gradient */}
       <span
         className="absolute inset-0"
-        style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
+        style={shopCtaGradient(
+          '--shop-hero-btn-bg',
+          '--shop-hero-btn-bg-hover'
+        )}
         aria-hidden="true"
       />
       {/* hover wave overlay */}
       <span
         className={SHOP_CTA_WAVE}
-        style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
+        style={shopCtaGradient(
+          '--shop-hero-btn-bg-hover',
+          '--shop-hero-btn-bg'
+        )}
         aria-hidden="true"
       />
       {/* glass inset */}
diff --git a/frontend/app/[locale]/shop/orders/[id]/page.tsx b/frontend/app/[locale]/shop/orders/[id]/page.tsx
index 3f621a8c..97c8397d 100644
--- a/frontend/app/[locale]/shop/orders/[id]/page.tsx
+++ b/frontend/app/[locale]/shop/orders/[id]/page.tsx
@@ -19,7 +19,12 @@ import {
   SHOP_LINK_MD,
   SHOP_NAV_LINK_BASE,
 } from '@/lib/shop/ui-classes';
+import { Metadata } from 'next';
 
+export const metadata: Metadata = {
+  title: 'Order Details | DevLovers',
+  description: 'Order details, items, totals, and current status.',
+};
 export const dynamic = 'force-dynamic';
 
 type OrderCurrency = (typeof orders.$inferSelect)['currency'];
diff --git a/frontend/app/[locale]/shop/orders/page.tsx b/frontend/app/[locale]/shop/orders/page.tsx
index 5dbcc0d9..fe7de800 100644
--- a/frontend/app/[locale]/shop/orders/page.tsx
+++ b/frontend/app/[locale]/shop/orders/page.tsx
@@ -16,6 +16,13 @@ import {
   SHOP_LINK_MD,
   SHOP_NAV_LINK_BASE,
 } from '@/lib/shop/ui-classes';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'My Orders | DevLovers',
+  description: 'View your order history and payment status.',
+};
+
 export const dynamic = 'force-dynamic';
 
 type PaymentStatus = (typeof orders.$inferSelect)['paymentStatus'];
diff --git a/frontend/app/[locale]/shop/page.tsx b/frontend/app/[locale]/shop/page.tsx
index 8a1c4468..99a6ea77 100644
--- a/frontend/app/[locale]/shop/page.tsx
+++ b/frontend/app/[locale]/shop/page.tsx
@@ -11,6 +11,12 @@ import {
   SHOP_FOCUS,
   shopCtaGradient,
 } from '@/lib/shop/ui-classes';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Shop | DevLovers',
+  description: 'DevLovers merch shop — browse products, add to cart, and checkout.',
+};
 
 export default async function HomePage({
   params,
diff --git a/frontend/app/[locale]/shop/products/[slug]/page.tsx b/frontend/app/[locale]/shop/products/[slug]/page.tsx
index 1b7fe732..953d41f0 100644
--- a/frontend/app/[locale]/shop/products/[slug]/page.tsx
+++ b/frontend/app/[locale]/shop/products/[slug]/page.tsx
@@ -1,5 +1,3 @@
-// app/[locale]/shop/products/[slug]/page.tsx
-
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import { ArrowLeft } from 'lucide-react';
@@ -11,7 +9,12 @@ import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import { getPublicProductBySlug } from '@/db/queries/shop/products';
 import { Link } from '@/i18n/routing';
 import { SHOP_FOCUS, SHOP_NAV_LINK_BASE } from '@/lib/shop/ui-classes';
+import { Metadata } from 'next';
 
+export const metadata: Metadata = {
+  title: 'Product name | DevLovers',
+  description: 'Details, price, and availability for product.',
+};
 export const dynamic = 'force-dynamic';
 
 export default async function ProductPage({
diff --git a/frontend/app/[locale]/shop/products/page.tsx b/frontend/app/[locale]/shop/products/page.tsx
index 1ed22509..b02e6cae 100644
--- a/frontend/app/[locale]/shop/products/page.tsx
+++ b/frontend/app/[locale]/shop/products/page.tsx
@@ -8,6 +8,12 @@ import { ProductsToolbar } from '@/components/shop/products-toolbar';
 import { getCatalogProducts } from '@/lib/shop/data';
 import { catalogQuerySchema } from '@/lib/validation/shop';
 import { CATALOG_PAGE_SIZE } from '@/lib/config/catalog';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Products | DevLovers',
+  description: 'Browse all DevLovers products, available sizes, and prices',
+};
 
 type RawSearchParams = {
   category?: string;

From c606ab48d5e3ae0a941140a3fe6131c61dee0836 Mon Sep 17 00:00:00 2001
From: Viktor Svertoka <victor.svertoka@gmail.com>
Date: Sun, 1 Feb 2026 01:42:25 +0200
Subject: [PATCH 07/24] (SP: 3) [Cache] Add Upstash Redis cache for Q&A (#241)

* feat(md) add netlify status

* feat(files): add packages

* fix(auth): use currentTarget for email input validity

* fix(auth): use currentTarget for email input validity

* fix(auth): use currentTarget in password field

* feat(qa): add Redis cache layer for Q&A
---
 frontend/.env.example                         |  6 +-
 .../app/api/questions/[category]/route.ts     | 46 ++++++++-
 frontend/lib/cache/qa.ts                      | 98 +++++++++++++++++++
 frontend/lib/env/index.ts                     |  2 +
 frontend/lib/redis.ts                         | 20 ++++
 frontend/package-lock.json                    | 16 +++
 frontend/package.json                         |  1 +
 7 files changed, 184 insertions(+), 5 deletions(-)
 create mode 100644 frontend/lib/cache/qa.ts
 create mode 100644 frontend/lib/redis.ts

diff --git a/frontend/.env.example b/frontend/.env.example
index 9feb174f..e0650744 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -8,6 +8,10 @@ NEXT_PUBLIC_SITE_URL=
 # --- Database
 DATABASE_URL=
 
+# --- Upstash Redis (REST)
+UPSTASH_REDIS_REST_URL=
+UPSTASH_REDIS_REST_TOKEN=
+
 # --- Auth (app)
 AUTH_SECRET=
 
@@ -98,4 +102,4 @@ TRUST_FORWARDED_HEADERS=0
 # emergency switch
 RATE_LIMIT_DISABLED=0
 
-GROQ_API_KEY=
\ No newline at end of file
+GROQ_API_KEY=
diff --git a/frontend/app/api/questions/[category]/route.ts b/frontend/app/api/questions/[category]/route.ts
index 72ade3b9..4817794b 100644
--- a/frontend/app/api/questions/[category]/route.ts
+++ b/frontend/app/api/questions/[category]/route.ts
@@ -2,6 +2,7 @@ import { NextResponse } from 'next/server';
 import { db } from '@/db';
 import { categories, questions, questionTranslations } from '@/db/schema';
 import { eq, sql, and, ilike } from 'drizzle-orm';
+import { buildQaCacheKey, getQaCache, setQaCache } from '@/lib/cache/qa';
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
@@ -9,6 +10,21 @@ export const revalidate = 0;
 const DEFAULT_PAGE = 1;
 const DEFAULT_LIMIT = 20;
 const DEFAULT_LOCALE = 'uk';
+type QaApiResponse = {
+  items: {
+    id: string;
+    categoryId: string;
+    sortOrder: number;
+    difficulty: string | null;
+    question: string;
+    answerBlocks: unknown;
+    locale: string;
+  }[];
+  total: number;
+  page: number;
+  totalPages: number;
+  locale: string;
+};
 
 export async function GET(
   req: Request,
@@ -31,8 +47,23 @@ export async function GET(
       DEFAULT_LOCALE;
 
     const search = searchParams.get('search')?.trim();
+    const cacheKey = buildQaCacheKey({
+      category,
+      locale,
+      page,
+      limit,
+      search,
+    });
+
+    const cached = await getQaCache<QaApiResponse>(cacheKey);
+
+    if (cached) {
+      const response = NextResponse.json(cached);
+      response.headers.set('Cache-Control', 'no-store');
+      response.headers.set('x-qa-cache', 'HIT');
+      return response;
+    }
 
-    // Find category by slug
     const [cat] = await db
       .select({ id: categories.id })
       .from(categories)
@@ -51,7 +82,6 @@ export async function GET(
       return response;
     }
 
-    // Base conditions: category match + locale match
     const baseCondition = and(
       eq(questions.categoryId, cat.id),
       eq(questionTranslations.locale, locale)
@@ -61,7 +91,6 @@ export async function GET(
       ? and(baseCondition, ilike(questionTranslations.question, `%${search}%`))
       : baseCondition;
 
-    // Count total
     const [{ count }] = await db
       .select({ count: sql<number>`count(*)` })
       .from(questions)
@@ -74,7 +103,6 @@ export async function GET(
     const total = Number(count);
     const totalPages = Math.ceil(total / limit);
 
-    // Get items with translations
     const items = await db
       .select({
         id: questions.id,
@@ -103,6 +131,16 @@ export async function GET(
       locale,
     });
     response.headers.set('Cache-Control', 'no-store');
+    response.headers.set('x-qa-cache', 'MISS');
+
+    await setQaCache(cacheKey, {
+      items,
+      total,
+      page,
+      totalPages,
+      locale,
+    });
+
     return response;
   } catch (error) {
     console.error('[GET /api/questions/:category]', error);
diff --git a/frontend/lib/cache/qa.ts b/frontend/lib/cache/qa.ts
new file mode 100644
index 00000000..2bc9cdb9
--- /dev/null
+++ b/frontend/lib/cache/qa.ts
@@ -0,0 +1,98 @@
+import { getRedisClient } from '@/lib/redis';
+
+const QA_CACHE_TTL_SECONDS = 60 * 60 * 12;
+
+type QaCacheKeyInput = {
+  category: string;
+  locale: string;
+  page: number;
+  limit: number;
+  search?: string | null;
+};
+
+export function buildQaCacheKey({
+  category,
+  locale,
+  page,
+  limit,
+  search,
+}: QaCacheKeyInput) {
+  const normalizedCategory = category.toLowerCase();
+  const normalizedLocale = locale.toLowerCase();
+  const searchKey = search?.trim() ? search.trim().toLowerCase() : 'all';
+
+  return `qa:category:${normalizedCategory}:locale:${normalizedLocale}:page:${page}:limit:${limit}:search:${searchKey}`;
+}
+
+export async function getQaCache<T>(key: string) {
+  const redis = getRedisClient();
+  if (!redis) return null;
+
+  const cached = await redis.get<string>(key);
+  if (!cached) return null;
+
+  try {
+    return JSON.parse(cached) as T;
+  } catch (error) {
+    console.warn('[qa-cache] Failed to parse cached value', error);
+    return null;
+  }
+}
+
+export async function setQaCache<T>(key: string, value: T) {
+  const redis = getRedisClient();
+  if (!redis) return;
+
+  await redis.set(key, JSON.stringify(value), { ex: QA_CACHE_TTL_SECONDS });
+}
+
+export async function invalidateQaCacheByCategory(category: string) {
+  const redis = getRedisClient();
+  if (!redis) return 0;
+
+  const prefix = `qa:category:${category.toLowerCase()}:`;
+  let cursor = 0;
+  let deleted = 0;
+
+  do {
+    const [nextCursor, keys] = await redis.scan(cursor, {
+      match: `${prefix}*`,
+      count: 100,
+    });
+    cursor = Number(nextCursor);
+
+    if (keys.length) {
+      const removed = await redis.del(...keys);
+      deleted += removed ?? 0;
+    }
+  } while (cursor !== 0);
+
+  return deleted;
+}
+
+export async function invalidateAllQaCache() {
+  const redis = getRedisClient();
+  if (!redis) return 0;
+
+  let cursor = 0;
+  let deleted = 0;
+
+  do {
+    const [nextCursor, keys] = await redis.scan(cursor, {
+      match: 'qa:*',
+      count: 200,
+    });
+    cursor = Number(nextCursor);
+
+    if (keys.length) {
+      const removed = await redis.del(...keys);
+      deleted += removed ?? 0;
+    }
+  } while (cursor !== 0);
+
+  return deleted;
+}
+
+export const qaCacheConfig = {
+  ttlSeconds: QA_CACHE_TTL_SECONDS,
+};
diff --git a/frontend/lib/env/index.ts b/frontend/lib/env/index.ts
index b5b205df..e4797737 100644
--- a/frontend/lib/env/index.ts
+++ b/frontend/lib/env/index.ts
@@ -20,6 +20,8 @@ export const serverEnvSchema = z.object({
   STRIPE_MODE: z.enum(['test', 'live']).optional(),
   PAYMENTS_ENABLED: z.enum(['true', 'false']).optional().default('false'),
   NEXT_PUBLIC_SITE_URL: z.string().url().optional(),
+  UPSTASH_REDIS_REST_URL: z.string().url().optional(),
+  UPSTASH_REDIS_REST_TOKEN: z.string().min(1).optional(),
 });
 
 export const clientEnvSchema = z.object({
diff --git a/frontend/lib/redis.ts b/frontend/lib/redis.ts
new file mode 100644
index 00000000..d25b651c
--- /dev/null
+++ b/frontend/lib/redis.ts
@@ -0,0 +1,20 @@
+import { Redis } from '@upstash/redis';
+import { getServerEnv } from '@/lib/env';
+
+let cachedRedis: Redis | null = null;
+
+export function getRedisClient() {
+  if (cachedRedis) return cachedRedis;
+
+  const { UPSTASH_REDIS_REST_URL, UPSTASH_REDIS_REST_TOKEN } = getServerEnv();
+  if (!UPSTASH_REDIS_REST_URL || !UPSTASH_REDIS_REST_TOKEN) {
+    return null;
+  }
+
+  cachedRedis = new Redis({
+    url: UPSTASH_REDIS_REST_URL,
+    token: UPSTASH_REDIS_REST_TOKEN,
+  });
+
+  return cachedRedis;
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1feeeba8..7484dfaa 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "@sanity/image-url": "^1.2.0",
         "@stripe/react-stripe-js": "^5.4.1",
         "@stripe/stripe-js": "^8.6.0",
+        "@upstash/redis": "^1.36.1",
         "@vercel/analytics": "^1.6.1",
         "bcryptjs": "^3.0.3",
         "class-variance-authority": "^0.7.1",
@@ -4514,6 +4515,15 @@
         "win32"
       ]
     },
+    "node_modules/@upstash/redis": {
+      "version": "1.36.1",
+      "resolved": "https://registry.npmjs.org/@upstash/redis/-/redis-1.36.1.tgz",
+      "integrity": "sha512-N6SjDcgXdOcTAF+7uNoY69o7hCspe9BcA7YjQdxVu5d25avljTwyLaHBW3krWjrP0FfocgMk94qyVtQbeDp39A==",
+      "license": "MIT",
+      "dependencies": {
+        "uncrypto": "^0.1.3"
+      }
+    },
     "node_modules/@vercel/analytics": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.6.1.tgz",
@@ -11908,6 +11918,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncrypto": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz",
+      "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==",
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 356af09c..43864146 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,7 @@
     "@sanity/image-url": "^1.2.0",
     "@stripe/react-stripe-js": "^5.4.1",
     "@stripe/stripe-js": "^8.6.0",
+    "@upstash/redis": "^1.36.1",
     "@vercel/analytics": "^1.6.1",
     "bcryptjs": "^3.0.3",
     "class-variance-authority": "^0.7.1",

From d73f5fbd19085626623bb042fff383289ebbd546 Mon Sep 17 00:00:00 2001
From: Viktor Svertoka <victor.svertoka@gmail.com>
Date: Sun, 1 Feb 2026 02:29:02 +0200
Subject: [PATCH 08/24] Fix Q&A Redis cache parsing for Upstash REST (#243)

* feat(md) add netlify status

* feat(files): add packages

* fix(auth): use currentTarget for email input validity

* fix(auth): use currentTarget for email input validity

* fix(auth): use currentTarget in password field

* feat(qa): add Redis cache layer for Q&A

* fix(qa): handle non-string Redis cache values
---
 frontend/lib/cache/qa.ts   |  9 +++++++--
 frontend/package-lock.json | 10 ----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/frontend/lib/cache/qa.ts b/frontend/lib/cache/qa.ts
index 2bc9cdb9..9b8b1a30 100644
--- a/frontend/lib/cache/qa.ts
+++ b/frontend/lib/cache/qa.ts
@@ -28,13 +28,18 @@ export async function getQaCache<T>(key: string) {
   const redis = getRedisClient();
   if (!redis) return null;
 
-  const cached = await redis.get<string>(key);
+  const cached = await redis.get<T | string>(key);
   if (!cached) return null;
 
+  if (typeof cached !== 'string') {
+    return cached as T;
+  }
+
   try {
     return JSON.parse(cached) as T;
   } catch (error) {
     console.warn('[qa-cache] Failed to parse cached value', error);
+    await redis.del(key);
     return null;
   }
 }
@@ -43,7 +48,7 @@ export async function setQaCache<T>(key: string, value: T) {
   const redis = getRedisClient();
   if (!redis) return;
 
-  await redis.set(key, JSON.stringify(value), { ex: QA_CACHE_TTL_SECONDS });
+  await redis.set(key, value, { ex: QA_CACHE_TTL_SECONDS });
 }
 
 export async function invalidateQaCacheByCategory(category: string) {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7484dfaa..673aebd9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9667,16 +9667,6 @@
         }
       }
     },
-    "node_modules/next-intl/node_modules/@swc/helpers": {
-      "version": "0.5.18",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
-      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
-      "extraneous": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
     "node_modules/next-themes": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",

From c23f2c0a98e3c636588ce4f8b7cd507b707ca14f Mon Sep 17 00:00:00 2001
From: KomrakovaAnna <komrakova.anna@gmail.com>
Date: Sun, 1 Feb 2026 14:56:47 +0000
Subject: [PATCH 09/24] feat(Blog):Adding pagination (#244)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(Blog):fix for clickable link in post details, fix for author details

* feat(Blog):refactoring after removing author modal

* feat(Blog): fix unified date format

* feat(Blog): Fix for  click-outside-to-close search, recommended posts are limited to 3

* feat(Blog): selectedAuthorData fixed

* feat(Blog): Added description for /blog/[slug] metadata, Added Schema.org JSON‑LD for Article (BlogPosting) and BreadcrumbList , Added <time datetime> tags where blog dates renders

* feat(Blog): fix hover social links, fixed duplication not found search

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added scroll on the main blog page on filtering by author, fied breadcrumbs category translaion, added category to the recommended cards, fixed search for localisations

* feat(Blog): Changed image size on the post details page

* feat(Blog): added tests

* feat(Blog): fix for big post on the post page, added tests

* feat(Blog): resolving comments

* feat(Blog): fixed hover for social links icins - dark theme

* feat(Blog): bringing the style on the blog page to a single site style

* feat(blog): aligning syles

* feat(blog): resolving comment from CodeRabbit

* feat(blog):fix comment for deployment

* feat(Blog): adding pagination

* feat(Blog): Addind Text formatting visibility
---
 .../app/[locale]/blog/[slug]/PostDetails.tsx  | 201 ++++++++++++++----
 frontend/components/blog/BlogFilters.tsx      | 113 +++++++++-
 frontend/components/blog/BlogPagination.tsx   | 155 ++++++++++++++
 frontend/messages/en.json                     |  10 +-
 frontend/messages/pl.json                     |  10 +-
 frontend/messages/uk.json                     |  10 +-
 6 files changed, 453 insertions(+), 46 deletions(-)
 create mode 100644 frontend/components/blog/BlogPagination.tsx

diff --git a/frontend/app/[locale]/blog/[slug]/PostDetails.tsx b/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
index b274d1ec..89c5ab71 100644
--- a/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
+++ b/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
@@ -85,25 +85,172 @@ function renderPortableTextSpans(
     const marks = child?.marks || [];
     const linkKey = marks.find(mark => linkMap.has(mark));
 
-    if (linkKey) {
-      const href = linkMap.get(linkKey)!;
-      return (
-        <a
-          key={`mark-link-${index}`}
-          href={href}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-[var(--accent-primary)] underline underline-offset-4"
-        >
-          {text}
-        </a>
-      );
+    let node: React.ReactNode =
+      marks.length === 0 ? linkifyText(text) : text;
+
+    for (const mark of marks) {
+      if (linkMap.has(mark)) {
+        const href = linkMap.get(mark)!;
+        node = (
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[var(--accent-primary)] underline underline-offset-4"
+          >
+            {node}
+          </a>
+        );
+        continue;
+      }
+      if (mark === 'strong') {
+        node = <strong>{node}</strong>;
+        continue;
+      }
+      if (mark === 'em') {
+        node = <em>{node}</em>;
+        continue;
+      }
+      if (mark === 'underline') {
+        node = <u>{node}</u>;
+        continue;
+      }
+      if (mark === 'code') {
+        node = (
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-[0.9em] text-gray-900 dark:bg-neutral-900 dark:text-gray-100">
+            {node}
+          </code>
+        );
+        continue;
+      }
+      if (mark === 'strike-through' || mark === 'strike') {
+        node = <s>{node}</s>;
+      }
     }
 
-    return <span key={`mark-text-${index}`}>{linkifyText(text)}</span>;
+    return <span key={`mark-text-${index}`}>{node}</span>;
   });
 }
 
+function renderPortableTextBlock(
+  block: any,
+  index: number
+): React.ReactNode {
+  const children = renderPortableTextSpans(block.children, block.markDefs);
+  const style = block?.style || 'normal';
+
+  if (style === 'h1') {
+    return (
+      <h1 key={block._key || `block-${index}`}>{children}</h1>
+    );
+  }
+  if (style === 'h2') {
+    return (
+      <h2 key={block._key || `block-${index}`}>{children}</h2>
+    );
+  }
+  if (style === 'h3') {
+    return (
+      <h3 key={block._key || `block-${index}`}>{children}</h3>
+    );
+  }
+  if (style === 'h4') {
+    return (
+      <h4 key={block._key || `block-${index}`}>{children}</h4>
+    );
+  }
+  if (style === 'h5') {
+    return (
+      <h5 key={block._key || `block-${index}`}>{children}</h5>
+    );
+  }
+  if (style === 'h6') {
+    return (
+      <h6 key={block._key || `block-${index}`}>{children}</h6>
+    );
+  }
+  if (style === 'blockquote') {
+    return (
+      <blockquote key={block._key || `block-${index}`}>
+        {children}
+      </blockquote>
+    );
+  }
+
+  return (
+    <p key={block._key || `block-${index}`} className="whitespace-pre-line">
+      {children}
+    </p>
+  );
+}
+
+function renderPortableText(
+  body: any[],
+  postTitle?: string
+): React.ReactNode[] {
+  const nodes: React.ReactNode[] = [];
+  let i = 0;
+
+  while (i < body.length) {
+    const block = body[i];
+
+    if (block?._type === 'block' && block.listItem) {
+      const listType = block.listItem === 'number' ? 'ol' : 'ul';
+      const level = block.level ?? 1;
+      const items: React.ReactNode[] = [];
+      let j = i;
+
+      while (
+        j < body.length &&
+        body[j]?._type === 'block' &&
+        body[j].listItem === block.listItem &&
+        (body[j].level ?? 1) === level
+      ) {
+        const item = body[j];
+        items.push(
+          <li key={item._key || `list-item-${j}`}>
+            {renderPortableTextSpans(item.children, item.markDefs)}
+          </li>
+        );
+        j += 1;
+      }
+
+      nodes.push(
+        listType === 'ol' ? (
+          <ol key={block._key || `list-${i}`}>{items}</ol>
+        ) : (
+          <ul key={block._key || `list-${i}`}>{items}</ul>
+        )
+      );
+      i = j;
+      continue;
+    }
+
+    if (block?._type === 'block') {
+      nodes.push(renderPortableTextBlock(block, i));
+      i += 1;
+      continue;
+    }
+
+    if (block?._type === 'image' && block?.url) {
+      nodes.push(
+        <img
+          key={block._key || `image-${i}`}
+          src={block.url}
+          alt={postTitle || 'Post image'}
+          className="rounded-xl border border-gray-200 my-6"
+        />
+      );
+      i += 1;
+      continue;
+    }
+
+    i += 1;
+  }
+
+  return nodes;
+}
+
 function seededShuffle<T>(items: T[], seed: number) {
   const result = [...items];
   let value = seed;
@@ -389,31 +536,7 @@ export default async function PostDetails({
 
       <div className="mx-auto w-full max-w-3xl">
         <article className="prose prose-gray max-w-none">
-          {post.body?.map((block: any, index: number) => {
-            if (block?._type === 'block') {
-              return (
-                <p
-                  key={block._key || `block-${index}`}
-                  className="whitespace-pre-line"
-                >
-                  {renderPortableTextSpans(block.children, block.markDefs)}
-                </p>
-              );
-            }
-
-            if (block?._type === 'image' && block?.url) {
-              return (
-                <img
-                  key={block._key || `image-${index}`}
-                  src={block.url}
-                  alt={post.title || 'Post image'}
-                  className="rounded-xl border border-gray-200 my-6"
-                />
-              );
-            }
-
-            return null;
-          })}
+          {renderPortableText(post.body || [], post.title)}
         </article>
       </div>
 
diff --git a/frontend/components/blog/BlogFilters.tsx b/frontend/components/blog/BlogFilters.tsx
index 2ff2bff1..9c44f154 100644
--- a/frontend/components/blog/BlogFilters.tsx
+++ b/frontend/components/blog/BlogFilters.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Image from 'next/image';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
@@ -18,6 +18,7 @@ import {
 } from 'lucide-react';
 import { usePathname, useRouter } from '@/i18n/routing';
 import BlogGrid from '@/components/blog/BlogGrid';
+import { BlogPagination } from '@/components/blog/BlogPagination';
 import { Link } from '@/i18n/routing';
 import { formatBlogDate } from '@/lib/blog/date';
 
@@ -75,6 +76,7 @@ type Category = {
 
 const SOCIAL_ICON_CLASSNAME =
   'h-3.5 w-3.5 text-gray-900 dark:text-gray-100 transition-colors group-hover:text-[var(--accent-primary)] dark:group-hover:text-[var(--accent-primary)]';
+const POSTS_PER_PAGE = 9;
 
 function SocialIcon({ platform }: { platform?: string }) {
   const normalized = (platform || '').trim().toLowerCase();
@@ -189,6 +191,15 @@ export default function BlogFilters({
     name: string;
     norm: string;
   } | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const lastFiltersRef = useRef<{
+    author: string;
+    category: string;
+    query: string;
+  } | null>(null);
+  const pendingScrollRef = useRef(false);
+  const categoryFiltersRef = useRef<HTMLDivElement>(null);
+  const postsGridRef = useRef<HTMLDivElement>(null);
 
   const toggleAuthor = (author: Author) => {
     const name = author.name || '';
@@ -278,6 +289,25 @@ export default function BlogFilters({
   }, [searchParams]);
   const searchQueryNormalized = normalizeSearchText(searchQuery);
   const didClearSearchRef = useRef(false);
+  const parsedPage = useMemo(() => {
+    const raw = searchParams?.get('page') || '';
+    const value = Number.parseInt(raw, 10);
+    return Number.isFinite(value) && value > 0 ? value : 1;
+  }, [searchParams]);
+
+  const updatePageParam = useCallback(
+    (page: number) => {
+      const params = new URLSearchParams(searchParams?.toString() || '');
+      if (page <= 1) {
+        params.delete('page');
+      } else {
+        params.set('page', String(page));
+      }
+      const nextPath = params.toString() ? `${pathname}?${params}` : pathname;
+    router.replace(nextPath, { scroll: false });
+    },
+    [pathname, router, searchParams]
+  );
 
   useEffect(() => {
     if (didClearSearchRef.current) return;
@@ -296,6 +326,11 @@ export default function BlogFilters({
     didClearSearchRef.current = true;
   }, [pathname, router, searchParams, searchQuery]);
 
+  useEffect(() => {
+    if (currentPage === parsedPage) return;
+    setCurrentPage(parsedPage);
+  }, [currentPage, parsedPage]);
+
   const resolvedAuthor = useMemo(() => {
     const normParam = normalizeAuthor(authorParam);
     if (!normParam) return selectedAuthor;
@@ -310,6 +345,35 @@ export default function BlogFilters({
     };
   }, [authorParam, posts, selectedAuthor]);
 
+  useEffect(() => {
+    const nextFilters = {
+      author: resolvedAuthor?.norm || '',
+      category: resolvedCategory?.norm || '',
+      query: searchQueryNormalized,
+    };
+    const prevFilters = lastFiltersRef.current;
+    if (!prevFilters) {
+      lastFiltersRef.current = nextFilters;
+      return;
+    }
+    const hasChanged =
+      prevFilters.author !== nextFilters.author ||
+      prevFilters.category !== nextFilters.category ||
+      prevFilters.query !== nextFilters.query;
+    if (!hasChanged) return;
+    lastFiltersRef.current = nextFilters;
+    if (currentPage !== 1) {
+      setCurrentPage(1);
+      updatePageParam(1);
+    }
+  }, [
+    currentPage,
+    resolvedAuthor?.norm,
+    resolvedCategory?.norm,
+    searchQueryNormalized,
+    updatePageParam,
+  ]);
+
   useEffect(() => {
     const name = resolvedAuthor?.name?.trim();
     if (!name) return;
@@ -377,6 +441,11 @@ export default function BlogFilters({
       return true;
     });
   }, [posts, resolvedAuthor, resolvedCategory, searchQueryNormalized]);
+  const totalPages = Math.max(1, Math.ceil(filteredPosts.length / POSTS_PER_PAGE));
+  const paginatedPosts = useMemo(() => {
+    const start = (currentPage - 1) * POSTS_PER_PAGE;
+    return filteredPosts.slice(start, start + POSTS_PER_PAGE);
+  }, [currentPage, filteredPosts]);
 
   const selectedAuthorData = useMemo(() => {
     const resolvedName = resolvedAuthor?.name;
@@ -388,6 +457,29 @@ export default function BlogFilters({
     return plainTextFromPortableText(selectedAuthorData?.bio);
   }, [selectedAuthorData]);
 
+  useEffect(() => {
+    if (currentPage <= totalPages) return;
+    setCurrentPage(totalPages);
+    updatePageParam(totalPages);
+  }, [currentPage, totalPages, updatePageParam]);
+
+  const scrollToCategoryFilters = useCallback(() => {
+    const target = categoryFiltersRef.current || postsGridRef.current;
+    target?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!pendingScrollRef.current) return;
+    pendingScrollRef.current = false;
+    const frame = window.requestAnimationFrame(() => {
+      scrollToCategoryFilters();
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [currentPage, scrollToCategoryFilters]);
+
   return (
     <div className="mt-4">
       {!resolvedAuthor && featuredPost && (
@@ -537,7 +629,10 @@ export default function BlogFilters({
 
       <div className="w-full">
         {!resolvedAuthor && allCategories.length > 0 && (
-          <div className="mt-5 flex w-full flex-nowrap justify-start gap-1 overflow-x-auto sm:flex-wrap sm:gap-3 sm:overflow-visible">
+          <div
+            ref={categoryFiltersRef}
+            className="mt-5 flex w-full flex-nowrap justify-start gap-1 overflow-x-auto sm:flex-wrap sm:gap-3 sm:overflow-visible"
+          >
             <button
               type="button"
               onClick={() => setSelectedCategory(null)}
@@ -575,12 +670,22 @@ export default function BlogFilters({
         {selectedCategory && null}
       </div>
 
-      <div className="mt-12">
+      <div className="mt-12" ref={postsGridRef}>
         <BlogGrid
-          posts={filteredPosts}
+          posts={paginatedPosts}
           onAuthorSelect={toggleAuthor}
           disableHoverColor
         />
+        <BlogPagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={page => {
+            pendingScrollRef.current = true;
+            setCurrentPage(page);
+            updatePageParam(page);
+          }}
+          accentColor="var(--accent-primary)"
+        />
       </div>
     </div>
   );
diff --git a/frontend/components/blog/BlogPagination.tsx b/frontend/components/blog/BlogPagination.tsx
new file mode 100644
index 00000000..e65e3e65
--- /dev/null
+++ b/frontend/components/blog/BlogPagination.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { cn } from '@/lib/utils';
+
+interface BlogPaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  accentColor: string;
+}
+
+export function BlogPagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  accentColor,
+}: BlogPaginationProps) {
+  const t = useTranslations('blog.pagination');
+  const accentSoft = `color-mix(in srgb, ${accentColor} 16%, transparent)`;
+  const accentGlow = `color-mix(in srgb, ${accentColor} 22%, transparent)`;
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia('(max-width: 640px)');
+    const update = () => setIsMobile(media.matches);
+    update();
+    media.addEventListener('change', update);
+    return () => media.removeEventListener('change', update);
+  }, []);
+
+  if (totalPages <= 1) return null;
+
+  const getPageNumbers = (): (number | 'ellipsis')[] => {
+    const pages: (number | 'ellipsis')[] = [];
+    const maxVisible = isMobile ? 3 : 5;
+
+    if (totalPages <= maxVisible + 2) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+
+      if (currentPage <= 3) {
+        for (let i = 2; i <= Math.min(maxVisible, totalPages - 1); i++) {
+          pages.push(i);
+        }
+        if (totalPages > maxVisible) {
+          pages.push('ellipsis');
+        }
+      } else if (currentPage >= totalPages - 2) {
+        pages.push('ellipsis');
+        for (let i = totalPages - maxVisible + 1; i < totalPages; i++) {
+          if (i > 1) pages.push(i);
+        }
+      } else {
+        pages.push('ellipsis');
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pages.push(i);
+        }
+        pages.push('ellipsis');
+      }
+
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  const pages = getPageNumbers();
+
+  return (
+    <nav
+      className="flex items-center justify-center gap-1 mt-8 sm:gap-2"
+      style={
+        {
+          '--qa-accent': accentColor,
+          '--qa-accent-soft': accentSoft,
+          '--qa-accent-glow': accentGlow,
+        } as React.CSSProperties
+      }
+      aria-label={t('label')}
+    >
+      <button
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        className={cn(
+          'px-2 py-2 text-sm font-medium rounded-lg transition-colors sm:px-3',
+          'border border-gray-300 bg-white/90 dark:border-gray-700 dark:bg-neutral-900/80',
+          currentPage === 1
+            ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
+            : 'text-gray-700 dark:text-gray-300 hover:bg-[var(--qa-accent-soft)]'
+        )}
+        aria-label={t('previousPage')}
+      >
+        ← <span className="hidden sm:inline">{t('previous')}</span>
+      </button>
+
+      <div className="flex items-center gap-1 mx-1 sm:mx-2">
+        {pages.map((page, index) =>
+          page === 'ellipsis' ? (
+            <span
+              key={`ellipsis-${index}`}
+              className="px-2 py-2 text-gray-500 dark:text-gray-400"
+            >
+              ...
+            </span>
+          ) : (
+            <button
+              key={page}
+              onClick={() => onPageChange(page)}
+              disabled={page === currentPage}
+              className={cn(
+                'min-w-[40px] px-3 py-2 text-sm font-medium rounded-lg transition-colors border border-transparent overflow-hidden bg-white/90 dark:bg-neutral-900/80',
+                page === currentPage
+                  ? 'shadow-sm text-gray-700 dark:text-gray-300'
+                  : 'text-gray-700 dark:text-gray-300 hover:bg-[var(--qa-accent-soft)]'
+              )}
+              style={
+                page === currentPage
+                  ? {
+                      backgroundColor: accentSoft,
+                      borderColor: accentColor,
+                      boxShadow: `inset 0 0 18px ${accentGlow}`,
+                    }
+                  : undefined
+              }
+              aria-label={t('page', { page })}
+              aria-current={page === currentPage ? 'page' : undefined}
+            >
+              {page}
+            </button>
+          )
+        )}
+      </div>
+
+      <button
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        className={cn(
+          'px-2 py-2 text-sm font-medium rounded-lg transition-colors sm:px-3',
+          'border border-gray-300 bg-white/90 dark:border-gray-700 dark:bg-neutral-900/80',
+          currentPage === totalPages
+            ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
+            : 'text-gray-700 dark:text-gray-300 hover:bg-[var(--qa-accent-soft)]'
+        )}
+        aria-label={t('nextPage')}
+      >
+        <span className="hidden sm:inline">{t('next')}</span> →
+      </button>
+    </nav>
+  );
+}
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 152c0fa7..a79b1704 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -216,7 +216,15 @@
     "articlesBy": "Articles by {name}",
     "articlesPublished": "{count} articles published",
     "recommendedPosts": "Recommended Posts",
-    "goBack": "Go back"
+    "goBack": "Go back",
+    "pagination": {
+      "label": "Pagination",
+      "previous": "Previous",
+      "next": "Next",
+      "previousPage": "Previous page",
+      "nextPage": "Next page",
+      "page": "Page {page}"
+    }
   },
   "footer": {
     "builtWith": "Built with",
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
index 50421909..163ca30f 100644
--- a/frontend/messages/pl.json
+++ b/frontend/messages/pl.json
@@ -216,7 +216,15 @@
     "articlesBy": "Artykuły autora: {name}",
     "articlesPublished": "Opublikowano artykułów: {count}",
     "recommendedPosts": "Polecane wpisy",
-    "goBack": "Wróć"
+    "goBack": "Wróć",
+    "pagination": {
+      "label": "Paginacja",
+      "previous": "Wstecz",
+      "next": "Dalej",
+      "previousPage": "Poprzednia strona",
+      "nextPage": "Następna strona",
+      "page": "Strona {page}"
+    }
   },
   "footer": {
     "builtWith": "Zbudowane z",
diff --git a/frontend/messages/uk.json b/frontend/messages/uk.json
index 05a51ab0..ff051ab1 100644
--- a/frontend/messages/uk.json
+++ b/frontend/messages/uk.json
@@ -216,7 +216,15 @@
     "articlesBy": "Статті від {name}",
     "articlesPublished": "Опубліковано статей: {count}",
     "recommendedPosts": "Рекомендовані статті",
-    "goBack": "Назад"
+    "goBack": "Назад",
+    "pagination": {
+      "label": "Пагінація",
+      "previous": "Назад",
+      "next": "Далі",
+      "previousPage": "Попередня сторінка",
+      "nextPage": "Наступна сторінка",
+      "page": "Сторінка {page}"
+    }
   },
   "footer": {
     "builtWith": "Створено",

From f1730f3f0b43bcdb227612e8949929604252b22d Mon Sep 17 00:00:00 2001
From: Tetiana Zorii <131365289+TiZorii@users.noreply.github.com>
Date: Sun, 1 Feb 2026 11:34:15 -0500
Subject: [PATCH 10/24]  (SP:2) feat(api): clean up AI helper for Vercel & fix
 orders i18n (#245)

- Refactor /api/ai/explain route for Vercel deployment
    - Replace dynamic import with static import of groq-sdk
    - Use request.json() instead of Netlify-safe body parsing
    - Add proper error handling with Groq.APIError types
    - Simplify GET health check endpoint
    - Update model from llama3-70b-8192 to llama-3.3-70b-versatile
- Add table.openOrder and table.orderId to en/uk/pl locales
---
 frontend/app/api/ai/explain/route.ts | 254 ++++++++++-----------------
 frontend/messages/en.json            |   6 +-
 frontend/messages/pl.json            |   4 +-
 frontend/messages/uk.json            |   6 +-
 frontend/package-lock.json           |  21 ++-
 frontend/package.json                |   1 -
 6 files changed, 117 insertions(+), 175 deletions(-)

diff --git a/frontend/app/api/ai/explain/route.ts b/frontend/app/api/ai/explain/route.ts
index d91ff8b5..f1963b1e 100644
--- a/frontend/app/api/ai/explain/route.ts
+++ b/frontend/app/api/ai/explain/route.ts
@@ -2,6 +2,7 @@ export const runtime = 'nodejs';
 
 import { NextRequest, NextResponse } from 'next/server';
 import { z } from 'zod';
+import Groq from 'groq-sdk';
 import {
   createExplainPrompt,
   type ExplanationResponse,
@@ -9,46 +10,8 @@ import {
 import { getClientIp } from '@/lib/security/client-ip';
 
 // =============================================================================
-// SERVER-SIDE LOGGING (sanitized - no sensitive data exposed)
+// Rate Limiter (in-memory, resets on cold start)
 // =============================================================================
-function logEnvironmentDiagnostics() {
-  const apiKey = process.env.GROQ_API_KEY;
-  console.log('[ENV] GROQ_API_KEY configured:', !!apiKey);
-  console.log('[ENV] NODE_ENV:', process.env.NODE_ENV);
-}
-
-function logRequestDiagnostics(request: NextRequest) {
-  console.log('[REQ] Method:', request.method);
-  console.log('[REQ] URL path:', new URL(request.url).pathname);
-}
-
-function logBodyParsingResult(success: boolean, error?: unknown) {
-  console.log('[BODY] Parse success:', success);
-  if (error) {
-    console.log('[BODY] Parse error:', error instanceof Error ? error.message : 'Unknown error');
-  }
-}
-
-function logGroqInitialization(success: boolean, error?: unknown) {
-  console.log('[GROQ] Init success:', success);
-  if (error) {
-    const err = error as Error & { status?: number; code?: string };
-    console.log('[GROQ] Init error:', err.name, err.message);
-  }
-}
-
-function logGroqApiCall(phase: 'start' | 'success' | 'error', details?: unknown) {
-  if (phase === 'start') {
-    console.log('[GROQ] Starting API call');
-  } else if (phase === 'success') {
-    console.log('[GROQ] API call successful');
-  } else if (phase === 'error') {
-    const err = details as Error & { status?: number; code?: string };
-    console.log('[GROQ] API error:', err?.name, err?.message);
-  }
-}
-// =============================================================================
-
 const rateLimiter = new Map<string, { count: number; resetAt: number }>();
 const MAX_REQUESTS_PER_WINDOW = 10;
 const RATE_LIMIT_WINDOW_MS = 20 * 60 * 1000;
@@ -136,22 +99,21 @@ function parseExplanationResponse(content: string): ExplanationResponse {
   return parsed as ExplanationResponse;
 }
 
+// =============================================================================
+// POST /api/ai/explain - Generate term explanation in 3 languages
+// =============================================================================
 export async function POST(request: NextRequest) {
-  logEnvironmentDiagnostics();
-  logRequestDiagnostics(request);
-
+  // Fail fast if API key is missing
   const apiKey = process.env.GROQ_API_KEY;
   if (!apiKey) {
-    console.error('[FATAL] GROQ_API_KEY is not configured. Check environment variables.');
+    console.error('[ai/explain] GROQ_API_KEY not configured');
     return NextResponse.json(
-      {
-        error: 'AI service not configured',
-        code: 'SERVICE_UNAVAILABLE',
-      },
+      { error: 'AI service not configured', code: 'SERVICE_UNAVAILABLE' },
       { status: 503 }
     );
   }
 
+  // Rate limiting
   const clientIp = getClientIp(request) ?? 'unknown';
   const rateLimit = checkRateLimit(clientIp);
 
@@ -174,21 +136,11 @@ export async function POST(request: NextRequest) {
     );
   }
 
-  // Safe JSON body parsing for Netlify
+  // Parse and validate request body
   let body: unknown;
   try {
-    const text = await request.text();
-    if (!text || text.trim() === '') {
-      console.log('[BODY] Empty request body received');
-      return NextResponse.json(
-        { error: 'Request body is empty', code: 'EMPTY_BODY' },
-        { status: 400 }
-      );
-    }
-    body = JSON.parse(text);
-    logBodyParsingResult(true);
-  } catch (parseError) {
-    logBodyParsingResult(false, parseError);
+    body = await request.json();
+  } catch {
     return NextResponse.json(
       { error: 'Invalid JSON body', code: 'INVALID_JSON' },
       { status: 400 }
@@ -209,65 +161,28 @@ export async function POST(request: NextRequest) {
 
   const { term, context } = validationResult.data;
 
-  // Dynamic import for Netlify compatibility
-  let Groq: typeof import('groq-sdk').default;
-  try {
-    const groqModule = await import('groq-sdk');
-    Groq = groqModule.default;
-  } catch (importError) {
-    console.error('[SDK_IMPORT_ERROR] Failed to import groq-sdk:',
-      importError instanceof Error ? importError.message : String(importError)
-    );
-    return NextResponse.json(
-      {
-        error: 'Failed to load AI client',
-        code: 'SDK_IMPORT_ERROR',
-      },
-      { status: 503 }
-    );
-  }
-
-  let groq: InstanceType<typeof Groq>;
-  try {
-    groq = new Groq({ apiKey });
-    logGroqInitialization(true);
-  } catch (initError) {
-    logGroqInitialization(false, initError);
-    console.error('[SDK_INIT_ERROR] Failed to initialize Groq client:',
-      initError instanceof Error ? initError.message : String(initError)
-    );
-    return NextResponse.json(
-      {
-        error: 'Failed to initialize AI client',
-        code: 'SDK_INIT_ERROR',
-      },
-      { status: 503 }
-    );
-  }
+  // Initialize Groq client
+  const groq = new Groq({ apiKey });
 
   try {
     const prompt = createExplainPrompt({ term, context });
 
-    logGroqApiCall('start');
     const chatCompletion = await groq.chat.completions.create({
-      messages: [
-        {
-          role: 'user',
-          content: prompt,
-        },
-      ],
-      model: 'llama3-70b-8192',
+      messages: [{ role: 'user', content: prompt }],
+      model: 'llama-3.3-70b-versatile',
       temperature: 0.7,
       max_tokens: 1500,
       top_p: 1,
     });
-    logGroqApiCall('success', chatCompletion);
 
     const content = chatCompletion.choices[0]?.message?.content;
 
     if (!content) {
-      console.error('[ERROR] No content in Groq response');
-      throw new Error('No content in response');
+      console.error('[ai/explain] Empty response from Groq');
+      return NextResponse.json(
+        { error: 'AI returned empty response', code: 'EMPTY_RESPONSE' },
+        { status: 502 }
+      );
     }
 
     const explanation = parseExplanationResponse(content);
@@ -281,64 +196,87 @@ export async function POST(request: NextRequest) {
       },
     });
   } catch (error) {
-    logGroqApiCall('error', error);
-    console.error('[GROQ_ERROR]', error instanceof Error ? error.message : 'Unknown error');
-
-    if (error instanceof Error) {
-      if (
-        error.message.includes('401') ||
-        error.message.includes('authentication') ||
-        error.message.includes('Invalid API Key')
-      ) {
-        console.error('[AUTH_ERROR] API key authentication failed');
-        return NextResponse.json(
-          {
-            error: 'AI service authentication failed',
-            code: 'AUTH_ERROR',
-          },
-          { status: 503 }
-        );
-      }
-      if (
-        error.message.includes('429') ||
-        error.message.includes('rate limit')
-      ) {
-        return NextResponse.json(
-          { error: 'AI service rate limited', code: 'API_RATE_LIMITED' },
-          { status: 503 }
-        );
-      }
-      if (error.message.includes('model')) {
-        return NextResponse.json(
-          {
-            error: 'AI model not available',
-            code: 'MODEL_ERROR',
-          },
-          { status: 503 }
-        );
-      }
-    }
+    return handleGroqError(error);
+  }
+}
+
+// =============================================================================
+// GET /api/ai/explain - Health check
+// =============================================================================
+export async function GET() {
+  const hasApiKey = !!process.env.GROQ_API_KEY;
 
+  if (!hasApiKey) {
     return NextResponse.json(
-      {
-        error: 'Failed to generate explanation',
-        code: 'AI_ERROR',
-      },
-      { status: 500 }
+      { status: 'error', service: 'ai-explain', message: 'API key not configured' },
+      { status: 503 }
     );
   }
-}
 
-export async function GET() {
   return NextResponse.json(
-    {
-      status: 'ok',
-      service: 'ai-explain',
-      env: {
-        hasGroqKey: !!process.env.GROQ_API_KEY,
-        nodeEnv: process.env.NODE_ENV,
-      },
-    },
+    { status: 'ok', service: 'ai-explain' },
     { status: 200 }
   );
 }
+
+// =============================================================================
+// Error Handling
+// =============================================================================
+function handleGroqError(error: unknown): NextResponse {
+  // Handle Groq SDK specific errors
+  if (error instanceof Groq.APIError) {
+    console.error(`[ai/explain] Groq API error: ${error.status} ${error.message}`);
+
+    if (error.status === 401) {
+      return NextResponse.json(
+        { error: 'AI service authentication failed', code: 'AUTH_ERROR' },
+        { status: 503 }
+      );
+    }
+
+    if (error.status === 429) {
+      return NextResponse.json(
+        { error: 'AI service rate limited', code: 'API_RATE_LIMITED' },
+        { status: 503 }
+      );
+    }
+
+    if (error.status === 404) {
+      return NextResponse.json(
+        { error: 'AI model not available', code: 'MODEL_ERROR' },
+        { status: 503 }
+      );
+    }
+
+    // Other API errors (500, 503, etc.)
+    return NextResponse.json(
+      { error: 'AI service temporarily unavailable', code: 'API_ERROR' },
+      { status: 503 }
+    );
+  }
+
+  // Handle JSON parse errors from response parsing
+  if (error instanceof SyntaxError) {
+    console.error('[ai/explain] Failed to parse AI response as JSON');
+    return NextResponse.json(
+      { error: 'AI returned invalid format', code: 'PARSE_ERROR' },
+      { status: 502 }
+    );
+  }
+
+  // Handle response structure validation errors
+  if (error instanceof Error && error.message === 'Invalid response structure') {
+    console.error('[ai/explain] AI response missing required fields');
+    return NextResponse.json(
+      { error: 'AI returned incomplete response', code: 'INVALID_STRUCTURE' },
+      { status: 502 }
+    );
+  }
+
+  // Unknown errors
+  console.error('[ai/explain] Unexpected error:', error);
+  return NextResponse.json(
+    { error: 'Failed to generate explanation', code: 'AI_ERROR' },
+    { status: 500 }
+  );
+}
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index a79b1704..d8eab905 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -547,7 +547,9 @@
         "items": "Items",
         "date": "Date",
         "status": "Status",
-        "total": "Total"
+        "total": "Total",
+        "openOrder": "Open order {id}",
+        "orderId": "Order ID"
       },
       "orderHeadline": {
         "incomplete": "Order {id} (incomplete)",
@@ -921,7 +923,7 @@
     }
   },
   "onlineCounter": {
-    "one": "you are one step closer to the goal",
+    "one": "one step closer to the goal",
     "two": "chasing the dream",
     "upToFive": "on the way to an offer",
     "upToTen": "closer to the dream job",
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
index 163ca30f..06113f66 100644
--- a/frontend/messages/pl.json
+++ b/frontend/messages/pl.json
@@ -547,7 +547,9 @@
         "items": "Produkty",
         "date": "Data",
         "status": "Status",
-        "total": "Razem"
+        "total": "Razem",
+        "openOrder": "Otwórz zamówienie {id}",
+        "orderId": "ID zamówienia"
       },
       "orderHeadline": {
         "incomplete": "Zamówienie {id} (niekompletne)",
diff --git a/frontend/messages/uk.json b/frontend/messages/uk.json
index ff051ab1..7be5f3b7 100644
--- a/frontend/messages/uk.json
+++ b/frontend/messages/uk.json
@@ -547,7 +547,9 @@
         "items": "Товари",
         "date": "Дата",
         "status": "Статус",
-        "total": "Всього"
+        "total": "Всього",
+        "openOrder": "Відкрити замовлення {id}",
+        "orderId": "ID замовлення"
       },
       "orderHeadline": {
         "incomplete": "Замовлення {id} (незавершене)",
@@ -921,7 +923,7 @@
     }
   },
   "onlineCounter": {
-    "one": "ти на крок до цілі",
+    "one": "на крок до цілі",
     "two": "йдуть до мрії",
     "upToFive": "на шляху до оффера",
     "upToTen": "ближчі до dream job",
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 673aebd9..edaa9272 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -45,7 +45,6 @@
         "zod": "^3.24.0"
       },
       "devDependencies": {
-        "@netlify/plugin-nextjs": "^5.15.7",
         "@tailwindcss/postcss": "^4",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.8.0",
@@ -1892,16 +1891,6 @@
         "undici-types": "~6.21.0"
       }
     },
-    "node_modules/@netlify/plugin-nextjs": {
-      "version": "5.15.7",
-      "resolved": "https://registry.npmjs.org/@netlify/plugin-nextjs/-/plugin-nextjs-5.15.7.tgz",
-      "integrity": "sha512-tSlGTwOR/dFZMrjhCxynlwc/NkOwY+bc0gurOranLtwASH5wat2WqZaPkyIdfVdNd/zNpmGxgbkH0uppg1Lsxg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/@next/env": {
       "version": "16.1.6",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.6.tgz",
@@ -9667,6 +9656,16 @@
         }
       }
     },
+    "node_modules/next-intl/node_modules/@swc/helpers": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/next-themes": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 43864146..ff4fbc3f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -58,7 +58,6 @@
     "zod": "^3.24.0"
   },
   "devDependencies": {
-    "@netlify/plugin-nextjs": "^5.15.7",
     "@tailwindcss/postcss": "^4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",

From 7a353d1af0251b52fe85a2e9234a7f8aa75a079a Mon Sep 17 00:00:00 2001
From: Yuliia Nazymko <122815071+YNazymko12@users.noreply.github.com>
Date: Sun, 1 Feb 2026 18:51:45 +0100
Subject: [PATCH 11/24] refactor(home): update button, cards, and online
 counter UI (#248)

Improve primary button styles
Fix card overflow and add subtle highlights
Redesign online users counter and reduce font size
---
 frontend/app/globals.css                      |  95 +---------
 frontend/components/home/CodeCard.tsx         |  25 ++-
 frontend/components/home/HeroCodeCards.tsx    |   4 +-
 frontend/components/home/HeroSection.tsx      |   8 +-
 .../components/home/InteractiveCTAButton.tsx  | 178 ++++++++++++++----
 .../components/shared/OnlineCounterPopup.tsx  | 124 +++++++-----
 6 files changed, 252 insertions(+), 182 deletions(-)

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 2743a7c1..ccc119f9 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -210,71 +210,6 @@
   }
 }
 
-@keyframes wave-slide-up {
-  0% {
-    clip-path: polygon(
-      0% 100%,
-      10% 100%,
-      20% 100%,
-      30% 100%,
-      40% 100%,
-      50% 100%,
-      60% 100%,
-      70% 100%,
-      80% 100%,
-      90% 100%,
-      100% 100%,
-      100% 100%,
-      0% 100%
-    );
-  }
-  50% {
-    clip-path: polygon(
-      0% 60%,
-      10% 50%,
-      20% 45%,
-      30% 48%,
-      40% 55%,
-      50% 50%,
-      60% 45%,
-      70% 48%,
-      80% 52%,
-      90% 50%,
-      100% 55%,
-      100% 100%,
-      0% 100%
-    );
-  }
-  100% {
-    clip-path: polygon(
-      0% 0%,
-      10% 0%,
-      20% 0%,
-      30% 0%,
-      40% 0%,
-      50% 0%,
-      60% 0%,
-      70% 0%,
-      80% 0%,
-      90% 0%,
-      100% 0%,
-      100% 100%,
-      0% 100%
-    );
-  }
-}
-
-@keyframes text-fade-in {
-  0% {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes card-breathe {
   0% {
     transform: translate(0, 0) scale(1) rotate(var(--card-rotate, 0deg));
@@ -297,36 +232,24 @@
     animation: slide-up-gradient 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }
 
-  .animate-wave-slide-up {
-    animation: wave-slide-up 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-
-  .animate-text-fade-in {
-    animation: text-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-
   .animate-card-breathe {
     animation: card-breathe 6s ease-in-out infinite;
     will-change: transform;
   }
 
-  .left-4 .animate-card-breathe,
-  .md\:left-6 .animate-card-breathe,
-  .lg\:left-8 .animate-card-breathe,
-  .xl\:left-12 .animate-card-breathe {
-    --card-x: -30px;
-    --card-y: -25px;
+  .lg\:left-16.animate-card-breathe {
+    transform: rotate(-10deg);
+    --card-x: -20px;
+    --card-y: -15px;
     --card-rotate: -10deg;
     --card-rotate-offset: -3deg;
     animation-delay: 0s;
   }
 
-  .right-4 .animate-card-breathe,
-  .md\:right-6 .animate-card-breathe,
-  .lg\:right-8 .animate-card-breathe,
-  .xl\:right-12 .animate-card-breathe {
-    --card-x: 30px;
-    --card-y: 25px;
+  .lg\:right-20.animate-card-breathe {
+    transform: rotate(8deg);
+    --card-x: 20px;
+    --card-y: 15px;
     --card-rotate: 8deg;
     --card-rotate-offset: 3deg;
     animation-delay: 0.8s;
@@ -376,7 +299,7 @@
 .shop-scope {
   /* keep shop rounding slightly tighter than platform */
   --radius: calc(var(--radius-base) - 2px);
-  
+
   /* Shop header/button accent in LIGHT: no platform blue */
   --accent-primary: var(--foreground);
   --accent-hover: color-mix(in oklab, var(--foreground) 92%, white);
diff --git a/frontend/components/home/CodeCard.tsx b/frontend/components/home/CodeCard.tsx
index 6f3b1157..f66efbf2 100644
--- a/frontend/components/home/CodeCard.tsx
+++ b/frontend/components/home/CodeCard.tsx
@@ -9,19 +9,26 @@ interface CodeCardProps {
 export function CodeCard({ fileName, snippet, className }: CodeCardProps) {
   return (
     <div
-      className={`pointer-events-none absolute hidden md:block ${className}`}
+      className={`pointer-events-none absolute hidden lg:block ${className} animate-card-breathe`}
       aria-hidden="true"
     >
-      <div className="rounded-2xl border border-border bg-card/60 backdrop-blur-xl shadow-xl dark:shadow-black/50 px-5 py-4 min-w-[230px] animate-card-breathe">
-        <div className="flex items-center justify-between mb-3 text-[10px] text-muted-foreground">
-          <div className="flex items-center gap-1.5">
-            <span className="h-2 w-2 rounded-full bg-red-400/90" />
-            <span className="h-2 w-2 rounded-full bg-yellow-400/90" />
-            <span className="h-2 w-2 rounded-full bg-green-400/90" />
+      <div className="absolute top-1/3 -left-4 -right-4 -bottom-6 bg-[var(--accent-primary)]/8 rounded-3xl blur-2xl" />
+
+      <div className="absolute top-1/2 -left-2 -right-2 -bottom-4 bg-[var(--accent-primary)]/12 rounded-2xl blur-xl" />
+
+      <div className="absolute top-2/3 -left-1 -right-1 -bottom-2 bg-[var(--accent-primary)]/15 rounded-2xl blur-md" />
+
+      <div className="relative rounded-2xl border border-[var(--accent-primary)]/20 bg-card/90 backdrop-blur-xl shadow-2xl dark:shadow-[var(--accent-primary)]/10 px-3.5 py-3 min-w-[180px] max-w-[200px] overflow-hidden">
+        <div className="flex items-center justify-between mb-2 text-[9px] text-muted-foreground/80">
+          <div className="flex items-center gap-1">
+            <span className="h-1.5 w-1.5 rounded-full bg-red-400/80 shadow-sm" />
+            <span className="h-1.5 w-1.5 rounded-full bg-yellow-400/80 shadow-sm" />
+            <span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm" />
           </div>
-          <span className="font-medium">{fileName}</span>
+          <span className="font-medium text-[8.5px]">{fileName}</span>
         </div>
-        <code className="text-[11px] whitespace-pre leading-relaxed font-mono text-foreground/90">
+
+        <code className="text-[10px] whitespace-pre leading-relaxed font-mono text-foreground/85 block relative z-10">
           {snippet}
         </code>
       </div>
diff --git a/frontend/components/home/HeroCodeCards.tsx b/frontend/components/home/HeroCodeCards.tsx
index 7c4fd1b6..8e696b93 100644
--- a/frontend/components/home/HeroCodeCards.tsx
+++ b/frontend/components/home/HeroCodeCards.tsx
@@ -5,7 +5,7 @@ export function HeroCodeCards() {
     <>
       <CodeCard
         fileName="arrays.ts"
-        className="left-4 md:left-10 lg:left-8 xl:left-12 -top-2 md:-top-12 lg:-top-8 xl:-top-12 rotate-[-10deg]"
+        className="lg:left-16 lg:top-0"
         snippet={
           <>
             <span className="text-[var(--accent-primary)]">type</span> Arr1 = [
@@ -31,7 +31,7 @@ export function HeroCodeCards() {
 
       <CodeCard
         fileName="utils.js"
-        className="right-4 md:right-4 lg:right-8 xl:right-12 -bottom-2 md:-bottom-6 lg:-bottom-8 xl:-bottom-12 rotate-[8deg]"
+        className="lg:right-20 lg:bottom-16"
         snippet={
           <>
             <span className="text-[var(--accent-primary)]">function</span> sum(
diff --git a/frontend/components/home/HeroSection.tsx b/frontend/components/home/HeroSection.tsx
index 78946cce..8fee2a71 100644
--- a/frontend/components/home/HeroSection.tsx
+++ b/frontend/components/home/HeroSection.tsx
@@ -26,12 +26,12 @@ sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-[100vh]
       <div className="relative max-w-5xl mx-auto w-full px-6 py-8 sm:py-12 md:py-28 lg:py-[7.5rem] xl:py-32 flex flex-col items-center text-center">
         <HeroCodeCards />
 
-        <p className="text-[11px] sm:text-xs md:text-sm tracking-[0.35em] uppercase text-foreground font-bold">
+        <p className="text-[11px] sm:text-xs lg:text-sm tracking-[0.35em] uppercase text-foreground/90 font-bold">
           {t('subtitle')}
         </p>
 
-        <div className="mt-6 sm:mt-8 md:mt-14 lg:mt-16 relative inline-block">
-          <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-black tracking-tight relative inline-block">
+        <div className="mt-6 sm:mt-8 lg:mt-14 relative inline-block">
+          <h1 className="min-[375px]:text-[3.5rem] text-5xl sm:text-7xl md:text-[5rem] lg:text-8xl xl:text-[100px] font-black tracking-tight relative inline-block px-4">
             <span className="relative inline-block bg-gradient-to-r from-[var(--accent-primary)]/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-[var(--accent-hover)]/70 bg-clip-text text-transparent">
               DevLovers
             </span>
@@ -45,7 +45,7 @@ sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-[100vh]
           </h1>
         </div>
 
-        <p className="mt-4 sm:mt-6 md:mt-10 lg:mt-12 max-w-2xl text-sm sm:text-base md:text-lg text-muted-foreground font-light">
+        <p className="mt-4 sm:mt-6 md:mt-10 lg:mt-12 md:max-w-xl lg:max-w-2xl text-sm sm:text-sm lg:text-base text-muted-foreground font-light">
           {t('description')}
         </p>
 
diff --git a/frontend/components/home/InteractiveCTAButton.tsx b/frontend/components/home/InteractiveCTAButton.tsx
index f6c84014..d0426479 100644
--- a/frontend/components/home/InteractiveCTAButton.tsx
+++ b/frontend/components/home/InteractiveCTAButton.tsx
@@ -3,73 +3,181 @@
 import React from 'react';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
-import { createCTAVariants } from '@/lib/home/cta-variants';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Heart } from 'lucide-react';
 
 export function InteractiveCTAButton() {
   const t = useTranslations('homepage');
 
-  const [index, setIndex] = React.useState(0);
+  const [variantIndex, setVariantIndex] = React.useState(1);
   const [isHovered, setIsHovered] = React.useState(false);
 
-  const variants = createCTAVariants(t('cta'));
-  const current = variants[index];
-  const nextIndex = (index + 1) % variants.length;
-  const next = variants[nextIndex];
+  // Тимчасово для тестування - цифри замість текстів
+  const textVariants = [
+    `${t('cta')} 1`,
+    `${t('cta')} 2`,
+    `${t('cta')} 3`,
+    `${t('cta')} 4`,
+    `${t('cta')} 5`,
+  ];
+
+  const defaultVariant = t('cta');
+  const hoverVariant = textVariants[variantIndex];
 
   const handleEnter = () => {
     if (!window.matchMedia('(hover: hover)').matches) return;
-    if (isHovered) return;
     setIsHovered(true);
   };
 
   const handleLeave = () => {
     if (!window.matchMedia('(hover: hover)').matches) return;
-    if (!isHovered) return;
-    setIndex(nextIndex);
     setIsHovered(false);
+    setVariantIndex(prev => (prev + 1) % textVariants.length);
   };
 
+  // Орбітальні частинки
+  const particles = Array.from({ length: 12 }, (_, i) => ({
+    id: i,
+    angle: (i * 360) / 8,
+  }));
+
   return (
     <Link
       href="/q&a"
       onMouseEnter={handleEnter}
       onMouseLeave={handleLeave}
-      className={`
-        group relative inline-flex items-center overflow-hidden rounded-2xl
+      className="
+        group relative inline-flex items-center justify-center overflow-visible rounded-2xl
         px-8 sm:px-10 md:px-12 py-3 md:py-3.5 lg:py-4
         text-xs md:text-sm font-semibold tracking-[0.25em] uppercase text-white
-        ${current.shadow} ${current.shadowDark}
-        transition-shadow duration-700 ease-out
+        shadow-[0_18px_45px_rgba(30,94,255,0.35)]
+        dark:shadow-[0_22px_60px_rgba(255,45,85,0.5)]
+        hover:shadow-[0_22px_55px_rgba(30,94,255,0.45)]
+        dark:hover:shadow-[0_28px_70px_rgba(255,45,85,0.6)]
+        transition-shadow duration-500 ease-out
         active:scale-95
-active:brightness-110
-active:shadow-xl
-
-        focus-visible:outline-none focus-visible:ring-2 ${current.ring} focus-visible:ring-offset-2
-      `}
+        active:brightness-110
+        active:shadow-xl
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-primary)] focus-visible:ring-offset-2
+      "
     >
-      <span
-        className={`absolute inset-0 bg-gradient-to-r ${current.gradient} ${current.gradientDark}`}
+      {/* Базовий градієнт з анімацією */}
+      <motion.span
+        className="absolute inset-0 rounded-2xl"
+        style={{
+          background:
+            'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
+        }}
+        animate={{
+          background: isHovered
+            ? [
+                'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
+                'linear-gradient(225deg, var(--accent-hover) 0%, var(--accent-primary) 100%)',
+                'linear-gradient(315deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
+                'linear-gradient(45deg, var(--accent-hover) 0%, var(--accent-primary) 100%)',
+              ]
+            : 'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
+        }}
+        transition={{
+          duration: 2,
+          repeat: isHovered ? Infinity : 0,
+          ease: 'linear',
+        }}
+      />
+
+      {/* М'яка неонова підсвітка */}
+      <motion.span
+        className="absolute inset-0 rounded-2xl pointer-events-none"
+        initial={{ opacity: 0 }}
+        animate={{
+          opacity: isHovered ? [0.15, 0.25, 0.15] : 0,
+        }}
+        transition={{
+          duration: 2.5,
+          repeat: isHovered ? Infinity : 0,
+          ease: 'easeInOut',
+        }}
+        style={{
+          boxShadow: `
+            0 0 30px 3px var(--accent-primary),
+            0 0 50px 5px var(--accent-hover)
+          `,
+        }}
       />
 
-      {isHovered && (
-        <span
-          className={`absolute inset-0 bg-gradient-to-r ${next.gradient} ${next.gradientDark} animate-wave-slide-up`}
-        />
-      )}
+      {/* Орбітальні частинки - БЛИЗЬКО навколо кнопки */}
+      <AnimatePresence>
+        {isHovered &&
+          particles.map(particle => (
+            <motion.span
+              key={particle.id}
+              className="absolute w-3 h-3 pointer-events-none"
+              style={{
+                left: '50%',
+                top: '50%',
+                marginLeft: '-6px',
+                marginTop: '-6px',
+              }}
+              initial={{ x: 0, y: 0, scale: 0, opacity: 0 }}
+              animate={{
+                x: [0, Math.cos((particle.angle * Math.PI) / 180) * 160, 0],
+                y: [0, Math.sin((particle.angle * Math.PI) / 180) * 60, 0],
+                scale: [0.7, 1, 0.7],
+                opacity: [0, 0.9, 0],
+              }}
+              transition={{
+                duration: 2,
+                repeat: Infinity,
+                ease: 'easeInOut',
+                delay: particle.id * 0.1,
+              }}
+            >
+              <Heart
+                size={14}
+                fill="var(--accent-primary)"
+                color="var(--accent-primary)"
+                style={{
+                  filter: 'drop-shadow(0 0 6px var(--accent-primary))',
+                }}
+              />
+            </motion.span>
+          ))}
+      </AnimatePresence>
 
+      {/* Внутрішній shine overlay */}
       <span
-        className="pointer-events-none absolute inset-[2px] rounded-2xl
-        bg-gradient-to-r from-white/20 via-white/5 to-white/20
-        opacity-40 supports-[hover:hover]:group-hover:opacity-60 transition-opacity"
+        className="pointer-events-none absolute inset-[1px] rounded-2xl"
+        style={{
+          background:
+            'linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)',
+        }}
       />
 
-      <span className="relative z-10">
-        <span
-          key={isHovered ? nextIndex : index}
-          className={`inline-block ${isHovered ? 'animate-text-fade-in' : ''}`}
-        >
-          {isHovered ? next.text : current.text}
-        </span>
+      {/* Текст з анімацією */}
+      <span className="relative z-10 flex items-center justify-center">
+        <AnimatePresence mode="wait">
+          {!isHovered ? (
+            <motion.span
+              key="default"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.3, ease: 'easeOut' }}
+            >
+              {defaultVariant}
+            </motion.span>
+          ) : (
+            <motion.span
+              key={`hover-${variantIndex}`}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.3, ease: 'easeOut' }}
+            >
+              {hoverVariant}
+            </motion.span>
+          )}
+        </AnimatePresence>
       </span>
     </Link>
   );
diff --git a/frontend/components/shared/OnlineCounterPopup.tsx b/frontend/components/shared/OnlineCounterPopup.tsx
index 206285e1..b2a79739 100644
--- a/frontend/components/shared/OnlineCounterPopup.tsx
+++ b/frontend/components/shared/OnlineCounterPopup.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
-import { Users, Sparkles } from 'lucide-react';
+import { Users } from 'lucide-react';
 
 export function OnlineCounterPopup() {
   const t = useTranslations('onlineCounter');
@@ -25,14 +25,6 @@ export function OnlineCounterPopup() {
 
   if (!online) return null;
 
-  const getEmoji = (count: number) => {
-    if (count === 1) return '🎯';
-    if (count === 2) return '💼';
-    if (count <= 5) return '🚀';
-    if (count <= 10) return '⚡';
-    return '⭐';
-  };
-
   const getText = (count: number) => {
     if (count === 1) return t('one');
     if (count === 2) return t('two');
@@ -42,7 +34,7 @@ export function OnlineCounterPopup() {
   };
 
   return (
-    <div className="fixed bottom-12 right-12 z-50 max-w-md">
+    <div className="fixed bottom-[30vh] left-0 right-0 md:bottom-[10vh] md:left-auto md:right-12 z-50 flex justify-center md:justify-end md:pr-0">
       <div
         className={`
           transition-all duration-500 ease-out
@@ -53,51 +45,91 @@ export function OnlineCounterPopup() {
           }
         `}
       >
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-pink-400/20 dark:from-blue-500/30 dark:via-purple-500/30 dark:to-pink-500/30 blur-2xl animate-pulse" />
+        <div className="relative">
+          <div className="absolute -inset-1.5 sm:-inset-2 bg-[var(--accent-primary)]/15 dark:bg-[var(--accent-primary)]/20 blur-xl rounded-3xl" />
 
-        <div className="relative inline-flex items-center gap-3 px-5 py-3.5 rounded-2xl bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-blue-600 dark:via-purple-600 dark:to-pink-600 shadow-2xl">
-          <div className="relative flex-shrink-0">
-            <div className="w-10 h-10 rounded-xl bg-white/30 dark:bg-white/25 backdrop-blur-sm flex items-center justify-center">
-              <Users className="w-5 h-5 text-white" />
+          <div className="relative inline-flex items-center gap-2.5 sm:gap-2.5 md:gap-3 pl-3 sm:pl-3 md:pl-3.5 pr-3.5 sm:pr-3.5 md:pr-4 py-2.5 sm:py-2.5 md:py-3 rounded-xl sm:rounded-xl md:rounded-2xl bg-card/95 backdrop-blur-xl border border-[var(--accent-primary)]/20 shadow-2xl overflow-hidden">
+            <div className="absolute inset-0 opacity-40">
+              <div className="absolute inset-0 bg-gradient-to-br from-[var(--accent-primary)]/10 via-[var(--accent-primary)]/5 to-transparent" />
+              <div
+                className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,var(--accent-primary)_0%,transparent_2%)] opacity-30"
+                style={{ backgroundSize: '20px 20px' }}
+              />
             </div>
-            <Sparkles
-              className="absolute -top-1 -right-1 w-4 h-4 text-yellow-300 dark:text-yellow-200 animate-spin"
-              style={{ animationDuration: '3s' }}
-            />
-          </div>
 
-          <div className="flex items-baseline gap-2">
-            <span className="text-xl">{getEmoji(online)}</span>
-            <div className="flex items-baseline gap-1.5">
-              <span className="text-2xl font-black text-white dark:text-yellow-100 drop-shadow-sm">
-                {online}
-              </span>
-              <span className="text-base font-semibold text-white/95 dark:text-white/90 whitespace-nowrap">
-                {getText(online)}
+            <div className="relative flex-shrink-0 z-10">
+              <div className="w-9 h-9 sm:w-9 sm:h-9 md:w-10 md:h-10 rounded-lg sm:rounded-lg md:rounded-xl bg-[var(--accent-primary)]/10 dark:bg-[var(--accent-primary)]/15 backdrop-blur-sm flex items-center justify-center border border-[var(--accent-primary)]/20 relative overflow-hidden">
+                <div className="absolute inset-0 bg-gradient-to-tr from-[var(--accent-primary)]/20 to-transparent animate-pulse" />
+                <Users className="w-4 h-4 sm:w-4 sm:h-4 md:w-5 md:h-5 text-[var(--accent-primary)] relative z-10" />
+              </div>
+            </div>
+
+            <div className="flex items-baseline gap-1.5 sm:gap-1.5 md:gap-2 relative z-10">
+              <div className="flex items-baseline gap-1 sm:gap-1 md:gap-1.5">
+                <span className="text-2xl sm:text-xl md:text-2xl font-black text-[var(--accent-primary)] dark:text-[var(--accent-primary)]">
+                  {online}
+                </span>
+                <span className="text-xs sm:text-xs md:text-sm font-semibold text-foreground/80 dark:text-foreground/90 whitespace-nowrap">
+                  {getText(online)}
+                </span>
+              </div>
+            </div>
+
+            <div className="ml-auto flex-shrink-0 relative z-10">
+              <span className="relative flex h-2.5 w-2.5 sm:h-2.5 sm:w-2.5 md:h-3 md:w-3">
+                <span
+                  className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--accent-primary)]/60"
+                  style={{ animationDuration: '1.5s' }}
+                />
+                <span
+                  className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--accent-primary)]/40"
+                  style={{ animationDuration: '2s', animationDelay: '0.5s' }}
+                />
+                <span className="relative inline-flex rounded-full h-2.5 w-2.5 sm:h-2.5 sm:w-2.5 md:h-3 md:w-3 bg-[var(--accent-primary)] shadow-lg shadow-[var(--accent-primary)]/50" />
               </span>
             </div>
-          </div>
 
-          <div className="ml-1 flex-shrink-0">
-            <span className="relative flex h-2.5 w-2.5">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-300 dark:bg-purple-200 opacity-75" />
-              <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-purple-400 dark:bg-purple-300" />
-            </span>
-          </div>
+            <div className="absolute bottom-0 left-0 right-0 h-0.5 sm:h-0.5 md:h-1 bg-[var(--accent-primary)]/10 rounded-b-xl sm:rounded-b-xl md:rounded-b-2xl overflow-hidden">
+              <div
+                className="h-full bg-gradient-to-r from-[var(--accent-primary)]/30 via-[var(--accent-primary)]/50 to-[var(--accent-primary)]/30"
+                style={{ animation: 'shrink 8s linear forwards' }}
+              />
+            </div>
+
+            <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--accent-primary)]/30 to-transparent" />
 
-          <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/25 dark:bg-white/20 rounded-b-2xl overflow-hidden">
-            <div
-              className="h-full bg-white/60 dark:bg-white/50"
-              style={{ animation: 'shrink 8s linear forwards' }}
-            />
+            <div className="absolute left-0 top-1/4 bottom-1/4 w-px bg-gradient-to-b from-transparent via-[var(--accent-primary)]/20 to-transparent" />
+            <div className="absolute right-0 top-1/4 bottom-1/4 w-px bg-gradient-to-b from-transparent via-[var(--accent-primary)]/20 to-transparent" />
           </div>
-        </div>
 
-        <div className="absolute -top-1 left-6 w-1.5 h-1.5 rounded-full bg-blue-400/60 dark:bg-blue-300/70 animate-ping" />
-        <div
-          className="absolute -top-2 right-8 w-1 h-1 rounded-full bg-purple-400/60 dark:bg-purple-300/70 animate-ping"
-          style={{ animationDelay: '0.5s' }}
-        />
+          <div className="absolute -top-1 left-4 sm:left-6 w-1 sm:w-1.5 h-1 sm:h-1.5 rounded-full bg-[var(--accent-primary)]/60 dark:bg-[var(--accent-primary)]/70 animate-ping" />
+          <div
+            className="absolute -top-2 right-6 sm:right-8 w-0.5 sm:w-1 h-0.5 sm:h-1 rounded-full bg-[var(--accent-primary)]/60 dark:bg-[var(--accent-primary)]/70 animate-ping"
+            style={{ animationDelay: '0.5s' }}
+          />
+          <div
+            className="absolute -top-1.5 left-1/3 w-1 h-1 rounded-full bg-[var(--accent-primary)]/50 dark:bg-[var(--accent-primary)]/60 animate-ping"
+            style={{ animationDelay: '1s' }}
+          />
+
+          <div
+            className="absolute top-1/4 -left-1 w-1 h-1 rounded-full bg-[var(--accent-primary)]/40 dark:bg-[var(--accent-primary)]/50 animate-ping"
+            style={{ animationDelay: '1.5s' }}
+          />
+          <div
+            className="absolute top-2/3 -right-1 w-1 h-1 rounded-full bg-[var(--accent-primary)]/40 dark:bg-[var(--accent-primary)]/50 animate-ping"
+            style={{ animationDelay: '2s' }}
+          />
+
+          <div
+            className="absolute -bottom-1 left-1/4 w-0.5 sm:w-1 h-0.5 sm:h-1 rounded-full bg-[var(--accent-primary)]/50 dark:bg-[var(--accent-primary)]/60 animate-ping"
+            style={{ animationDelay: '0.8s' }}
+          />
+          <div
+            className="absolute -bottom-1.5 right-1/3 w-1 h-1 rounded-full bg-[var(--accent-primary)]/50 dark:bg-[var(--accent-primary)]/60 animate-ping"
+            style={{ animationDelay: '1.2s' }}
+          />
+        </div>
       </div>
     </div>
   );

From 9ace93d70d70d35aa01aaa6f55125cbbee0cfd0a Mon Sep 17 00:00:00 2001
From: Tetiana Zorii <131365289+TiZorii@users.noreply.github.com>
Date: Sun, 1 Feb 2026 13:32:42 -0500
Subject: [PATCH 12/24] fix(api): enforce rate limiting (#246)

* (SP:2) feat(api): clean up AI helper for Vercel & fix orders i18n

  - Refactor /api/ai/explain route for Vercel deployment
    - Replace dynamic import with static import of groq-sdk
    - Use request.json() instead of Netlify-safe body parsing
    - Add proper error handling with Groq.APIError types
    - Simplify GET health check endpoint
    - Update model from llama3-70b-8192 to llama-3.3-70b-versatile
- Add table.openOrder and table.orderId to en/uk/pl locales

* fix(api): enforce rate limiting

---------

Co-authored-by: Viktor Svertoka <victor.svertoka@gmail.com>
---
 frontend/app/api/ai/explain/route.ts | 46 ++++++++++++----------------
 1 file changed, 20 insertions(+), 26 deletions(-)

diff --git a/frontend/app/api/ai/explain/route.ts b/frontend/app/api/ai/explain/route.ts
index f1963b1e..f821c4ad 100644
--- a/frontend/app/api/ai/explain/route.ts
+++ b/frontend/app/api/ai/explain/route.ts
@@ -1,17 +1,15 @@
 export const runtime = 'nodejs';
 
-import { NextRequest, NextResponse } from 'next/server';
+import { NextResponse } from 'next/server';
 import { z } from 'zod';
 import Groq from 'groq-sdk';
 import {
   createExplainPrompt,
   type ExplanationResponse,
 } from '@/lib/ai/prompts';
-import { getClientIp } from '@/lib/security/client-ip';
+import { getCurrentUser } from '@/lib/auth';
+
 
-// =============================================================================
-// Rate Limiter (in-memory, resets on cold start)
-// =============================================================================
 const rateLimiter = new Map<string, { count: number; resetAt: number }>();
 const MAX_REQUESTS_PER_WINDOW = 10;
 const RATE_LIMIT_WINDOW_MS = 20 * 60 * 1000;
@@ -24,9 +22,9 @@ function cleanupRateLimiter() {
   if (now - lastCleanup < CLEANUP_INTERVAL_MS) return;
 
   lastCleanup = now;
-  for (const [ip, entry] of rateLimiter.entries()) {
+  for (const [userId, entry] of rateLimiter.entries()) {
     if (now > entry.resetAt) {
-      rateLimiter.delete(ip);
+      rateLimiter.delete(userId);
     }
   }
 }
@@ -43,25 +41,20 @@ const requestSchema = z.object({
 });
 
 
-function checkRateLimit(ip: string): { allowed: boolean; remaining: number; resetIn: number; skipped: boolean } {
-  // Bypass rate limiting for unknown IPs (serverless safety)
-  if (ip === 'unknown') {
-    return { allowed: true, remaining: MAX_REQUESTS_PER_WINDOW, resetIn: RATE_LIMIT_WINDOW_MS, skipped: true };
-  }
-
+function checkRateLimit(userId: string): { allowed: boolean; remaining: number; resetIn: number } {
   cleanupRateLimiter();
 
   const now = Date.now();
-  const entry = rateLimiter.get(ip);
+  const entry = rateLimiter.get(userId);
 
   if (!entry || now > entry.resetAt) {
-    rateLimiter.set(ip, { count: 1, resetAt: now + RATE_LIMIT_WINDOW_MS });
-    return { allowed: true, remaining: MAX_REQUESTS_PER_WINDOW - 1, resetIn: RATE_LIMIT_WINDOW_MS, skipped: false };
+    rateLimiter.set(userId, { count: 1, resetAt: now + RATE_LIMIT_WINDOW_MS });
+    return { allowed: true, remaining: MAX_REQUESTS_PER_WINDOW - 1, resetIn: RATE_LIMIT_WINDOW_MS };
   }
 
   if (entry.count >= MAX_REQUESTS_PER_WINDOW) {
     const resetIn = entry.resetAt - now;
-    return { allowed: false, remaining: 0, resetIn, skipped: false };
+    return { allowed: false, remaining: 0, resetIn };
   }
 
   entry.count++;
@@ -69,7 +62,6 @@ function checkRateLimit(ip: string): { allowed: boolean; remaining: number; rese
     allowed: true,
     remaining: MAX_REQUESTS_PER_WINDOW - entry.count,
     resetIn: entry.resetAt - now,
-    skipped: false,
   };
 }
 
@@ -99,11 +91,7 @@ function parseExplanationResponse(content: string): ExplanationResponse {
   return parsed as ExplanationResponse;
 }
 
-// =============================================================================
-// POST /api/ai/explain - Generate term explanation in 3 languages
-// =============================================================================
-export async function POST(request: NextRequest) {
-  // Fail fast if API key is missing
+export async function POST(request: Request) {
   const apiKey = process.env.GROQ_API_KEY;
   if (!apiKey) {
     console.error('[ai/explain] GROQ_API_KEY not configured');
@@ -113,9 +101,15 @@ export async function POST(request: NextRequest) {
     );
   }
 
-  // Rate limiting
-  const clientIp = getClientIp(request) ?? 'unknown';
-  const rateLimit = checkRateLimit(clientIp);
+  const user = await getCurrentUser();
+  if (!user) {
+    return NextResponse.json(
+      { error: 'Authentication required', code: 'UNAUTHORIZED' },
+      { status: 401 }
+    );
+  }
+
+  const rateLimit = checkRateLimit(user.id);
 
   if (!rateLimit.allowed) {
     const resetMinutes = Math.ceil(rateLimit.resetIn / 60000);

From fb63cc393916c0a044deb7ce5a12c387cc4bd6e7 Mon Sep 17 00:00:00 2001
From: KomrakovaAnna <komrakova.anna@gmail.com>
Date: Sun, 1 Feb 2026 21:02:24 +0000
Subject: [PATCH 13/24] feat(Blog):formating text (#249)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(Blog):fix for clickable link in post details, fix for author details

* feat(Blog):refactoring after removing author modal

* feat(Blog): fix unified date format

* feat(Blog): Fix for  click-outside-to-close search, recommended posts are limited to 3

* feat(Blog): selectedAuthorData fixed

* feat(Blog): Added description for /blog/[slug] metadata, Added Schema.org JSON‑LD for Article (BlogPosting) and BreadcrumbList , Added <time datetime> tags where blog dates renders

* feat(Blog): fix hover social links, fixed duplication not found search

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added scroll on the main blog page on filtering by author, fied breadcrumbs category translaion, added category to the recommended cards, fixed search for localisations

* feat(Blog): Changed image size on the post details page

* feat(Blog): added tests

* feat(Blog): fix for big post on the post page, added tests

* feat(Blog): resolving comments

* feat(Blog): fixed hover for social links icins - dark theme

* feat(Blog): bringing the style on the blog page to a single site style

* feat(blog): aligning syles

* feat(blog): resolving comment from CodeRabbit

* feat(blog):fix comment for deployment

* feat(Blog): adding pagination

* feat(Blog): Addind Text formatting visibility

* feat(Blog):adding text formating fix
---
 .../app/[locale]/blog/[slug]/PostDetails.tsx  | 417 ++++++++++--------
 frontend/app/[locale]/blog/page.tsx           |   2 +-
 2 files changed, 233 insertions(+), 186 deletions(-)

diff --git a/frontend/app/[locale]/blog/[slug]/PostDetails.tsx b/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
index 89c5ab71..7ce07d19 100644
--- a/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
+++ b/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
@@ -85,8 +85,7 @@ function renderPortableTextSpans(
     const marks = child?.marks || [];
     const linkKey = marks.find(mark => linkMap.has(mark));
 
-    let node: React.ReactNode =
-      marks.length === 0 ? linkifyText(text) : text;
+    let node: React.ReactNode = marks.length === 0 ? linkifyText(text) : text;
 
     for (const mark of marks) {
       if (linkMap.has(mark)) {
@@ -132,53 +131,86 @@ function renderPortableTextSpans(
   });
 }
 
-function renderPortableTextBlock(
-  block: any,
-  index: number
-): React.ReactNode {
+function renderPortableTextBlock(block: any, index: number): React.ReactNode {
   const children = renderPortableTextSpans(block.children, block.markDefs);
   const style = block?.style || 'normal';
 
   if (style === 'h1') {
     return (
-      <h1 key={block._key || `block-${index}`}>{children}</h1>
+      <h1
+        key={block._key || `block-${index}`}
+        className="mt-10 mb-4 text-3xl font-bold text-gray-900 dark:text-gray-100"
+      >
+        {children}
+      </h1>
     );
   }
   if (style === 'h2') {
     return (
-      <h2 key={block._key || `block-${index}`}>{children}</h2>
+      <h2
+        key={block._key || `block-${index}`}
+        className="mt-8 mb-3 text-2xl font-semibold text-gray-900 dark:text-gray-100"
+      >
+        {children}
+      </h2>
     );
   }
   if (style === 'h3') {
     return (
-      <h3 key={block._key || `block-${index}`}>{children}</h3>
+      <h3
+        key={block._key || `block-${index}`}
+        className="mt-7 mb-3 text-xl font-semibold text-gray-900 dark:text-gray-100"
+      >
+        {children}
+      </h3>
     );
   }
   if (style === 'h4') {
     return (
-      <h4 key={block._key || `block-${index}`}>{children}</h4>
+      <h4
+        key={block._key || `block-${index}`}
+        className="mt-6 mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100"
+      >
+        {children}
+      </h4>
     );
   }
   if (style === 'h5') {
     return (
-      <h5 key={block._key || `block-${index}`}>{children}</h5>
+      <h5
+        key={block._key || `block-${index}`}
+        className="mt-6 mb-2 text-base font-semibold text-gray-900 dark:text-gray-100"
+      >
+        {children}
+      </h5>
     );
   }
   if (style === 'h6') {
     return (
-      <h6 key={block._key || `block-${index}`}>{children}</h6>
+      <h6
+        key={block._key || `block-${index}`}
+        className="mt-6 mb-2 text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-300"
+      >
+        {children}
+      </h6>
     );
   }
   if (style === 'blockquote') {
     return (
-      <blockquote key={block._key || `block-${index}`}>
+      <blockquote
+        key={block._key || `block-${index}`}
+        className="my-6 border-l-4 border-[color-mix(in_srgb,var(--accent-primary)_40%,transparent)] pl-4 text-gray-600 dark:text-gray-400"
+      >
         {children}
       </blockquote>
     );
   }
 
   return (
-    <p key={block._key || `block-${index}`} className="whitespace-pre-line">
+    <p
+      key={block._key || `block-${index}`}
+      className="mb-4 whitespace-pre-line text-base leading-relaxed text-gray-700 dark:text-gray-300"
+    >
       {children}
     </p>
   );
@@ -215,11 +247,24 @@ function renderPortableText(
         j += 1;
       }
 
+      const listClass =
+        listType === 'ol' ? 'my-4 list-decimal pl-6' : 'my-4 list-disc pl-6';
+      const levelClass = level > 1 ? 'ml-6' : '';
       nodes.push(
         listType === 'ol' ? (
-          <ol key={block._key || `list-${i}`}>{items}</ol>
+          <ol
+            key={block._key || `list-${i}`}
+            className={`${listClass} ${levelClass}`.trim()}
+          >
+            {items}
+          </ol>
         ) : (
-          <ul key={block._key || `list-${i}`}>{items}</ul>
+          <ul
+            key={block._key || `list-${i}`}
+            className={`${listClass} ${levelClass}`.trim()}
+          >
+            {items}
+          </ul>
         )
       );
       i = j;
@@ -439,193 +484,195 @@ export default async function PostDetails({
   return (
     <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
       <main className="relative z-10 mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-      {breadcrumbsJsonLd && (
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(breadcrumbsJsonLd),
-          }}
-        />
-      )}
-      {articleJsonLd && (
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(articleJsonLd),
-          }}
-        />
-      )}
-      <nav className="mb-6" aria-label="Breadcrumb">
-        <ol className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-          {breadcrumbsItems.map((item, index) => {
-            const isLast = index === breadcrumbsItems.length - 1;
-            return (
-              <li
-                key={`${item.name}-${index}`}
-                className="flex items-center gap-2"
-              >
-                {!isLast && item.href ? (
-                  <Link
-                    href={item.href}
-                    className="transition hover:text-[var(--accent-primary)] hover:underline underline-offset-4"
-                  >
-                    {item.name}
-                  </Link>
-                ) : (
-                  <span
-                    className="text-[var(--accent-primary)]"
-                    aria-current={isLast ? 'page' : undefined}
-                  >
-                    {item.name}
-                  </span>
-                )}
-                {index < breadcrumbsItems.length - 1 && <span>&gt;</span>}
-              </li>
-            );
-          })}
-        </ol>
-      </nav>
-
-      <div className="mx-auto w-full max-w-3xl">
-        {categoryLabel && (
-          <div className="text-sm font-medium text-gray-500 dark:text-gray-400 text-center">
-            <Link
-              href={categoryHref || '/blog'}
-              className="inline-flex items-center gap-1 text-[var(--accent-primary)] transition"
-            >
-              {categoryDisplay || categoryLabel}
-            </Link>
-          </div>
+        {breadcrumbsJsonLd && (
+          <script
+            type="application/ld+json"
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify(breadcrumbsJsonLd),
+            }}
+          />
         )}
-        <h1 className="mt-3 text-4xl font-bold text-gray-900 dark:text-gray-100 text-center">
-          {post.title}
-        </h1>
-
-        {(authorName || post.publishedAt) && (
-          <div className="mt-4 flex justify-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-            {authorName && (
+        {articleJsonLd && (
+          <script
+            type="application/ld+json"
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify(articleJsonLd),
+            }}
+          />
+        )}
+        <nav className="mb-6" aria-label="Breadcrumb">
+          <ol className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            {breadcrumbsItems.map((item, index) => {
+              const isLast = index === breadcrumbsItems.length - 1;
+              return (
+                <li
+                  key={`${item.name}-${index}`}
+                  className="flex items-center gap-2"
+                >
+                  {!isLast && item.href ? (
+                    <Link
+                      href={item.href}
+                      className="transition hover:text-[var(--accent-primary)] hover:underline underline-offset-4"
+                    >
+                      {item.name}
+                    </Link>
+                  ) : (
+                    <span
+                      className="text-[var(--accent-primary)]"
+                      aria-current={isLast ? 'page' : undefined}
+                    >
+                      {item.name}
+                    </span>
+                  )}
+                  {index < breadcrumbsItems.length - 1 && <span>&gt;</span>}
+                </li>
+              );
+            })}
+          </ol>
+        </nav>
+
+        <div className="mx-auto w-full max-w-3xl">
+          {categoryLabel && (
+            <div className="text-sm font-medium text-gray-500 dark:text-gray-400 text-center">
               <Link
-                href={`/blog?author=${encodeURIComponent(authorName)}`}
-                className="transition hover:text-[var(--accent-primary)]"
+                href={categoryHref || '/blog'}
+                className="inline-flex items-center gap-1 text-[var(--accent-primary)] transition"
               >
-                {authorName}
+                {categoryDisplay || categoryLabel}
               </Link>
-            )}
-            {authorName && post.publishedAt && <span>·</span>}
-            {post.publishedAt && (
-              <time dateTime={post.publishedAt}>
-                {formatBlogDate(post.publishedAt)}
-              </time>
-            )}
+            </div>
+          )}
+          <h1 className="mt-3 text-4xl font-bold text-gray-900 dark:text-gray-100 text-center">
+            {post.title}
+          </h1>
+
+          {(authorName || post.publishedAt) && (
+            <div className="mt-4 flex justify-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+              {authorName && (
+                <Link
+                  href={`/blog?author=${encodeURIComponent(authorName)}`}
+                  className="transition hover:text-[var(--accent-primary)]"
+                >
+                  {authorName}
+                </Link>
+              )}
+              {authorName && post.publishedAt && <span>·</span>}
+              {post.publishedAt && (
+                <time dateTime={post.publishedAt}>
+                  {formatBlogDate(post.publishedAt)}
+                </time>
+              )}
+            </div>
+          )}
+        </div>
+
+        {(post.tags?.length || 0) > 0 && null}
+
+        {post.mainImage && (
+          <div className="relative w-full h-[520px] rounded-2xl overflow-hidden my-8">
+            <Image
+              src={post.mainImage}
+              alt={post.title || 'Post image'}
+              fill
+              className="object-contain"
+            />
           </div>
         )}
-      </div>
 
-      {(post.tags?.length || 0) > 0 && null}
-
-      {post.mainImage && (
-        <div className="relative w-full h-[520px] rounded-2xl overflow-hidden my-8">
-          <Image
-            src={post.mainImage}
-            alt={post.title || 'Post image'}
-            fill
-            className="object-contain"
-          />
+        <div className="mx-auto w-full max-w-3xl">
+          <article className="prose prose-gray max-w-none">
+            {renderPortableText(post.body || [], post.title)}
+          </article>
         </div>
-      )}
-
-      <div className="mx-auto w-full max-w-3xl">
-        <article className="prose prose-gray max-w-none">
-          {renderPortableText(post.body || [], post.title)}
-        </article>
-      </div>
-
-      {recommendedPosts.length > 0 && (
-        <>
-          <div className="mt-16">
-            <div className="h-px w-full bg-gray-200 dark:bg-gray-800" />
-          </div>
 
-          <section className="mt-10">
-            <div>
-              <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
-                {t('recommendedPosts')}
-              </h2>
-              <div className="mt-6 grid gap-6 auto-rows-fr sm:grid-cols-2 lg:grid-cols-3">
-                {recommendedPosts.map(item => {
-                  const itemCategory = item.categories?.[0];
-                  const itemCategoryDisplay = itemCategory
-                    ? getCategoryLabel(itemCategory, t)
-                    : null;
-
-                  return (
-                    <Link
-                      key={item._id}
-                      href={`/blog/${item.slug?.current}`}
-                      className="group flex h-full flex-col"
-                    >
-                    {item.mainImage && (
-                      <div className="relative h-48 w-full overflow-hidden rounded-2xl">
-                        <Image
-                          src={item.mainImage}
-                          alt={item.title || 'Post image'}
-                          fill
-                          className="object-cover transition-transform duration-300 group-hover:scale-[1.03]"
-                        />
-                      </div>
-                    )}
-                    <h3 className="mt-4 text-lg font-semibold text-gray-900 transition group-hover:underline underline-offset-4 dark:text-gray-100">
-                      {item.title}
-                    </h3>
-                    {item.body && (
-                      <p className="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-2">
-                        {plainTextFromPortableText(item.body)}
-                      </p>
-                    )}
-                    {(item.author?.name ||
-                      itemCategoryDisplay ||
-                      item.publishedAt) && (
-                      <div className="mt-auto pt-3 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-                        {item.author?.image && (
-                          <span className="relative h-5 w-5 overflow-hidden rounded-full">
+        {recommendedPosts.length > 0 && (
+          <>
+            <div className="mt-16">
+              <div className="h-px w-full bg-gray-200 dark:bg-gray-800" />
+            </div>
+
+            <section className="mt-10">
+              <div>
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+                  {t('recommendedPosts')}
+                </h2>
+                <div className="mt-6 grid gap-6 auto-rows-fr sm:grid-cols-2 lg:grid-cols-3">
+                  {recommendedPosts.map(item => {
+                    const itemCategory = item.categories?.[0];
+                    const itemCategoryDisplay = itemCategory
+                      ? getCategoryLabel(itemCategory, t)
+                      : null;
+
+                    return (
+                      <Link
+                        key={item._id}
+                        href={`/blog/${item.slug?.current}`}
+                        className="group flex h-full flex-col"
+                      >
+                        {item.mainImage && (
+                          <div className="relative h-48 w-full overflow-hidden rounded-2xl">
                             <Image
-                              src={item.author.image}
-                              alt={item.author.name || 'Author'}
+                              src={item.mainImage}
+                              alt={item.title || 'Post image'}
                               fill
-                              className="object-cover"
+                              className="object-cover transition-transform duration-300 group-hover:scale-[1.03]"
                             />
-                          </span>
+                          </div>
                         )}
-                        {item.author?.name && <span>{item.author.name}</span>}
-                        {item.author?.name && itemCategoryDisplay && (
-                          <span>·</span>
+                        <h3 className="mt-4 text-lg font-semibold text-gray-900 transition group-hover:underline underline-offset-4 dark:text-gray-100">
+                          {item.title}
+                        </h3>
+                        {item.body && (
+                          <p className="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-2">
+                            {plainTextFromPortableText(item.body)}
+                          </p>
                         )}
-                        {itemCategoryDisplay && (
-                          <span className="rounded-full bg-[color-mix(in_srgb,var(--accent-primary)_20%,transparent)] px-3 py-1 text-[11px] font-medium text-gray-500 dark:bg-[color-mix(in_srgb,var(--accent-primary)_50%,transparent)] dark:text-gray-400">
-                            {itemCategoryDisplay}
-                          </span>
+                        {(item.author?.name ||
+                          itemCategoryDisplay ||
+                          item.publishedAt) && (
+                          <div className="mt-auto pt-3 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+                            {item.author?.image && (
+                              <span className="relative h-5 w-5 overflow-hidden rounded-full">
+                                <Image
+                                  src={item.author.image}
+                                  alt={item.author.name || 'Author'}
+                                  fill
+                                  className="object-cover"
+                                />
+                              </span>
+                            )}
+                            {item.author?.name && (
+                              <span>{item.author.name}</span>
+                            )}
+                            {item.author?.name && itemCategoryDisplay && (
+                              <span>·</span>
+                            )}
+                            {itemCategoryDisplay && (
+                              <span className="rounded-full bg-[color-mix(in_srgb,var(--accent-primary)_20%,transparent)] px-3 py-1 text-[11px] font-medium text-gray-500 dark:bg-[color-mix(in_srgb,var(--accent-primary)_50%,transparent)] dark:text-gray-400">
+                                {itemCategoryDisplay}
+                              </span>
+                            )}
+                            {(item.author?.name || itemCategoryDisplay) &&
+                              item.publishedAt && <span>·</span>}
+                            {item.publishedAt && (
+                              <time dateTime={item.publishedAt}>
+                                {formatBlogDate(item.publishedAt)}
+                              </time>
+                            )}
+                          </div>
                         )}
-                        {(item.author?.name || itemCategoryDisplay) &&
-                          item.publishedAt && <span>·</span>}
-                        {item.publishedAt && (
-                          <time dateTime={item.publishedAt}>
-                            {formatBlogDate(item.publishedAt)}
-                          </time>
-                        )}
-                      </div>
-                    )}
-                    </Link>
-                  );
-                })}
+                      </Link>
+                    );
+                  })}
+                </div>
               </div>
-            </div>
-          </section>
-        </>
-      )}
+            </section>
+          </>
+        )}
 
-      {post.resourceLink && null}
+        {post.resourceLink && null}
 
-      {(authorBio || authorName || authorMeta) && null}
+        {(authorBio || authorName || authorMeta) && null}
       </main>
     </DynamicGridBackground>
   );
diff --git a/frontend/app/[locale]/blog/page.tsx b/frontend/app/[locale]/blog/page.tsx
index caddd764..8e393a19 100644
--- a/frontend/app/[locale]/blog/page.tsx
+++ b/frontend/app/[locale]/blog/page.tsx
@@ -86,7 +86,7 @@ export default async function BlogPage({
 
   return (
     <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
-      <main className="relative z-10 mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+      <main className="relative z-10 mx-auto max-w-7xl px-4 pt-6 pb-12 sm:px-6 lg:px-8">
         {!hasAuthorFilter && (
           <BlogPageHeader title={t('title')} subtitle={t('subtitle')} />
         )}

From eaf3eb08c3ce2da440c796deb5a52d0a83b99cc8 Mon Sep 17 00:00:00 2001
From: Viktor Svertoka <victor.svertoka@gmail.com>
Date: Sun, 1 Feb 2026 23:03:10 +0200
Subject: [PATCH 14/24] ref(files): refactoring code & bag fix (#250)

---
 .coderabbit.yaml                              |     6 +
 .../workflows/shop-janitor-restock-stale.yml  |     3 +-
 .../app/[locale]/shop/admin/orders/page.tsx   |    14 +-
 .../products/_components/product-form.tsx     |    11 +-
 .../app/[locale]/shop/cart/CartPageClient.tsx |     1 -
 .../checkout/payment/StripePaymentClient.tsx  |   102 +-
 .../shop/checkout/payment/[orderId]/page.tsx  |     2 -
 .../success/OrderStatusAutoRefresh.tsx        |     1 -
 .../[locale]/shop/checkout/success/page.tsx   |     5 -
 .../app/[locale]/shop/orders/[id]/page.tsx    |     1 -
 frontend/app/[locale]/shop/orders/page.tsx    |     3 -
 frontend/app/[locale]/shop/page.tsx           |     6 +-
 .../[locale]/shop/products/[slug]/page.tsx    |    13 +-
 frontend/app/[locale]/shop/products/page.tsx  |     1 -
 frontend/app/api/ai/explain/route.ts          |    42 +-
 .../app/api/shop/admin/orders/[id]/route.ts   |     6 -
 .../admin/orders/reconcile-stale/route.ts     |     9 -
 .../app/api/shop/admin/products/[id]/route.ts |    14 +-
 .../shop/admin/products/[id]/status/route.ts  |     2 -
 frontend/app/api/shop/cart/rehydrate/route.ts |     4 -
 frontend/app/api/shop/checkout/route.ts       |    19 +-
 .../internal/orders/restock-stale/route.ts    |    24 +-
 .../app/api/shop/webhooks/stripe/route.ts     |    57 +-
 frontend/checkout.json                        |     1 -
 frontend/components/q&a/AIWordHelper.tsx      |   573 +-
 frontend/components/q&a/AccordionList.tsx     |     6 +-
 frontend/components/q&a/SelectableText.tsx    |     2 -
 frontend/components/quiz/CountdownTimer.tsx   |    32 +-
 frontend/components/quiz/QuizContainer.tsx    |   265 +-
 frontend/components/shared/HeaderButton.tsx   |     4 -
 .../components/shop/add-to-cart-button.tsx    |     7 +-
 .../shop/admin/admin-pagination.tsx           |     4 +-
 .../admin/admin-product-delete-button.tsx     |     1 -
 frontend/components/shop/cart-provider.tsx    |     5 -
 frontend/components/shop/product-card.tsx     |     4 +-
 frontend/components/shop/product-filters.tsx  |     5 -
 frontend/components/shop/product-sort.tsx     |     3 -
 frontend/components/shop/products-toolbar.tsx |     6 -
 frontend/components/shop/shop-hero.tsx        |     3 -
 frontend/components/ui/button.tsx             |    72 +-
 frontend/components/ui/particle-canvas.tsx    |   474 +-
 frontend/db/queries/quiz.ts                   |     7 +-
 frontend/db/schema/shop.ts                    |    18 +-
 frontend/db/seed-quiz-angular-advanced.ts     |   128 +-
 frontend/db/seed-quiz-angular.ts              |   118 +-
 frontend/db/seed-quiz-css-advanced.ts         |   125 +-
 frontend/db/seed-quiz-css.ts                  |   117 +-
 frontend/db/seed-quiz-html-advanced.ts        |   117 +-
 frontend/db/seed-quiz-html.ts                 |   117 +-
 frontend/db/seed-quiz-javascript-advanced.ts  |   120 +-
 frontend/db/seed-quiz-javascript.ts           |   119 +-
 frontend/db/seed-quiz-nodejs-advanced.ts      |   128 +-
 frontend/db/seed-quiz-nodejs.ts               |   126 +-
 frontend/db/seed-quiz-react.ts                |     1 -
 frontend/db/seed-quiz-typescript.ts           |   121 +-
 frontend/parse/README.md                      |  5827 --
 frontend/parse/questions.json                 | 13419 -----
 frontend/parse/start.json                     | 19314 -------
 .../typescript-advanced-quiz-part1.json       |   434 -
 .../typescript-advanced-quiz-part2.json       |   434 -
 .../typescript-advanced-quiz-part3.json       |   434 -
 .../typescript-advanced-quiz-part4.json       |   434 -
 .../fundamentals/typescript-quiz-part1.json   |   434 -
 .../fundamentals/typescript-quiz-part2.json   |   434 -
 .../fundamentals/typescript-quiz-part3.json   |   434 -
 .../fundamentals/typescript-quiz-part4.json   |   434 -
 frontend/project-structure.txt                |   649 -
 .../scripts/shop-janitor-restock-stale.mjs    |     7 -
 json/00-git.json                              | 25516 --------
 json/01-html.json                             | 17864 ------
 json/03-javascript.json                       | 48089 ----------------
 json/05-react.json                            | 25165 --------
 .../advanced/angular-advanced-quiz-part1.json |   434 -
 .../advanced/angular-advanced-quiz-part2.json |   434 -
 .../advanced/angular-advanced-quiz-part3.json |   434 -
 .../advanced/angular-advanced-quiz-part4.json |   434 -
 .../advanced/seed-quiz-angular-advanced.ts    |   240 -
 .../beginner_medium/angular-quiz-part1.json   |   434 -
 .../beginner_medium/angular-quiz-part2.json   |   434 -
 .../beginner_medium/angular-quiz-part3.json   |   434 -
 .../beginner_medium/angular-quiz-part4.json   |   434 -
 .../beginner_medium/seed-quiz-angular.ts      |   240 -
 .../css/advanced/css-advanced-quiz-part1.json |   234 -
 .../css/advanced/css-advanced-quiz-part2.json |   234 -
 .../css/advanced/css-advanced-quiz-part3.json |   234 -
 .../css/advanced/css-advanced-quiz-part4.json |   234 -
 .../css/advanced/seed-quiz-css-advanced.ts    |   240 -
 .../css/fundamentals/css-quiz-part1.json      |   434 -
 .../css/fundamentals/css-quiz-part2.json      |   434 -
 .../css/fundamentals/css-quiz-part3.json      |   434 -
 .../css/fundamentals/css-quiz-part4.json      |   434 -
 .../quizzes/css/fundamentals/seed-quiz-css.ts |   240 -
 json/quizzes/git/git-quiz-part1.json          |   434 -
 json/quizzes/git/git-quiz-part2.json          |   434 -
 json/quizzes/git/git-quiz-part3.json          |   434 -
 json/quizzes/git/git-quiz-part4.json          |   434 -
 .../advanced/html-advanced-quiz-part1.json    |   434 -
 .../advanced/html-advanced-quiz-part2.json    |   434 -
 .../advanced/html-advanced-quiz-part3.json    |   434 -
 .../advanced/html-advanced-quiz-part4.json    |   434 -
 .../html/fundamentals/html-quiz-part1.json    |   434 -
 .../html/fundamentals/html-quiz-part2.json    |   434 -
 .../html/fundamentals/html-quiz-part3.json    |   434 -
 .../html/fundamentals/html-quiz-part4.json    |   434 -
 .../javascript-advanced-quiz-part1.json       |   434 -
 .../javascript-advanced-quiz-part2.json       |   434 -
 .../javascript-advanced-quiz-part3.json       |   144 -
 .../javascript-advanced-quiz-part4.json       |   144 -
 .../fundamentals/javascript-quiz-part1.json   |   434 -
 .../fundamentals/javascript-quiz-part2.json   |   434 -
 .../fundamentals/javascript-quiz-part3.json   |   434 -
 .../fundamentals/javascript-quiz-part4.json   |   434 -
 .../advanced/nodejs-advanced-quiz-part1.json  |   434 -
 .../advanced/nodejs-advanced-quiz-part2.json  |   434 -
 .../advanced/nodejs-advanced-quiz-part3.json  |   434 -
 .../advanced/nodejs-advanced-quiz-part4.json  |   434 -
 .../advanced/seed-quiz-nodejs-advanced.ts     |   240 -
 .../beginner_medium/nodejs-quiz-part1.json    |   434 -
 .../beginner_medium/nodejs-quiz-part2.json    |   434 -
 .../beginner_medium/nodejs-quiz-part3.json    |   434 -
 .../beginner_medium/nodejs-quiz-part4.json    |   434 -
 .../seed-quiz-nodejs-fundamentals.ts          |   240 -
 json/quizzes/react/react-quiz-data-part1.json |   254 -
 json/quizzes/react/react-quiz-data-part2.json |   244 -
 .../vue/beginner_medium/seed-quiz-vue.ts      |   239 -
 .../vue/beginner_medium/vue-quiz-part1.json   |   434 -
 .../vue/beginner_medium/vue-quiz-part2.json   |   434 -
 .../vue/beginner_medium/vue-quiz-part3.json   |   434 -
 .../vue/beginner_medium/vue-quiz-part4.json   |   434 -
 129 files changed, 1774 insertions(+), 182352 deletions(-)
 create mode 100644 .coderabbit.yaml
 delete mode 100644 frontend/checkout.json
 delete mode 100644 frontend/parse/start.json
 delete mode 100644 frontend/parse/typescript/advanced/typescript-advanced-quiz-part1.json
 delete mode 100644 frontend/parse/typescript/advanced/typescript-advanced-quiz-part2.json
 delete mode 100644 frontend/parse/typescript/advanced/typescript-advanced-quiz-part3.json
 delete mode 100644 frontend/parse/typescript/advanced/typescript-advanced-quiz-part4.json
 delete mode 100644 frontend/parse/typescript/fundamentals/typescript-quiz-part1.json
 delete mode 100644 frontend/parse/typescript/fundamentals/typescript-quiz-part2.json
 delete mode 100644 frontend/parse/typescript/fundamentals/typescript-quiz-part3.json
 delete mode 100644 frontend/parse/typescript/fundamentals/typescript-quiz-part4.json
 delete mode 100644 frontend/project-structure.txt
 delete mode 100644 json/00-git.json
 delete mode 100644 json/01-html.json
 delete mode 100644 json/03-javascript.json
 delete mode 100644 json/05-react.json
 delete mode 100644 json/quizzes/angular/advanced/angular-advanced-quiz-part1.json
 delete mode 100644 json/quizzes/angular/advanced/angular-advanced-quiz-part2.json
 delete mode 100644 json/quizzes/angular/advanced/angular-advanced-quiz-part3.json
 delete mode 100644 json/quizzes/angular/advanced/angular-advanced-quiz-part4.json
 delete mode 100644 json/quizzes/angular/advanced/seed-quiz-angular-advanced.ts
 delete mode 100644 json/quizzes/angular/beginner_medium/angular-quiz-part1.json
 delete mode 100644 json/quizzes/angular/beginner_medium/angular-quiz-part2.json
 delete mode 100644 json/quizzes/angular/beginner_medium/angular-quiz-part3.json
 delete mode 100644 json/quizzes/angular/beginner_medium/angular-quiz-part4.json
 delete mode 100644 json/quizzes/angular/beginner_medium/seed-quiz-angular.ts
 delete mode 100644 json/quizzes/css/advanced/css-advanced-quiz-part1.json
 delete mode 100644 json/quizzes/css/advanced/css-advanced-quiz-part2.json
 delete mode 100644 json/quizzes/css/advanced/css-advanced-quiz-part3.json
 delete mode 100644 json/quizzes/css/advanced/css-advanced-quiz-part4.json
 delete mode 100644 json/quizzes/css/advanced/seed-quiz-css-advanced.ts
 delete mode 100644 json/quizzes/css/fundamentals/css-quiz-part1.json
 delete mode 100644 json/quizzes/css/fundamentals/css-quiz-part2.json
 delete mode 100644 json/quizzes/css/fundamentals/css-quiz-part3.json
 delete mode 100644 json/quizzes/css/fundamentals/css-quiz-part4.json
 delete mode 100644 json/quizzes/css/fundamentals/seed-quiz-css.ts
 delete mode 100644 json/quizzes/git/git-quiz-part1.json
 delete mode 100644 json/quizzes/git/git-quiz-part2.json
 delete mode 100644 json/quizzes/git/git-quiz-part3.json
 delete mode 100644 json/quizzes/git/git-quiz-part4.json
 delete mode 100644 json/quizzes/html/advanced/html-advanced-quiz-part1.json
 delete mode 100644 json/quizzes/html/advanced/html-advanced-quiz-part2.json
 delete mode 100644 json/quizzes/html/advanced/html-advanced-quiz-part3.json
 delete mode 100644 json/quizzes/html/advanced/html-advanced-quiz-part4.json
 delete mode 100644 json/quizzes/html/fundamentals/html-quiz-part1.json
 delete mode 100644 json/quizzes/html/fundamentals/html-quiz-part2.json
 delete mode 100644 json/quizzes/html/fundamentals/html-quiz-part3.json
 delete mode 100644 json/quizzes/html/fundamentals/html-quiz-part4.json
 delete mode 100644 json/quizzes/js/advanced/javascript-advanced-quiz-part1.json
 delete mode 100644 json/quizzes/js/advanced/javascript-advanced-quiz-part2.json
 delete mode 100644 json/quizzes/js/advanced/javascript-advanced-quiz-part3.json
 delete mode 100644 json/quizzes/js/advanced/javascript-advanced-quiz-part4.json
 delete mode 100644 json/quizzes/js/fundamentals/javascript-quiz-part1.json
 delete mode 100644 json/quizzes/js/fundamentals/javascript-quiz-part2.json
 delete mode 100644 json/quizzes/js/fundamentals/javascript-quiz-part3.json
 delete mode 100644 json/quizzes/js/fundamentals/javascript-quiz-part4.json
 delete mode 100644 json/quizzes/node/advanced/nodejs-advanced-quiz-part1.json
 delete mode 100644 json/quizzes/node/advanced/nodejs-advanced-quiz-part2.json
 delete mode 100644 json/quizzes/node/advanced/nodejs-advanced-quiz-part3.json
 delete mode 100644 json/quizzes/node/advanced/nodejs-advanced-quiz-part4.json
 delete mode 100644 json/quizzes/node/advanced/seed-quiz-nodejs-advanced.ts
 delete mode 100644 json/quizzes/node/beginner_medium/nodejs-quiz-part1.json
 delete mode 100644 json/quizzes/node/beginner_medium/nodejs-quiz-part2.json
 delete mode 100644 json/quizzes/node/beginner_medium/nodejs-quiz-part3.json
 delete mode 100644 json/quizzes/node/beginner_medium/nodejs-quiz-part4.json
 delete mode 100644 json/quizzes/node/beginner_medium/seed-quiz-nodejs-fundamentals.ts
 delete mode 100644 json/quizzes/react/react-quiz-data-part1.json
 delete mode 100644 json/quizzes/react/react-quiz-data-part2.json
 delete mode 100644 json/quizzes/vue/beginner_medium/seed-quiz-vue.ts
 delete mode 100644 json/quizzes/vue/beginner_medium/vue-quiz-part1.json
 delete mode 100644 json/quizzes/vue/beginner_medium/vue-quiz-part2.json
 delete mode 100644 json/quizzes/vue/beginner_medium/vue-quiz-part3.json
 delete mode 100644 json/quizzes/vue/beginner_medium/vue-quiz-part4.json

diff --git a/.coderabbit.yaml b/.coderabbit.yaml
new file mode 100644
index 00000000..0867ee01
--- /dev/null
+++ b/.coderabbit.yaml
@@ -0,0 +1,6 @@
+# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
+reviews:
+  auto_review:
+    enabled: true
+    base_branches:
+      - develop
diff --git a/.github/workflows/shop-janitor-restock-stale.yml b/.github/workflows/shop-janitor-restock-stale.yml
index a5b70d6c..c304db38 100644
--- a/.github/workflows/shop-janitor-restock-stale.yml
+++ b/.github/workflows/shop-janitor-restock-stale.yml
@@ -2,7 +2,7 @@ name: Shop janitor - restock stale orders
 
 on:
   schedule:
-    - cron: "*/5 * * * *" # every 5 minutes (UTC)
+    - cron: "*/5 * * * *"
   workflow_dispatch: {}
 
 concurrency:
@@ -30,7 +30,6 @@ jobs:
         with:
           node-version: "20"
 
-      # Step-level guard: тут secrets дозволені
       - name: Guard config (skip if secrets missing)
         id: guard
         run: |
diff --git a/frontend/app/[locale]/shop/admin/orders/page.tsx b/frontend/app/[locale]/shop/admin/orders/page.tsx
index 7979aa7f..460f55a6 100644
--- a/frontend/app/[locale]/shop/admin/orders/page.tsx
+++ b/frontend/app/[locale]/shop/admin/orders/page.tsx
@@ -20,7 +20,6 @@ export const metadata: Metadata = {
   description: 'View and manage orders in the DevLovers shop catalog.',
 };
 
-
 export const dynamic = 'force-dynamic';
 
 const PAGE_SIZE = 25;
@@ -61,7 +60,6 @@ export default async function AdminOrdersPage({
   const page = parsePage(sp.page);
   const offset = (page - 1) * PAGE_SIZE;
 
-  // overfetch for hasNext without COUNT
   const { items: all } = await getAdminOrdersPage({
     limit: PAGE_SIZE + 1,
     offset,
@@ -147,12 +145,16 @@ export default async function AdminOrdersPage({
 
                     <dl className="mt-3 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
                       <div>
-                        <dt className="text-muted-foreground">{t('table.items')}</dt>
+                        <dt className="text-muted-foreground">
+                          {t('table.items')}
+                        </dt>
                         <dd className="text-foreground">{vm.itemCount}</dd>
                       </div>
 
                       <div className="min-w-0">
-                        <dt className="text-muted-foreground">{t('table.provider')}</dt>
+                        <dt className="text-muted-foreground">
+                          {t('table.provider')}
+                        </dt>
                         <dd
                           className="truncate text-foreground"
                           title={vm.paymentProvider}
@@ -162,7 +164,9 @@ export default async function AdminOrdersPage({
                       </div>
 
                       <div className="col-span-2">
-                        <dt className="text-muted-foreground">{t('table.orderId')}</dt>
+                        <dt className="text-muted-foreground">
+                          {t('table.orderId')}
+                        </dt>
                         <dd
                           className="break-all font-mono text-[11px] text-muted-foreground"
                           title={vm.id}
diff --git a/frontend/app/[locale]/shop/admin/products/_components/product-form.tsx b/frontend/app/[locale]/shop/admin/products/_components/product-form.tsx
index e3007b44..050dcdc1 100644
--- a/frontend/app/[locale]/shop/admin/products/_components/product-form.tsx
+++ b/frontend/app/[locale]/shop/admin/products/_components/product-form.tsx
@@ -195,8 +195,6 @@ export function ProductForm({
     Partial<Record<CurrencyCode, string>>
   >({});
 
-  // Hydrate state from initialValues once per product in EDIT mode.
-  // In edit: slug must come from DB and stay stable (no title->slug regeneration).
   useEffect(() => {
     if (mode !== 'edit') {
       hydratedKeyRef.current = null;
@@ -221,8 +219,6 @@ export function ProductForm({
 
     if (hydratedKeyRef.current === key) return;
 
-    // Reset transient UI state when switching between products in EDIT mode.
-    // Do NOT do this in submit: it breaks retries (e.g., clears selected image).
     setError(null);
     setSlugError(null);
     setImageError(null);
@@ -251,8 +247,7 @@ export function ProductForm({
   }, [mode, initialValues, productId]);
 
   const slugValue = useMemo(() => {
-    if (mode === 'edit') return slug; // slug в edit має бути стабільним (з БД)
-    // In create mode, always derive from current title to avoid stale slug on fast submit.
+    if (mode === 'edit') return slug;
     return localSlugify(title);
   }, [mode, slug, title]);
 
@@ -967,8 +962,8 @@ export function ProductForm({
               ? 'Creating...'
               : 'Updating...'
             : mode === 'create'
-            ? 'Create product'
-            : 'Save changes'}
+              ? 'Create product'
+              : 'Save changes'}
         </button>
       </form>
     </section>
diff --git a/frontend/app/[locale]/shop/cart/CartPageClient.tsx b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
index acf8dc50..9fb12085 100644
--- a/frontend/app/[locale]/shop/cart/CartPageClient.tsx
+++ b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
@@ -422,7 +422,6 @@ export default function CartPage() {
               {t('checkout.message')}
             </p>
 
-            {/* Fallback CTA if navigation fails after order was created */}
             {createdOrderId && !checkoutError ? (
               <div className="flex justify-center">
                 <Link
diff --git a/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx b/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
index 07c115b9..075ed56f 100644
--- a/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
+++ b/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
@@ -9,7 +9,11 @@ import {
   useElements,
   useStripe,
 } from '@stripe/react-stripe-js';
-import { loadStripe, type StripeElementsOptions, type Stripe } from '@stripe/stripe-js';
+import {
+  loadStripe,
+  type StripeElementsOptions,
+  type Stripe,
+} from '@stripe/stripe-js';
 
 import {
   currencyValues,
@@ -57,11 +61,6 @@ function toCurrencyCode(
     : resolveCurrencyFromLocale(locale);
 }
 
-/**
- * IMPORTANT:
- * - In-app navigation uses next-intl routing -> DO NOT prefix locale manually.
- * - Stripe return_url is an external redirect -> MUST include locale exactly once.
- */
 const IN_APP_SHOP_BASE = '/shop';
 
 function normalizeLocale(raw: string): string {
@@ -73,13 +72,21 @@ function buildInAppPath(path: string): string {
   return `${IN_APP_SHOP_BASE}${p}`;
 }
 
-function buildStripeReturnUrl(params: { locale: string; inAppPath: string }): string {
+function buildStripeReturnUrl(params: {
+  locale: string;
+  inAppPath: string;
+}): string {
   const loc = normalizeLocale(params.locale);
-  const p = params.inAppPath.startsWith('/') ? params.inAppPath : `/${params.inAppPath}`;
+  const p = params.inAppPath.startsWith('/')
+    ? params.inAppPath
+    : `/${params.inAppPath}`;
   return new URL(`/${loc}${p}`, window.location.origin).toString();
 }
 
-function nextRouteForPaymentResult(params: { orderId: string; status?: string | null }) {
+function nextRouteForPaymentResult(params: {
+  orderId: string;
+  status?: string | null;
+}) {
   const { orderId, status } = params;
   const id = encodeURIComponent(orderId);
 
@@ -88,7 +95,11 @@ function nextRouteForPaymentResult(params: { orderId: string; status?: string |
 
   if (!status) return success;
 
-  if (status === 'succeeded' || status === 'processing' || status === 'requires_capture') {
+  if (
+    status === 'succeeded' ||
+    status === 'processing' ||
+    status === 'requires_capture'
+  ) {
     return success;
   }
 
@@ -99,7 +110,6 @@ function nextRouteForPaymentResult(params: { orderId: string; status?: string |
   return success;
 }
 
-/** Unified CTA (hero) */
 const SHOP_HERO_CTA = cn(
   SHOP_CTA_BASE,
   SHOP_CTA_INTERACTIVE,
@@ -110,7 +120,6 @@ const SHOP_HERO_CTA = cn(
   'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
 );
 
-/** Unified outline */
 const SHOP_OUTLINE = cn(
   SHOP_OUTLINE_BTN_BASE,
   SHOP_OUTLINE_BTN_INTERACTIVE,
@@ -122,19 +131,22 @@ const SHOP_OUTLINE = cn(
 function HeroCtaInner({ children }: { children: React.ReactNode }) {
   return (
     <>
-      {/* base gradient */}
       <span
         className="absolute inset-0"
-        style={shopCtaGradient('--shop-hero-btn-bg', '--shop-hero-btn-bg-hover')}
+        style={shopCtaGradient(
+          '--shop-hero-btn-bg',
+          '--shop-hero-btn-bg-hover'
+        )}
         aria-hidden="true"
       />
-      {/* hover wave overlay */}
       <span
         className={SHOP_CTA_WAVE}
-        style={shopCtaGradient('--shop-hero-btn-bg-hover', '--shop-hero-btn-bg')}
+        style={shopCtaGradient(
+          '--shop-hero-btn-bg-hover',
+          '--shop-hero-btn-bg'
+        )}
         aria-hidden="true"
       />
-      {/* glass inset */}
       <span className={SHOP_CTA_INSET} aria-hidden="true" />
 
       <span className="relative z-10">{children}</span>
@@ -155,7 +167,9 @@ function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
     setErrorMessage(null);
 
     if (!stripe || !elements) {
-      setErrorMessage('Payment is not ready yet. Please try again in a moment.');
+      setErrorMessage(
+        'Payment is not ready yet. Please try again in a moment.'
+      );
       return;
     }
 
@@ -190,14 +204,20 @@ function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
     } catch (error) {
       logError('stripe_payment_confirm_failed', error, { orderId });
       setErrorMessage('We couldn’t confirm your payment. Please try again.');
-      router.push(buildInAppPath(`/checkout/error?orderId=${encodeURIComponent(orderId)}`));
+      router.push(
+        buildInAppPath(`/checkout/error?orderId=${encodeURIComponent(orderId)}`)
+      );
     } finally {
       setSubmitting(false);
     }
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4" aria-label="Stripe payment form">
+    <form
+      onSubmit={handleSubmit}
+      className="space-y-4"
+      aria-label="Stripe payment form"
+    >
       <PaymentElement />
 
       <button
@@ -206,7 +226,9 @@ function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
         className={SHOP_HERO_CTA}
         aria-disabled={!stripe || submitting}
       >
-        <HeroCtaInner>{submitting ? 'Processing...' : 'Submit payment'}</HeroCtaInner>
+        <HeroCtaInner>
+          {submitting ? 'Processing...' : 'Submit payment'}
+        </HeroCtaInner>
       </button>
 
       {errorMessage ? (
@@ -227,7 +249,10 @@ export default function StripePaymentClient({
   currency,
   locale,
 }: StripePaymentClientProps) {
-  const uiCurrency = useMemo(() => toCurrencyCode(currency, locale), [currency, locale]);
+  const uiCurrency = useMemo(
+    () => toCurrencyCode(currency, locale),
+    [currency, locale]
+  );
 
   const stripePromise = useMemo(() => {
     if (!paymentsEnabled || !publishableKey) return null;
@@ -244,18 +269,29 @@ export default function StripePaymentClient({
 
   if (!paymentsEnabled) {
     return (
-      <section className="space-y-3 text-sm text-muted-foreground" aria-label="Payments disabled">
+      <section
+        className="space-y-3 text-sm text-muted-foreground"
+        aria-label="Payments disabled"
+      >
         <p>Payments are disabled in this environment.</p>
 
-        <nav className="flex flex-col gap-3 sm:flex-row" aria-label="Next steps">
+        <nav
+          className="flex flex-col gap-3 sm:flex-row"
+          aria-label="Next steps"
+        >
           <Link
-            href={buildInAppPath(`/checkout/success?orderId=${encodeURIComponent(orderId)}`)}
+            href={buildInAppPath(
+              `/checkout/success?orderId=${encodeURIComponent(orderId)}`
+            )}
             className={cn(SHOP_HERO_CTA, 'w-full sm:w-auto')}
           >
             <HeroCtaInner>Continue</HeroCtaInner>
           </Link>
 
-          <Link href={buildInAppPath('/cart')} className={cn(SHOP_OUTLINE, 'w-full sm:w-auto')}>
+          <Link
+            href={buildInAppPath('/cart')}
+            className={cn(SHOP_OUTLINE, 'w-full sm:w-auto')}
+          >
             Back to cart
           </Link>
         </nav>
@@ -265,10 +301,16 @@ export default function StripePaymentClient({
 
   if (!clientSecret || !clientSecret.trim()) {
     return (
-      <section className="space-y-3 text-sm text-muted-foreground" aria-label="Payment initialization failed">
+      <section
+        className="space-y-3 text-sm text-muted-foreground"
+        aria-label="Payment initialization failed"
+      >
         <p>Payment cannot be initialized. Please try again later.</p>
 
-        <Link href={buildInAppPath('/cart')} className={cn(SHOP_OUTLINE, 'w-full sm:w-auto')}>
+        <Link
+          href={buildInAppPath('/cart')}
+          className={cn(SHOP_OUTLINE, 'w-full sm:w-auto')}
+        >
           Return to cart
         </Link>
       </section>
@@ -295,7 +337,9 @@ export default function StripePaymentClient({
               </span>
             </div>
 
-            <p className="text-xs uppercase tracking-wide text-muted-foreground">{uiCurrency}</p>
+            <p className="text-xs uppercase tracking-wide text-muted-foreground">
+              {uiCurrency}
+            </p>
           </div>
 
           <StripePaymentForm orderId={orderId} locale={locale} />
diff --git a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
index 182dc50d..76f1139c 100644
--- a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
@@ -97,7 +97,6 @@ function HeroCtaLink({
 }) {
   return (
     <Link href={href} className={cn(SHOP_HERO_CTA_SM, className)}>
-      {/* base gradient */}
       <span
         className="absolute inset-0"
         style={shopCtaGradient(
@@ -115,7 +114,6 @@ function HeroCtaLink({
         )}
         aria-hidden="true"
       />
-      {/* glass inset */}
       <span className={SHOP_CTA_INSET} aria-hidden="true" />
 
       <span className="relative z-10">{children}</span>
diff --git a/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx b/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx
index 909bd0f2..10c22774 100644
--- a/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx
+++ b/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx
@@ -38,6 +38,5 @@ export default function OrderStatusAutoRefresh({
     return () => window.clearInterval(id);
   }, [paymentStatus, router, maxMs, intervalMs]);
 
-  // Non-visual utility component (keeps page data fresh while payment settles).
   return <span className="sr-only" aria-live="polite" />;
 }
diff --git a/frontend/app/[locale]/shop/checkout/success/page.tsx b/frontend/app/[locale]/shop/checkout/success/page.tsx
index 06813c66..91f93241 100644
--- a/frontend/app/[locale]/shop/checkout/success/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/success/page.tsx
@@ -67,7 +67,6 @@ const SHOP_HERO_CTA_SM = cn(
   'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
 );
 
-/** Outline secondary action (Link) */
 const SHOP_OUTLINE_BTN = cn(
   SHOP_OUTLINE_BTN_BASE,
   SHOP_OUTLINE_BTN_INTERACTIVE,
@@ -77,7 +76,6 @@ const SHOP_OUTLINE_BTN = cn(
 function HeroCtaInner({ children }: { children: React.ReactNode }) {
   return (
     <>
-      {/* base gradient */}
       <span
         className="absolute inset-0"
         style={shopCtaGradient(
@@ -86,7 +84,6 @@ function HeroCtaInner({ children }: { children: React.ReactNode }) {
         )}
         aria-hidden="true"
       />
-      {/* hover wave overlay */}
       <span
         className={SHOP_CTA_WAVE}
         style={shopCtaGradient(
@@ -95,7 +92,6 @@ function HeroCtaInner({ children }: { children: React.ReactNode }) {
         )}
         aria-hidden="true"
       />
-      {/* glass inset */}
       <span className={SHOP_CTA_INSET} aria-hidden="true" />
 
       <span className="relative z-10">{children}</span>
@@ -210,7 +206,6 @@ export default async function CheckoutSuccessPage({
     >
       <ClearCartOnMount enabled={clearCart} />
 
-      {/* auto-refresh while webhook finalizes */}
       <OrderStatusAutoRefresh paymentStatus={order.paymentStatus} />
 
       <section className="rounded-lg border border-border bg-card p-8">
diff --git a/frontend/app/[locale]/shop/orders/[id]/page.tsx b/frontend/app/[locale]/shop/orders/[id]/page.tsx
index 97c8397d..97dcedad 100644
--- a/frontend/app/[locale]/shop/orders/[id]/page.tsx
+++ b/frontend/app/[locale]/shop/orders/[id]/page.tsx
@@ -175,7 +175,6 @@ export default async function OrderDetailPage({
       .where(whereClause)
       .orderBy(orderItems.id);
 
-    // non-admin: "не існує" == "не твій"
     if (rows.length === 0) notFound();
 
     const base = rows[0]!.order;
diff --git a/frontend/app/[locale]/shop/orders/page.tsx b/frontend/app/[locale]/shop/orders/page.tsx
index fe7de800..6be669a3 100644
--- a/frontend/app/[locale]/shop/orders/page.tsx
+++ b/frontend/app/[locale]/shop/orders/page.tsx
@@ -186,11 +186,8 @@ export default async function MyOrdersPage({
     logError('My orders page failed', error);
     throw new Error('MY_ORDERS_LOAD_FAILED');
   }
-  // Nav/breadcrumb-ish links ("Back to shop", "Browse products")
   const NAV_LINK = cn(SHOP_NAV_LINK_BASE, 'text-lg', SHOP_FOCUS);
 
-  // Order headline link in the table: make it match cart product link style
-  // (cart uses: cn('block truncate', SHOP_LINK_BASE, SHOP_LINK_MD, SHOP_FOCUS))
   const ORDER_HEADLINE_LINK = cn(
     'block max-w-[24rem] truncate',
     SHOP_LINK_BASE,
diff --git a/frontend/app/[locale]/shop/page.tsx b/frontend/app/[locale]/shop/page.tsx
index 99a6ea77..a86ddfb8 100644
--- a/frontend/app/[locale]/shop/page.tsx
+++ b/frontend/app/[locale]/shop/page.tsx
@@ -15,7 +15,8 @@ import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Shop | DevLovers',
-  description: 'DevLovers merch shop — browse products, add to cart, and checkout.',
+  description:
+    'DevLovers merch shop — browse products, add to cart, and checkout.',
 };
 
 export default async function HomePage({
@@ -136,21 +137,18 @@ export default async function HomePage({
   `}
               aria-label={t('hero.cta')}
             >
-              {/* base gradient */}
               <span
                 className="absolute inset-0"
                 style={shopCtaGradient('--shop-cta-bg', '--shop-cta-bg-hover')}
                 aria-hidden="true"
               />
 
-              {/* hover wave overlay */}
               <span
                 className={SHOP_CTA_WAVE}
                 style={shopCtaGradient('--shop-cta-bg-hover', '--shop-cta-bg')}
                 aria-hidden="true"
               />
 
-              {/* glass inset */}
               <span className={SHOP_CTA_INSET} aria-hidden="true" />
 
               <span className="relative z-10 flex items-center gap-2">
diff --git a/frontend/app/[locale]/shop/products/[slug]/page.tsx b/frontend/app/[locale]/shop/products/[slug]/page.tsx
index 953d41f0..f5ea2ed8 100644
--- a/frontend/app/[locale]/shop/products/[slug]/page.tsx
+++ b/frontend/app/[locale]/shop/products/[slug]/page.tsx
@@ -26,10 +26,6 @@ export default async function ProductPage({
   const t = await getTranslations('shop.products');
   const tProduct = await getTranslations('shop.product');
 
-  // P0-5 canonical gate:
-  // - slug AND is_active=true
-  // - join product_prices by currency
-  // - missing price -> 404 (public hides existence/details)
   const currency = resolveCurrencyFromLocale(locale);
   const publicProduct = await getPublicProductBySlug(slug, currency);
   if (!publicProduct) {
@@ -42,8 +38,13 @@ export default async function ProductPage({
     notFound();
   }
   const isUnavailable = result.kind === 'unavailable';
-  const product = result.product as any; // shape differs for unavailable vs available; guard reads below
-  const NAV_LINK = cn(SHOP_NAV_LINK_BASE, SHOP_FOCUS, 'text-lg', 'items-center gap-2');
+  const product = result.product as any;
+  const NAV_LINK = cn(
+    SHOP_NAV_LINK_BASE,
+    SHOP_FOCUS,
+    'text-lg',
+    'items-center gap-2'
+  );
   const badge = product?.badge as string | undefined;
   const badgeLabel =
     badge && badge !== 'NONE'
diff --git a/frontend/app/[locale]/shop/products/page.tsx b/frontend/app/[locale]/shop/products/page.tsx
index b02e6cae..8757db69 100644
--- a/frontend/app/[locale]/shop/products/page.tsx
+++ b/frontend/app/[locale]/shop/products/page.tsx
@@ -36,7 +36,6 @@ export default async function ProductsPage({
   const resolvedSearchParams = (await searchParams) ?? {};
   const t = await getTranslations('shop.products');
 
-  // canonicalize: infinite-load page should not be shareable as ?page=N
   if (resolvedSearchParams.page) {
     const qsParams = new URLSearchParams();
 
diff --git a/frontend/app/api/ai/explain/route.ts b/frontend/app/api/ai/explain/route.ts
index f821c4ad..e12c8e1e 100644
--- a/frontend/app/api/ai/explain/route.ts
+++ b/frontend/app/api/ai/explain/route.ts
@@ -9,7 +9,6 @@ import {
 } from '@/lib/ai/prompts';
 import { getCurrentUser } from '@/lib/auth';
 
-
 const rateLimiter = new Map<string, { count: number; resetAt: number }>();
 const MAX_REQUESTS_PER_WINDOW = 10;
 const RATE_LIMIT_WINDOW_MS = 20 * 60 * 1000;
@@ -40,8 +39,11 @@ const requestSchema = z.object({
     .optional(),
 });
 
-
-function checkRateLimit(userId: string): { allowed: boolean; remaining: number; resetIn: number } {
+function checkRateLimit(userId: string): {
+  allowed: boolean;
+  remaining: number;
+  resetIn: number;
+} {
   cleanupRateLimiter();
 
   const now = Date.now();
@@ -49,7 +51,11 @@ function checkRateLimit(userId: string): { allowed: boolean; remaining: number;
 
   if (!entry || now > entry.resetAt) {
     rateLimiter.set(userId, { count: 1, resetAt: now + RATE_LIMIT_WINDOW_MS });
-    return { allowed: true, remaining: MAX_REQUESTS_PER_WINDOW - 1, resetIn: RATE_LIMIT_WINDOW_MS };
+    return {
+      allowed: true,
+      remaining: MAX_REQUESTS_PER_WINDOW - 1,
+      resetIn: RATE_LIMIT_WINDOW_MS,
+    };
   }
 
   if (entry.count >= MAX_REQUESTS_PER_WINDOW) {
@@ -130,7 +136,6 @@ export async function POST(request: Request) {
     );
   }
 
-  // Parse and validate request body
   let body: unknown;
   try {
     body = await request.json();
@@ -155,7 +160,6 @@ export async function POST(request: Request) {
 
   const { term, context } = validationResult.data;
 
-  // Initialize Groq client
   const groq = new Groq({ apiKey });
 
   try {
@@ -194,15 +198,16 @@ export async function POST(request: Request) {
   }
 }
 
-// =============================================================================
-// GET /api/ai/explain - Health check
-// =============================================================================
 export async function GET() {
   const hasApiKey = !!process.env.GROQ_API_KEY;
 
   if (!hasApiKey) {
     return NextResponse.json(
-      { status: 'error', service: 'ai-explain', message: 'API key not configured' },
+      {
+        status: 'error',
+        service: 'ai-explain',
+        message: 'API key not configured',
+      },
       { status: 503 }
     );
   }
@@ -213,13 +218,11 @@ export async function GET() {
   );
 }
 
-// =============================================================================
-// Error Handling
-// =============================================================================
 function handleGroqError(error: unknown): NextResponse {
-  // Handle Groq SDK specific errors
   if (error instanceof Groq.APIError) {
-    console.error(`[ai/explain] Groq API error: ${error.status} ${error.message}`);
+    console.error(
+      `[ai/explain] Groq API error: ${error.status} ${error.message}`
+    );
 
     if (error.status === 401) {
       return NextResponse.json(
@@ -242,14 +245,12 @@ function handleGroqError(error: unknown): NextResponse {
       );
     }
 
-    // Other API errors (500, 503, etc.)
     return NextResponse.json(
       { error: 'AI service temporarily unavailable', code: 'API_ERROR' },
       { status: 503 }
     );
   }
 
-  // Handle JSON parse errors from response parsing
   if (error instanceof SyntaxError) {
     console.error('[ai/explain] Failed to parse AI response as JSON');
     return NextResponse.json(
@@ -258,8 +259,10 @@ function handleGroqError(error: unknown): NextResponse {
     );
   }
 
-  // Handle response structure validation errors
-  if (error instanceof Error && error.message === 'Invalid response structure') {
+  if (
+    error instanceof Error &&
+    error.message === 'Invalid response structure'
+  ) {
     console.error('[ai/explain] AI response missing required fields');
     return NextResponse.json(
       { error: 'AI returned incomplete response', code: 'INVALID_STRUCTURE' },
@@ -267,7 +270,6 @@ function handleGroqError(error: unknown): NextResponse {
     );
   }
 
-  // Unknown errors
   console.error('[ai/explain] Unexpected error:', error);
   return NextResponse.json(
     { error: 'Failed to generate explanation', code: 'AI_ERROR' },
diff --git a/frontend/app/api/shop/admin/orders/[id]/route.ts b/frontend/app/api/shop/admin/orders/[id]/route.ts
index 82b37feb..9c075567 100644
--- a/frontend/app/api/shop/admin/orders/[id]/route.ts
+++ b/frontend/app/api/shop/admin/orders/[id]/route.ts
@@ -31,9 +31,6 @@ export async function GET(
   const requestId =
     request.headers.get('x-request-id')?.trim() || crypto.randomUUID();
 
-  // Origin posture: same-origin enforcement is applied to mutating methods;
-  // GET is intentionally unguarded.
-
   const baseMeta = {
     requestId,
     route: request.nextUrl.pathname,
@@ -45,9 +42,6 @@ export async function GET(
   try {
     await requireAdminApi(request);
 
-    // CSRF is enforced only for state-changing admin routes.
-    // This endpoint is read-only (GET), so we intentionally do not require CSRF.
-
     const rawParams = await context.params;
     const parsed = orderIdParamSchema.safeParse(rawParams);
 
diff --git a/frontend/app/api/shop/admin/orders/reconcile-stale/route.ts b/frontend/app/api/shop/admin/orders/reconcile-stale/route.ts
index 7c19087d..ca45e0db 100644
--- a/frontend/app/api/shop/admin/orders/reconcile-stale/route.ts
+++ b/frontend/app/api/shop/admin/orders/reconcile-stale/route.ts
@@ -30,13 +30,6 @@ export async function POST(request: NextRequest) {
   const requestId =
     request.headers.get('x-request-id')?.trim() || crypto.randomUUID();
 
-  // NOTE: We intentionally keep TWO origin checks:
-  // 1) guardBrowserSameOrigin(): generic unsafe-request Origin allowlist gate
-  //    (APP_ORIGIN/APP_ADDITIONAL_ORIGINS), fail-fast before auth/body parsing.
-  // 2) isSameOrigin(): CSRF-specific strict same-origin assertion, so CSRF origin mismatch
-  //    is logged/coded separately.
-  // These checks are not equivalent and serve different error semantics (policy vs CSRF).
-
   const blocked = guardBrowserSameOrigin(request);
 
   if (blocked) {
@@ -58,10 +51,8 @@ export async function POST(request: NextRequest) {
   };
 
   try {
-    // 1) Kill-switch + auth FIRST (no body parsing)
     await requireAdminApi(request);
 
-    // 2) CSRF checks second (browser-only semantics)
     if (!isSameOrigin(request)) {
       logWarn('admin_reconcile_stale_csrf_origin_mismatch', {
         ...baseMeta,
diff --git a/frontend/app/api/shop/admin/products/[id]/route.ts b/frontend/app/api/shop/admin/products/[id]/route.ts
index a3dd66d9..e889d186 100644
--- a/frontend/app/api/shop/admin/products/[id]/route.ts
+++ b/frontend/app/api/shop/admin/products/[id]/route.ts
@@ -179,9 +179,6 @@ export async function GET(
   const requestId =
     request.headers.get('x-request-id')?.trim() || crypto.randomUUID();
 
-  // Origin posture: same-origin enforcement is applied to mutating methods;
-  // GET is intentionally unguarded.
-
   const baseMeta = {
     requestId,
     route: request.nextUrl.pathname,
@@ -423,7 +420,6 @@ export async function PATCH(
         { status: 400 }
       );
     }
-    // SALE invariant is validated on parsed/normalized payload (single source of truth).
     const saleViolation = findSaleRuleViolation(parsed.data);
     if (saleViolation) {
       const message =
@@ -467,7 +463,7 @@ export async function PATCH(
       if (error instanceof PriceConfigError) {
         logWarn('admin_product_update_price_config_error', {
           ...baseMeta,
-          code: error.code, // PRICE_CONFIG_ERROR
+          code: error.code,
           productId: productIdForLog,
           currency: error.currency,
           durationMs: Date.now() - startedAtMs,
@@ -650,7 +646,6 @@ export async function DELETE(
   try {
     await requireAdminApi(request);
 
-    // DELETE can’t reliably carry FormData; CSRF is validated via header/cookie path inside requireAdminCsrf.
     const csrfRes = requireAdminCsrf(request, 'admin:products:delete');
     if (csrfRes) {
       logWarn('admin_product_delete_csrf_rejected', {
@@ -686,10 +681,8 @@ export async function DELETE(
     }
 
     productIdForLog = parsedParams.data.id;
-    // Fail fast: do not attempt DELETE if product is referenced by orders.
-    const blockerConstraint = await getProductDeleteBlockerConstraint(
-      productIdForLog
-    );
+    const blockerConstraint =
+      await getProductDeleteBlockerConstraint(productIdForLog);
     if (blockerConstraint) {
       logWarn('admin_product_delete_in_use', {
         ...baseMeta,
@@ -759,7 +752,6 @@ export async function DELETE(
     }
     const { code: pgCode, constraint } = getPgMeta(error);
 
-    // Postgres: 23503 = foreign_key_violation
     if (pgCode === '23503') {
       logWarn('admin_product_delete_in_use', {
         ...baseMeta,
diff --git a/frontend/app/api/shop/admin/products/[id]/status/route.ts b/frontend/app/api/shop/admin/products/[id]/status/route.ts
index 4d7ccd9e..3120080a 100644
--- a/frontend/app/api/shop/admin/products/[id]/status/route.ts
+++ b/frontend/app/api/shop/admin/products/[id]/status/route.ts
@@ -92,8 +92,6 @@ export async function PATCH(
 
     const updated = await toggleProductStatus(productIdForLog);
 
-    // no success log (avoid log noise); rely on response + metrics
-
     return noStoreJson({ success: true, product: updated }, { status: 200 });
   } catch (error) {
     if (error instanceof AdminApiDisabledError) {
diff --git a/frontend/app/api/shop/cart/rehydrate/route.ts b/frontend/app/api/shop/cart/rehydrate/route.ts
index 45484f3c..41849b55 100644
--- a/frontend/app/api/shop/cart/rehydrate/route.ts
+++ b/frontend/app/api/shop/cart/rehydrate/route.ts
@@ -97,7 +97,6 @@ export async function POST(request: NextRequest) {
     const { items } = parsedPayload.data;
     const parsedResult = await rehydrateCartItems(items, currency);
 
-    // Success signal (avoid noise on empty carts)
     if (Array.isArray(items) && items.length > 0) {
       logInfo('cart_rehydrate_completed', {
         ...meta,
@@ -109,7 +108,6 @@ export async function POST(request: NextRequest) {
 
     return NextResponse.json(parsedResult);
   } catch (error) {
-    // Missing price for locale currency is a CONTRACT error (4xx), but must be traceable.
     if (error instanceof PriceConfigError) {
       logWarn('cart_rehydrate_price_config_error', {
         ...meta,
@@ -124,7 +122,6 @@ export async function POST(request: NextRequest) {
       });
     }
 
-    // Client/business rejection (4xx) must be traceable as warn (not error).
     if (error instanceof InvalidPayloadError) {
       logWarn('cart_rehydrate_rejected', {
         ...meta,
@@ -134,7 +131,6 @@ export async function POST(request: NextRequest) {
       return jsonError(400, error.code, error.message);
     }
 
-    // DB misconfiguration / invalid stored money => 500 with stable code.
     if (error instanceof MoneyValueError) {
       logError('cart_rehydrate_price_data_error', error, {
         ...meta,
diff --git a/frontend/app/api/shop/checkout/route.ts b/frontend/app/api/shop/checkout/route.ts
index 37b06916..30c3e7e2 100644
--- a/frontend/app/api/shop/checkout/route.ts
+++ b/frontend/app/api/shop/checkout/route.ts
@@ -154,7 +154,6 @@ async function readJsonBody(request: NextRequest): Promise<unknown> {
     throw new Error('EMPTY_BODY');
   }
 
-  // tolerate BOM / odd whitespace
   const normalized = raw.replace(/^\uFEFF/, '');
 
   return JSON.parse(normalized);
@@ -224,8 +223,7 @@ export async function POST(request: NextRequest) {
       idempotencyKey.format?.()
     );
   }
-  // For observability: shorten to avoid oversized structured logs.
-  // Never used as an idempotency key; the full header value remains canonical.
+
   const idempotencyKeyShort = idempotencyKey.slice(0, 32);
 
   const meta = {
@@ -299,8 +297,7 @@ export async function POST(request: NextRequest) {
       );
     }
   }
-  // P1: rate limit checkout (cross-instance, DB-backed)
-  // Policy: allow reasonable retries; block abusive burst.
+
   const checkoutSubject = sessionUserId ?? getRateLimitSubject(request);
 
   const limitParsed = Number.parseInt(
@@ -418,9 +415,6 @@ export async function POST(request: NextRequest) {
     const stripePaymentFlow =
       paymentsEnabled && order.paymentProvider === 'stripe';
 
-    // =========================
-    // Existing order path
-    // =========================
     if (!result.isNew) {
       if (stripePaymentFlow) {
         try {
@@ -444,7 +438,6 @@ export async function POST(request: NextRequest) {
           });
         } catch (error) {
           if (error instanceof PaymentAttemptsExhaustedError) {
-            // Best-effort release to avoid holding reserved stock indefinitely.
             try {
               await restockOrder(order.id, { reason: 'failed' });
             } catch (restockError) {
@@ -468,7 +461,6 @@ export async function POST(request: NextRequest) {
             );
           }
 
-          // Post-create/state conflict must be 409 (not 502)
           if (error instanceof InvalidPayloadError) {
             logWarn('checkout_conflict', {
               ...orderMeta,
@@ -509,7 +501,6 @@ export async function POST(request: NextRequest) {
         }
       }
 
-      // Not Stripe flow => return existing order as-is
       return buildCheckoutResponse({
         order: {
           id: order.id,
@@ -525,9 +516,6 @@ export async function POST(request: NextRequest) {
       });
     }
 
-    // =========================
-    // New order path
-    // =========================
     if (!stripePaymentFlow) {
       return buildCheckoutResponse({
         order: {
@@ -544,7 +532,6 @@ export async function POST(request: NextRequest) {
       });
     }
 
-    // Stripe new order: durable attempt layer (bounded + audited)
     try {
       const ensured = await ensureStripePaymentIntentForOrder({
         orderId: order.id,
@@ -565,7 +552,6 @@ export async function POST(request: NextRequest) {
         status: 201,
       });
     } catch (error) {
-      // Conflict => 409 and DO NOT restock (leave reserved; retry/janitor)
       if (error instanceof InvalidPayloadError) {
         logWarn('checkout_conflict', {
           ...orderMeta,
@@ -581,7 +567,6 @@ export async function POST(request: NextRequest) {
         );
       }
       if (error instanceof PaymentAttemptsExhaustedError) {
-        // Best-effort release to avoid holding reserved stock indefinitely
         try {
           await restockOrder(order.id, { reason: 'failed' });
         } catch (restockError) {
diff --git a/frontend/app/api/shop/internal/orders/restock-stale/route.ts b/frontend/app/api/shop/internal/orders/restock-stale/route.ts
index d8ae44f3..66fb43b8 100644
--- a/frontend/app/api/shop/internal/orders/restock-stale/route.ts
+++ b/frontend/app/api/shop/internal/orders/restock-stale/route.ts
@@ -36,17 +36,14 @@ const DEFAULT_POLICY: SweepPolicy = {
 const BATCH_MIN = 25;
 const BATCH_MAX = 100;
 
-const MIN_MINUTES = 10; // NOT 0
+const MIN_MINUTES = 10;
 const MAX_MINUTES = 60 * 24 * 7;
 
-// 9.1: minimal max runtime
 const DEFAULT_MAX_RUNTIME_MS = 20_000;
 const MAX_RUNTIME_MIN_MS = 1_000;
 const MAX_RUNTIME_MAX_MS = 25_000;
 
-// 9.2: min interval is enforced via ENV (prod 300; dev 60)
-// request can only INCREASE it, never decrease below env.
-const DEFAULT_REQUESTED_MIN_INTERVAL_SECONDS = 1; // lets env be the real floor
+const DEFAULT_REQUESTED_MIN_INTERVAL_SECONDS = 1;
 const MIN_INTERVAL_SECONDS_MIN = 1;
 const MIN_INTERVAL_SECONDS_MAX = 60 * 60;
 
@@ -90,7 +87,6 @@ function parseOlderThanPolicy(
   req: NextRequest,
   body: unknown
 ): OlderThanPolicy | { error: string } {
-  // Legacy: ?olderThanMinutes=60 (applies to stalePending only)
   const qLegacy = req.nextUrl.searchParams.get('olderThanMinutes');
   if (qLegacy !== null && qLegacy !== undefined) {
     const n = toFiniteNumber(qLegacy);
@@ -102,7 +98,6 @@ function parseOlderThanPolicy(
     };
   }
 
-  // Body: olderThanMinutes can be number (legacy) or object (new)
   let candidate: unknown = null;
   if (body && typeof body === 'object' && 'olderThanMinutes' in body) {
     candidate = (body as Record<string, unknown>).olderThanMinutes;
@@ -110,7 +105,6 @@ function parseOlderThanPolicy(
     return DEFAULT_POLICY.olderThanMinutes;
   }
 
-  // Legacy body: { olderThanMinutes: 60 } -> stalePending only
   if (typeof candidate === 'number' || typeof candidate === 'string') {
     const n = toFiniteNumber(candidate);
     if (n === null) return { error: 'olderThanMinutes must be a number' };
@@ -121,7 +115,6 @@ function parseOlderThanPolicy(
     };
   }
 
-  // New body: { olderThanMinutes: { stuckReserving, stalePending, orphanNoPayment } }
   if (!candidate || typeof candidate !== 'object') {
     return { error: 'olderThanMinutes must be a number or an object' };
   }
@@ -197,7 +190,6 @@ function parseRequestedMinIntervalSeconds(
 }
 
 function getEnvMinIntervalSeconds(): number {
-  // tests must not be slowed down / flake because of persistent DB limiter
   if (process.env.NODE_ENV === 'test') return 0;
 
   const fallback = process.env.NODE_ENV === 'production' ? 300 : 60;
@@ -216,10 +208,6 @@ function normalizeDate(x: unknown): Date | null {
   return isNaN(d.getTime()) ? null : d;
 }
 
-/**
- * DB-backed rate limiter (cross-instance).
- * Atomic: one SQL statement with ON CONFLICT ... WHERE next_allowed_at <= now()
- */
 async function acquireJobSlot(params: {
   jobName: string;
   effectiveMinIntervalSeconds: number;
@@ -302,7 +290,6 @@ export async function POST(request: NextRequest) {
       code: 'INVALID_PAYLOAD',
       reason: error instanceof Error ? error.message : String(error),
     });
-    // ignore invalid/missing json body; query params may be used instead
   }
 
   const batchSizeParsed = parseBatchSize(request, body);
@@ -402,7 +389,6 @@ export async function POST(request: NextRequest) {
     requestedMinIntervalSeconds
   );
 
-  // DB-backed limiter: cross-instance, atomic
   const runId = crypto.randomUUID();
   const jobName = baseMeta.jobName;
   const workerId = `janitor:${runId}`;
@@ -445,7 +431,6 @@ export async function POST(request: NextRequest) {
     const startedAtMs = Date.now();
     const deadlineMs = startedAtMs + maxRuntimeMs;
 
-    // 1) stuck reserving (timeout on inventory reservation phase)
     const remaining0 = Math.max(0, deadlineMs - Date.now());
     const processedStuckReserving = await restockStuckReservingOrders({
       olderThanMinutes: policy.olderThanMinutes.stuckReserving,
@@ -454,7 +439,6 @@ export async function POST(request: NextRequest) {
       timeBudgetMs: remaining0,
     });
 
-    // 2) stale pending (stripe payment never completed)
     const remaining1 = Math.max(0, deadlineMs - Date.now());
     const processedStalePending = await restockStalePendingOrders({
       olderThanMinutes: policy.olderThanMinutes.stalePending,
@@ -462,7 +446,7 @@ export async function POST(request: NextRequest) {
       workerId,
       timeBudgetMs: remaining1,
     });
-    // 3) orphan no-payment (payments disabled flow can be "paid" but not reserved yet)
+
     const remaining2 = Math.max(0, deadlineMs - Date.now());
     const processedOrphanNoPayment = await restockStaleNoPaymentOrders({
       olderThanMinutes: policy.olderThanMinutes.orphanNoPayment,
@@ -505,7 +489,7 @@ export async function POST(request: NextRequest) {
         orphanNoPayment: processedOrphanNoPayment,
       },
       batchSize: policy.batchSize,
-      olderThanMinutes: policy.olderThanMinutes.stalePending, // legacy field
+      olderThanMinutes: policy.olderThanMinutes.stalePending,
       appliedPolicy: policy,
       maxRuntimeMs,
       minIntervalSeconds,
diff --git a/frontend/app/api/shop/webhooks/stripe/route.ts b/frontend/app/api/shop/webhooks/stripe/route.ts
index 43e2fdfc..73671d9a 100644
--- a/frontend/app/api/shop/webhooks/stripe/route.ts
+++ b/frontend/app/api/shop/webhooks/stripe/route.ts
@@ -23,7 +23,6 @@ import { guardNonBrowserOnly } from '@/lib/security/origin';
 
 const REFUND_FULLNESS_UNDETERMINED = 'REFUND_FULLNESS_UNDETERMINED' as const;
 
-// P0.8: multi-instance claim/lock (no transactions; safe under parallel deliveries)
 const STRIPE_WEBHOOK_INSTANCE_ID =
   (
     process.env.STRIPE_WEBHOOK_INSTANCE_ID ??
@@ -31,7 +30,7 @@ const STRIPE_WEBHOOK_INSTANCE_ID =
     ''
   ).trim() || crypto.randomUUID().slice(0, 12);
 
-const STRIPE_EVENT_CLAIM_TTL_MS = 10 * 60 * 1000; // 10 minutes
+const STRIPE_EVENT_CLAIM_TTL_MS = 10 * 60 * 1000;
 const STRIPE_EVENT_RETRY_AFTER_SECONDS = 10;
 
 function noStoreJson(
@@ -171,7 +170,6 @@ function warnRefundFullnessUndetermined(payload: {
 }) {
   logWarn('stripe_webhook_refund_fullness_undetermined', {
     ...payload,
-    // keep consistent correlation fields with stripe_webhook
     stripeEventId: payload.eventId,
     instanceId: STRIPE_WEBHOOK_INSTANCE_ID,
     provider: 'stripe',
@@ -206,10 +204,10 @@ function logWebhookEvent(payload: {
     refundId != null
       ? 'refund'
       : chargeId != null
-      ? 'charge'
-      : paymentIntentId != null
-      ? 'payment_intent'
-      : null;
+        ? 'charge'
+        : paymentIntentId != null
+          ? 'payment_intent'
+          : null;
 
   logInfo('stripe_webhook', {
     requestId,
@@ -372,7 +370,6 @@ function mergePspMetadata(params: {
     createdAtIso: params.createdAtIso,
   });
 
-  // Do NOT allow delta to overwrite refunds/refundInitiatedAt (canonical fields managed by upsertRefundIntoMeta)
   const safeDelta: any = { ...cleanedDelta };
   delete safeDelta.refunds;
   delete safeDelta.refundInitiatedAt;
@@ -386,8 +383,6 @@ function shouldRestockFromWebhook(order: {
   stockRestored: boolean | null;
   inventoryStatus: string | null;
 }) {
-  // Webhook-level gate: avoid unnecessary calls when we already restored stock
-  // or inventory has already been released.
   if (order.stockRestored === true) return false;
   if (order.inventoryStatus === 'released') return false;
   return true;
@@ -547,7 +542,6 @@ export async function POST(request: NextRequest) {
   if (eventType.startsWith('payment_intent.')) {
     paymentIntent = rawObject as Stripe.PaymentIntent;
   } else if (eventType === 'charge.refund.updated') {
-    // Stripe sends Refund object for charge.refund.updated
     refundObject = rawObject as Stripe.Refund;
   } else if (eventType.startsWith('charge.')) {
     charge = rawObject as Stripe.Charge;
@@ -596,7 +590,7 @@ export async function POST(request: NextRequest) {
 
   const bestEffortChargeId: string | null = paymentIntent
     ? getLatestChargeId(paymentIntent)
-    : charge?.id ?? bestEffortRefundChargeId ?? null;
+    : (charge?.id ?? bestEffortRefundChargeId ?? null);
 
   const bestEffortRefundId: string | null = refundObject?.id ?? null;
 
@@ -654,7 +648,6 @@ export async function POST(request: NextRequest) {
 
       return noStoreJson({ received: true }, { status: 200 });
     };
-    // 1) Insert event idempotently (no transactions)
     const inserted = await db
       .insert(stripeEvents)
       .values({
@@ -684,9 +677,8 @@ export async function POST(request: NextRequest) {
 
         return noStoreJson({ received: true }, { status: 200 });
       }
-      // processedAt is NULL => previous attempt failed; reprocess
     }
-    // P0.8: claim/lock BEFORE any business logic (multi-instance safe).
+
     const claimState = await tryClaimStripeEvent(event.id);
     if (claimState === 'already_processed') {
       logInfo('stripe_webhook_duplicate_event', {
@@ -704,9 +696,7 @@ export async function POST(request: NextRequest) {
       });
       return busyRetry();
     }
-    //2) Resolve orderId:
-    //    primary: metadata.orderId
-    //    fallback: orders.paymentIntentId == paymentIntentId (ONLY if unique match)
+
     let resolvedOrderId: string | undefined = orderId;
 
     if (!resolvedOrderId) {
@@ -745,7 +735,6 @@ export async function POST(request: NextRequest) {
       }
     }
 
-    // backfill stripe_events.orderId if resolved via fallback (or to normalize)
     if (resolvedOrderId && !orderId) {
       await db
         .update(stripeEvents)
@@ -753,7 +742,6 @@ export async function POST(request: NextRequest) {
         .where(eq(stripeEvents.eventId, event.id));
     }
 
-    // 3) Load order
     const [order] = await db
       .select({
         id: orders.id,
@@ -798,7 +786,6 @@ export async function POST(request: NextRequest) {
       return ack();
     }
 
-    // 4) Business logic per event type
     if (eventType === 'payment_intent.succeeded') {
       const stripeAmount =
         paymentIntent?.amount_received ?? paymentIntent?.amount ?? null;
@@ -814,8 +801,8 @@ export async function POST(request: NextRequest) {
           !amountMatches && !currencyMatches
             ? 'amount_and_currency_mismatch'
             : !amountMatches
-            ? 'amount_mismatch'
-            : 'currency_mismatch';
+              ? 'amount_mismatch'
+              : 'currency_mismatch';
 
         const chargeForIntent = getLatestCharge(paymentIntent as any);
         const latestChargeId = getLatestChargeId(paymentIntent);
@@ -833,7 +820,6 @@ export async function POST(request: NextRequest) {
                 currency: order.currency,
               },
               actual: { amountMinor: stripeAmount, currency: stripeCurrency },
-              // keep old fields for backward-compat/debug grepping
               stripeAmount,
               orderAmountMinor,
               stripeCurrency,
@@ -923,9 +909,7 @@ export async function POST(request: NextRequest) {
             isNull(orders.inventoryStatus),
             ne(orders.inventoryStatus, 'released')
           ),
-          // avoid churn when already consistent
           or(ne(orders.paymentStatus, 'paid'), ne(orders.status, 'PAID')),
-          // explicit safety gates (redundant with matrix, but keep)
           ne(orders.paymentStatus, 'failed'),
           ne(orders.paymentStatus, 'refunded')
         ),
@@ -1139,12 +1123,11 @@ export async function POST(request: NextRequest) {
             ? refund.charge
             : null
           : refund && typeof refund.charge === 'object' && refund.charge
-          ? typeof (refund.charge as any).id === 'string'
-            ? (refund.charge as any).id
-            : null
-          : null;
+            ? typeof (refund.charge as any).id === 'string'
+              ? (refund.charge as any).id
+              : null
+            : null;
 
-      // MVP: only FULL refund.
       let isFullRefund = false;
 
       if (eventType === 'charge.refunded') {
@@ -1225,7 +1208,8 @@ export async function POST(request: NextRequest) {
 
           const hasCurrent =
             refund?.id && list.some(r => r?.id && r.id === refund.id);
-          cumulativeRefunded = sumFromList + (hasCurrent ? 0 : currentAmt ?? 0);
+          cumulativeRefunded =
+            sumFromList + (hasCurrent ? 0 : (currentAmt ?? 0));
         }
 
         if (amt == null || cumulativeRefunded == null) {
@@ -1346,7 +1330,8 @@ export async function POST(request: NextRequest) {
           }
 
           const hasCurrent = list.some(r => r?.id && r.id === refund.id);
-          cumulativeRefunded = sumFromList + (hasCurrent ? 0 : currentAmt ?? 0);
+          cumulativeRefunded =
+            sumFromList + (hasCurrent ? 0 : (currentAmt ?? 0));
         }
 
         if (amt == null || cumulativeRefunded == null) {
@@ -1421,7 +1406,6 @@ export async function POST(request: NextRequest) {
           .set({
             updatedAt: now,
             pspMetadata: nextMeta,
-            // do NOT change paymentStatus/status for partial refund
             pspChargeId: charge?.id ?? refundChargeId ?? null,
             pspPaymentMethod: resolvePaymentMethod(paymentIntent, charge),
             pspStatusReason: 'PARTIAL_REFUND_IGNORED',
@@ -1466,7 +1450,7 @@ export async function POST(request: NextRequest) {
         note: eventType,
         set: {
           updatedAt: now,
-          status: 'CANCELED', // terminal in current enum
+          status: 'CANCELED',
           pspChargeId: charge?.id ?? refundChargeId ?? null,
           pspPaymentMethod: resolvePaymentMethod(paymentIntent, charge),
           pspStatusReason: refund?.reason ?? refund?.status ?? 'refunded',
@@ -1496,7 +1480,6 @@ export async function POST(request: NextRequest) {
       return ack();
     }
 
-    // default ack
     logWebhookEvent({
       requestId,
       stripeEventId,
@@ -1511,7 +1494,6 @@ export async function POST(request: NextRequest) {
     return ack();
   } catch (error) {
     if (isRefundFullnessUndeterminedError(error)) {
-      // Do NOT ack() -> keep processedAt NULL so Stripe retries.
       return noStoreJson(
         { code: REFUND_FULLNESS_UNDETERMINED },
         { status: 500 }
@@ -1525,7 +1507,6 @@ export async function POST(request: NextRequest) {
       orderId: orderId ?? null,
     });
 
-    // P0.8: release claim early so Stripe retries can be claimed immediately.
     try {
       await db
         .update(stripeEvents)
diff --git a/frontend/checkout.json b/frontend/checkout.json
deleted file mode 100644
index 999c4d97..00000000
--- a/frontend/checkout.json
+++ /dev/null
@@ -1 +0,0 @@
-{"items":[{"productId":"dcefd1da-567a-4a5c-b6aa-7cd1a85319cc","quantity":1}]}
\ No newline at end of file
diff --git a/frontend/components/q&a/AIWordHelper.tsx b/frontend/components/q&a/AIWordHelper.tsx
index 59b7e55d..a860ecd2 100644
--- a/frontend/components/q&a/AIWordHelper.tsx
+++ b/frontend/components/q&a/AIWordHelper.tsx
@@ -3,7 +3,21 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
-import { X, Loader2, RefreshCw, Sparkles, GripHorizontal, Clock, Coffee, CloudOff, Wrench, Star, Github, Heart, BookOpen } from 'lucide-react';
+import {
+  X,
+  Loader2,
+  RefreshCw,
+  Sparkles,
+  GripHorizontal,
+  Clock,
+  Coffee,
+  CloudOff,
+  Wrench,
+  Star,
+  Github,
+  Heart,
+  BookOpen,
+} from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Link } from '@/i18n/routing';
 import {
@@ -35,7 +49,7 @@ interface DragState {
 
 interface RateLimitState {
   isRateLimited: boolean;
-  resetIn: number; // milliseconds
+  resetIn: number;
   retryAttempts: number;
 }
 
@@ -55,7 +69,9 @@ const SUPPORTED_LOCALES: Locale[] = ['uk', 'en', 'pl'];
 const DEFAULT_LOCALE: Locale = 'en';
 
 function isValidLocale(value: unknown): value is Locale {
-  return typeof value === 'string' && SUPPORTED_LOCALES.includes(value as Locale);
+  return (
+    typeof value === 'string' && SUPPORTED_LOCALES.includes(value as Locale)
+  );
 }
 
 function getValidLocale(value: unknown): Locale {
@@ -89,7 +105,7 @@ function formatExplanation(text: string): React.ReactNode {
   const flushCode = () => {
     if (codeBuffer.length > 0) {
       const code = codeBuffer.join('\n').trim();
-      
+
       if (code && code.length > 0) {
         result.push(
           <pre
@@ -105,14 +121,16 @@ function formatExplanation(text: string): React.ReactNode {
   };
 
   for (const line of lines) {
-
     const trimmed = line.trim();
-    const hasCodeContent = /[a-zA-Z0-9{}()=<>[\];:'".,/\\|!@#$%^&*+-]/.test(trimmed);
-    const isCodeLine = /^(\s{2,}|\t)/.test(line) && trimmed.length > 0 && hasCodeContent;
+    const hasCodeContent = /[a-zA-Z0-9{}()=<>[\];:'".,/\\|!@#$%^&*+-]/.test(
+      trimmed
+    );
+    const isCodeLine =
+      /^(\s{2,}|\t)/.test(line) && trimmed.length > 0 && hasCodeContent;
 
     if (isCodeLine) {
       flushParagraph();
-      
+
       codeBuffer.push(line.replace(/^\s{2}/, ''));
     } else {
       flushCode();
@@ -120,7 +138,6 @@ function formatExplanation(text: string): React.ReactNode {
     }
   }
 
-  
   flushCode();
   flushParagraph();
 
@@ -150,11 +167,13 @@ export default function AIWordHelper({
     resetIn: 0,
     retryAttempts: 0,
   });
-  const [serviceErrorState, setServiceErrorState] = useState<ServiceErrorState>({
-    isServiceError: false,
-    errorCode: '',
-    retryAttempts: 0,
-  });
+  const [serviceErrorState, setServiceErrorState] = useState<ServiceErrorState>(
+    {
+      isServiceError: false,
+      errorCode: '',
+      retryAttempts: 0,
+    }
+  );
 
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [dragState, setDragState] = useState<DragState>({
@@ -167,7 +186,6 @@ export default function AIWordHelper({
 
   const modalRef = useRef<HTMLDivElement>(null);
 
-  
   useEffect(() => {
     if (!isOpen) return;
 
@@ -194,7 +212,11 @@ export default function AIWordHelper({
       setExplanation(null);
       setError(null);
       setRateLimitState({ isRateLimited: false, resetIn: 0, retryAttempts: 0 });
-      setServiceErrorState({ isServiceError: false, errorCode: '', retryAttempts: 0 });
+      setServiceErrorState({
+        isServiceError: false,
+        errorCode: '',
+        retryAttempts: 0,
+      });
     }
   }, [isOpen, validatedLocale]);
 
@@ -204,7 +226,11 @@ export default function AIWordHelper({
       setExplanation(cached);
       setError(null);
       setRateLimitState({ isRateLimited: false, resetIn: 0, retryAttempts: 0 });
-      setServiceErrorState({ isServiceError: false, errorCode: '', retryAttempts: 0 });
+      setServiceErrorState({
+        isServiceError: false,
+        errorCode: '',
+        retryAttempts: 0,
+      });
       return;
     }
 
@@ -250,7 +276,11 @@ export default function AIWordHelper({
       setExplanation(data);
       setCachedExplanation(term, data);
       setRateLimitState({ isRateLimited: false, resetIn: 0, retryAttempts: 0 });
-      setServiceErrorState({ isServiceError: false, errorCode: '', retryAttempts: 0 });
+      setServiceErrorState({
+        isServiceError: false,
+        errorCode: '',
+        retryAttempts: 0,
+      });
     } catch (err) {
       setError(err instanceof Error ? err.message : 'An error occurred');
     } finally {
@@ -274,7 +304,8 @@ export default function AIWordHelper({
     if (isOpen) {
       document.addEventListener('keydown', handleKeyDown);
       // Calculate scrollbar width and add padding to prevent layout shift
-      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      const scrollbarWidth =
+        window.innerWidth - document.documentElement.clientWidth;
       document.body.style.overflow = 'hidden';
       document.body.style.paddingRight = `${scrollbarWidth}px`;
     }
@@ -483,255 +514,263 @@ export default function AIWordHelper({
                 </div>
               )}
 
-              {error && (() => {
-                const messages = getLocalizedMessages(activeLocale);
-                return (
-                  <div className="flex flex-col items-center justify-center gap-4 py-8">
-                    {error === 'RATE_LIMITED' ? (
-                      <>
-                        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30">
-                          {rateLimitState.retryAttempts >= 3 ? (
-                            <Coffee className="h-8 w-8 text-amber-600 dark:text-amber-400" />
-                          ) : (
-                            <Clock className="h-8 w-8 text-amber-600 dark:text-amber-400" />
-                          )}
-                        </div>
-                        <div className="text-center">
-                          <p className="text-sm font-medium text-amber-700 dark:text-amber-300">
-                            {rateLimitState.retryAttempts >= 3
-                              ? messages.rateLimit.persistent
-                              : messages.rateLimit.title}
-                          </p>
-                          <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                            {rateLimitState.retryAttempts >= 3
-                              ? messages.rateLimit.persistentHint
-                              : messages.rateLimit.hint.replace(
-                                  '{minutes}',
-                                  String(Math.max(1, Math.ceil(rateLimitState.resetIn / 60000)))
-                                )}
-                          </p>
-                        </div>
-                        <button
-                          onClick={fetchExplanation}
-                          disabled={rateLimitState.retryAttempts >= 5}
-                          className={cn(
-                            'flex items-center gap-2 rounded-lg px-4 py-2',
-                            'text-sm font-medium',
-                            'transition-colors',
-                            rateLimitState.retryAttempts >= 5
-                              ? 'cursor-not-allowed bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
-                              : rateLimitState.retryAttempts >= 3
-                                ? 'bg-amber-500 text-white hover:bg-amber-600'
-                                : 'bg-[var(--accent-primary)] text-white hover:bg-[var(--accent-hover)]'
-                          )}
-                        >
-                          {rateLimitState.retryAttempts >= 5 ? (
-                            <>
-                              <Coffee className="h-4 w-4" />
-                              {messages.rateLimit.takingBreak}
-                            </>
-                          ) : rateLimitState.retryAttempts >= 3 ? (
-                            <>
-                              <Coffee className="h-4 w-4" />
-                              {messages.rateLimit.patience}
-                            </>
-                          ) : (
-                            <>
-                              <RefreshCw className="h-4 w-4" />
-                              {messages.rateLimit.tryLater}
-                            </>
-                          )}
-                        </button>
-
-                        {/* Activity suggestions while waiting */}
-                        <div className="mt-4 w-full border-t border-gray-200 dark:border-neutral-700 pt-4">
-                          <p className="text-center text-xs font-medium text-gray-500 dark:text-gray-400 mb-3">
-                            {messages.rateLimit.whileWaiting}
+              {error &&
+                (() => {
+                  const messages = getLocalizedMessages(activeLocale);
+                  return (
+                    <div className="flex flex-col items-center justify-center gap-4 py-8">
+                      {error === 'RATE_LIMITED' ? (
+                        <>
+                          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30">
+                            {rateLimitState.retryAttempts >= 3 ? (
+                              <Coffee className="h-8 w-8 text-amber-600 dark:text-amber-400" />
+                            ) : (
+                              <Clock className="h-8 w-8 text-amber-600 dark:text-amber-400" />
+                            )}
+                          </div>
+                          <div className="text-center">
+                            <p className="text-sm font-medium text-amber-700 dark:text-amber-300">
+                              {rateLimitState.retryAttempts >= 3
+                                ? messages.rateLimit.persistent
+                                : messages.rateLimit.title}
+                            </p>
+                            <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
+                              {rateLimitState.retryAttempts >= 3
+                                ? messages.rateLimit.persistentHint
+                                : messages.rateLimit.hint.replace(
+                                    '{minutes}',
+                                    String(
+                                      Math.max(
+                                        1,
+                                        Math.ceil(
+                                          rateLimitState.resetIn / 60000
+                                        )
+                                      )
+                                    )
+                                  )}
+                            </p>
+                          </div>
+                          <button
+                            onClick={fetchExplanation}
+                            disabled={rateLimitState.retryAttempts >= 5}
+                            className={cn(
+                              'flex items-center gap-2 rounded-lg px-4 py-2',
+                              'text-sm font-medium',
+                              'transition-colors',
+                              rateLimitState.retryAttempts >= 5
+                                ? 'cursor-not-allowed bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
+                                : rateLimitState.retryAttempts >= 3
+                                  ? 'bg-amber-500 text-white hover:bg-amber-600'
+                                  : 'bg-[var(--accent-primary)] text-white hover:bg-[var(--accent-hover)]'
+                            )}
+                          >
+                            {rateLimitState.retryAttempts >= 5 ? (
+                              <>
+                                <Coffee className="h-4 w-4" />
+                                {messages.rateLimit.takingBreak}
+                              </>
+                            ) : rateLimitState.retryAttempts >= 3 ? (
+                              <>
+                                <Coffee className="h-4 w-4" />
+                                {messages.rateLimit.patience}
+                              </>
+                            ) : (
+                              <>
+                                <RefreshCw className="h-4 w-4" />
+                                {messages.rateLimit.tryLater}
+                              </>
+                            )}
+                          </button>
+
+                          {/* Activity suggestions while waiting */}
+                          <div className="mt-4 w-full border-t border-gray-200 dark:border-neutral-700 pt-4">
+                            <p className="text-center text-xs font-medium text-gray-500 dark:text-gray-400 mb-3">
+                              {messages.rateLimit.whileWaiting}
+                            </p>
+
+                            {rateLimitState.retryAttempts < 3 ? (
+                              // First suggestions: Take Quiz & Star GitHub
+                              <div className="flex flex-col gap-2">
+                                <Link
+                                  href="/quizzes"
+                                  onClick={onClose}
+                                  className={cn(
+                                    'flex items-center gap-3 rounded-lg px-4 py-3',
+                                    'bg-gray-50 dark:bg-neutral-800',
+                                    'hover:bg-gray-100 dark:hover:bg-neutral-700',
+                                    'transition-colors',
+                                    'text-left'
+                                  )}
+                                >
+                                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
+                                    <BookOpen className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+                                  </div>
+                                  <div>
+                                    <p className="text-sm font-medium text-gray-900 dark:text-white">
+                                      {messages.rateLimit.takeQuiz}
+                                    </p>
+                                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                                      {messages.rateLimit.takeQuizHint}
+                                    </p>
+                                  </div>
+                                </Link>
+                                <a
+                                  href="https://github.com/DevLoversTeam"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className={cn(
+                                    'flex items-center gap-3 rounded-lg px-4 py-3',
+                                    'bg-gray-50 dark:bg-neutral-800',
+                                    'hover:bg-gray-100 dark:hover:bg-neutral-700',
+                                    'transition-colors',
+                                    'text-left'
+                                  )}
+                                >
+                                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900/30">
+                                    <Star className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
+                                  </div>
+                                  <div>
+                                    <p className="text-sm font-medium text-gray-900 dark:text-white">
+                                      {messages.rateLimit.starGithub}
+                                    </p>
+                                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                                      {messages.rateLimit.starGithubHint}
+                                    </p>
+                                  </div>
+                                </a>
+                              </div>
+                            ) : (
+                              // After 3+ attempts: Sponsor & Review
+                              <div className="flex flex-col gap-2">
+                                <a
+                                  href="https://github.com/sponsors/DevLoversTeam"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className={cn(
+                                    'flex items-center gap-3 rounded-lg px-4 py-3',
+                                    'bg-gradient-to-r from-pink-50 to-purple-50 dark:from-pink-900/20 dark:to-purple-900/20',
+                                    'hover:from-pink-100 hover:to-purple-100 dark:hover:from-pink-900/30 dark:hover:to-purple-900/30',
+                                    'border border-pink-200 dark:border-pink-800',
+                                    'transition-colors',
+                                    'text-left'
+                                  )}
+                                >
+                                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-100 dark:bg-pink-900/30">
+                                    <Heart className="h-5 w-5 text-pink-600 dark:text-pink-400" />
+                                  </div>
+                                  <div>
+                                    <p className="text-sm font-medium text-gray-900 dark:text-white">
+                                      {messages.rateLimit.becomeSponsor}
+                                    </p>
+                                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                                      {messages.rateLimit.becomeSponsorHint}
+                                    </p>
+                                  </div>
+                                </a>
+                                <a
+                                  href="https://github.com/DevLoversTeam"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className={cn(
+                                    'flex items-center gap-3 rounded-lg px-4 py-3',
+                                    'bg-gray-50 dark:bg-neutral-800',
+                                    'hover:bg-gray-100 dark:hover:bg-neutral-700',
+                                    'transition-colors',
+                                    'text-left'
+                                  )}
+                                >
+                                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 dark:bg-neutral-700">
+                                    <Github className="h-5 w-5 text-gray-700 dark:text-gray-300" />
+                                  </div>
+                                  <div>
+                                    <p className="text-sm font-medium text-gray-900 dark:text-white">
+                                      {messages.rateLimit.writeReview}
+                                    </p>
+                                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                                      {messages.rateLimit.writeReviewHint}
+                                    </p>
+                                  </div>
+                                </a>
+                              </div>
+                            )}
+                          </div>
+                        </>
+                      ) : error === 'SERVICE_UNAVAILABLE' ? (
+                        <>
+                          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
+                            {serviceErrorState.retryAttempts >= 3 ? (
+                              <Wrench className="h-8 w-8 text-blue-600 dark:text-blue-400" />
+                            ) : (
+                              <CloudOff className="h-8 w-8 text-blue-600 dark:text-blue-400" />
+                            )}
+                          </div>
+                          <div className="text-center">
+                            <p className="text-sm font-medium text-blue-700 dark:text-blue-300">
+                              {serviceErrorState.retryAttempts >= 3
+                                ? messages.serviceError.persistent
+                                : messages.serviceError.title}
+                            </p>
+                            <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
+                              {serviceErrorState.retryAttempts >= 3
+                                ? messages.serviceError.persistentHint
+                                : messages.serviceError.hint}
+                            </p>
+                          </div>
+                          <button
+                            onClick={fetchExplanation}
+                            disabled={serviceErrorState.retryAttempts >= 5}
+                            className={cn(
+                              'flex items-center gap-2 rounded-lg px-4 py-2',
+                              'text-sm font-medium',
+                              'transition-colors',
+                              serviceErrorState.retryAttempts >= 5
+                                ? 'cursor-not-allowed bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
+                                : serviceErrorState.retryAttempts >= 3
+                                  ? 'bg-blue-500 text-white hover:bg-blue-600'
+                                  : 'bg-[var(--accent-primary)] text-white hover:bg-[var(--accent-hover)]'
+                            )}
+                          >
+                            {serviceErrorState.retryAttempts >= 5 ? (
+                              <>
+                                <Wrench className="h-4 w-4" />
+                                {messages.serviceError.fixing}
+                              </>
+                            ) : serviceErrorState.retryAttempts >= 3 ? (
+                              <>
+                                <Wrench className="h-4 w-4" />
+                                {messages.serviceError.working}
+                              </>
+                            ) : (
+                              <>
+                                <RefreshCw className="h-4 w-4" />
+                                {messages.serviceError.tryAgain}
+                              </>
+                            )}
+                          </button>
+                        </>
+                      ) : (
+                        <>
+                          <p className="text-sm text-red-600 dark:text-red-400">
+                            {messages.error}
                           </p>
-
-                          {rateLimitState.retryAttempts < 3 ? (
-                            // First suggestions: Take Quiz & Star GitHub
-                            <div className="flex flex-col gap-2">
-                              <Link
-                                href="/quizzes"
-                                onClick={onClose}
-                                className={cn(
-                                  'flex items-center gap-3 rounded-lg px-4 py-3',
-                                  'bg-gray-50 dark:bg-neutral-800',
-                                  'hover:bg-gray-100 dark:hover:bg-neutral-700',
-                                  'transition-colors',
-                                  'text-left'
-                                )}
-                              >
-                                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
-                                  <BookOpen className="h-5 w-5 text-blue-600 dark:text-blue-400" />
-                                </div>
-                                <div>
-                                  <p className="text-sm font-medium text-gray-900 dark:text-white">
-                                    {messages.rateLimit.takeQuiz}
-                                  </p>
-                                  <p className="text-xs text-gray-500 dark:text-gray-400">
-                                    {messages.rateLimit.takeQuizHint}
-                                  </p>
-                                </div>
-                              </Link>
-                              <a
-                                href="https://github.com/DevLoversTeam"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className={cn(
-                                  'flex items-center gap-3 rounded-lg px-4 py-3',
-                                  'bg-gray-50 dark:bg-neutral-800',
-                                  'hover:bg-gray-100 dark:hover:bg-neutral-700',
-                                  'transition-colors',
-                                  'text-left'
-                                )}
-                              >
-                                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900/30">
-                                  <Star className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
-                                </div>
-                                <div>
-                                  <p className="text-sm font-medium text-gray-900 dark:text-white">
-                                    {messages.rateLimit.starGithub}
-                                  </p>
-                                  <p className="text-xs text-gray-500 dark:text-gray-400">
-                                    {messages.rateLimit.starGithubHint}
-                                  </p>
-                                </div>
-                              </a>
-                            </div>
-                          ) : (
-                            // After 3+ attempts: Sponsor & Review
-                            <div className="flex flex-col gap-2">
-                              <a
-                                href="https://github.com/sponsors/DevLoversTeam"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className={cn(
-                                  'flex items-center gap-3 rounded-lg px-4 py-3',
-                                  'bg-gradient-to-r from-pink-50 to-purple-50 dark:from-pink-900/20 dark:to-purple-900/20',
-                                  'hover:from-pink-100 hover:to-purple-100 dark:hover:from-pink-900/30 dark:hover:to-purple-900/30',
-                                  'border border-pink-200 dark:border-pink-800',
-                                  'transition-colors',
-                                  'text-left'
-                                )}
-                              >
-                                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-100 dark:bg-pink-900/30">
-                                  <Heart className="h-5 w-5 text-pink-600 dark:text-pink-400" />
-                                </div>
-                                <div>
-                                  <p className="text-sm font-medium text-gray-900 dark:text-white">
-                                    {messages.rateLimit.becomeSponsor}
-                                  </p>
-                                  <p className="text-xs text-gray-500 dark:text-gray-400">
-                                    {messages.rateLimit.becomeSponsorHint}
-                                  </p>
-                                </div>
-                              </a>
-                              <a
-                                href="https://github.com/DevLoversTeam"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className={cn(
-                                  'flex items-center gap-3 rounded-lg px-4 py-3',
-                                  'bg-gray-50 dark:bg-neutral-800',
-                                  'hover:bg-gray-100 dark:hover:bg-neutral-700',
-                                  'transition-colors',
-                                  'text-left'
-                                )}
-                              >
-                                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 dark:bg-neutral-700">
-                                  <Github className="h-5 w-5 text-gray-700 dark:text-gray-300" />
-                                </div>
-                                <div>
-                                  <p className="text-sm font-medium text-gray-900 dark:text-white">
-                                    {messages.rateLimit.writeReview}
-                                  </p>
-                                  <p className="text-xs text-gray-500 dark:text-gray-400">
-                                    {messages.rateLimit.writeReviewHint}
-                                  </p>
-                                </div>
-                              </a>
-                            </div>
-                          )}
-                        </div>
-                      </>
-                    ) : error === 'SERVICE_UNAVAILABLE' ? (
-                      <>
-                        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
-                          {serviceErrorState.retryAttempts >= 3 ? (
-                            <Wrench className="h-8 w-8 text-blue-600 dark:text-blue-400" />
-                          ) : (
-                            <CloudOff className="h-8 w-8 text-blue-600 dark:text-blue-400" />
-                          )}
-                        </div>
-                        <div className="text-center">
-                          <p className="text-sm font-medium text-blue-700 dark:text-blue-300">
-                            {serviceErrorState.retryAttempts >= 3
-                              ? messages.serviceError.persistent
-                              : messages.serviceError.title}
-                          </p>
-                          <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                            {serviceErrorState.retryAttempts >= 3
-                              ? messages.serviceError.persistentHint
-                              : messages.serviceError.hint}
-                          </p>
-                        </div>
-                        <button
-                          onClick={fetchExplanation}
-                          disabled={serviceErrorState.retryAttempts >= 5}
-                          className={cn(
-                            'flex items-center gap-2 rounded-lg px-4 py-2',
-                            'text-sm font-medium',
-                            'transition-colors',
-                            serviceErrorState.retryAttempts >= 5
-                              ? 'cursor-not-allowed bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
-                              : serviceErrorState.retryAttempts >= 3
-                                ? 'bg-blue-500 text-white hover:bg-blue-600'
-                                : 'bg-[var(--accent-primary)] text-white hover:bg-[var(--accent-hover)]'
-                          )}
-                        >
-                          {serviceErrorState.retryAttempts >= 5 ? (
-                            <>
-                              <Wrench className="h-4 w-4" />
-                              {messages.serviceError.fixing}
-                            </>
-                          ) : serviceErrorState.retryAttempts >= 3 ? (
-                            <>
-                              <Wrench className="h-4 w-4" />
-                              {messages.serviceError.working}
-                            </>
-                          ) : (
-                            <>
-                              <RefreshCw className="h-4 w-4" />
-                              {messages.serviceError.tryAgain}
-                            </>
-                          )}
-                        </button>
-                      </>
-                    ) : (
-                      <>
-                        <p className="text-sm text-red-600 dark:text-red-400">
-                          {messages.error}
-                        </p>
-                        <button
-                          onClick={fetchExplanation}
-                          className={cn(
-                            'flex items-center gap-2 rounded-lg px-4 py-2',
-                            'bg-[var(--accent-primary)] text-white',
-                            'hover:bg-[var(--accent-hover)]',
-                            'transition-colors',
-                            'text-sm font-medium'
-                          )}
-                        >
-                          <RefreshCw className="h-4 w-4" />
-                          {messages.retry}
-                        </button>
-                      </>
-                    )}
-                  </div>
-                );
-              })()}
+                          <button
+                            onClick={fetchExplanation}
+                            className={cn(
+                              'flex items-center gap-2 rounded-lg px-4 py-2',
+                              'bg-[var(--accent-primary)] text-white',
+                              'hover:bg-[var(--accent-hover)]',
+                              'transition-colors',
+                              'text-sm font-medium'
+                            )}
+                          >
+                            <RefreshCw className="h-4 w-4" />
+                            {messages.retry}
+                          </button>
+                        </>
+                      )}
+                    </div>
+                  );
+                })()}
 
               {explanation && !isLoading && !error && (
                 <div className="prose prose-sm max-w-none dark:prose-invert">
diff --git a/frontend/components/q&a/AccordionList.tsx b/frontend/components/q&a/AccordionList.tsx
index 93fdf257..bd642099 100644
--- a/frontend/components/q&a/AccordionList.tsx
+++ b/frontend/components/q&a/AccordionList.tsx
@@ -82,7 +82,6 @@ function renderTextNode(
 ): ReactNode {
   const { text, bold, italic, code, boldItalic } = node;
 
-  // Render text with optional highlighting
   const renderText = (content: string) => {
     if (highlight && highlight.cachedTerms.size > 0) {
       return (
@@ -370,7 +369,8 @@ export default function AccordionList({ items }: { items: QuestionEntry[] }) {
         {items.map((q, idx) => {
           const key = q.id ?? idx;
           const accent =
-            categoryTabStyles[q.category as keyof typeof categoryTabStyles]?.accent;
+            categoryTabStyles[q.category as keyof typeof categoryTabStyles]
+              ?.accent;
           return (
             <AccordionItem
               key={key}
@@ -402,7 +402,6 @@ export default function AccordionList({ items }: { items: QuestionEntry[] }) {
         })}
       </Accordion>
 
-
       {selectedText && buttonPosition && !modalOpen && (
         <FloatingExplainButton
           position={buttonPosition}
@@ -411,7 +410,6 @@ export default function AccordionList({ items }: { items: QuestionEntry[] }) {
         />
       )}
 
-
       <AIWordHelper
         term={selectedText || ''}
         isOpen={modalOpen}
diff --git a/frontend/components/q&a/SelectableText.tsx b/frontend/components/q&a/SelectableText.tsx
index 02075661..f864d6e0 100644
--- a/frontend/components/q&a/SelectableText.tsx
+++ b/frontend/components/q&a/SelectableText.tsx
@@ -41,7 +41,6 @@ export default function SelectableText({
         return;
       }
 
-      // Check if selection is within our container
       if (containerRef.current) {
         const range = selection.getRangeAt(0);
         const selectionContainer = range.commonAncestorContainer;
@@ -61,7 +60,6 @@ export default function SelectableText({
       }
     };
 
-    // Use selectionchange event - works on desktop (mouse/keyboard) and mobile (touch)
     document.addEventListener('selectionchange', handleSelectionChange);
 
     return () => {
diff --git a/frontend/components/quiz/CountdownTimer.tsx b/frontend/components/quiz/CountdownTimer.tsx
index c6d19451..18aec648 100644
--- a/frontend/components/quiz/CountdownTimer.tsx
+++ b/frontend/components/quiz/CountdownTimer.tsx
@@ -20,17 +20,17 @@ export function CountdownTimer({
 }: CountdownTimerProps) {
   const t = useTranslations('quiz.timer');
   const endTime = startedAt.getTime() + timeLimitSeconds * 1000;
-  const [remainingSeconds, setRemainingSeconds] = useState(() => 
+  const [remainingSeconds, setRemainingSeconds] = useState(() =>
     Math.max(0, Math.floor((endTime - Date.now()) / 1000))
   );
-  
+
   useEffect(() => {
     if (!isActive) return;
 
     const interval = setInterval(() => {
       const now = Date.now();
       const remaining = Math.max(0, Math.floor((endTime - now) / 1000));
-      
+
       setRemainingSeconds(remaining);
 
       if (remaining === 0) {
@@ -42,19 +42,22 @@ export function CountdownTimer({
     return () => clearInterval(interval);
   }, [isActive, onTimeUp, endTime]);
 
-  // Force update when tab becomes visible again
   useEffect(() => {
     if (!isActive) return;
 
     const handleVisibilityChange = () => {
       if (!document.hidden) {
-        const remaining = Math.max(0, Math.floor((endTime - Date.now()) / 1000));
+        const remaining = Math.max(
+          0,
+          Math.floor((endTime - Date.now()) / 1000)
+        );
         setRemainingSeconds(remaining);
       }
     };
 
     document.addEventListener('visibilitychange', handleVisibilityChange);
-    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+    return () =>
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
   }, [isActive, endTime]);
 
   const minutes = Math.floor(remainingSeconds / 60);
@@ -68,7 +71,7 @@ export function CountdownTimer({
     if (percentage <= 30) {
       return 'text-yellow-600 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 dark:border-yellow-800';
     }
-return 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800';
+    return 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800';
   };
 
   const getProgressBarColor = () => {
@@ -80,11 +83,13 @@ return 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-950/30 bord
   if (!isActive) return null;
 
   return (
-    <div className={cn(
-      'rounded-lg border-2 p-4 transition-all',
-      getColorClasses(),
-      percentage <= 10 && 'animate-pulse'
-    )}>
+    <div
+      className={cn(
+        'rounded-lg border-2 p-4 transition-all',
+        getColorClasses(),
+        percentage <= 10 && 'animate-pulse'
+      )}
+    >
       <div className="flex items-center justify-between mb-2">
         <span className="text-sm font-medium">{t('label')}</span>
         <span className="text-2xl font-bold font-mono">
@@ -106,7 +111,8 @@ return 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-950/30 bord
         <p className="text-xs mt-2 font-medium">
           {percentage <= 10 ? (
             <>
-              <AlertTriangle className="w-4 h-4 inline text-amber-500" /> {t('almostDone')}
+              <AlertTriangle className="w-4 h-4 inline text-amber-500" />{' '}
+              {t('almostDone')}
             </>
           ) : (
             <>
diff --git a/frontend/components/quiz/QuizContainer.tsx b/frontend/components/quiz/QuizContainer.tsx
index 07ff51e6..cdaa04ed 100644
--- a/frontend/components/quiz/QuizContainer.tsx
+++ b/frontend/components/quiz/QuizContainer.tsx
@@ -2,7 +2,13 @@
 
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useReducer, useTransition, useState, useEffect, useCallback } from 'react';
+import {
+  useReducer,
+  useTransition,
+  useState,
+  useEffect,
+  useCallback,
+} from 'react';
 import { toast } from 'sonner';
 import { useAntiCheat } from '@/hooks/useAntiCheat';
 import { useQuizSession } from '@/hooks/useQuizSession';
@@ -12,7 +18,10 @@ import { QuizQuestion } from './QuizQuestion';
 import { QuizResult } from './QuizResult';
 import { CountdownTimer } from './CountdownTimer';
 import { submitQuizAttempt } from '@/actions/quiz';
-import { clearQuizSession, type QuizSessionData } from '@/lib/quiz/quiz-session';
+import {
+  clearQuizSession,
+  type QuizSessionData,
+} from '@/lib/quiz/quiz-session';
 import { savePendingQuizResult } from '@/lib/quiz/guest-quiz';
 import type { QuizQuestionClient } from '@/db/queries/quiz';
 import { ConfirmModal } from '@/components/ui/confirm-modal';
@@ -41,15 +50,17 @@ type QuizState = {
 type QuizAction =
   | { type: 'START_QUIZ' }
   | {
-    type: 'ANSWER_SELECTED';
-    payload: { answerId: string; isCorrect: boolean; questionId: string;};
-  }
+      type: 'ANSWER_SELECTED';
+      payload: { answerId: string; isCorrect: boolean; questionId: string };
+    }
   | { type: 'NEXT_QUESTION' }
-  | { type: 'COMPLETE_QUIZ'; payload?: { pointsAwarded?: number; isIncomplete?: boolean } }
+  | {
+      type: 'COMPLETE_QUIZ';
+      payload?: { pointsAwarded?: number; isIncomplete?: boolean };
+    }
   | { type: 'RESTART' }
   | { type: 'RESTORE_SESSION'; payload: QuizSessionData };
 
-
 function quizReducer(state: QuizState, action: QuizAction): QuizState {
   switch (action.type) {
     case 'START_QUIZ':
@@ -104,7 +115,9 @@ function quizReducer(state: QuizState, action: QuizAction): QuizState {
         })),
         questionStatus: action.payload.questionStatus,
         selectedAnswerId: action.payload.selectedAnswerId,
-        startedAt: action.payload.startedAt ? new Date(action.payload.startedAt) : null,
+        startedAt: action.payload.startedAt
+          ? new Date(action.payload.startedAt)
+          : null,
       };
 
     case 'RESTART':
@@ -150,7 +163,9 @@ export function QuizContainer({
   const tRules = useTranslations('quiz.rules');
   const tExit = useTranslations('quiz.exitModal');
   const tQuestion = useTranslations('quiz.question');
-  const categoryStyle = categorySlug ? categoryTabStyles[categorySlug as keyof typeof categoryTabStyles] : null;
+  const categoryStyle = categorySlug
+    ? categoryTabStyles[categorySlug as keyof typeof categoryTabStyles]
+    : null;
   const accentColor = categoryStyle?.accent ?? '#3B82F6';
   const [isPending, startTransition] = useTransition();
   const [state, dispatch] = useReducer(quizReducer, {
@@ -169,7 +184,6 @@ export function QuizContainer({
   const locale = useLocale();
   const router = useRouter();
   const searchParams = useSearchParams();
-  
 
   const isGuest = userId === null;
   const { violations, violationsCount, resetViolations } = useAntiCheat(
@@ -179,26 +193,26 @@ export function QuizContainer({
   const totalQuestions = questions.length;
 
   const handleRestoreSession = useCallback(
-  (data: QuizSessionData) => dispatch({ type: 'RESTORE_SESSION', payload: data }),
-  []
-);
+    (data: QuizSessionData) =>
+      dispatch({ type: 'RESTORE_SESSION', payload: data }),
+    []
+  );
 
-useQuizSession({
-  quizId,
-  state,
-  onRestore: handleRestoreSession,
-});
+  useQuizSession({
+    quizId,
+    state,
+    onRestore: handleRestoreSession,
+  });
+
+  const { markQuitting } = useQuizGuards({
+    quizId,
+    status: state.status,
+    onExit: () => {
+      router.back();
+    },
+    resetViolations,
+  });
 
-const { markQuitting } = useQuizGuards({
-  quizId,
-  status: state.status,
-  onExit: () => {
-    router.back();
-  },
-  resetViolations,
-});
-
-  // Sync seed to URL for language switch persistence
   useEffect(() => {
     if (!searchParams.has('seed')) {
       const params = new URLSearchParams(searchParams.toString());
@@ -207,76 +221,74 @@ const { markQuitting } = useQuizGuards({
     }
   }, [seed, searchParams, router]);
 
-
   const handleStart = () => {
     window.history.pushState({ quizGuard: true }, '');
     dispatch({ type: 'START_QUIZ' });
   };
 
   const verifyAnswer = async (answerId: string) => {
-  const response = await fetch('/api/quiz/verify-answer', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      questionId: currentQuestion.id,
-      answerId,
-      encryptedAnswers,
-    }),
-  });
-
-  if (!response.ok) {
-    throw new Error('Verify answer failed');
-  }
+    const response = await fetch('/api/quiz/verify-answer', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        questionId: currentQuestion.id,
+        answerId,
+        encryptedAnswers,
+      }),
+    });
 
-  const data = await response.json();
+    if (!response.ok) {
+      throw new Error('Verify answer failed');
+    }
 
-  if (typeof data.isCorrect !== 'boolean') {
-    throw new Error('Invalid verify response');
-  }
+    const data = await response.json();
 
-  return data.isCorrect;
-};
+    if (typeof data.isCorrect !== 'boolean') {
+      throw new Error('Invalid verify response');
+    }
 
-const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+    return data.isCorrect;
+  };
 
+  const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
-const handleAnswer = async (answerId: string) => {
-  if (state.questionStatus !== 'answering') return;
-  if (isVerifyingAnswer) return;
+  const handleAnswer = async (answerId: string) => {
+    if (state.questionStatus !== 'answering') return;
+    if (isVerifyingAnswer) return;
 
-  setIsVerifyingAnswer(true);
+    setIsVerifyingAnswer(true);
 
-  const maxRetries = 1;
-  let attempt = 0;
+    const maxRetries = 1;
+    let attempt = 0;
 
-  try {
-    while (true) {
-      try {
-        const isCorrect = await verifyAnswer(answerId);
+    try {
+      while (true) {
+        try {
+          const isCorrect = await verifyAnswer(answerId);
 
-        dispatch({
-          type: 'ANSWER_SELECTED',
-          payload: {
-            answerId,
-            isCorrect,
-            questionId: currentQuestion.id,
-          },
-        });
-        return;
-      } catch {
-        if (attempt >= maxRetries) {
-          toast.error(tQuestion('verifyFailed'));
+          dispatch({
+            type: 'ANSWER_SELECTED',
+            payload: {
+              answerId,
+              isCorrect,
+              questionId: currentQuestion.id,
+            },
+          });
           return;
+        } catch {
+          if (attempt >= maxRetries) {
+            toast.error(tQuestion('verifyFailed'));
+            return;
+          }
+          attempt += 1;
+          toast(tQuestion('verifyRetry'));
+          await sleep(600);
         }
-        attempt += 1;
-        toast(tQuestion('verifyRetry'));
-        await sleep(600);
       }
+    } finally {
+      setIsVerifyingAnswer(false);
     }
-  } finally {
-    setIsVerifyingAnswer(false);
-  }
-};
+  };
 
   const handleNext = () => {
     if (state.currentIndex + 1 >= totalQuestions) {
@@ -290,7 +302,7 @@ const handleAnswer = async (answerId: string) => {
     clearQuizSession(quizId);
 
     const isIncomplete = state.answers.length < totalQuestions;
-    
+
     const correctAnswers = state.answers.filter(a => a.isCorrect).length;
     const percentage = (correctAnswers / totalQuestions) * 100;
     const timeSpentSeconds = state.startedAt
@@ -314,7 +326,10 @@ const handleAnswer = async (answerId: string) => {
         score: correctAnswers,
         totalQuestions,
         percentage,
-        violations: violations.map(v => ({ type: v.type, timestamp: v.timestamp.getTime() })),
+        violations: violations.map(v => ({
+          type: v.type,
+          timestamp: v.timestamp.getTime(),
+        })),
         timeSpentSeconds,
         savedAt: Date.now(),
       });
@@ -335,7 +350,7 @@ const handleAnswer = async (answerId: string) => {
       if (result.success) {
         dispatch({
           type: 'COMPLETE_QUIZ',
-          payload: { pointsAwarded: result.pointsAwarded ?? 0 }
+          payload: { pointsAwarded: result.pointsAwarded ?? 0 },
         });
       } else {
         console.error('Failed to submit quiz:', result.error);
@@ -350,18 +365,17 @@ const handleAnswer = async (answerId: string) => {
     dispatch({ type: 'RESTART' });
   };
 
-const handleQuit = () => {
-  setShowExitModal(true);
-};
-
-const confirmQuit = () => {
-  markQuitting();
-  clearQuizSession(quizId);
-  resetViolations();
-  const categoryParam = categorySlug ? `?category=${categorySlug}` : '';
-  window.location.href = `/${locale}/quizzes${categoryParam}`;
-};
+  const handleQuit = () => {
+    setShowExitModal(true);
+  };
 
+  const confirmQuit = () => {
+    markQuitting();
+    clearQuizSession(quizId);
+    resetViolations();
+    const categoryParam = categorySlug ? `?category=${categorySlug}` : '';
+    window.location.href = `/${locale}/quizzes${categoryParam}`;
+  };
 
   const handleTimeUp = () => {
     handleSubmit();
@@ -383,7 +397,7 @@ const confirmQuit = () => {
         </h2>
 
         <div className="space-y-4 text-gray-700 dark:text-gray-300">
-                   <div className="flex gap-3">
+          <div className="flex gap-3">
             <FileText className="w-5 h-5 text-blue-500 dark:text-blue-400 flex-shrink-0 mt-0.5" />
             <div>
               <p className="font-medium">{tRules('general.title')}</p>
@@ -425,21 +439,21 @@ const confirmQuit = () => {
             </div>
           </div>
         </div>
-          <button
-            onClick={handleStart}
-            className="group relative w-full overflow-hidden text-center rounded-xl border px-6 py-3 text-base font-semibold transition-all duration-300"
-            style={{
-              borderColor: `${accentColor}50`,
-              backgroundColor: `${accentColor}15`,
-              color: accentColor,
-            }}
-          >
-            {tRules('startButton')}
-            <span
-              className="pointer-events-none absolute left-1/2 top-1/2 h-[150%] w-[80%] -translate-x-1/2 -translate-y-1/2 rounded-full blur-[20px] opacity-0 transition-opacity duration-300 group-hover:opacity-30"
-              style={{ backgroundColor: accentColor }}
-            />
-          </button>
+        <button
+          onClick={handleStart}
+          className="group relative w-full overflow-hidden text-center rounded-xl border px-6 py-3 text-base font-semibold transition-all duration-300"
+          style={{
+            borderColor: `${accentColor}50`,
+            backgroundColor: `${accentColor}15`,
+            color: accentColor,
+          }}
+        >
+          {tRules('startButton')}
+          <span
+            className="pointer-events-none absolute left-1/2 top-1/2 h-[150%] w-[80%] -translate-x-1/2 -translate-y-1/2 rounded-full blur-[20px] opacity-0 transition-opacity duration-300 group-hover:opacity-30"
+            style={{ backgroundColor: accentColor }}
+          />
+        </button>
       </div>
     );
   }
@@ -469,16 +483,26 @@ const confirmQuit = () => {
     <div className="space-y-8 no-select">
       <div className="flex justify-end">
         <Button
-            variant="outline"
-            size="sm"
-            onClick={handleQuit}
-            className="gap-2 hover:border-red-500 hover:text-red-600 dark:hover:text-red-400"
+          variant="outline"
+          size="sm"
+          onClick={handleQuit}
+          className="gap-2 hover:border-red-500 hover:text-red-600 dark:hover:text-red-400"
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
           >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-            </svg>
-            Exit Quiz
-          </Button>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+            />
+          </svg>
+          Exit Quiz
+        </Button>
       </div>
       <QuizProgress
         current={state.currentIndex}
@@ -487,7 +511,7 @@ const confirmQuit = () => {
       />
 
       {(() => {
-        const calculatedTime = timeLimitSeconds ?? (totalQuestions * 30);
+        const calculatedTime = timeLimitSeconds ?? totalQuestions * 30;
         return (
           <CountdownTimer
             timeLimitSeconds={calculatedTime}
@@ -502,7 +526,10 @@ const confirmQuit = () => {
         question={currentQuestion}
         status={state.questionStatus}
         selectedAnswerId={state.selectedAnswerId}
-        isCorrect={state.answers.find(a => a.questionId === currentQuestion.id)?.isCorrect ?? false}
+        isCorrect={
+          state.answers.find(a => a.questionId === currentQuestion.id)
+            ?.isCorrect ?? false
+        }
         onAnswer={handleAnswer}
         onNext={handleNext}
         isLoading={isPending}
diff --git a/frontend/components/shared/HeaderButton.tsx b/frontend/components/shared/HeaderButton.tsx
index c9bd8de1..24f47938 100644
--- a/frontend/components/shared/HeaderButton.tsx
+++ b/frontend/components/shared/HeaderButton.tsx
@@ -15,10 +15,6 @@ interface HeaderButtonProps {
 
   label?: string;
 
-  /**
-   * Optional badge rendered OUTSIDE the overflow-hidden button/link,
-   * so it will not be clipped by the shine/gradient container.
-   */
   badge?: React.ReactNode;
   badgeClassName?: string;
   badgeAriaLabel?: string;
diff --git a/frontend/components/shop/add-to-cart-button.tsx b/frontend/components/shop/add-to-cart-button.tsx
index f333952d..7cdfb619 100644
--- a/frontend/components/shop/add-to-cart-button.tsx
+++ b/frontend/components/shop/add-to-cart-button.tsx
@@ -64,7 +64,6 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
       'linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff)',
   };
 
-  // ids for proper grouping semantics (no behavior changes)
   const colorGroupId = useId();
   const sizeGroupId = useId();
   const quantityGroupId = useId();
@@ -77,7 +76,6 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
 
   return (
     <section className="mt-8 space-y-6" aria-label={t('purchaseOptions')}>
-      {/* Colors */}
       {product.colors && product.colors.length > 0 ? (
         <fieldset className="min-w-0">
           <legend
@@ -124,7 +122,6 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         </fieldset>
       ) : null}
 
-      {/* Sizes */}
       {product.sizes && product.sizes.length > 0 ? (
         <fieldset className="min-w-0">
           <legend
@@ -162,7 +159,6 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         </fieldset>
       ) : null}
 
-      {/* Quantity */}
       <section aria-labelledby={quantityGroupId}>
         <h3
           id={quantityGroupId}
@@ -206,7 +202,6 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         </div>
       </section>
 
-      {/* Add to Cart Button */}
       <button
         type="button"
         onClick={handleAddToCart}
@@ -215,7 +210,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
           SHOP_CTA_BASE,
           SHOP_FOCUS,
           'w-full justify-center gap-2 px-8 py-3',
-          'transition-[transform,filter] duration-700 ease-out', // transform/filter для active states
+          'transition-[transform,filter] duration-700 ease-out',
           !product.inStock &&
             'cursor-not-allowed bg-muted text-muted-foreground',
           product.inStock &&
diff --git a/frontend/components/shop/admin/admin-pagination.tsx b/frontend/components/shop/admin/admin-pagination.tsx
index c4535a3c..a929f440 100644
--- a/frontend/components/shop/admin/admin-pagination.tsx
+++ b/frontend/components/shop/admin/admin-pagination.tsx
@@ -3,14 +3,14 @@ import { cn } from '@/lib/utils';
 import { getTranslations } from 'next-intl/server';
 
 type AdminPaginationProps = {
-  basePath: string; // e.g. "/shop/admin/products"
+  basePath: string;
   page: number;
   hasNext: boolean;
   className?: string;
 };
 
 function pageHref(basePath: string, page: number) {
-  if (page <= 1) return basePath; // canonical without ?page=1
+  if (page <= 1) return basePath;
   return `${basePath}?page=${page}`;
 }
 
diff --git a/frontend/components/shop/admin/admin-product-delete-button.tsx b/frontend/components/shop/admin/admin-product-delete-button.tsx
index 5ee73c69..a71d220a 100644
--- a/frontend/components/shop/admin/admin-product-delete-button.tsx
+++ b/frontend/components/shop/admin/admin-product-delete-button.tsx
@@ -75,7 +75,6 @@ export function AdminProductDeleteButton({
         return;
       }
 
-      // refresh server component data
       router.refresh();
     } catch {
       setError(t('failedDelete'));
diff --git a/frontend/components/shop/cart-provider.tsx b/frontend/components/shop/cart-provider.tsx
index cf3802db..14e4354e 100644
--- a/frontend/components/shop/cart-provider.tsx
+++ b/frontend/components/shop/cart-provider.tsx
@@ -92,14 +92,12 @@ export function CartProvider({ children }: CartProviderProps) {
     } catch (error) {
       const info = getErrorInfo(error);
 
-      // Self-heal: missing price for locale currency (e.g., uk => UAH) should not crash UI.
       if (info.code === 'PRICE_CONFIG_ERROR') {
         const productId =
           typeof (info.details as any)?.productId === 'string'
             ? String((info.details as any).productId)
             : '';
 
-        // Best-effort: remove only the problematic product (if identified), retry once.
         if (productId) {
           const filtered = items.filter(i => i.productId !== productId);
 
@@ -127,7 +125,6 @@ export function CartProvider({ children }: CartProviderProps) {
           }
         }
 
-        // Fallback: clear cart to unblock the user.
         clearStoredCart();
         setCart(emptyCart);
 
@@ -140,7 +137,6 @@ export function CartProvider({ children }: CartProviderProps) {
         return;
       }
 
-      // Non-blocking: keep current cart state (avoid crashing the page).
       logWarn('cart_rehydrate_failed_client', {
         code: info.code,
         message: info.message,
@@ -156,7 +152,6 @@ export function CartProvider({ children }: CartProviderProps) {
 
     const stored = getStoredCartItems();
 
-    // Defer to avoid "setState in effect" lint rules without changing runtime behavior meaningfully.
     void Promise.resolve().then(() => syncCartWithServer(stored));
   }, [syncCartWithServer]);
 
diff --git a/frontend/components/shop/product-card.tsx b/frontend/components/shop/product-card.tsx
index 9a4245b3..51bacbc5 100644
--- a/frontend/components/shop/product-card.tsx
+++ b/frontend/components/shop/product-card.tsx
@@ -9,17 +9,15 @@ import { formatMoney } from '@/lib/shop/currency';
 import { useTranslations } from 'next-intl';
 
 const PLACEHOLDER = '/placeholder.svg';
-const allowedHosts = new Set(['res.cloudinary.com', 'cdn.sanity.io']); // додай/прибери за потреби
+const allowedHosts = new Set(['res.cloudinary.com', 'cdn.sanity.io']);
 
 function safeImageSrc(raw?: string | null) {
   if (!raw || raw.trim().length === 0) return PLACEHOLDER;
 
   const s = raw.trim();
 
-  // public/*
   if (s.startsWith('/')) return s;
 
-  // remote
   if (s.startsWith('http://') || s.startsWith('https://')) {
     try {
       const u = new URL(s);
diff --git a/frontend/components/shop/product-filters.tsx b/frontend/components/shop/product-filters.tsx
index 0d8226f2..bb538ac3 100644
--- a/frontend/components/shop/product-filters.tsx
+++ b/frontend/components/shop/product-filters.tsx
@@ -84,7 +84,6 @@ export function ProductFilters() {
         </ul>
       </section>
 
-      {/* Type */}
       <section aria-labelledby={typeGroupId}>
         <h3
           id={typeGroupId}
@@ -121,7 +120,6 @@ export function ProductFilters() {
         </ul>
       </section>
 
-      {/* Color */}
       <section aria-labelledby={colorGroupId}>
         <h3
           id={colorGroupId}
@@ -145,7 +143,6 @@ export function ProductFilters() {
                 aria-pressed={isSelected}
                 className={cn(
                   SHOP_SWATCH_BASE,
-                  // у фільтрах розмір 8x8, тому override:
                   'h-8 w-8',
                   SHOP_CHIP_INTERACTIVE,
                   SHOP_FOCUS,
@@ -162,7 +159,6 @@ export function ProductFilters() {
         </div>
       </section>
 
-      {/* Size */}
       <section aria-labelledby={sizeGroupId}>
         <h3
           id={sizeGroupId}
@@ -183,7 +179,6 @@ export function ProductFilters() {
                 aria-pressed={isSelected}
                 className={cn(
                   SHOP_SIZE_CHIP_BASE,
-                  // у фільтрах інші паддінги — override:
                   'px-3 py-1.5 text-sm',
                   SHOP_CHIP_INTERACTIVE,
                   SHOP_FOCUS,
diff --git a/frontend/components/shop/product-sort.tsx b/frontend/components/shop/product-sort.tsx
index 8aae175c..6476bc4c 100644
--- a/frontend/components/shop/product-sort.tsx
+++ b/frontend/components/shop/product-sort.tsx
@@ -1,5 +1,3 @@
-// frontend/components/shop/product-sort.tsx
-
 'use client';
 
 import { useId } from 'react';
@@ -26,7 +24,6 @@ export function ProductSort({ className }: ProductSortProps) {
   const t = useTranslations('shop.sort');
   const tOptions = useTranslations('shop.catalog.sort');
 
-  // IMPORTANT: when using '@/i18n/routing' router, do NOT prefix locale manually.
   const basePath = '/shop/products';
 
   const currentSort = searchParams.get('sort') || 'featured';
diff --git a/frontend/components/shop/products-toolbar.tsx b/frontend/components/shop/products-toolbar.tsx
index c3efbfcd..e8f2a3d6 100644
--- a/frontend/components/shop/products-toolbar.tsx
+++ b/frontend/components/shop/products-toolbar.tsx
@@ -31,7 +31,6 @@ export function ProductsToolbar() {
 
     return Array.from(root.querySelectorAll<HTMLElement>(selectors)).filter(
       el => {
-        // ignore elements that are not actually visible/clickable
         const style = window.getComputedStyle(el);
         return style.visibility !== 'hidden' && style.display !== 'none';
       }
@@ -83,7 +82,6 @@ export function ProductsToolbar() {
 
       const focusables = getFocusable(dialogEl);
       if (focusables.length === 0) {
-        // if nothing is focusable, keep focus on dialog itself
         e.preventDefault();
         dialogEl.focus();
         return;
@@ -93,7 +91,6 @@ export function ProductsToolbar() {
       const first = focusables[0]!;
       const last = focusables[focusables.length - 1]!;
 
-      // If focus somehow escaped, pull it back in.
       if (!active || !dialogEl.contains(active)) {
         e.preventDefault();
         (e.shiftKey ? last : first).focus();
@@ -116,7 +113,6 @@ export function ProductsToolbar() {
     document.documentElement.classList.add('overflow-hidden');
 
     requestAnimationFrame(() => {
-      // prefer close button, else first focusable, else dialog
       const closeEl = closeBtnRef.current;
       if (closeEl) closeEl.focus();
       else focusFirst();
@@ -131,7 +127,6 @@ export function ProductsToolbar() {
 
   return (
     <>
-      {/* No w-full here: on mobile header stretches items; on desktop it stays content-sized (fixes "center gap"). */}
       <div
         role="group"
         aria-label={t('label')}
@@ -193,7 +188,6 @@ export function ProductsToolbar() {
             </div>
 
             <div className="px-4 py-6">
-              {/* Do NOT auto-close on every click */}
               <ProductFilters />
             </div>
           </div>
diff --git a/frontend/components/shop/shop-hero.tsx b/frontend/components/shop/shop-hero.tsx
index c76cba58..6e18f9fe 100644
--- a/frontend/components/shop/shop-hero.tsx
+++ b/frontend/components/shop/shop-hero.tsx
@@ -51,7 +51,6 @@ export function Hero({ headline, subheadline, ctaText, ctaLink }: HeroProps) {
     shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]
   `}
             >
-              {/* base gradient */}
               <span
                 className="absolute inset-0"
                 style={shopCtaGradient(
@@ -61,7 +60,6 @@ export function Hero({ headline, subheadline, ctaText, ctaLink }: HeroProps) {
                 aria-hidden="true"
               />
 
-              {/* hover wave overlay */}
               <span
                 className={SHOP_CTA_WAVE}
                 style={shopCtaGradient(
@@ -71,7 +69,6 @@ export function Hero({ headline, subheadline, ctaText, ctaLink }: HeroProps) {
                 aria-hidden="true"
               />
 
-              {/* glass inset */}
               <span className={SHOP_CTA_INSET} aria-hidden="true" />
 
               <span className="relative z-10 flex items-center gap-2">
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index ac4e4ac0..18117a5e 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -1,44 +1,40 @@
-  import * as React from 'react';
-  import { cn } from '@/lib/utils';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
 
-  export interface ButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'outline'| 'accent';
-    size?: 'sm' | 'md' | 'lg';
-  }
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'accent';
+  size?: 'sm' | 'md' | 'lg';
+}
 
-  const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant = 'primary', size = 'md', ...props }, ref) => {
-      return (
-        <button
-          className={cn(
-            // Base styles
-            'inline-flex items-center justify-center rounded-xl font-medium transition-colors',
-            'disabled:opacity-50 disabled:pointer-events-none',
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'primary', size = 'md', ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          'inline-flex items-center justify-center rounded-xl font-medium transition-colors',
+          'disabled:opacity-50 disabled:pointer-events-none',
 
-            // Variants
-            variant === 'accent' &&
-              'bg-accent text-accent-foreground hover:bg-accent/90',
-            variant === 'primary' &&
-              'bg-[var(--accent-primary)] text-white hover:bg-[var(--accent-hover)] active:brightness-90',
-            variant === 'secondary' &&
-              'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-700',
-            variant === 'outline' &&
-              'border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800',
+          variant === 'accent' &&
+            'bg-accent text-accent-foreground hover:bg-accent/90',
+          variant === 'primary' &&
+            'bg-[var(--accent-primary)] text-white hover:bg-[var(--accent-hover)] active:brightness-90',
+          variant === 'secondary' &&
+            'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-700',
+          variant === 'outline' &&
+            'border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800',
 
-            // Sizes
-            size === 'sm' && 'px-4 py-2 text-sm',
-            size === 'md' && 'px-6 py-3 text-base',
-            size === 'lg' && 'px-8 py-4 text-lg',
+          size === 'sm' && 'px-4 py-2 text-sm',
+          size === 'md' && 'px-6 py-3 text-base',
+          size === 'lg' && 'px-8 py-4 text-lg',
 
-            className
-          )}
-          ref={ref}
-          {...props}
-        />
-      );
-    }
-  );
-  Button.displayName = 'Button';
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
 
-  export { Button };
\ No newline at end of file
+export { Button };
diff --git a/frontend/components/ui/particle-canvas.tsx b/frontend/components/ui/particle-canvas.tsx
index 50b04c35..27cd2ea2 100644
--- a/frontend/components/ui/particle-canvas.tsx
+++ b/frontend/components/ui/particle-canvas.tsx
@@ -1,186 +1,189 @@
-"use client"
+'use client';
 
-import { useEffect, useRef } from "react"
+import { useEffect, useRef } from 'react';
 
 interface ParticleCanvasProps {
-  activeShape: "brackets" | "heart" | null
-  className?: string
+  activeShape: 'brackets' | 'heart' | null;
+  className?: string;
 }
 
 interface Point {
-  x: number
-  y: number
-  z: number
-  vx: number
-  vy: number
-  vz: number
-  floatX: number
-  floatY: number
-  floatVx: number
-  floatVy: number
+  x: number;
+  y: number;
+  z: number;
+  vx: number;
+  vy: number;
+  vz: number;
+  floatX: number;
+  floatY: number;
+  floatVx: number;
+  floatVy: number;
 }
 
 interface Point3D {
-  x: number
-  y: number
-  z: number
+  x: number;
+  y: number;
+  z: number;
 }
 
-// Generate Code Brackets {} shape
 function generateBracketsPoints(count: number): Point3D[] {
-  const points: Point3D[] = []
-  const halfCount = Math.floor(count / 2)
+  const points: Point3D[] = [];
+  const halfCount = Math.floor(count / 2);
 
   const generateBrace = (flipX: boolean) => {
     for (let i = 0; i < halfCount; i++) {
-      const t = (i / halfCount) * Math.PI * 2 - Math.PI
+      const t = (i / halfCount) * Math.PI * 2 - Math.PI;
 
-      let x: number
-      let y: number
+      let x: number;
+      let y: number;
 
       if (t < -Math.PI / 2) {
-        const localT = (t + Math.PI) / (Math.PI / 2)
-        x = 0.3 * Math.cos(localT * Math.PI / 2)
-        y = -0.8 + 0.3 * Math.sin(localT * Math.PI / 2)
+        const localT = (t + Math.PI) / (Math.PI / 2);
+        x = 0.3 * Math.cos((localT * Math.PI) / 2);
+        y = -0.8 + 0.3 * Math.sin((localT * Math.PI) / 2);
       } else if (t < 0) {
-        const localT = (t + Math.PI / 2) / (Math.PI / 2)
-        x = 0.3 - 0.5 * localT
-        y = -0.5 + 0.5 * localT
+        const localT = (t + Math.PI / 2) / (Math.PI / 2);
+        x = 0.3 - 0.5 * localT;
+        y = -0.5 + 0.5 * localT;
       } else if (t < Math.PI / 2) {
-        const localT = t / (Math.PI / 2)
-        x = -0.2 + 0.5 * localT
-        y = 0.5 * localT
+        const localT = t / (Math.PI / 2);
+        x = -0.2 + 0.5 * localT;
+        y = 0.5 * localT;
       } else {
-        const localT = (t - Math.PI / 2) / (Math.PI / 2)
-        x = 0.3 * Math.cos((1 - localT) * Math.PI / 2)
-        y = 0.5 + 0.3 * (1 - Math.cos(localT * Math.PI / 2))
+        const localT = (t - Math.PI / 2) / (Math.PI / 2);
+        x = 0.3 * Math.cos(((1 - localT) * Math.PI) / 2);
+        y = 0.5 + 0.3 * (1 - Math.cos((localT * Math.PI) / 2));
       }
 
-      const z = (Math.random() - 0.5) * 0.3
-      const finalX = flipX ? -x + 0.6 : x - 0.6
+      const z = (Math.random() - 0.5) * 0.3;
+      const finalX = flipX ? -x + 0.6 : x - 0.6;
 
       points.push({
         x: finalX + (Math.random() - 0.5) * 0.05,
         y: y + (Math.random() - 0.5) * 0.05,
         z: z,
-      })
+      });
     }
-  }
+  };
 
-  generateBrace(false)
-  generateBrace(true)
-  return points
+  generateBrace(false);
+  generateBrace(true);
+  return points;
 }
 
-// Generate 3D Heart shape
 function generateHeartPoints(count: number): Point3D[] {
-  const points: Point3D[] = []
-  const layers = 8
-  const pointsPerLayer = Math.floor(count / layers)
+  const points: Point3D[] = [];
+  const layers = 8;
+  const pointsPerLayer = Math.floor(count / layers);
 
   for (let layer = 0; layer < layers; layer++) {
-    const depthRatio = layer / (layers - 1)
-    const z = (depthRatio - 0.5) * 0.6
-    const layerScale = 1 - Math.abs(depthRatio - 0.5) * 0.3
+    const depthRatio = layer / (layers - 1);
+    const z = (depthRatio - 0.5) * 0.6;
+    const layerScale = 1 - Math.abs(depthRatio - 0.5) * 0.3;
 
     for (let i = 0; i < pointsPerLayer; i++) {
-      const t = (i / pointsPerLayer) * Math.PI * 2
-      const x = 16 * Math.pow(Math.sin(t), 3)
-      const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))
+      const t = (i / pointsPerLayer) * Math.PI * 2;
+      const x = 16 * Math.pow(Math.sin(t), 3);
+      const y = -(
+        13 * Math.cos(t) -
+        5 * Math.cos(2 * t) -
+        2 * Math.cos(3 * t) -
+        Math.cos(4 * t)
+      );
 
       points.push({
         x: (x / 17) * layerScale + (Math.random() - 0.5) * 0.08,
         y: (y / 17) * layerScale + (Math.random() - 0.5) * 0.08,
         z: z + (Math.random() - 0.5) * 0.08,
-      })
+      });
     }
   }
-  return points
+  return points;
 }
 
-const SHAPE_POINTS_BRACKETS = generateBracketsPoints(800)
-const SHAPE_POINTS_HEART = generateHeartPoints(800)
+const SHAPE_POINTS_BRACKETS = generateBracketsPoints(800);
+const SHAPE_POINTS_HEART = generateHeartPoints(800);
 
-// Smooth ease in-out
 function easeInOutCubic(t: number): number {
-  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 }
 
-export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const particles = useRef<Point[]>([])
-  const animationFrameId = useRef<number | undefined>(undefined)
-  const timeRef = useRef(0)
-  const lastTimeRef = useRef<number>(0)
-
-  // Simple transition: 0 = floating, 1 = shape
-  const transitionRef = useRef(0)
-  const targetTransitionRef = useRef(0)
-  const prevShapeRef = useRef<"brackets" | "heart" | null>(null)
-  const justLeftShapeRef = useRef(false)
-  const activeShapeRef = useRef<"brackets" | "heart" | null>(activeShape)
+export function ParticleCanvas({
+  activeShape,
+  className,
+}: ParticleCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const particles = useRef<Point[]>([]);
+  const animationFrameId = useRef<number | undefined>(undefined);
+  const timeRef = useRef(0);
+  const lastTimeRef = useRef<number>(0);
+
+  const transitionRef = useRef(0);
+  const targetTransitionRef = useRef(0);
+  const prevShapeRef = useRef<'brackets' | 'heart' | null>(null);
+  const justLeftShapeRef = useRef(false);
+  const activeShapeRef = useRef<'brackets' | 'heart' | null>(activeShape);
 
   const getThemeColors = () => {
-    const isDark = document.documentElement.classList.contains("dark")
+    const isDark = document.documentElement.classList.contains('dark');
     return {
       isDark,
       r: isDark ? 255 : 30,
       g: isDark ? 45 : 94,
       b: isDark ? 85 : 255,
-    }
-  }
+    };
+  };
 
   useEffect(() => {
-    activeShapeRef.current = activeShape
-    const wasInShape = targetTransitionRef.current === 1
-    targetTransitionRef.current = activeShape ? 1 : 0
+    activeShapeRef.current = activeShape;
+    const wasInShape = targetTransitionRef.current === 1;
+    targetTransitionRef.current = activeShape ? 1 : 0;
     if (activeShape) {
-      prevShapeRef.current = activeShape
-      justLeftShapeRef.current = false
+      prevShapeRef.current = activeShape;
+      justLeftShapeRef.current = false;
     } else if (wasInShape) {
-      justLeftShapeRef.current = true
-      // Gentle nudge instead of hard push
+      justLeftShapeRef.current = true;
       particles.current.forEach(p => {
-        p.vx *= 0.5
-        p.vy *= 0.5
-      })
+        p.vx *= 0.5;
+        p.vy *= 0.5;
+      });
     }
-  }, [activeShape])
+  }, [activeShape]);
 
   useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
+    const canvas = canvasRef.current;
+    if (!canvas) return;
 
-    const ctx = canvas.getContext("2d")
-    if (!ctx) return
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
 
-    let logicalWidth = 0
-    let logicalHeight = 0
+    let logicalWidth = 0;
+    let logicalHeight = 0;
 
     const resizeCanvas = () => {
-      logicalWidth = canvas.parentElement?.offsetWidth || window.innerWidth
-      logicalHeight = canvas.parentElement?.offsetHeight || window.innerHeight
-      const dpr = window.devicePixelRatio || 1
-      
-      canvas.width = logicalWidth * dpr
-      canvas.height = logicalHeight * dpr
-      canvas.style.width = `${logicalWidth}px`
-      canvas.style.height = `${logicalHeight}px`
-      
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-      initParticles(logicalWidth, logicalHeight)
-    }
+      logicalWidth = canvas.parentElement?.offsetWidth || window.innerWidth;
+      logicalHeight = canvas.parentElement?.offsetHeight || window.innerHeight;
+      const dpr = window.devicePixelRatio || 1;
+
+      canvas.width = logicalWidth * dpr;
+      canvas.height = logicalHeight * dpr;
+      canvas.style.width = `${logicalWidth}px`;
+      canvas.style.height = `${logicalHeight}px`;
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      initParticles(logicalWidth, logicalHeight);
+    };
 
     const initParticles = (width: number, height: number) => {
-      const count = 800
-      particles.current = []
+      const count = 800;
+      particles.current = [];
 
       for (let i = 0; i < count; i++) {
-        const floatX = Math.random() * width
-        const floatY = Math.random() * height
-        
-        const speed = 0.2 + Math.random() * 0.3
-        const angle = Math.random() * Math.PI * 2
+        const floatX = Math.random() * width;
+        const floatY = Math.random() * height;
+
+        const speed = 0.2 + Math.random() * 0.3;
+        const angle = Math.random() * Math.PI * 2;
 
         particles.current.push({
           x: floatX,
@@ -193,176 +196,171 @@ export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps)
           floatY,
           floatVx: Math.cos(angle) * speed,
           floatVy: Math.sin(angle) * speed,
-        })
+        });
       }
-    }
+    };
 
     const draw = (timestamp: number) => {
-      if (!canvas || !ctx) return
-      
-      if (!lastTimeRef.current) lastTimeRef.current = timestamp
-      const rawDeltaTime = (timestamp - lastTimeRef.current) / 1000
-      const deltaTime = Math.min(rawDeltaTime, 0.05)
-      lastTimeRef.current = timestamp
+      if (!canvas || !ctx) return;
+
+      if (!lastTimeRef.current) lastTimeRef.current = timestamp;
+      const rawDeltaTime = (timestamp - lastTimeRef.current) / 1000;
+      const deltaTime = Math.min(rawDeltaTime, 0.05);
+      lastTimeRef.current = timestamp;
 
-      ctx.clearRect(0, 0, logicalWidth, logicalHeight)
+      ctx.clearRect(0, 0, logicalWidth, logicalHeight);
 
-      timeRef.current += deltaTime
+      timeRef.current += deltaTime;
 
-      // Linear transition - no initial freeze
-      const inSpeed = 0.012
-      const outSpeed = 0.006 // Slower out
+      const inSpeed = 0.012;
+      const outSpeed = 0.006;
       if (targetTransitionRef.current > transitionRef.current) {
-        // Going IN
-        transitionRef.current = Math.min(targetTransitionRef.current, transitionRef.current + inSpeed)
+        transitionRef.current = Math.min(
+          targetTransitionRef.current,
+          transitionRef.current + inSpeed
+        );
       } else if (targetTransitionRef.current < transitionRef.current) {
-        // Going OUT - slow and smooth
-        transitionRef.current = Math.max(targetTransitionRef.current, transitionRef.current - outSpeed)
+        transitionRef.current = Math.max(
+          targetTransitionRef.current,
+          transitionRef.current - outSpeed
+        );
       }
 
-      // Apply smooth easing
-      const rawProgress = Math.max(0, Math.min(1, transitionRef.current))
-      const progress = easeInOutCubic(rawProgress)
+      const rawProgress = Math.max(0, Math.min(1, transitionRef.current));
+      const progress = easeInOutCubic(rawProgress);
 
-      const { r, g, b, isDark } = getThemeColors()
+      const { r, g, b, isDark } = getThemeColors();
 
-      const isMobileView = logicalWidth < 768
+      const isMobileView = logicalWidth < 768;
 
-      const currentShape = activeShapeRef.current || prevShapeRef.current
+      const currentShape = activeShapeRef.current || prevShapeRef.current;
       const shapePoints =
-        currentShape === "brackets"
+        currentShape === 'brackets'
           ? SHAPE_POINTS_BRACKETS
-          : currentShape === "heart"
+          : currentShape === 'heart'
             ? SHAPE_POINTS_HEART
-            : null
+            : null;
 
-      // 3D rotation - always moving
-      const angle = timeRef.current * 0.4
-      const cos = Math.cos(angle)
-      const sin = Math.sin(angle)
+      const angle = timeRef.current * 0.4;
+      const cos = Math.cos(angle);
+      const sin = Math.sin(angle);
 
       particles.current.forEach((p, i) => {
-        // Always update floating positions
-        p.floatX += p.floatVx
-        p.floatY += p.floatVy
+        p.floatX += p.floatVx;
+        p.floatY += p.floatVy;
 
         if (p.floatX < 0 || p.floatX > logicalWidth) {
-          p.floatVx *= -1
-          p.floatX = Math.max(0, Math.min(logicalWidth, p.floatX))
+          p.floatVx *= -1;
+          p.floatX = Math.max(0, Math.min(logicalWidth, p.floatX));
         }
         if (p.floatY < 0 || p.floatY > logicalHeight) {
-          p.floatVy *= -1
-          p.floatY = Math.max(0, Math.min(logicalHeight, p.floatY))
+          p.floatVy *= -1;
+          p.floatY = Math.max(0, Math.min(logicalHeight, p.floatY));
         }
 
-        // Calculate shape position
-        let shapeX = p.floatX
-        let shapeY = p.floatY
+        let shapeX = p.floatX;
+        let shapeY = p.floatY;
 
         if (isMobileView) {
-          // Mobile: show both shapes - first half brackets, second half heart
-          const halfCount = Math.floor(particles.current.length / 2)
-          const isFirstHalf = i < halfCount
-          const localIndex = isFirstHalf ? i : i - halfCount
-          const mobileShapePoints = isFirstHalf ? SHAPE_POINTS_BRACKETS : SHAPE_POINTS_HEART
-          const shapePoint = mobileShapePoints[localIndex % mobileShapePoints.length]
-          
-          const rotatedX = shapePoint.x * cos - shapePoint.z * sin
-          const rotatedZ = shapePoint.x * sin + shapePoint.z * cos
-          const rotatedY = shapePoint.y
-          const perspective = 3
-          const scale = perspective / (perspective + rotatedZ)
-          const shapeScale = Math.min(logicalWidth, logicalHeight) * 0.7
-          
-          // Position: centered on each card
-          const centerX = logicalWidth / 2
-          const centerY = isFirstHalf ? logicalHeight * 0.32 : logicalHeight * 0.68
-          
-          shapeX = centerX + rotatedX * shapeScale * scale
-          shapeY = centerY + rotatedY * shapeScale * scale
+          const halfCount = Math.floor(particles.current.length / 2);
+          const isFirstHalf = i < halfCount;
+          const localIndex = isFirstHalf ? i : i - halfCount;
+          const mobileShapePoints = isFirstHalf
+            ? SHAPE_POINTS_BRACKETS
+            : SHAPE_POINTS_HEART;
+          const shapePoint =
+            mobileShapePoints[localIndex % mobileShapePoints.length];
+
+          const rotatedX = shapePoint.x * cos - shapePoint.z * sin;
+          const rotatedZ = shapePoint.x * sin + shapePoint.z * cos;
+          const rotatedY = shapePoint.y;
+          const perspective = 3;
+          const scale = perspective / (perspective + rotatedZ);
+          const shapeScale = Math.min(logicalWidth, logicalHeight) * 0.7;
+
+          const centerX = logicalWidth / 2;
+          const centerY = isFirstHalf
+            ? logicalHeight * 0.32
+            : logicalHeight * 0.68;
+
+          shapeX = centerX + rotatedX * shapeScale * scale;
+          shapeY = centerY + rotatedY * shapeScale * scale;
         } else if (shapePoints) {
-          // Desktop: original hover behavior
-          let centerX = logicalWidth / 2
-          const centerY = logicalHeight / 2
-          if (currentShape === "brackets") centerX = logicalWidth * 0.25
-          if (currentShape === "heart") centerX = logicalWidth * 0.75
-          
-          const shapePoint = shapePoints[i % shapePoints.length]
-          const rotatedX = shapePoint.x * cos - shapePoint.z * sin
-          const rotatedZ = shapePoint.x * sin + shapePoint.z * cos
-          const rotatedY = shapePoint.y
-          const perspective = 3
-          const scale = perspective / (perspective + rotatedZ)
-          const shapeScale = Math.min(logicalWidth, logicalHeight) * 0.35
-          shapeX = centerX + rotatedX * shapeScale * scale
-          shapeY = centerY + rotatedY * shapeScale * scale
+          let centerX = logicalWidth / 2;
+          const centerY = logicalHeight / 2;
+          if (currentShape === 'brackets') centerX = logicalWidth * 0.25;
+          if (currentShape === 'heart') centerX = logicalWidth * 0.75;
+
+          const shapePoint = shapePoints[i % shapePoints.length];
+          const rotatedX = shapePoint.x * cos - shapePoint.z * sin;
+          const rotatedZ = shapePoint.x * sin + shapePoint.z * cos;
+          const rotatedY = shapePoint.y;
+          const perspective = 3;
+          const scale = perspective / (perspective + rotatedZ);
+          const shapeScale = Math.min(logicalWidth, logicalHeight) * 0.35;
+          shapeX = centerX + rotatedX * shapeScale * scale;
+          shapeY = centerY + rotatedY * shapeScale * scale;
         }
 
-        // Target position - on mobile always full shape, on desktop based on hover progress
-        const effectiveProgress = isMobileView ? 1 : progress
-        const targetX = p.floatX + (shapeX - p.floatX) * effectiveProgress
-        const targetY = p.floatY + (shapeY - p.floatY) * effectiveProgress
-
-        // Smooth spring physics - gentle force, high damping
-        const springForce = 0.04 // Gentle spring
-        const damping = 0.92 // High damping for smooth motion
-        
-        // Add spring force toward target
-        p.vx += (targetX - p.x) * springForce
-        p.vy += (targetY - p.y) * springForce
-        
-        // Apply damping
-        p.vx *= damping
-        p.vy *= damping
-        
-        // Update position
-        p.x += p.vx
-        p.y += p.vy
-
-        // Alpha - on mobile always visible, on desktop based on progress
-        const alpha = isMobileView ? 0.3 : (0.15 + 0.45 * progress)
-
-        ctx.beginPath()
-        ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2)
-        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`
-        ctx.fill()
-      })
-
-      // Connecting lines when in shape
+        const effectiveProgress = isMobileView ? 1 : progress;
+        const targetX = p.floatX + (shapeX - p.floatX) * effectiveProgress;
+        const targetY = p.floatY + (shapeY - p.floatY) * effectiveProgress;
+
+        const springForce = 0.04;
+        const damping = 0.92;
+
+        p.vx += (targetX - p.x) * springForce;
+        p.vy += (targetY - p.y) * springForce;
+
+        p.vx *= damping;
+        p.vy *= damping;
+
+        p.x += p.vx;
+        p.y += p.vy;
+
+        const alpha = isMobileView ? 0.3 : 0.15 + 0.45 * progress;
+
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+        ctx.fill();
+      });
+
       if (progress > 0.5 && shapePoints) {
-        const lineAlpha = (progress - 0.5) * 0.2
-        ctx.globalAlpha = lineAlpha
-        ctx.lineWidth = 0.5
-        ctx.strokeStyle = isDark ? "#ff2d55" : "#1e5eff"
-        ctx.beginPath()
+        const lineAlpha = (progress - 0.5) * 0.2;
+        ctx.globalAlpha = lineAlpha;
+        ctx.lineWidth = 0.5;
+        ctx.strokeStyle = isDark ? '#ff2d55' : '#1e5eff';
+        ctx.beginPath();
 
         for (let i = 0; i < particles.current.length; i += 4) {
-          const p1 = particles.current[i]
+          const p1 = particles.current[i];
           for (let j = 1; j <= 4; j++) {
-            const p2 = particles.current[(i + j) % particles.current.length]
-            const distSq = (p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2
+            const p2 = particles.current[(i + j) % particles.current.length];
+            const distSq = (p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2;
             if (distSq < 35 * 35) {
-              ctx.moveTo(p1.x, p1.y)
-              ctx.lineTo(p2.x, p2.y)
+              ctx.moveTo(p1.x, p1.y);
+              ctx.lineTo(p2.x, p2.y);
             }
           }
         }
-        ctx.stroke()
-        ctx.globalAlpha = 1.0
+        ctx.stroke();
+        ctx.globalAlpha = 1.0;
       }
 
-      animationFrameId.current = requestAnimationFrame(draw)
-    }
+      animationFrameId.current = requestAnimationFrame(draw);
+    };
 
-    resizeCanvas()
-    window.addEventListener("resize", resizeCanvas)
-    animationFrameId.current = requestAnimationFrame(draw)
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+    animationFrameId.current = requestAnimationFrame(draw);
 
     return () => {
-      window.removeEventListener("resize", resizeCanvas)
-      if (animationFrameId.current) cancelAnimationFrame(animationFrameId.current)
-    }
-  }, [])
+      window.removeEventListener('resize', resizeCanvas);
+      if (animationFrameId.current)
+        cancelAnimationFrame(animationFrameId.current);
+    };
+  }, []);
 
-  return <canvas ref={canvasRef} className={className} aria-hidden="true" />
+  return <canvas ref={canvasRef} className={className} aria-hidden="true" />;
 }
diff --git a/frontend/db/queries/quiz.ts b/frontend/db/queries/quiz.ts
index df4ae747..da70e6f6 100644
--- a/frontend/db/queries/quiz.ts
+++ b/frontend/db/queries/quiz.ts
@@ -193,7 +193,6 @@ export async function getQuizQuestions(
   quizId: string,
   locale: string = 'uk'
 ): Promise<QuizQuestionWithAnswers[]> {
-  // QUERY 1: Get all questions for this quiz
   const questionsData = await db
     .select({
       id: quizQuestions.id,
@@ -213,12 +212,10 @@ export async function getQuizQuestions(
     .where(eq(quizQuestions.quizId, quizId))
     .orderBy(quizQuestions.displayOrder);
 
-  // Early return if no questions
   if (questionsData.length === 0) return [];
 
-  // QUERY 2: Get ALL answers for ALL questions in one query
   const questionIds = questionsData.map(q => q.id);
-  
+
   const allAnswers = await db
     .select({
       id: quizAnswers.id,
@@ -238,7 +235,6 @@ export async function getQuizQuestions(
     .where(inArray(quizAnswers.quizQuestionId, questionIds))
     .orderBy(quizAnswers.displayOrder);
 
-  // GROUP answers by questionId in memory (O(n) operation)
   const answersByQuestion = new Map<string, typeof allAnswers>();
   for (const answer of allAnswers) {
     const existing = answersByQuestion.get(answer.questionId) || [];
@@ -246,7 +242,6 @@ export async function getQuizQuestions(
     answersByQuestion.set(answer.questionId, existing);
   }
 
-  // MAP questions with their answers
   return questionsData.map(question => ({
     ...question,
     answers: (answersByQuestion.get(question.id) || []).map(a => ({
diff --git a/frontend/db/schema/shop.ts b/frontend/db/schema/shop.ts
index d74fe19d..1f726234 100644
--- a/frontend/db/schema/shop.ts
+++ b/frontend/db/schema/shop.ts
@@ -62,7 +62,6 @@ export const products = pgTable(
     description: text('description'),
     imageUrl: text('image_url').notNull(),
     imagePublicId: text('image_public_id'),
-    // legacy mirror (USD) — keep for now
     price: numeric('price', { precision: 10, scale: 2 })
       .$type<string>()
       .notNull(),
@@ -112,22 +111,19 @@ export const orders = pgTable(
       onDelete: 'set null',
     }),
 
-    // canonical money (minor units)
     totalAmountMinor: integer('total_amount_minor').notNull(),
 
-    // legacy mirror for UI/back-compat
     totalAmount: numeric('total_amount', { precision: 10, scale: 2 })
       .$type<string>()
       .notNull(),
 
     currency: currencyEnum('currency').notNull().default('USD'),
-    // keep as enum in DB and in TS
+
     paymentStatus: paymentStatusEnum('payment_status')
       .notNull()
       .default('pending')
       .$type<PaymentStatus>(),
 
-    // provider is text + CHECK constraint (OK), but TS must be narrowed
     paymentProvider: text('payment_provider')
       .notNull()
       .default('stripe')
@@ -208,7 +204,7 @@ export const orderItems = pgTable(
     productId: uuid('product_id')
       .notNull()
       .references(() => products.id),
-    // product variants (must be NOT NULL to make UNIQUE + ON CONFLICT reliable)
+
     selectedSize: text('selected_size').notNull().default(''),
     selectedColor: text('selected_color').notNull().default(''),
     quantity: integer('quantity').notNull(),
@@ -290,11 +286,9 @@ export const productPrices = pgTable(
       .references(() => products.id, { onDelete: 'cascade' }),
     currency: currencyEnum('currency').notNull(),
 
-    // canonical money (minor units)
     priceMinor: integer('price_minor').notNull(),
     originalPriceMinor: integer('original_price_minor'),
 
-    // legacy mirror (keep for now; used by admin/UI)
     price: numeric('price', { precision: 10, scale: 2 })
       .$type<string>()
       .notNull(),
@@ -316,7 +310,6 @@ export const productPrices = pgTable(
       t.currency
     ),
 
-    // checks should enforce canonical fields
     check('product_prices_price_positive', sql`${t.priceMinor} > 0`),
     check(
       'product_prices_original_price_valid',
@@ -404,8 +397,8 @@ export const paymentAttempts = pgTable(
       .notNull()
       .references(() => orders.id, { onDelete: 'cascade' }),
 
-    provider: text('provider').notNull(), // 'stripe'
-    status: text('status').notNull().default('active'), // active|succeeded|failed|canceled
+    provider: text('provider').notNull(),
+    status: text('status').notNull().default('active'),
     attemptNumber: integer('attempt_number').notNull(),
 
     idempotencyKey: text('idempotency_key').notNull(),
@@ -431,7 +424,6 @@ export const paymentAttempts = pgTable(
   t => [
     check('payment_attempts_provider_check', sql`${t.provider} in ('stripe')`),
 
-    // CHECKs (match SQL migration)
     check(
       'payment_attempts_status_check',
       sql`${t.status} in ('active','succeeded','failed','canceled')`
@@ -441,7 +433,6 @@ export const paymentAttempts = pgTable(
       sql`${t.attemptNumber} >= 1`
     ),
 
-    // UNIQUE / INDEX (match SQL migration)
     uniqueIndex('payment_attempts_order_provider_attempt_unique').on(
       t.orderId,
       t.provider,
@@ -457,7 +448,6 @@ export const paymentAttempts = pgTable(
       t.status
     ),
 
-    // Critical: at most ONE active attempt per (order, provider)
     uniqueIndex('payment_attempts_order_provider_active_unique')
       .on(t.orderId, t.provider)
       .where(sql`${t.status} = 'active'`),
diff --git a/frontend/db/seed-quiz-angular-advanced.ts b/frontend/db/seed-quiz-angular-advanced.ts
index e47306ab..42045220 100644
--- a/frontend/db/seed-quiz-angular-advanced.ts
+++ b/frontend/db/seed-quiz-angular-advanced.ts
@@ -1,5 +1,5 @@
 import { eq } from 'drizzle-orm';
-import { readFileSync,existsSync } from 'fs';
+import { readFileSync, existsSync } from 'fs';
 import { join } from 'path';
 import { db } from './index';
 import { categories } from './schema/categories';
@@ -44,15 +44,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'Angular Advanced',
-      description: 'Поглиблені концепції Angular: lifecycle hooks, DI декоратори, NgRx, кастомні директиви, SSR, Signals, OnPush та оптимізація продуктивності.',
+      description:
+        'Поглиблені концепції Angular: lifecycle hooks, DI декоратори, NgRx, кастомні директиви, SSR, Signals, OnPush та оптимізація продуктивності.',
     },
     en: {
       title: 'Angular Advanced',
-      description: 'Advanced Angular concepts: lifecycle hooks, DI decorators, NgRx, custom directives, SSR, Signals, OnPush and performance optimization.',
+      description:
+        'Advanced Angular concepts: lifecycle hooks, DI decorators, NgRx, custom directives, SSR, Signals, OnPush and performance optimization.',
     },
     pl: {
       title: 'Angular Advanced',
-      description: 'Zaawansowane koncepcje Angular: lifecycle hooks, dekoratory DI, NgRx, niestandardowe dyrektywy, SSR, Signals, OnPush i optymalizacja wydajności.',
+      description:
+        'Zaawansowane koncepcje Angular: lifecycle hooks, dekoratory DI, NgRx, niestandardowe dyrektywy, SSR, Signals, OnPush i optymalizacja wydajności.',
     },
   },
 };
@@ -66,7 +69,14 @@ const projectRoot = existsSync(join(process.cwd(), 'json'))
   : join(process.cwd(), '..');
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(projectRoot, 'json', 'quizzes', 'angular', 'advanced', `angular-advanced-quiz-part${partNumber}.json`);
+  const partPath = join(
+    projectRoot,
+    'json',
+    'quizzes',
+    'angular',
+    'advanced',
+    `angular-advanced-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -74,7 +84,6 @@ async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
 async function ensureQuizExists(): Promise<string> {
   console.log('Ensuring quiz exists...');
 
-  // Find category by slug
   const [category] = await db
     .select()
     .from(categories)
@@ -82,10 +91,11 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
-  // Clean up old quiz by slug
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
@@ -94,19 +104,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 2,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 2,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -121,14 +138,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 2,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 2,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -142,15 +162,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -163,12 +192,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -189,9 +221,13 @@ async function seedQuizFromJson() {
 
   if (!partArg) {
     console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-angular-advanced.ts <part-number>');
+    console.log(
+      'Usage: npx tsx db/seeds/seed-quiz-angular-advanced.ts <part-number>'
+    );
     console.log('Example: npx tsx db/seeds/seed-quiz-angular-advanced.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-angular-advanced.ts all');
+    console.log(
+      'Or upload all: npx tsx db/seeds/seed-quiz-angular-advanced.ts all'
+    );
     process.exit(1);
   }
 
@@ -213,7 +249,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -228,7 +266,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -238,7 +278,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-quiz-angular.ts b/frontend/db/seed-quiz-angular.ts
index 5cf798f4..2af5a7c4 100644
--- a/frontend/db/seed-quiz-angular.ts
+++ b/frontend/db/seed-quiz-angular.ts
@@ -44,15 +44,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'Основи Angular',
-      description: 'Перевірте свої знання базових концепцій Angular: компоненти, директиви, сервіси, DI, маршрутизація, форми, Signals та RxJS.',
+      description:
+        'Перевірте свої знання базових концепцій Angular: компоненти, директиви, сервіси, DI, маршрутизація, форми, Signals та RxJS.',
     },
     en: {
       title: 'Angular Fundamentals',
-      description: 'Test your knowledge of Angular basics: components, directives, services, DI, routing, forms, Signals, and RxJS.',
+      description:
+        'Test your knowledge of Angular basics: components, directives, services, DI, routing, forms, Signals, and RxJS.',
     },
     pl: {
       title: 'Podstawy Angular',
-      description: 'Sprawdź swoją wiedzę o podstawach Angular: komponenty, dyrektywy, serwisy, DI, routing, formularze, Signals i RxJS.',
+      description:
+        'Sprawdź swoją wiedzę o podstawach Angular: komponenty, dyrektywy, serwisy, DI, routing, formularze, Signals i RxJS.',
     },
   },
 };
@@ -66,7 +69,14 @@ const projectRoot = existsSync(join(process.cwd(), 'json'))
   : join(process.cwd(), '..');
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(projectRoot, 'json', 'quizzes', 'angular', 'beginner_medium', `angular-quiz-part${partNumber}.json`);
+  const partPath = join(
+    projectRoot,
+    'json',
+    'quizzes',
+    'angular',
+    'beginner_medium',
+    `angular-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -74,7 +84,6 @@ async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
 async function ensureQuizExists(): Promise<string> {
   console.log('Ensuring quiz exists...');
 
-  // Find category by slug
   const [category] = await db
     .select()
     .from(categories)
@@ -82,10 +91,11 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
-  // Clean up old quiz by slug
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
@@ -94,19 +104,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 1,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 1,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -121,14 +138,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 1,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 1,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -142,15 +162,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -163,12 +192,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -213,7 +245,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -228,7 +262,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -238,7 +274,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-quiz-css-advanced.ts b/frontend/db/seed-quiz-css-advanced.ts
index b535b125..735bfc56 100644
--- a/frontend/db/seed-quiz-css-advanced.ts
+++ b/frontend/db/seed-quiz-css-advanced.ts
@@ -44,15 +44,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'CSS Advanced',
-      description: 'Поглиблені концепції CSS: 3D-трансформації, оптимізація продуктивності, методології архітектури, препроцесори, CSS-in-JS та сучасні можливості.',
+      description:
+        'Поглиблені концепції CSS: 3D-трансформації, оптимізація продуктивності, методології архітектури, препроцесори, CSS-in-JS та сучасні можливості.',
     },
     en: {
       title: 'CSS Advanced',
-      description: 'Advanced CSS concepts: 3D transforms, performance optimization, architecture methodologies, preprocessors, CSS-in-JS, and modern features.',
+      description:
+        'Advanced CSS concepts: 3D transforms, performance optimization, architecture methodologies, preprocessors, CSS-in-JS, and modern features.',
     },
     pl: {
       title: 'CSS Zaawansowany',
-      description: 'Zaawansowane koncepcje CSS: transformacje 3D, optymalizacja wydajności, metodologie architektury, preprocesory, CSS-in-JS i nowoczesne funkcje.',
+      description:
+        'Zaawansowane koncepcje CSS: transformacje 3D, optymalizacja wydajności, metodologie architektury, preprocesory, CSS-in-JS i nowoczesne funkcje.',
     },
   },
 };
@@ -62,7 +65,13 @@ function createExplanation(text: string) {
 }
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'parse', 'css', 'advanced', `css-advanced-quiz-part${partNumber}.json`);
+  const partPath = join(
+    process.cwd(),
+    'parse',
+    'css',
+    'advanced',
+    `css-advanced-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -70,7 +79,6 @@ async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
 async function ensureQuizExists(): Promise<string> {
   console.log('Ensuring quiz exists...');
 
-  // Find category by slug
   const [category] = await db
     .select()
     .from(categories)
@@ -78,10 +86,11 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
-  // Clean up old quiz by slug
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
@@ -90,19 +99,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 3,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 3,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -117,14 +133,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 3,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 3,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -138,15 +157,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -159,12 +187,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -185,9 +216,13 @@ async function seedQuizFromJson() {
 
   if (!partArg) {
     console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-css-advanced.ts <part-number>');
+    console.log(
+      'Usage: npx tsx db/seeds/seed-quiz-css-advanced.ts <part-number>'
+    );
     console.log('Example: npx tsx db/seeds/seed-quiz-css-advanced.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-css-advanced.ts all');
+    console.log(
+      'Or upload all: npx tsx db/seeds/seed-quiz-css-advanced.ts all'
+    );
     process.exit(1);
   }
 
@@ -209,7 +244,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -224,7 +261,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -234,7 +273,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-quiz-css.ts b/frontend/db/seed-quiz-css.ts
index 03ceb679..a3c2e583 100644
--- a/frontend/db/seed-quiz-css.ts
+++ b/frontend/db/seed-quiz-css.ts
@@ -44,15 +44,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'Основи CSS',
-      description: 'Перевірте свої знання базових концепцій CSS: селектори, блокова модель, Flexbox, Grid, позиціонування, анімації та адаптивний дизайн.',
+      description:
+        'Перевірте свої знання базових концепцій CSS: селектори, блокова модель, Flexbox, Grid, позиціонування, анімації та адаптивний дизайн.',
     },
     en: {
       title: 'CSS Fundamentals',
-      description: 'Test your knowledge of CSS basics: selectors, box model, Flexbox, Grid, positioning, animations, and responsive design.',
+      description:
+        'Test your knowledge of CSS basics: selectors, box model, Flexbox, Grid, positioning, animations, and responsive design.',
     },
     pl: {
       title: 'Podstawy CSS',
-      description: 'Sprawdź swoją wiedzę o podstawach CSS: selektory, model pudełkowy, Flexbox, Grid, pozycjonowanie, animacje i responsywny design.',
+      description:
+        'Sprawdź swoją wiedzę o podstawach CSS: selektory, model pudełkowy, Flexbox, Grid, pozycjonowanie, animacje i responsywny design.',
     },
   },
 };
@@ -62,7 +65,13 @@ function createExplanation(text: string) {
 }
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'parse', 'css', 'fundamentals', `css-quiz-part${partNumber}.json`);
+  const partPath = join(
+    process.cwd(),
+    'parse',
+    'css',
+    'fundamentals',
+    `css-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -70,7 +79,6 @@ async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
 async function ensureQuizExists(): Promise<string> {
   console.log('Ensuring quiz exists...');
 
-  // Find category by slug
   const [category] = await db
     .select()
     .from(categories)
@@ -78,10 +86,11 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
-  // Clean up old quiz by slug
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
@@ -90,19 +99,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 2,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 2,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -117,14 +133,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 2,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 2,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -138,15 +157,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -159,12 +187,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -209,7 +240,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -224,7 +257,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -234,7 +269,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-quiz-html-advanced.ts b/frontend/db/seed-quiz-html-advanced.ts
index 54d9ebe6..fac7337f 100644
--- a/frontend/db/seed-quiz-html-advanced.ts
+++ b/frontend/db/seed-quiz-html-advanced.ts
@@ -44,15 +44,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'HTML Поглиблений',
-      description: 'Перевірте поглиблені знання HTML: Web Components, Shadow DOM, API браузера, доступність, SEO, продуктивність та сучасні можливості.',
+      description:
+        'Перевірте поглиблені знання HTML: Web Components, Shadow DOM, API браузера, доступність, SEO, продуктивність та сучасні можливості.',
     },
     en: {
       title: 'HTML Advanced',
-      description: 'Test your advanced HTML knowledge: Web Components, Shadow DOM, browser APIs, accessibility, SEO, performance and modern features.',
+      description:
+        'Test your advanced HTML knowledge: Web Components, Shadow DOM, browser APIs, accessibility, SEO, performance and modern features.',
     },
     pl: {
       title: 'HTML Zaawansowany',
-      description: 'Sprawdź zaawansowaną wiedzę o HTML: Web Components, Shadow DOM, API przeglądarki, dostępność, SEO, wydajność i nowoczesne funkcje.',
+      description:
+        'Sprawdź zaawansowaną wiedzę o HTML: Web Components, Shadow DOM, API przeglądarki, dostępność, SEO, wydajność i nowoczesne funkcje.',
     },
   },
 };
@@ -62,7 +65,13 @@ function createExplanation(text: string) {
 }
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'parse', 'html', 'advanced', `html-advanced-quiz-part${partNumber}.json`);
+  const partPath = join(
+    process.cwd(),
+    'parse',
+    'html',
+    'advanced',
+    `html-advanced-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -70,7 +79,6 @@ async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
 async function ensureQuizExists(): Promise<string> {
   console.log('Ensuring quiz exists...');
 
-  // Find category by slug
   const [category] = await db
     .select()
     .from(categories)
@@ -78,10 +86,11 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
-  // Clean up old quiz by slug
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
@@ -90,19 +99,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 2,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 2,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -117,14 +133,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 2,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 2,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -138,15 +157,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -159,12 +187,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -209,7 +240,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -224,7 +257,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -234,7 +269,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-quiz-html.ts b/frontend/db/seed-quiz-html.ts
index 099f0308..4847f686 100644
--- a/frontend/db/seed-quiz-html.ts
+++ b/frontend/db/seed-quiz-html.ts
@@ -44,15 +44,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'Основи HTML',
-      description: 'Перевірте свої знання HTML: структура документа, теги, атрибути, форми, семантична розмітка та доступність.',
+      description:
+        'Перевірте свої знання HTML: структура документа, теги, атрибути, форми, семантична розмітка та доступність.',
     },
     en: {
       title: 'HTML Fundamentals',
-      description: 'Test your knowledge of HTML: document structure, tags, attributes, forms, semantic markup and accessibility.',
+      description:
+        'Test your knowledge of HTML: document structure, tags, attributes, forms, semantic markup and accessibility.',
     },
     pl: {
       title: 'Podstawy HTML',
-      description: 'Sprawdź swoją wiedzę o HTML: struktura dokumentu, tagi, atrybuty, formularze, semantyczne znaczniki i dostępność.',
+      description:
+        'Sprawdź swoją wiedzę o HTML: struktura dokumentu, tagi, atrybuty, formularze, semantyczne znaczniki i dostępność.',
     },
   },
 };
@@ -62,7 +65,13 @@ function createExplanation(text: string) {
 }
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'parse', 'html', 'fundamentals', `html-quiz-part${partNumber}.json`);
+  const partPath = join(
+    process.cwd(),
+    'parse',
+    'html',
+    'fundamentals',
+    `html-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -70,7 +79,6 @@ async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
 async function ensureQuizExists(): Promise<string> {
   console.log('Ensuring quiz exists...');
 
-  // Find category by slug
   const [category] = await db
     .select()
     .from(categories)
@@ -78,10 +86,11 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
-  // Clean up old quiz by slug
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
@@ -90,19 +99,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 1,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 1,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -117,14 +133,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 1,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 1,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -138,15 +157,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -159,12 +187,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -209,7 +240,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -224,7 +257,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -234,7 +269,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-quiz-javascript-advanced.ts b/frontend/db/seed-quiz-javascript-advanced.ts
index 614ab4e5..8854549a 100644
--- a/frontend/db/seed-quiz-javascript-advanced.ts
+++ b/frontend/db/seed-quiz-javascript-advanced.ts
@@ -44,15 +44,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'JavaScript Просунутий',
-      description: 'Перевірте свої знання JavaScript на просунутому рівні: асинхронність, event loop, прототипи, ООП, модулі, продуктивність та можливості ES6+.',
+      description:
+        'Перевірте свої знання JavaScript на просунутому рівні: асинхронність, event loop, прототипи, ООП, модулі, продуктивність та можливості ES6+.',
     },
     en: {
       title: 'JavaScript Advanced',
-      description: 'Test your advanced JavaScript knowledge: async patterns, event loop, prototypes, OOP, modules, performance and ES6+ features.',
+      description:
+        'Test your advanced JavaScript knowledge: async patterns, event loop, prototypes, OOP, modules, performance and ES6+ features.',
     },
     pl: {
       title: 'JavaScript Zaawansowany',
-      description: 'Sprawdź zaawansowaną wiedzę z JavaScript: asynchroniczność, event loop, prototypy, OOP, moduły, wydajność i możliwości ES6+.',
+      description:
+        'Sprawdź zaawansowaną wiedzę z JavaScript: asynchroniczność, event loop, prototypy, OOP, moduły, wydajność i możliwości ES6+.',
     },
   },
 };
@@ -62,15 +65,20 @@ function createExplanation(text: string) {
 }
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-    const partPath = join(process.cwd(), 'parse', 'js', 'advanced', `javascript-advanced-quiz-part${partNumber}.json`);
-    const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
+  const partPath = join(
+    process.cwd(),
+    'parse',
+    'js',
+    'advanced',
+    `javascript-advanced-quiz-part${partNumber}.json`
+  );
+  const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
 
 async function ensureQuizExists(): Promise<string> {
   console.log('Ensuring quiz exists...');
 
-  // Find category by slug
   const [category] = await db
     .select()
     .from(categories)
@@ -78,10 +86,11 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
-  // Clean up old quiz by slug
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
@@ -90,19 +99,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 1,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 1,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -117,14 +133,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 1,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 1,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -138,15 +157,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -159,12 +187,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -209,7 +240,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -224,7 +257,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -234,8 +269,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
-
diff --git a/frontend/db/seed-quiz-javascript.ts b/frontend/db/seed-quiz-javascript.ts
index 0bd9fdc7..74ed960d 100644
--- a/frontend/db/seed-quiz-javascript.ts
+++ b/frontend/db/seed-quiz-javascript.ts
@@ -44,15 +44,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'Основи JavaScript',
-      description: 'Перевірте свої знання базових концепцій JavaScript: змінні, типи даних, функції, асинхронність, прототипи та ES6+ можливості.',
+      description:
+        'Перевірте свої знання базових концепцій JavaScript: змінні, типи даних, функції, асинхронність, прототипи та ES6+ можливості.',
     },
     en: {
       title: 'JavaScript Fundamentals',
-      description: 'Test your knowledge of JavaScript basics: variables, data types, functions, asynchronicity, prototypes and ES6+ features.',
+      description:
+        'Test your knowledge of JavaScript basics: variables, data types, functions, asynchronicity, prototypes and ES6+ features.',
     },
     pl: {
       title: 'Podstawy JavaScript',
-      description: 'Sprawdź swoją wiedzę o podstawach JavaScript: zmienne, typy danych, funkcje, asynchroniczność, prototypy i funkcje ES6+.',
+      description:
+        'Sprawdź swoją wiedzę o podstawach JavaScript: zmienne, typy danych, funkcje, asynchroniczność, prototypy i funkcje ES6+.',
     },
   },
 };
@@ -62,7 +65,11 @@ function createExplanation(text: string) {
 }
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'data', `javascript-quiz-part${partNumber}.json`);
+  const partPath = join(
+    process.cwd(),
+    'data',
+    `javascript-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -70,7 +77,6 @@ async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
 async function ensureQuizExists(): Promise<string> {
   console.log('Ensuring quiz exists...');
 
-  // Find category by slug
   const [category] = await db
     .select()
     .from(categories)
@@ -78,10 +84,11 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
-  // Clean up old quiz by slug
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
@@ -90,19 +97,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 1,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 1,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -117,14 +131,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 1,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 1,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -138,15 +155,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -159,12 +185,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -185,7 +214,9 @@ async function seedQuizFromJson() {
 
   if (!partArg) {
     console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-javascript.ts <part-number>');
+    console.log(
+      'Usage: npx tsx db/seeds/seed-quiz-javascript.ts <part-number>'
+    );
     console.log('Example: npx tsx db/seeds/seed-quiz-javascript.ts 1');
     console.log('Or upload all: npx tsx db/seeds/seed-quiz-javascript.ts all');
     process.exit(1);
@@ -209,7 +240,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -224,7 +257,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -234,7 +269,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-quiz-nodejs-advanced.ts b/frontend/db/seed-quiz-nodejs-advanced.ts
index 9ecdbda6..e3241f36 100644
--- a/frontend/db/seed-quiz-nodejs-advanced.ts
+++ b/frontend/db/seed-quiz-nodejs-advanced.ts
@@ -1,5 +1,5 @@
 import { eq } from 'drizzle-orm';
-import { readFileSync, existsSync} from 'fs';
+import { readFileSync, existsSync } from 'fs';
 import { join } from 'path';
 import { db } from './index';
 import { categories } from './schema/categories';
@@ -44,15 +44,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'Node.js Advanced',
-      description: 'Поглиблені знання Node.js: мікросервіси, gRPC, GraphQL, NestJS, serverless, CI/CD, Kubernetes, безпека та масштабування.',
+      description:
+        'Поглиблені знання Node.js: мікросервіси, gRPC, GraphQL, NestJS, serverless, CI/CD, Kubernetes, безпека та масштабування.',
     },
     en: {
       title: 'Node.js Advanced',
-      description: 'Advanced Node.js knowledge: microservices, gRPC, GraphQL, NestJS, serverless, CI/CD, Kubernetes, security, and scaling.',
+      description:
+        'Advanced Node.js knowledge: microservices, gRPC, GraphQL, NestJS, serverless, CI/CD, Kubernetes, security, and scaling.',
     },
     pl: {
       title: 'Node.js Advanced',
-      description: 'Zaawansowana wiedza o Node.js: mikroserwisy, gRPC, GraphQL, NestJS, serverless, CI/CD, Kubernetes, bezpieczeństwo i skalowanie.',
+      description:
+        'Zaawansowana wiedza o Node.js: mikroserwisy, gRPC, GraphQL, NestJS, serverless, CI/CD, Kubernetes, bezpieczeństwo i skalowanie.',
     },
   },
 };
@@ -66,7 +69,14 @@ const projectRoot = existsSync(join(process.cwd(), 'json'))
   : join(process.cwd(), '..');
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(projectRoot, 'json', 'quizzes', 'node', 'advanced', `nodejs-advanced-quiz-part${partNumber}.json`);
+  const partPath = join(
+    projectRoot,
+    'json',
+    'quizzes',
+    'node',
+    'advanced',
+    `nodejs-advanced-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -74,7 +84,6 @@ async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
 async function ensureQuizExists(): Promise<string> {
   console.log('Ensuring quiz exists...');
 
-  // Find category by slug
   const [category] = await db
     .select()
     .from(categories)
@@ -82,10 +91,11 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
-  // Clean up old quiz by slug
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
@@ -94,19 +104,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 2,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 2,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -121,14 +138,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 2,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 2,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -142,15 +162,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -163,12 +192,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -189,9 +221,13 @@ async function seedQuizFromJson() {
 
   if (!partArg) {
     console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-nodejs-advanced.ts <part-number>');
+    console.log(
+      'Usage: npx tsx db/seeds/seed-quiz-nodejs-advanced.ts <part-number>'
+    );
     console.log('Example: npx tsx db/seeds/seed-quiz-nodejs-advanced.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-nodejs-advanced.ts all');
+    console.log(
+      'Or upload all: npx tsx db/seeds/seed-quiz-nodejs-advanced.ts all'
+    );
     process.exit(1);
   }
 
@@ -213,7 +249,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -228,7 +266,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -238,7 +278,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-quiz-nodejs.ts b/frontend/db/seed-quiz-nodejs.ts
index 58201836..4f393930 100644
--- a/frontend/db/seed-quiz-nodejs.ts
+++ b/frontend/db/seed-quiz-nodejs.ts
@@ -44,15 +44,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'Основи Node.js',
-      description: 'Перевірте свої знання базових концепцій Node.js: event loop, модулі, асинхронність, Express.js, тестування та деплой.',
+      description:
+        'Перевірте свої знання базових концепцій Node.js: event loop, модулі, асинхронність, Express.js, тестування та деплой.',
     },
     en: {
       title: 'Node.js Fundamentals',
-      description: 'Test your knowledge of Node.js basics: event loop, modules, asynchronicity, Express.js, testing, and deployment.',
+      description:
+        'Test your knowledge of Node.js basics: event loop, modules, asynchronicity, Express.js, testing, and deployment.',
     },
     pl: {
       title: 'Podstawy Node.js',
-      description: 'Sprawdź swoją wiedzę o podstawach Node.js: event loop, moduły, asynchroniczność, Express.js, testowanie i deployment.',
+      description:
+        'Sprawdź swoją wiedzę o podstawach Node.js: event loop, moduły, asynchroniczność, Express.js, testowanie i deployment.',
     },
   },
 };
@@ -66,7 +69,14 @@ const projectRoot = existsSync(join(process.cwd(), 'json'))
   : join(process.cwd(), '..');
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(projectRoot, 'json', 'quizzes', 'node', 'beginner_medium', `nodejs-quiz-part${partNumber}.json`);
+  const partPath = join(
+    projectRoot,
+    'json',
+    'quizzes',
+    'node',
+    'beginner_medium',
+    `nodejs-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -74,7 +84,6 @@ async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
 async function ensureQuizExists(): Promise<string> {
   console.log('Ensuring quiz exists...');
 
-  // Find category by slug
   const [category] = await db
     .select()
     .from(categories)
@@ -82,10 +91,11 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
-  // Clean up old quiz by slug
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
@@ -94,19 +104,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 1,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 1,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -121,14 +138,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 1,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 1,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -142,15 +162,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -163,12 +192,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -189,9 +221,13 @@ async function seedQuizFromJson() {
 
   if (!partArg) {
     console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-nodejs-fundamentals.ts <part-number>');
+    console.log(
+      'Usage: npx tsx db/seeds/seed-quiz-nodejs-fundamentals.ts <part-number>'
+    );
     console.log('Example: npx tsx db/seeds/seed-quiz-nodejs-fundamentals.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-nodejs-fundamentals.ts all');
+    console.log(
+      'Or upload all: npx tsx db/seeds/seed-quiz-nodejs-fundamentals.ts all'
+    );
     process.exit(1);
   }
 
@@ -213,7 +249,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -228,7 +266,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -238,7 +278,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-quiz-react.ts b/frontend/db/seed-quiz-react.ts
index 90eda669..39931d82 100644
--- a/frontend/db/seed-quiz-react.ts
+++ b/frontend/db/seed-quiz-react.ts
@@ -884,7 +884,6 @@ async function seedReactQuiz() {
   const locales: Locale[] = ['uk', 'en', 'pl'];
 
   try {
-    // Find category by slug
     const [category] = await db
       .select()
       .from(categories)
diff --git a/frontend/db/seed-quiz-typescript.ts b/frontend/db/seed-quiz-typescript.ts
index 34aaa6f3..bd46baf9 100644
--- a/frontend/db/seed-quiz-typescript.ts
+++ b/frontend/db/seed-quiz-typescript.ts
@@ -44,15 +44,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'Основи TypeScript',
-      description: 'Перевірте свої знання базових концепцій TypeScript: типи даних, інтерфейси, generics, класи, модулі та утилітні типи.',
+      description:
+        'Перевірте свої знання базових концепцій TypeScript: типи даних, інтерфейси, generics, класи, модулі та утилітні типи.',
     },
     en: {
       title: 'TypeScript Fundamentals',
-      description: 'Test your knowledge of TypeScript basics: data types, interfaces, generics, classes, modules and utility types.',
+      description:
+        'Test your knowledge of TypeScript basics: data types, interfaces, generics, classes, modules and utility types.',
     },
     pl: {
       title: 'Podstawy TypeScript',
-      description: 'Sprawdź swoją wiedzę o podstawach TypeScript: typy danych, interfejsy, generics, klasy, moduły i typy narzędziowe.',
+      description:
+        'Sprawdź swoją wiedzę o podstawach TypeScript: typy danych, interfejsy, generics, klasy, moduły i typy narzędziowe.',
     },
   },
 };
@@ -62,7 +65,13 @@ function createExplanation(text: string) {
 }
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'parse', 'typescript', 'fundamentals', `typescript-quiz-part${partNumber}.json`);
+  const partPath = join(
+    process.cwd(),
+    'parse',
+    'typescript',
+    'fundamentals',
+    `typescript-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -70,7 +79,6 @@ async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
 async function ensureQuizExists(): Promise<string> {
   console.log('Ensuring quiz exists...');
 
-  // Find category by slug
   const [category] = await db
     .select()
     .from(categories)
@@ -78,10 +86,11 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
-  // Clean up old quiz by slug
   const existing = await db.query.quizzes.findFirst({
     where: eq(quizzes.slug, QUIZ_METADATA.slug),
   });
@@ -90,19 +99,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 1,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 1,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -117,14 +133,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 1,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 1,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -138,15 +157,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -159,12 +187,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -185,7 +216,9 @@ async function seedQuizFromJson() {
 
   if (!partArg) {
     console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-typescript.ts <part-number>');
+    console.log(
+      'Usage: npx tsx db/seeds/seed-quiz-typescript.ts <part-number>'
+    );
     console.log('Example: npx tsx db/seeds/seed-quiz-typescript.ts 1');
     console.log('Or upload all: npx tsx db/seeds/seed-quiz-typescript.ts all');
     process.exit(1);
@@ -209,7 +242,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -224,7 +259,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -234,7 +271,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/parse/README.md b/frontend/parse/README.md
index 14b1d110..e69de29b 100644
--- a/frontend/parse/README.md
+++ b/frontend/parse/README.md
@@ -1,5827 +0,0 @@
-<details>
-<summary>1. Що таке CSS? І навіщо він використовується?</summary>
-
-#### CSS
-
-CSS (Cascading Style Sheets) — це мова стилів для опису вигляду веб-сторінок.
-Використовується для розмітки елементів на сторінці, таких як шрифти, кольори,
-відступи, позиціонування та інші візуальні аспекти. CSS дозволяє відокремити
-контент (HTML) від стилів, що полегшує підтримку та зміну вигляду сайту.
-
-</details>
-
-<details>
-<summary>2. Що таке каскадність у CSS??</summary>
-
-#### CSS
-
-Каскадність у CSS — це механізм, який визначає, як застосовуються стилі до
-елементів веб-сторінки, якщо для одного елемента задано кілька різних стилів із
-різних джерел або рівнів. Вона дозволяє браузеру вирішити, які стилі будуть мати
-вищий пріоритет і застосовуватися в кінцевому результаті.
-
-</details>
-
-<details>
-<summary>3. Які є способи підключення CSS до HTML-документу?</summary>
-
-#### CSS
-
-- Вбудовані стилі (inline) — напряму в HTML-тегах через атрибут `style`.
-- Внутрішні стилі — у секції `<style>...</style> ` всередині HTML-документа.
-- Зовнішні стилі — у CSS-файлах, підключених через
-  `<link rel=”stylesheet” href=”styles.css”>` або `@import`.
-
-</details>
-
-<details>
-<summary>4. Що таке CSS-селектори? Наведіть приклади.</summary>
-
-#### CSS
-
-CSS-селектори використовуються для вибору HTML-елементів, до яких застосовуються
-стилі.
-
-**Приклади:**
-
-- За тегом: `h1 { color: red; }`
-- За класом: `.button { background: blue; }`
-- За ID: `#header { padding: 10px; }`
-
-**Комбіновані:**
-
-- Дочірні: `ul > li { margin: 5px; }`
-- Нащадки: `div p { font-size: 14px; }`
-- Атрибути: `[type="text"] { border: 1px solid gray; }`
-
-**Псевдокласи:**
-
-- `a:hover { color: green; }`
-- `:nth-child(2) { font-weight: bold; }`
-
-**Псевдоелементи:**
-
-- `p::first-line { text-transform: uppercase; }`
-
-</details>
-
-<details>
-<summary>5. Як працює наслідування в CSS?</summary>
-
-#### CSS
-
-Наслідування в CSS дозволяє деяким властивостям автоматично передаватися від
-батьківського елемента до дочірніх.
-
-- **Особливості:**
-
-1. Автоматично наслідуються тільки текстові та декоративні властивості:
-
-`color`, `font`, `visibility`, `line-height` тощо.
-
-2. Не наслідуються автоматично властивості, що впливають на коробку (box model):
-
-`margin`, `padding`, `border`, `width`, `heigh`t тощо.
-
-**Контроль наслідування:**
-
-1. **Примусове наслідування:** використовуйте значення inherit.
-
-   ```css
-   p {
-     border: inherit;
-   }
-   ```
-
-2. **Відміна наслідування:** значення initial скидає властивість до початкового
-   (згідно стандарту).
-
-   ```css
-   p {
-     color: initial;
-   }
-   ```
-
-</details>
-
-<details>
-
-<summary>6. Що таке «модель коробки» (box model) в CSS і як її можна змінити?</summary>
-
-#### CSS
-
-«Модель коробки» (box model) визначає, як розміри елемента розраховуються в CSS.
-Вона складається з:
-
-- **Content:** Вміст елемента (текст, зображення).
-- **Padding:** Внутрішній відступ між вмістом і рамкою.
-- **Border:** Рамка навколо padding.
-- **Margin:** Зовнішній відступ між елементом і сусідніми елементами.
-
-Розрахунок ширини та висоти:
-
-- За замовчуванням:
-
-```css
-Width/Height = Content + Padding + Border
-```
-
-- Зміна моделі коробки:
-
-  Використовуйте властивість box-sizing:
-
-1. content-box (за замовчуванням):
-
-Ширина/висота включає лише вміст. Padding і border додаються до загального
-розміру.
-
-```css
-box-sizing: content-box;
-```
-
-2. border-box:
-
-Ширина/висота включають вміст, padding і border (зручніше для макетів).
-
-```css
-box-sizing: border-box;
-```
-
-Приклад:
-
-```css
-* {
-  box-sizing: border-box;
-}
-```
-
-Це допомагає уникнути помилок у розмітці.
-
-</details>
-
-<details>
-<summary>7. У чому різниця між margin і padding?</summary>
-
-#### CSS
-
-Різниця між margin і padding:
-
-1. Розташування:
-
-   `margin` створює зовнішній відступ між елементом і сусідніми елементами.
-   `padding` створює внутрішній відступ між вмістом елемента і його рамкою
-   (border).
-
-2. Вплив на фон:
-
-   `margin` не впливає на фон елемента; простір залишається прозорим. `padding`
-   є частиною елемента, тому фон розтягується на область padding.
-
-3. Колізія (margin collapsing):
-
-   `margin` сусідніх блоків може "зливатися" в один (найбільший). `padding` не
-   зливається; завжди додається до внутрішнього простору.
-
-Приклад:
-
-```css
-div {
-  margin: 20px; /* Відступ від інших елементів */
-  padding: 20px; /* Відступ між вмістом і рамкою */
-  background-color: lightblue;
-}
-```
-
-</details>
-
-<details>
-<summary>8. Що таке Flexbox?</summary>
-
-#### CSS
-
-Flexbox (Flexible Box Layout) — це CSS-модель розташування елементів, яка
-забезпечує гнучке вирівнювання та розподіл простору в межах контейнера, навіть
-якщо розміри елементів невідомі або змінюються.
-
-**Основні поняття:**
-
-**Flex-контейнер:** Батьківський елемент, на який застосовується
-`display: flex;`. **Flex-елементи:** Дочірні елементи flex-контейнера.
-
-**Основні властивості Flexbox:**
-
-Для контейнера:
-
-- `flex-direction`: Напрямок розташування елементів (`row`, `row-reverse`,
-  `column`, `column-reverse`).
-- `justify-content`: Горизонтальне вирівнювання елементів (`flex-start`,
-  `center`, `space-between`, `space-around`, `space-evenly`).
-- `align-items`: Вертикальне вирівнювання елементів (`stretch`, `center`,
-  `flex-start`, `flex-end`, `baseline`).
-- `align-content`: Вирівнювання рядків у багаторядковому контейнері (`stretch`,
-  `center`, `space-between`).
-- `flex-wrap`: Дозволяє елементам переноситися (`nowrap`, `wrap`,
-  `wrap-reverse`).
-
-Для елементів:
-
-- `flex-grow`: Як елемент збільшується вільним простором.
-- `flex-shrink`: Як елемент зменшується при нестачі простору.
-- `flex-basis`: Базовий розмір елемента перед розподілом простору.
-- `align-self`: Вирівнювання конкретного елемента всередині контейнера.
-
-- Приклад:
-
-  ```css
-  .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .item {
-    flex: 1; /* Рівний розподіл простору */
-  }
-  ```
-
-</details>
-
-<details>
-<summary>9. Що таке Grid?</summary>
-
-#### CSS
-
-CSS Grid — це потужна система розмітки, яка дозволяє створювати двовимірні сітки
-для розташування елементів як по горизонталі, так і по вертикалі.
-
-**Основні поняття:**
-
-- **Grid-контейнер:** Елемент, на який застосовується `display: grid;`.
-- **Grid-елементи:** Дочірні елементи grid-контейнера.
-- **Лінії сітки:** Вертикальні та горизонтальні межі, що ділять сітку на
-  осередки.
-- **Треки:** Рядки (`rows`) і колонки (`columns`).
-- **Області:** Прямокутні зони, об'єднані з кількох осередків.
-- **Основні властивості Grid:**
-
-Для контейнера:
-
-- `grid-template-rows`, `grid-template-columns`: Задають кількість і розміри
-  рядків та колонок.
-- `grid-template-areas`: Іменовані області для організації елементів.
-- `gap` (або `row-gap/column-gap`): Відступи між рядками та колонками.
-- `justify-items`, `align-items`: Вирівнювання елементів у клітинках.
-- `justify-content`, `align-content`: Вирівнювання всієї сітки в контейнері.
-
-Для елементів:
-
-- `grid-column`, `grid-row`: Позиціювання по колонках і рядках.
-- `grid-area`: Розміщення в іменованій області.
-- `place-self`: Індивідуальне вирівнювання елемента.
-
-Приклад:
-
-```css
-.container {
-  display: grid;
-  grid-template-columns: 1fr 2fr; /* Дві колонки: 1 частина та 2 частини */
-  grid-template-rows: 100px auto; /* Рядок фіксованої висоти і автоматичний */
-  gap: 10px;
-}
-
-.item1 {
-  grid-column: 1 / 3; /* Займає дві колонки */
-}
-
-.item2 {
-  grid-row: 2; /* Розташований у другому рядку */
-}
-```
-
-</details>
-
-<details>
-<summary>10. Що таке медіазапити та як їх використовувати?</summary>
-
-#### CSS
-
-Медіазапити — це умови, які дозволяють застосовувати різні стилі в залежності
-від характеристик пристрою (наприклад, розміру екрану, орієнтації). Вони
-використовуються в CSS через правило @media.
-
-Приклад медіазапиту для адаптивного дизайну:
-
-```css
-/* Стилі для мобільних пристроїв */
-@media (max-width: 768px) {
-  body {
-    background-color: lightblue;
-  }
-}
-
-/* Стилі для десктопів */
-@media (min-width: 769px) {
-  body {
-    background-color: lightgreen;
-  }
-}
-```
-
-</details>
-
-<details>
-<summary>11. Як можна приховати елемент за допомогою CSS?</summary>
-
-#### CSS
-
-Щоб приховати елемент за допомогою CSS, можна використовувати:
-
-- `display: none;` — видаляє елемент з потоку документа. Він не займає місця на
-  сторінці і з ним не можна взаємодіяти.
-- `visibility: hidden;` — елемент стає невидимим, але зберігає своє місце на
-  сторінці.
-- `opacity: 0;` — робить елемент прозорим, але він залишається видимим і займає
-  місце на сторінці.
-
-</details>
-
-<details>
-<summary>12. Як можна зробити лого посередині екрана?</summary>
-
-#### CSS
-
-Щоб розмістити лого посередині екрана, можна використати такі способи:
-
-1. Flexbox:
-
-   ```css
-   body,
-   html {
-     height: 100%;
-     margin: 0;
-     display: flex;
-     justify-content: center;
-     align-items: center;
-   }
-
-   .logo {
-     /* стилі лого */
-   }
-   ```
-
-2. Grid:
-
-   ```css
-   body,
-   html {
-     height: 100%;
-     margin: 0;
-     display: grid;
-     place-items: center;
-   }
-
-   .logo {
-     /* стилі лого */
-   }
-   ```
-
-3. Absolute позиціювання:
-
-   ```css
-   body,
-   html {
-     height: 100%;
-     margin: 0;
-     position: relative;
-   }
-
-   .logo {
-     position: absolute;
-     top: 50%;
-     left: 50%;
-     transform: translate(-50%, -50%);
-   }
-   ```
-
-</details>
-
-<details>
-<summary>13. Як розмістити хрестик для закриття справа зверху елемента?</summary>
-
-#### CSS
-
-Щоб розмістити хрестик для закриття в правому верхньому куті елемента, можна
-використати абсолютне позиціювання:
-
-```css
-.container {
-  position: relative; /* щоб хрестик позиціонувався відносно контейнера */
-}
-
-.close-btn {
-  position: absolute;
-  top: 10px; /* відстань від верхнього краю */
-  right: 10px; /* відстань від правого краю */
-  cursor: pointer; /* щоб курсор змінювався при наведенні */
-}
-```
-
-```html
-<div class="container">
-  <div class="close-btn">&times;</div>
-  <!-- інший контент -->
-</div>
-```
-
-</details>
-
-<details>
-<summary>14. Як зробити останній елемент списку червоним, незалежно від довжини списку без JS?</summary>
-
-#### CSS
-
-- Щоб зробити останній елемент списку червоним без JavaScript, можна використати
-  псевдоклас `:last-child:`.
-- Це правило зробить останній елемент у будь-якому списку (незалежно від його
-  довжини) червоним.
-
-  ```css
-  ul li:last-child {
-    color: red;
-  }
-  ```
-
-- Це правило зробить останній елемент у будь-якому списку (незалежно від його
-  довжини) червоним.
-
-</details>
-
-<details>
-<summary>15. Які є можливості задати колір?</summary>
-
-#### CSS
-
-У CSS є кілька способів задати колір:
-
-1. Ім’я кольору:
-
-   ```css
-   color: red;
-   ```
-
-2. Шістнадцятковий код:
-
-   ```css
-   color: #ff0000; /* червоний */
-   ```
-
-3. RGB (Red, Green, Blue):
-
-   ```css
-   color: rgb(255, 0, 0); /* червоний */
-   ```
-
-4. RGBA (Red, Green, Blue, Alpha):
-
-   ```css
-   color: rgba(255, 0, 0, 0.5); /* червоний з прозорістю */
-   ```
-
-5. HSL (Hue, Saturation, Lightness):
-
-   ```css
-   color: hsl(0, 100%, 50%); /* червоний */
-   ```
-
-6. HSLA (Hue, Saturation, Lightness, Alpha):
-
-   ```css
-   color: hsla(0, 100%, 50%, 0.5); /* червоний з прозорістю */
-   ```
-
-7. Ключові слова прозорості:
-
-   ```css
-   color: transparent; /* прозорий */
-   ```
-
-Ці способи дозволяють вибирати колір за різними параметрами: від прямого опису
-кольору до використання прозорості або відтінків.
-
-</details>
-
-<details>
-<summary>16. Що таке z-index? Чи кожен елемент його має?</summary>
-
-#### CSS
-
-`z-index` — це властивість CSS, яка визначає порядок накладання елементів по осі
-Z (глибина, перетин елементів). Елементи з більшим `z-index` накладаються поверх
-елементів з меншим значенням.
-
-- **Особливості:**
-
-1. Тільки для позиційованих елементів: `z-index` працює, якщо елемент має
-   `position`: `relative`, `absolute`, `fixed` або `sticky`. Без цього `z-index`
-   ігнорується.
-
-2. Значення за замовчуванням: Якщо `z-index` не задано, значення за
-   замовчуванням — `auto`. У такому випадку порядок накладання визначається
-   порядком у DOM.
-
-3. Може бути від’ємним: Елементи з від’ємним `z-index` можуть накладатися позаду
-   батьківських елементів.
-
-- Приклад:
-
-  ```css
-  .div1 {
-    position: relative;
-    z-index: 10; /* цей елемент буде поверх */
-  }
-
-  .div2 {
-    position: relative;
-    z-index: 5; /* цей елемент буде під div1 */
-  }
-  ```
-
-</details>
-
-<details>
-<summary>17. Які переваги і недоліки використання CSS-препроцесорів?</summary>
-
-#### CSS
-
-**Переваги CSS-препроцесорів:**
-
-1. **Змінні:** Легко створювати глобальні змінні для кольорів, шрифтів,
-   розмірів.
-
-   ```css
-   $primary-color: #3498db;
-
-   body {
-     color: $primary-color;
-   }
-   ```
-
-2. **Вкладеність:** Зручний запис стилів для вкладених елементів.
-
-   ```css
-   nav {
-     ul {
-       li {
-         a {
-           color: #000;
-         }
-       }
-     }
-   }
-   ```
-
-3. **Міксіни:** Повторно використовувані блоки коду.
-
-   ```css
-   @mixin flex-center {
-     display: flex;
-     justify-content: center;
-     align-items: center;
-   }
-
-   div {
-     @include flex-center;
-   }
-   ```
-
-4. **Функції:** Обчислення прямо в стилях.
-
-   ```css
-   width: calc(100% - 50px);
-   ```
-
-5. **Управління кодом:** Імпорт окремих файлів (`@import`), що полегшує
-   підтримку великого проекту.
-
-**Недоліки CSS-препроцесорів:**
-
-1. **Складність налаштування:** Потрібно встановлювати додаткові інструменти
-   (наприклад, компілятор для SCSS або LESS).
-
-2. **Продуктивність:** Велика кількість вкладеностей або міксінів може
-   ускладнити генерований CSS і вплинути на швидкість.
-
-3. **Залежність:** Знання синтаксису препроцесора необов'язково підтримується
-   усіма розробниками в команді.
-
-4. **Дебагінг:** Згенерований CSS може бути складніше дебажити, якщо немає
-   source maps.
-
-Використання залежить від розміру проекту та необхідності складних стилів. Для
-великих проектів переваги переважують недоліки.
-
-</details>
-
-<details>
-<summary>18. Для чого існують різні рівні заголовків, якщо розмір можна встановити стилями?</summary>
-
-#### CSS
-
-Рівні заголовків (`<h1> – <h6>`) мають інше призначення, окрім визначення
-розміру. Їхня основна функція — структуризація контенту для семантики та
-доступності:
-
-1. **Семантика:** Заголовки формують ієрархію документа. Наприклад:
-
-`<h1>` — головна тема сторінки. `<h2>` — підрозділ теми `<h1>`. `<h3>` —
-підрозділ `<h2>`, і так далі.
-
-2. **SEO:** Пошукові системи (Google, Bing) використовують заголовки для
-   розуміння структури і змісту сторінки. Коректна ієрархія заголовків підвищує
-   релевантність сторінки.
-
-3. **Доступність:** Екранні читачі для людей із порушеннями зору використовують
-   заголовки для навігації по сторінці.
-
-4. **Стандарти:** Використання заголовків за призначенням робить код зрозумілим
-   для інших розробників.
-
-Розмір заголовків можна стилізувати за допомогою CSS, але правильне використання
-тегів забезпечує краще розуміння і роботу сторінки.
-
-</details>
-
-<details>
-<summary>19. Які є варіанти позиціонування елемента на сторінці?</summary>
-
-#### CSS
-
-У CSS є кілька варіантів позиціонування елементів:
-
-1. `static` (за замовчуванням): Елемент розташовується в потоці документа
-   відповідно до порядку в HTML. Немає можливості змінювати його положення через
-   властивості top, right, bottom, left.
-
-2. `relative`: Елемент залишається в потоці документа, але його положення можна
-   змінити відносно початкової позиції за допомогою top, right, bottom, left.
-
-3. `absolute`: Елемент вилучається з потоку і позиціонується відносно
-   найближчого батьківського елемента з позиціюванням (relative, absolute,
-   fixed). Якщо такого немає, то відносно всього документа.
-
-4. `fixed`: Елемент вилучається з потоку і закріплюється відносно вікна
-   браузера. Його положення не змінюється при прокручуванні сторінки.
-
-5. `sticky`: Комбінація relative і fixed. Елемент позиціонується відносно потоку
-   документа, поки не досягне заданого порогу (top, bottom тощо), після чого
-   "прилипає" до цього порогу при прокручуванні.
-
-6. `inherit`, `initial`, `unset`:
-
-- inherit — наслідує значення від батьківського елемента.
-- initial — скидає до значення за замовчуванням (static).
-- unset — застосовує inherit або initial залежно від контексту.
-
-- Кожен варіант використовується залежно від завдання: від базового розташування
-  до складного позиціонування в макетах.
-
-</details>
-
-<details>
-<summary>20. Які бувають види display? Який використовуєте найчастіше? У чому особливість inline-block?</summary>
-
-#### CSS
-
-Основні види display в CSS:
-
-**`block`**:
-
-- Елемент займає всю ширину батьківського контейнера.
-- Починається з нового рядка.
-- Можна задавати ширину, висоту, внутрішні/зовнішні відступи.
-- Приклад: `<div>`, `<p>`.
-
-**`inline`**:
-
-- Елемент розташовується в одному рядку з іншими елементами.
-- Неможливо задавати ширину та висоту.
-- Відступи (margin/padding) впливають лише на внутрішній простір.
-- Приклад: `<span>`, `<a>`.
-
-**`inline-block`**:
-
-- Поєднує особливості block і inline.
-- Елемент розташовується в рядку, але дозволяє задавати ширину, висоту,
-  відступи.
-- Зручний для створення кнопок, тегів.
-
-**`flex`**:
-
-- Відображає елемент як контейнер для гнучкого компонування дочірніх елементів.
-- Використовується для вирівнювання та розподілу простору між елементами.
-
-**`grid`**:
-
-- Задає контейнер для компонування в двовимірній сітці.
-- Зручний для складних макетів.
-
-**`none`**:
-
-- Елемент не відображається на сторінці.
-
-**`inline-flex` / `inline-grid`**:
-
-- Аналогічні flex і grid, але зберігають властивості inline.
-
-**`table` / `table-row` / `table-cell`**:
-
-- Елементи імітують поведінку таблиць HTML.
-
-**Найчастіше використовується:**
-
-- block, inline-block, flex, і grid — залежно від завдань.
-- inline-block популярний для створення кнопок або елементів меню, які потрібно
-  розташувати в рядок, але контролювати їх розміри.
-
-**Особливість inline-block:**
-
-- Елементи розташовуються в рядок, як inline, але поводяться як block,
-  дозволяючи задавати ширину, висоту, та всі відступи.
-- Проблема: між елементами може з’явитися проміжок (через пробіли в HTML).
-
-- Виправляється:
-  - Видаленням пробілів у коді.
-  - Встановленням font-size: 0 для батьківського контейнера.
-
-</details>
-
-<details>
-<summary>21. Що таке CSS-правило?</summary>
-
-#### CSS
-
-CSS-правило складається з селектора та блоку декларацій. Селектор визначає, до
-яких елементів на сторінці застосовуються стилі, а блок декларацій містить
-властивості та їх значення, що визначають вигляд цих елементів. Наприклад:
-
-```css
-p {
-  color: red;
-  font-size: 16px;
-}
-```
-
-Тут `p` — селектор (вибирає всі абзаци), а в блоці декларацій вказано, що текст
-буде червоним і розмір шрифту 16px.
-
-</details>
-
-<details>
-<summary>22. Варіанти додавання CSS стилів на сторінку?</summary>
-
-#### CSS
-
-1. **Inline CSS:** Стилі додаються безпосередньо до HTML елементів через атрибут
-   `style`.
-
-```html
-<p style="color: red; font-size: 16px;">Text</p>
-```
-
-2. **Internal CSS:** Стилі додаються в `<style>` тег в межах `<head>` секції
-   HTML документа.
-
-```html
-<style>
-  p {
-    color: red;
-    font-size: 16px;
-  }
-</style>
-```
-
-3. **External CSS:** Стилі прописуються в окремому CSS файлі, який підключається
-   до HTML через тег `<link>`.
-
-```html
-<link rel="stylesheet" href="styles.css" />
-```
-
-Ці варіанти відрізняються за пріоритетом і зручністю для масштабування проектів.
-
-</details>
-
-<details>
-<summary>23. Типи позиціонування у CSS?</summary>
-
-#### CSS
-
-1. **static:** За замовчуванням для всіх елементів. Елементи розташовуються в
-   нормальному потоці документа (тобто, згідно з їх порядком у HTML).
-
-2. **relative:** Елемент розташовується відносно його початкового положення в
-   потоці. Можна використовувати властивості `top`, `right`, `bottom`, `left`.
-
-3. **absolute:** Елемент позиціонується відносно найближчого батьківського
-   елемента з позиціонуванням (не `static`). Якщо такого немає, то відносно
-   документа.
-
-4. **fixed:** Елемент позиціонується відносно вікна браузера, тобто він
-   залишатиметься на тому ж місці при прокручуванні сторінки.
-
-5. **sticky:** Елемент поводиться як relative до певного моменту, після чого
-   стає fixed, коли прокручують сторінку до заданого порогу.
-
-</details>
-
-<details>
-<summary>24. Блокова модель CSS?</summary>
-
-#### CSS
-
-Блокова модель CSS (Box Model) описує, як елементи розташовуються на
-веб-сторінці та як обчислюються їх розміри. Вона включає такі компоненти:
-
-1. **Content (Контент):** Це основна частина елемента, де міститься текст або
-   інші медіа. Розміри контенту визначаються властивостями `width` і `height`.
-
-2. **Padding (Відступи):** Простір між контентом і межами елемента (border).
-   Відступи додаються всередині елемента. Властивості: `padding-top`,
-   `padding-right`, `padding-bottom`, `padding-left`.
-
-3. **Border (Межа):** Лінія, яка оточує елемент. Може мати товщину, стиль та
-   колір. Властивості: `border-width`, `border-style`, `border-color`.
-
-4. **Margin (Зовнішній відступ):** Простір між елементом і його сусідніми
-   елементами. Відступи додаються зовні елемента. Властивості: `margin-top`,
-   `margin-right`, `margin-bottom`, `margin-left`.
-
-- Коли вказуються розміри елемента через `width` і `height`, вони зазвичай
-  враховують тільки `content`, але при додаванні `padding`, `border` і `margin`,
-  розміри елемента змінюються.
-
-- Важливо знати, що властивість `box-sizing` дозволяє визначати, як враховуються
-  ці величини при обчисленні розмірів елемента:
-
-  - `content-box` (за замовчуванням): розміри елемента — це тільки контент.
-
-  - `border-box`: розміри елемента враховують також `padding` та `border`.
-
-</details>
-
-<details>
-<summary>25. Що таке селектор? І які селектори є?</summary>
-
-#### CSS
-
-**Селектор** у CSS — це частина правила, яка визначає, до яких елементів на
-сторінці застосовуються стилі. Селектори дозволяють вибирати HTML елементи для
-застосування стилів.
-
-#### Основні типи селекторів:
-
-1. **Типовий селектор (Type selector):** Вибирає елементи за їх тегом.
-
-```css
-p {
-  color: red;
-}
-```
-
-2. **Класовий селектор (Class selector):** Вибирає елементи за класом,
-   починається з крапки.
-
-```css
-.my-class {
-  color: blue;
-}
-```
-
-3. **Ідентифікатор (ID selector):** Вибирає елементи за ідентифікатором,
-   починається з решітки.
-
-```css
-#my-id {
-  color: green;
-}
-```
-
-4. **Атрибутний селектор (Attribute selector):** Вибирає елементи за значенням
-   їх атрибутів.
-
-```css
-input[type='text'] {
-  border: 1px solid black;
-}
-```
-
-5. **Псевдоклас (Pseudo-class selector):** Вибирає елементи, що знаходяться в
-   певному стані.
-
-```css
-a:hover {
-  color: red;
-}
-```
-
-6. **Псевдоелемент (Pseudo-element selector):** Вибирає частини елементів,
-   наприклад, перший рядок або першу літеру.
-
-```css
-p::first-letter {
-  font-size: 2em;
-}
-```
-
-7. **Комбінатори (Combinators):**
-
-**_Descendant_** (потомок): Вибирає елементи, які є нащадками іншого елемента.
-
-```css
-div p {
-  color: purple;
-}
-```
-
-**_Child_** (прямий нащадок): Вибирає елементи, що є прямими дітьми іншого
-елемента.
-
-```css
-div > p {
-  color: yellow;
-}
-```
-
-**_Adjacent sibling_** (сусід): Вибирає елемент, який йде безпосередньо після
-іншого.
-
-```css
-h1 + p {
-  margin-top: 0;
-}
-```
-
-**_General sibling_** (загальний сусід): Вибирає елементи, які є сусідами
-певного елемента.
-
-```css
-h1 ~ p {
-  color: orange;
-}
-```
-
-Це основні типи селекторів, що використовуються для вибору та стилізації
-елементів.
-
-</details>
-
-<details>
-<summary>26. Різниця між Reset.css та Normalize.css?</summary>
-
-#### CSS
-
-**Reset.css** і **Normalize.css** — це два різні підходи до управління стилями
-за замовчуванням у браузерах, але з різними цілями:
-
-1. **Reset.css:**
-
-**Мета:** Видалити всі стилі браузера (включаючи відступи, поля, шрифти тощо),
-щоб почати з "чистого аркуша".
-
-**Результат:** Все, що за замовчуванням задається браузером, скидається, і
-елементи стають однаковими в усіх браузерах. Це часто призводить до того, що
-потрібно вручну додавати стилі для базових елементів.
-
-**Приклад:**
-
-```css
-* {
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-```
-
-2. **Normalize.css:**
-
-**Мета:** Зробити стилі браузерів більш однаковими, але не скидаючи їх повністю.
-Підтримує стандартні стилі для елементів, щоб забезпечити однаковий вигляд у
-всіх браузерах.
-
-**Результат:** Зберігаються деякі стилі за замовчуванням, але вони
-нормалізуються для забезпечення консистентності між різними браузерами
-(наприклад, вирівнювання шрифтів, списки, таблиці).
-
-**Приклад:**
-
-```css
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-```
-
-**Основна різниця:** Reset.css скидає всі стилі браузера до мінімуму, тоді як
-Normalize.css підтримує базові стилі, але нормалізує їх для більшої узгодженості
-між браузерами.
-
-</details>
-
-<details>
-<summary>27. Різниця між display: none та visibility: hidden?</summary>
-
-#### CSS
-
-`display: none` і `visibility: hidden` приховують елементи, але працюють
-по-різному:
-
-`display: none`
-
-- Елемент зникає повністю зі сторінки.
-- Він не займає місця в макеті.
-- Інші елементи зміщуються так, ніби його не існувало.
-- Події (наприклад, кліки) не спрацьовують на ньому.
-- Використовується для повного приховування елементів.
-
-```css
-.hidden {
-  display: none;
-}
-```
-
-`visibility: hidden`
-
-- Елемент залишається на сторінці, але стає невидимим.
-- Він продовжує займати місце в макеті.
-- Інші елементи не зміщуються.
-- Події (наприклад, кліки) не спрацьовують, хоча елемент все ще є в DOM.
-
-```css
-.hidden {
-  visibility: hidden;
-}
-```
-
-**Різниця:** `display: none` прибирає елемент повністю, а `visibility: hidden`
-залишає його місце, але робить невидимим.
-
-</details>
-
-<details>
-<summary>28. Різниця між блоковим та інлайновим елементами?</summary>
-
-#### CSS
-
-**Блокові (block) та інлайнові (inline) елементи** відрізняються способом
-відображення та впливом на структуру сторінки.
-
-#### Блокові елементи (display: block)
-
-- Починаються з нового рядка.
-- Автоматично займають всю доступну ширину (по горизонталі).
-- Можуть містити як інші блокові, так і інлайнові елементи.
-- Підтримують width, height, margin, padding.
-
-**Приклади:** `<div>`, `<p>`, `<h1>-<h6>`, `<section>`, `<article>`, `<form>`,
-`<header>`, `<footer>`
-
-```css
-div {
-  display: block;
-  width: 100%;
-}
-```
-
-#### Інлайнові елементи (display: inline)
-
-- Не починаються з нового рядка, розташовуються "в потоці" тексту.
-- Ширина та висота залежать від вмісту.
-- width і height ігноруються (не можна змінювати вручну).
-- margin та padding працюють тільки по горизонталі.
-
-**Приклади:** `<span>`, `<a>`, `<strong>`, `<em>`, `<b>`, `<i>`
-
-```css
-span {
-  display: inline;
-  color: red;
-}
-```
-
-#### Різниця
-
-- Блокові елементи займають всю ширину і формують окремий рядок.
-- Інлайнові елементи залишаються в потоці тексту та займають рівно стільки
-  місця, скільки потрібно їх вмісту.
-
-</details>
-
-<details>
-<summary>29. Різниця між класом та ідентифікатором у CSS?</summary>
-
-#### CSS
-
-#### Клас (`class`) vs Ідентифікатор (`id`) у CSS
-
-| Параметр              | Клас (`class`)                            | Ідентифікатор (`id`)                      |
-| --------------------- | ----------------------------------------- | ----------------------------------------- |
-| Синтаксис             | Починається з `.`                         | Починається з `#`                         |
-| Призначення           | Використовується для групи елементів      | Призначається одному унікальному елементу |
-| Повторне використання | Може застосовуватися до кількох елементів | Повинен бути унікальним на сторінці       |
-| Пріоритет у CSS       | Менший (0,0,1,0)                          | Вищий (0,1,0,0)                           |
-| HTML приклад          | `<div class="box"></div>`                 | `<div id="unique-box"></div>`             |
-| CSS приклад           | `.box { color: red; }`                    | `#unique-box { color: blue; }`            |
-
-#### Різниця
-
-- Класи використовуються для стилізації кількох елементів.
-- ID застосовується до одного унікального елемента (але можна порушити це
-  правило).
-- ID має вищий пріоритет, тому його важко перевизначити.
-- Класи краще використовувати для стилізації, ID — для JavaScript або унікальної
-  ідентифікації.
-
-</details>
-
-<details>
-<summary>30. Що таке CSS спрайт? І для чого він використовується?</summary>
-
-#### CSS
-
-CSS спрайт — це техніка, де кілька зображень об'єднуються в одне велике
-зображення, а потім через CSS задаються позиції фону для відображення різних
-частин цього зображення.
-
-Використовується для зменшення кількості HTTP-запитів, що підвищує швидкість
-завантаження сторінки. Зазвичай застосовується для іконок, кнопок або інших
-маленьких зображень, що використовуються на сайті.
-
-#### Ось приклад використання CSS спрайту:
-
-1. **Створення спрайта:** У вас є декілька маленьких зображень (наприклад,
-   іконки), які ви об'єднуєте в один великий файл sprite.png.
-
-2. **CSS для використання спрайта:**
-
-```css
-.icon {
-  width: 50px;
-  height: 50px;
-  background-image: url('sprite.png');
-  display: inline-block;
-}
-
-.icon-facebook {
-  background-position: 0 0; /* Перша іконка в спрайті */
-}
-
-.icon-twitter {
-  background-position: -50px 0; /* Друга іконка в спрайті */
-}
-
-.icon-linkedin {
-  background-position: -100px 0; /* Третя іконка в спрайті */
-}
-```
-
-3. **HTML для іконок:**
-
-```html
-<div class="icon icon-facebook"></div>
-<div class="icon icon-twitter"></div>
-<div class="icon icon-linkedin"></div>
-```
-
-У цьому прикладі всі іконки завантажуються з одного файлу sprite.png, і за
-допомогою CSS background-position визначається, яка частина спрайту
-відображатиметься для кожної іконки.
-
-Цей підхід вже не використовуеться в CSS, але для себе знати треба. 📝
-
-</details>
-
-<details>
-<summary>31. Що таке вендорні префікси? І навіщо вони використовуються?</summary>
-
-#### CSS
-
-Вендорні префікси — це спеціальні префікси, які додаються до CSS властивостей
-для забезпечення підтримки нових або експериментальних функцій у різних
-браузерах. Вони використовуються, коли властивість або функція ще не є
-стандартом або коли браузери реалізують їх по-своєму.
-
-#### Приклад вендорних префіксів:
-
-```css
-.element {
-  -webkit-transform: rotate(
-    45deg
-  ); /* для браузерів на WebKit, таких як Chrome, Safari */
-  -moz-transform: rotate(45deg); /* для Firefox */
-  -ms-transform: rotate(45deg); /* для Internet Explorer */
-  transform: rotate(45deg); /* стандартна властивість */
-}
-```
-
-Вендорні префікси використовуються для забезпечення сумісності з різними
-браузерами, поки властивість не стане частиною офіційного стандарту CSS. Вони
-допомагають тестувати нові функції та забезпечують їх роботу на більшій
-кількості браузерів, поки всі вони не впровадять підтримку стандартних
-властивостей.
-
-</details>
-
-<details>
-<summary>32. Що таке псевдоелементи? І навіщо вони використовуються?</summary>
-
-#### CSS
-
-Псевдоелементи — це конструкції в CSS, які дозволяють стилізувати частини
-елементів, які не мають власного HTML представлення. Вони дозволяють додавати
-стилі до таких частин елементів, як перший рядок тексту, вміст перед або після
-елемента, або створення декоративних елементів без необхідності змінювати HTML.
-
-#### Основні псевдоелементи:
-
-- `::before` — додає вміст перед елементом.
-- `::after` — додає вміст після елемента.
-- `::first-letter` — стилізує першу букву тексту в елементі.
-- `::first-line` — стилізує перший рядок тексту в елементі.
-
-**Приклад використання:**
-
-```css
-p::before {
-  content: '🔹 ';
-}
-
-p::after {
-  content: ' 🔸';
-}
-
-p::first-letter {
-  font-size: 2em;
-  color: red;
-}
-```
-
-**Застосування:** Псевдоелементи використовуються для:
-
-- Додавання декоративних елементів без зміни HTML.
-- Створення візуальних ефектів (наприклад, стилізація першої літери або першого
-  рядка).
-- Додавання контенту перед або після елемента, наприклад, іконок або текстових
-  маркерів, без необхідності додавати додаткові теги в HTML.
-
-</details>
-
-<details>
-<summary>33. Що таке схлопування меж (margin collapsing)?</summary>
-
-#### CSS
-
-- Схлопування меж (margin collapsing) — це явище в CSS, коли вертикальні
-  відступи (margins) між сусідніми блоками або елементами "зливаються" в один,
-  замість того, щоб відображатися окремо.
-
-**Це зазвичай відбувається в таких ситуаціях:**
-
-1. Коли два сусідні блоки мають вертикальні відступи (margins).
-
-2. Коли один блок має відступ, а наступний блок не має відступу або його margin
-   значення нульове.
-
-У результаті, між елементами відображається відстань, що дорівнює найбільшому з
-цих відступів.
-
-**Приклад:**
-
-```html
-<div style="margin-bottom: 20px;">Block 1</div>
-<div style="margin-top: 10px;">Block 2</div>
-```
-
-- У цьому випадку схлопування меж призведе до того, що відстань між блоками буде
-  20px, а не 30px (як можна було б очікувати при додаванні 20px + 10px).
-
-- **Чому це відбувається?** Схлопування меж застосовується, щоб уникнути зайвих
-  відступів і зробити верстку більш зручною для використання, оскільки зазвичай
-  не має сенсу мати два відступи, що діють на ту саму частину простору.
-
-**Як уникнути схлопування:**
-
-- Використовувати `padding`, а не `margin`, якщо потрібно уникнути схлопування.
-- Встановити `overflow` на елементі.
-- Використовувати фонові або градієнтні елементи, щоб блокувати схлопування.
-
-</details>
-
-<details>
-<summary>34. Що таке z-index? Як формується контекст накладання?</summary>
-
-#### CSS
-
-`z-index` — це CSS властивість, яка визначає порядок накладання елементів на
-сторінці. Вона використовується для визначення, який елемент має бути поверх
-іншого, коли елементи перекривають один одного. Вищий `z-index` означає, що
-елемент буде накладатися поверх елементів з нижчим значенням `z-index`.
-
-#### Як працює `z-index`:
-
-- Значення `z-index` може бути цілим числом (наприклад, 1, 10, -5).
-
-- За замовчуванням, елементи з однаковим `z-index` або без нього накладаються
-  один на одного в порядку їх появи в HTML.
-
-- Чим більше значення `z-index`, тим вище елемент буде на сторінці.
-
-#### Приклад:
-
-```css
-div {
-  position: absolute;
-}
-
-.div1 {
-  z-index: 1;
-}
-
-.div2 {
-  z-index: 2;
-}
-```
-
-У цьому прикладі `.div2` буде накладатися поверх `.div1`, оскільки у неї вищий
-`z-index`.
-
-#### Контекст накладання:
-
-Контекст накладання — це область, в межах якої визначаються всі значення z-index
-для елементів. Це стосується елементів з властивістю position (не static), або
-коли застосовуються інші властивості, які створюють новий контекст накладання.
-
-**Контекст накладання формується, коли:**
-
-1. Елемент має властивість `position` з одним із значень (`relative`,
-   `absolute`, `fixed`, `sticky`).
-2. `z-index` встановлено на значення, відмінне від auto.
-3. Властивість opacity менша за 1.
-4. Властивість `transform`, `filter`, `perspective`, `clip-path` та інші
-   створюють новий контекст.
-
-**Як формується контекст накладання:**
-
-1. Вищезгадані умови (наприклад, `position: relative` і `z-index`).
-2. Ті елементи, які знаходяться в цьому контексті, будуть порівнювати свої
-   z-index тільки в межах цього контексту, а не з іншими елементами на сторінці.
-3. Якщо елемент знаходиться в різних контекстах накладання, то порівнювати
-   z-index можна лише в межах кожного з контекстів.
-
-#### Приклад контексту накладання:
-
-```html
-<div class="parent" style="position: relative; z-index: 10;">
-  <div class="child" style="position: absolute; z-index: 5;">Child 1</div>
-  <div class="child" style="position: absolute; z-index: 15;">Child 2</div>
-</div>
-
-<div class="sibling" style="position: absolute; z-index: 20;">Sibling</div>
-```
-
-У цьому прикладі:
-
-- `.child 1` і `.child 2` знаходяться в одному контексті накладання всередині
-  `.parent`.
-- `.sibling` має інший контекст накладання і з'явиться поверх обох `.child`,
-  оскільки має більший `z-index` у своєму контексті.
-
-</details>
-
-<details>
-<summary>35. Порядок накладання елементів у CSS (Stacking Order)?</summary>
-
-#### CSS
-
-Порядок накладання елементів у CSS (Stacking Order) визначається порядком, у
-якому елементи накладаються один на одного на сторінці. Це важливо, коли
-елементи з різними властивостями (наприклад, `z-index`) можуть перекривати один
-одного.
-
-#### Порядок накладання (Stacking Order):
-
-**Елементи за замовчуванням** (статичні елементи, без позиціонування та без
-`z-index`):
-
-- Елементи без позиціонування (`position: static` або без властивості
-  `position`) розташовуються один за одним у порядку їхнього розташування в
-  HTML.
-
-**Елементи з позиціонуванням** (`relative`, `absolute`, `fixed`, `sticky`):
-
-- Якщо елемент має будь-яке інше значення `position` (крім `static`), він
-  створює новий контекст накладання. У межах цього контексту елементи з більшим
-  значенням `z-index` будуть накладатися поверх елементів з меншим значенням.
-
-**Елементи з z-index**:
-
-- Елементи з більш високим `z-index` будуть розташовуватися поверх елементів з
-  нижчим значенням `z-index` (якщо елементи знаходяться в одному контексті
-  накладання).
-
-**Невидимі елементи** (з `opacity` менше 1 або з `visibility: hidden`):
-
-- Елементи, які мають властивість `opacity` менше 1 або `visibility: hidden`,
-  можуть бути розташовані поверх інших елементів, але їх все одно не видно.
-
-**Елементи з властивістю** `transform`, `filter`, `perspective`, `clip-path` та
-іншими, що створюють новий контекст накладання:
-
-- Коли елемент має одну з цих властивостей, це створює новий контекст
-  накладання, і елементи в цьому контексті будуть накладатися згідно з їхніми
-  значеннями `z-index`, незалежно від того, де вони знаходяться на сторінці.
-
-**Елементи з фонового вмісту** (`backgrounds`, `borders`, etc.):
-
-- Вміст, такий як фон або бордери, не створює власного контексту накладання, але
-  може бути важливим для визначення, як інші елементи накладаються.
-
-#### Порядок накладання елементів за замовчуванням:
-
-1. **Блоки без позиціонування** (статичні елементи).
-
-2. **Елементи з позиціонуванням** `relative` (якщо не визначено `z-index`).
-
-3. **Елементи з позиціонуванням** `absolute`, `fixed`, `sticky` (в залежності
-   від `z-index`).
-
-4. **Нове контексти накладання** (наприклад, елементи з `transform`,
-   `opacity < 1`, `filter` тощо).
-
-#### Простіше кажучи:
-
-Статичні елементи не створюють контексту накладання і накладаються в порядку
-їхнього розташування в HTML.
-
-Елементи з позиціонуванням `relative`, `absolute`, `fixed`, `sticky` створюють
-контекст накладання, де `z-index` визначає, які елементи будуть поверх інших.
-
-Елементи з новими контекстами накладання (наприклад, з `transform` або
-`opacity < 1`) накладаються поверх всіх інших елементів із меншим пріоритетом.
-
-</details>
-
-<details>
-<summary>36. Як за допомогою CSS визначити, чи підтримується властивість у браузері?</summary>
-
-#### CSS
-
-Для того, щоб перевірити, чи підтримується властивість у браузері, в CSS
-безпосередньо неможливо це зробити, оскільки CSS сам по собі не має вбудованих
-механізмів для перевірки підтримки властивостей. Однак, є кілька способів
-зробити це за допомогою JavaScript та умовних конструкцій у CSS.
-
-1. **Використання JavaScript (Modernizr)**
-
-Один із способів перевірити, чи підтримується CSS властивість у браузері — це
-використати JavaScript-бібліотеку, наприклад, Modernizr. Modernizr дозволяє
-перевіряти підтримку різних технологій і властивостей браузером.
-
-**Приклад використання Modernizr:**
-
-```javascript
-if (Modernizr.flexbox) {
-  console.log('Flexbox підтримується!');
-} else {
-  console.log('Flexbox не підтримується.');
-}
-```
-
-2. **Використання умови @supports в CSS**
-
-CSS має власну конструкцію `@supports`, яка дозволяє перевіряти, чи
-підтримується певна CSS властивість або її значення в поточному браузері.
-
-**Приклад:**
-
-```css
-/* Перевіряє, чи підтримується flexbox */
-@supports (display: flex) {
-  .container {
-    display: flex;
-  }
-}
-
-/* Якщо не підтримується flexbox, додається альтернативне значення */
-@supports not (display: flex) {
-  .container {
-    display: block;
-  }
-}
-```
-
-У цьому прикладі, якщо браузер підтримує `display: flex`, то він застосує стилі,
-визначені в першому блоці. Якщо ж не підтримує, застосує стилі з блоку
-`@supports` not.
-
-3. **Використання префіксів для застарілих властивостей**
-
-Для старих властивостей або експериментальних властивостей браузерів часто
-використовуються вендорні префікси. Якщо необхідно працювати з такими
-властивостями, часто можна додавати ці префікси та перевіряти, чи працює код на
-різних браузерах.
-
-**Приклад з вендорними префіксами:**
-
-```css
-/* Вендорні префікси для трансформацій */
-.element {
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-```
-
-Це допоможе забезпечити сумісність з різними версіями браузерів.
-
-#### Висновок
-
-Найбільш зручним методом перевірки підтримки властивості є використання
-@supports у CSS або бібліотеки Modernizr для JavaScript, яка дозволяє створити
-перевірки підтримки за допомогою скриптів.
-
-</details>
-
-<details>
-<summary>37. Глобальні ключові слова у CSS?</summary>
-
-#### CSS
-
-Глобальні ключові слова в CSS — це спеціальні значення, які можна задати
-будь-якій CSS-властивості. Вони не змінюють саме значення властивості, а
-вказують, як її слід обчислювати.
-
-#### Список глобальних ключових слів
-
-1. `inherit` – успадковує значення від батьківського елемента.
-2. `initial` – скидає значення до дефолтного (згідно зі специфікацією).
-3. `unset` – якщо властивість успадковується за замовчуванням (наприклад,
-   color), діє як inherit, інакше – як initial.
-4. `revert` – повертає значення до того, що визначено у стилях браузера чи
-   користувача.
-5. `revert-layer` – скидає значення до попереднього рівня каскаду (актуально для
-   @layer).
-
-#### Приклади використання
-
-✅ `inherit` (успадкування значення)
-
-```css
-p {
-  color: red;
-}
-span {
-  color: inherit; /* отримає червоний від <p> */
-}
-```
-
-✅ `initial` (повернення до стандартного значення)
-
-```css
-button {
-  all: initial; /* скидає всі властивості до дефолтних */
-}
-```
-
-✅ `unset` (залежно від властивості)
-
-```css
-div {
-  color: unset; /* успадкує */
-  width: unset; /* повернеться до `auto` */
-}
-```
-
-✅ `revert` (повернення до стандартних стилів браузера)
-
-```css
-a {
-  color: green;
-}
-a.special {
-  color: revert; /* поверне синій, якщо його задає браузер */
-}
-```
-
-✅ `revert-layer` (актуально для @layer)
-
-```css
-@layer framework {
-  button {
-    background: red;
-  }
-}
-
-@layer custom {
-  button {
-    background: blue;
-  }
-}
-
-/* revert-layer поверне червоний із framework, а не дефолтний */
-button {
-  background: revert-layer;
-}
-```
-
-#### Висновок
-
-- `inherit` – для спадкування.
-- `initial` – для скидання до дефолту.
-- `unset` – комбінує inherit та initial.
-- `revert` – повертає значення браузера чи стилів користувача.
-- `revert-layer` – скидає значення до попереднього рівня каскаду.
-
-</details>
-
-<details>
-<summary>38. Що таке перерахування селекторів?</summary>
-
-#### CSS
-
-Перерахування селекторів — це використання кількох селекторів, розділених комою,
-для одночасного застосування стилів до різних елементів.
-
-#### Синтаксис
-
-```css
-selector1,
-selector2,
-selector3 {
-  property: value;
-}
-```
-
-#### Приклади
-
-✅ Стилізація кількох елементів одночасно
-
-```css
-h1,
-h2,
-h3 {
-  color: red;
-}
-```
-
-Усі h1, h2 і h3 стануть червоними.
-
-✅ Комбінація класів і тегів
-
-```css
-button,
-.btn {
-  padding: 10px;
-}
-```
-
-Застосується до `<button>` і будь-якого елемента з `.btn`.
-
-✅ Перерахування складних селекторів
-
-```css
-.card .title,
-.box .header {
-  font-weight: bold;
-}
-```
-
-Стилізує `.title` всередині `.card` і `.header` всередині `.box`.
-
-#### Висновок
-
-- Коми (`,`) об'єднують селектори, застосовуючи однакові стилі.
-- Дозволяє скорочувати код і зменшувати дублювання.
-- Важливо не плутати з комбінованими селекторами (наприклад, `.class1 .class2`,
-  де `.class2` має бути всередині `.class1`).
-
-</details>
-
-<details>
-<summary>39. Для чого використовується ключове слово currentColor у CSS?</summary>
-
-#### CSS
-
-`currentColor` — це ключове слово в CSS, яке задає значення кольору (`color`)
-для інших властивостей, що підтримують кольори.
-
-#### Як працює
-
-`currentColor` автоматично використовує значення, встановлене у властивості
-`color`.
-
-#### Приклади використання
-
-✅ Однаковий колір для тексту та рамки
-
-```css
-button {
-  color: blue;
-  border: 2px solid currentColor;
-}
-```
-
-Рамка кнопки буде того ж кольору, що й текст (`blue`).
-
-✅ SVG-іконки із кольором тексту
-
-```css
-.icon {
-  color: red;
-  fill: currentColor;
-}
-```
-
-`fill` у SVG прийме `color` елемента (`red`).
-
-✅ Прозорість зі спадкуванням кольору
-
-```css
-.link {
-  color: green;
-  background: linear-gradient(currentColor 0%, transparent 100%);
-}
-```
-
-Градієнт стартує від `green`, бо це значення `color`.
-
-#### Висновок
-
-- Використовує значення `color`, усуваючи дублювання стилів.
-- Особливо корисно для SVG, `border`, `background`, `box-shadow`.
-- Спрощує темізацію: змінюєш `color`, і все підлаштовується.
-
-</details>
-
-<details>
-<summary>40. Які псевдокласи є CSS?</summary>
-
-#### CSS
-
-#### Псевдокласи в CSS
-
-- ✅ Динамічні псевдокласи
-
-| Псевдоклас | Опис                                         |
-| ---------- | -------------------------------------------- |
-| `:hover`   | При наведенні курсору.                       |
-| `:focus`   | Коли елемент у фокусі (наприклад, `input`).  |
-| `:active`  | Під час натискання.                          |
-| `:visited` | Для відвіданих посилань.                     |
-| `:target`  | Для елемента, що відповідає `#anchor` в URL. |
-
-- ✅ Структурні псевдокласи
-
-| Псевдоклас           | Опис                                                   |
-| -------------------- | ------------------------------------------------------ |
-| `:first-child`       | Перший дочірній елемент.                               |
-| `:last-child`        | Останній дочірній елемент.                             |
-| `:nth-child(n)`      | Дочірній елемент за індексом `n` (можна `odd`/`even`). |
-| `:nth-last-child(n)` | Те саме, але з кінця.                                  |
-| `:only-child`        | Якщо елемент єдиний у батьківському контейнері.        |
-
-- ✅ Типові псевдокласи
-
-| Псевдоклас             | Опис                                         |
-| ---------------------- | -------------------------------------------- |
-| `:first-of-type`       | Перший елемент певного типу.                 |
-| `:last-of-type`        | Останній елемент певного типу.               |
-| `:nth-of-type(n)`      | N-ий елемент певного типу.                   |
-| `:nth-last-of-type(n)` | N-ий елемент певного типу з кінця.           |
-| `:only-of-type`        | Якщо елемент унікальний серед такого ж типу. |
-
-- ✅ Логічні псевдокласи
-
-| Псевдоклас         | Опис                                                 |
-| ------------------ | ---------------------------------------------------- |
-| `:not(selector)`   | Вибирає все, **крім** вказаного селектора.           |
-| `:has(selector)`   | Вибирає елементи, що містять інший елемент (`CSS4`). |
-| `:where(selector)` | Як `:is()`, але без пріоритету.                      |
-| `:is(selector)`    | Спрощує складні селектори.                           |
-
-- ✅ Псевдокласи для форм
-
-| Псевдоклас    | Опис                                |
-| ------------- | ----------------------------------- |
-| `:checked`    | Позначений чекбокс або радіокнопка. |
-| `:disabled`   | Вимкнений елемент форми.            |
-| `:enabled`    | Активний елемент форми.             |
-| `:required`   | Поле `input`, що обов’язкове.       |
-| `:optional`   | Поле `input`, що не є обов’язковим. |
-| `:valid`      | Поле форми з коректним значенням.   |
-| `:invalid`    | Поле форми з некоректним значенням. |
-| `:read-only`  | Поле у режимі `readonly`.           |
-| `:read-write` | Поле, що можна редагувати.          |
-
-**Псевдокласи допомагають стилізувати елементи без додаткових класів або JS.
-Використовуйте `:is()` та `:has()` для скорочення складних селекторів у CSS4.**
-
-</details>
-
-<details>
-<summary>41. Які фільтри є у CSS?</summary>
-
-#### CSS
-
-Фільтри у CSS
-
-Фільтри (`filter`) дозволяють змінювати вигляд елементів, застосовуючи ефекти до
-їхнього рендерингу.
-
-#### 🔹 Основні фільтри
-
-| Фільтр          | Опис                                                  | Приклад                     |
-| --------------- | ----------------------------------------------------- | --------------------------- |
-| `blur(px)`      | Розмиття з вказаним радіусом у пікселях.              | `filter: blur(5px);`        |
-| `brightness(%)` | Змінює яскравість (100% – без змін).                  | `filter: brightness(150%);` |
-| `contrast(%)`   | Змінює контраст (100% – без змін).                    | `filter: contrast(120%);`   |
-| `grayscale(%)`  | Відтінки сірого (100% – чорно-біле).                  | `filter: grayscale(100%);`  |
-| `invert(%)`     | Інвертує кольори (100% – повністю інвертоване).       | `filter: invert(100%);`     |
-| `opacity(%)`    | Прозорість (0% – повністю прозоре, 100% – непрозоре). | `filter: opacity(50%);`     |
-| `saturate(%)`   | Насиченість (100% – без змін, 0% – ч/б).              | `filter: saturate(200%);`   |
-| `sepia(%)`      | Ефект сепії (100% – повністю сепія).                  | `filter: sepia(80%);`       |
-
-#### 🔹 Фільтри для тіней та зміщення
-
-| Фільтр                        | Опис                                                                        | Приклад                                              |
-| ----------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------- |
-| `drop-shadow(x y blur color)` | Додає тінь до зображення (аналог `box-shadow`, але працює з прозорими PNG). | `filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));` |
-
-#### 🔹 Комбінування фільтрів
-
-- Фільтри можна комбінувати, вказуючи їх через пробіл:
-
-```css
-filter: brightness(120%) contrast(110%) blur(3px);
-```
-
-- Фільтри застосовуються до всіх елементів, але найчастіше – до зображень (img),
-  відео та бекграундів.
-
-</details>
-
-<details>
-<summary>42. Навіщо використовується псевдоклас :invalid?</summary>
-
-#### CSS
-
-Псевдоклас `:invalid` використовується для стилізації полів вводу (`<input>`,
-`<textarea>`, `<select>`), які не відповідають вимогам валідації.
-
-#### Навіщо це потрібно?
-
-- Підсвічувати некоректно заповнені поля.
-- Покращити UX, показуючи візуальний зворотний зв’язок.
-- Додати кастомні стилі без JavaScript.
-
-#### Приклад використання
-
-```css
-input:invalid {
-  border: 2px solid red;
-  background-color: #ffe6e6;
-}
-```
-
-```html
-<input type="email" required placeholder="Введіть email" />
-```
-
-Якщо поле буде пустим або міститиме некоректний email, воно підсвітиться
-червоним.
-
-</details>
-
-<details>
-<summary>43. Розкажіть про властивість display в CSS?</summary>
-
-#### CSS
-
-#### Властивість `display` у CSS
-
-`display` визначає, як елемент відображається на сторінці та як він взаємодіє з
-іншими елементами.
-
-#### 🔹 Основні значення
-
-| Значення       | Опис                                                         |
-| -------------- | ------------------------------------------------------------ |
-| `none`         | Елемент прихований і не займає місця в макеті.               |
-| `block`        | Блочний елемент, займає всю ширину батьківського контейнера. |
-| `inline`       | Вбудований елемент, займає лише необхідну ширину.            |
-| `inline-block` | Вбудований елемент, але можна змінювати ширину/висоту.       |
-
-#### 🔹 Гнучкі макети
-
-| Значення      | Опис                                                                |
-| ------------- | ------------------------------------------------------------------- |
-| `flex`        | Активація **Flexbox** для гнучкого розташування дочірніх елементів. |
-| `grid`        | Використання **CSS Grid** для двовимірного макету.                  |
-| `inline-flex` | Flex-контейнер, але поводиться як `inline`.                         |
-| `inline-grid` | Grid-контейнер, але поводиться як `inline`.                         |
-
-#### 🔹 Табличні макети
-
-| Значення     | Опис                           |
-| ------------ | ------------------------------ |
-| `table`      | Елемент поводиться як таблиця. |
-| `table-row`  | Імітує рядок таблиці.          |
-| `table-cell` | Імітує комірку таблиці.        |
-
-#### 🔹 Інші значення
-
-| Значення    | Опис                                                         |
-| ----------- | ------------------------------------------------------------ |
-| `list-item` | Елемент поводиться як `<li>`, додаючи маркер списку.         |
-| `inherit`   | Наслідує значення `display` від батьківського елемента.      |
-| `initial`   | Встановлює значення `display` за замовчуванням для браузера. |
-
-**`display: none` повністю прибирає елемент з потоку, на відміну від
-`visibility: hidden`, який просто приховує його, залишаючи місце.**
-
-</details>
-
-<details>
-<summary>44. У якому випадку краще використовувати translate() замість абсолютного позиціонування?</summary>
-
-#### CSS
-
-Використовувати `translate()` краще в таких випадках:
-
-1. **Оптимізація продуктивності** – `translate()` використовує GPU для
-   обчислень, що робить анімації та переміщення плавнішими, ніж зміна
-   `top/left`.
-
-2. **Збереження потоку документа** – `translate()` не впливає на положення інших
-   елементів, на відміну від `position: absolute`, який змінює розташування
-   елемента відносно найближчого позиціонованого предка.
-
-3. **Поліпшення продуктивності рендерингу** – зміна `transform` не викликає
-   рефлоу (`reflow`), тоді як `top/left` змушують браузер перераховувати макет.
-
-4. **Гнучке центрування** – `translate(-50%, -50%)` часто використовується для
-   центрування без залежності від розмірів контейнера.
-
-- Якщо потрібно перемістити елемент без зміни його поточного контексту,
-  `translate()` – кращий вибір.
-
-</details>
-
-<details>
-<summary>45. Що таке плаваючі елементи (floats)? Як вони працюють?</summary>
-
-#### CSS
-
-**Плаваючі елементи** (`float`) — це механізм у CSS, який дозволяє елементам
-"виринати" ліворуч або праворуч усередині контейнера, при цьому текст та інші
-інлайн-елементи обтікають їх.
-
-#### Як працюють `float`:
-
-1. **Обтікання текстом** – якщо блок має `float: left` або `float: right`, інші
-   елементи (зазвичай текст) обтікають його.
-
-2. **Вилучення з потоку** – `float` прибирає елемент із нормального потоку
-   документа, але він все ще займає місце в контейнері.
-
-3. **Розриви потоку** (`clearfix`) – якщо всі дочірні елементи контейнера float,
-   він може схлопнутись. Виправляють це додаванням `overflow: hidden` або
-   `.clearfix (::after { content: ""; display: block; clear: both; })`.
-
-4. **Обмежена керованість** – `float` застаріває, бо не підходить для складних
-   макетів. Замість нього зараз використовують `flexbox` або `grid`.
-
-**Висновок:** `float` був основним способом верстки до появи `flexbox` і `grid`,
-але зараз використовується переважно для обтікання зображень текстом.
-
-</details>
-
-<details>
-<summary>46. Способи завдання кольору CSS?</summary>
-
-#### CSS
-
-Існує кілька способів задавати кольори в CSS:
-
-1. **Назва кольору:**
-
-Наприклад:
-
-```css
-color: red;
-```
-
-2. **Шістнадцятковий код (Hex):**
-
-Наприклад:
-
-```css
-color: #ff5733; /* Рожевий */
-```
-
-3. **RGB (Red, Green, Blue):**
-
-Визначається за допомогою значень для червоного, зеленого і синього каналів від
-0 до 255.
-
-Наприклад:
-
-```css
-color: rgb(255, 87, 51);
-```
-
-4. **RGBA (Red, Green, Blue, Alpha):**
-
-Подібно до RGB, але з додаванням каналу прозорості (alpha) від 0 (повністю
-прозорий) до 1 (непрозорий).
-
-Наприклад:
-
-```css
-color: rgba(255, 87, 51, 0.5);
-```
-
-5. **HSL (Hue, Saturation, Lightness):**
-
-Визначається за допомогою відтінку (hue), насиченості (saturation) та яскравості
-(lightness).
-
-Наприклад:
-
-```css
-color: hsl(12, 100%, 60%);
-```
-
-6. **HSLA (Hue, Saturation, Lightness, Alpha):**
-
-Як HSL, але з каналом прозорості.
-
-Наприклад:
-
-```css
-color: hsla(12, 100%, 60%, 0.5);
-```
-
-7. **CSS-Gradients:**
-
-Колір може бути визначений за допомогою градієнтів.
-
-Наприклад:
-
-```css
-background: linear-gradient(to right, red, yellow);
-```
-
-8. **Прозорі кольори:**
-
-Використовуємо ключові слова для заданого рівня прозорості.
-
-Наприклад:
-
-```css
-color: transparent;
-```
-
-Ці методи дозволяють задавати кольори на різні випадки та з різними рівнями
-контролю над прозорістю.
-
-</details>
-
-<details>
-<summary>47. Які CSS-властивості використовуються для створення анімацій та плавних переходів?</summary>
-
-#### CSS
-
-Для створення анімацій та плавних переходів у CSS використовуються такі
-властивості:
-
-1. **Плавні переходи (`transition`)**
-
-- Дозволяють змінювати значення властивостей із плавною анімацією.
-
-**Основні властивості:**
-
-- `transition-property` – яка властивість анімується.
-- `transition-duration` – час анімації.
-- `transition-timing-function` – крива прискорення (наприклад, `ease`, `linear`,
-  `ease-in-out`).
-- `transition-delay` – затримка перед анімацією.
-
-#### Приклад:
-
-```css
-button {
-  background-color: blue;
-  transition: background-color 0.3s ease-in-out;
-}
-
-button:hover {
-  background-color: red;
-}
-```
-
-2. **Анімації (`@keyframes` + `animation`)**
-
-Дозволяють створювати складніші анімації зі зміною стилів у ключових точках.
-
-**Основні властивості:**
-
-`animation-name` – ім'я анімації (відповідає @keyframes). `animation-duration` –
-тривалість анімації. `animation-timing-function` – крива прискорення.
-`animation-delay` – затримка перед початком. `animation-iteration-count` –
-кількість повторень (infinite для безкінечної анімації). `animation-direction` –
-напрям (normal, reverse, alternate). `animation-fill-mode` – визначає, чи
-зберігається стан анімації після завершення.
-
-#### Приклад:
-
-```css
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.element {
-  animation: fadeIn 1s ease-in-out;
-}
-```
-
-#### Що використовувати?
-
-- `transition` – якщо треба просто змінювати стилі при наведенні або зміні
-  класу.
-- `animation` – якщо потрібен складніший ефект з кількома ключовими кадрами.
-
-</details>
-
-<details>
-<summary>48. Різниця між псевдокласами та псевдоелементами?</summary>
-
-#### CSS
-
-Різниця між псевдокласами і псевдоелементами полягає у їхньому призначенні та
-способі застосування:
-
-#### Псевдокласи
-
-Псевдокласи застосовуються для вибору елементів на основі їхнього стану або
-взаємодії з користувачем, а не через структуру HTML. Вони дозволяють стилізувати
-елементи в певних умовах.
-
-**Приклади псевдокласів:**
-
-- `:hover` — для елементів, на які наводиться курсор.
-
-```css
-button:hover {
-  background-color: blue;
-}
-```
-
-- `:focus` — для елементів, на які надано фокус (наприклад, поля введення).
-
-```css
-input:focus {
-  border-color: green;
-}
-```
-
-- `:nth-child()` — для вибору елементів за їхнім порядковим номером серед
-  батьків.
-
-```css
-li:nth-child(odd) {
-  background-color: lightgray;
-}
-```
-
-#### Псевдоелементи
-
-Псевдоелементи дозволяють стилізувати частини елементів або додавати вміст, який
-не існує в HTML. Вони створюють віртуальні елементи для маніпуляцій із частинами
-контенту.
-
-**Приклади псевдоелементів:**
-
-- `::before`— додає вміст перед вмістом елемента.
-
-```css
-p::before {
-  content: '→ ';
-  color: green;
-}
-```
-
-- `::after` — додає вміст після вмісту елемента.
-
-```css
-p::after {
-  content: ' ←';
-  color: red;
-}
-```
-
-- `::first-letter` — для стилізації першої літери елемента.
-
-```css
-p::first-letter {
-  font-size: 2em;
-  color: blue;
-}
-```
-
-#### Ключова різниця:
-
-- Псевдокласи працюють з станом елементів (наприклад, під час наведеного курсору
-  або фокуса).
-
-- Псевдоелементи дозволяють додавати вміст до елементів або стилізувати їх
-  частини (наприклад, перша буква чи передвміст).
-
-#### Важливе зауваження:
-
-Псевдокласи використовують один знак двокрапки (:), але для псевдоелементів
-традиційно використовують два знаки двокрапки (::). Тому сучасні стандарти
-рекомендують використовувати :: для псевдоелементів (але підтримка : для
-псевдоелементів залишається).
-
-</details>
-
-<details>
-<summary>49. Розкажіть про псевдоклас :has()?</summary>
-
-#### CSS
-
-- `:has()` – **потужний CSS-псевдоклас**
-  - `:has()` — це "батьківський селектор", який дозволяє стилізувати елемент, що
-    містить певні дочірні елементи.
-
-#### Як працює?
-
-Цей псевдоклас перевіряє, чи містить елемент певний вкладений елемент, і
-застосовує до нього стилі.
-
-#### Приклад: змінюємо стиль картки, якщо в ній є зображення
-
-```css
-.card:has(img) {
-  border: 2px solid blue;
-}
-```
-
-Якщо `.card` містить `<img>`, то отримає синю рамку.
-
-#### Приклади використання
-
-1. Виділення `<input>` в контейнері, що містить кнопку "`submit`"
-
-```css
-.form:has(button[type='submit']) {
-  background-color: lightgray;
-}
-```
-
-Сірий фон застосовується тільки до .form, якщо в ній є кнопка submit.
-
-2. Приховуємо кнопку, якщо інпут порожній
-
-```css
-button:has(+ input:placeholder-shown) {
-  display: none;
-}
-```
-
-Кнопка буде схована, доки користувач не введе текст в інпут.
-
-3. Вибір батьківського елемента списку, якщо він містить активний пункт
-
-```css
-.nav:has(.active) {
-  background-color: black;
-}
-```
-
-Якщо .nav містить .active елемент, змінюється фон.
-
-#### Підтримка браузерами
-
-✅ Chrome, Edge, Safari (з 2023 року) ❌ Firefox (станом на 2025 рік досі немає
-підтримки)
-
-Поліфілів немає, тому варто перевіряти підтримку перед використанням.
-
-#### Висновок
-
-- `:has()` дає можливість змінювати батьківський елемент на основі його вмісту.
-- Робить CSS динамічнішим, замінюючи деякі JavaScript-маніпуляції.
-- Потрібно враховувати обмежену підтримку в Firefox.
-
-</details>
-
-<details>
-<summary>50. Проблеми з використанням CSS-in-JS? Як їх вирішити?</summary>
-
-#### CSS
-
-**Проблеми CSS-in-JS і способи їх вирішення**
-
-- CSS-in-JS — потужний підхід для стилізації в React та інших фреймворках, але
-  він має серйозні недоліки, які потрібно враховувати.
-
-**Погана продуктивність (перформанс)**
-
-- ❌ Проблема:
-
-  - Динамічні стилі створюються під час рендеру, що сповільнює завантаження
-    сторінки.
-  - Генерація стилів на клієнті збільшує TTI (Time to Interactive).
-
-- ✅ Рішення:
-
-  - Використовувати статичні стилі там, де це можливо (styled-components з
-    as="tag").
-  - Переносити стилі на сервер (SSR) з styled-components або emotion.
-
-```tsx
-import { ServerStyleSheet } from 'styled-components';
-```
-
-- Використовувати CSS Modules або Tailwind для критичних стилів.
-
-**Великі розміри бандлу**
-
-- ❌ Проблема:
-
-  - CSS-in-JS додає зайвий код у JavaScript-бандл.
-  - Використання бібліотек (styled-components, emotion) збільшує розмір пакета.
-
-- ✅ Рішення:
-
-  - Використовувати Linaria або Astro (CSS-in-JS без рантайму).
-  - Використовувати компіляцію під час білду (наприклад,
-    babel-plugin-styled-components).
-  - Використовувати css prop у emotion, який генерує мінімальний CSS.
-
-**Проблеми з специфічністю CSS**
-
-- ❌ Проблема:
-
-  - CSS-in-JS генерує унікальні класи, але бувають колізії.
-  - Не можна легко перевизначити стилі без !important.
-
-- ✅ Рішення:
-
-  - Використовувати theme-based стилі через контекст.
-  - Використовувати as або css для стилізації без перезапису класів.
-
-```tsx
-<Button as="a" href="/">
-  Link
-</Button>
-```
-
-**Відсутність інтуїтивного автодоповнення в IDE**
-
-- ❌ Проблема:
-
-  - IDE не завжди правильно підказує стилі всередині JS.
-  - Слабка підтримка підсвітки синтаксису в деяких редакторах.
-
-- ✅ Рішення:
-
-  - Використовувати VSCode-плагіни для styled-components або emotion.
-  - Використовувати TypeScript + CSS Variables.
-
-**Труднощі з анімаціями**
-
-- ❌ Проблема:
-
-  - CSS-in-JS не завжди добре працює з keyframes.
-  - Анімації можуть генеруватися кожен рендер.
-
-- ✅ Рішення:
-
-  - Використовувати keyframes правильно:
-
-```tsx
-import { keyframes } from 'styled-components';
-
-const fadeIn = keyframes`  from { opacity: 0; }
-  to { opacity: 1; }`;
-
-const AnimatedDiv = styled.div`
-  animation: ${fadeIn} 1s ease-in-out;
-`;
-```
-
-- Використовувати Framer Motion або GSAP замість CSS-in-JS анімацій.
-
-#### Висновок
-
-- ✅ CSS-in-JS зручно для компонентного підходу, але:
-
-  - Має проблеми продуктивності → вирішується SSR або компіляцією.
-  - Збільшує розмір бандлу → можна мінімізувати Linaria/Astro.
-  - Проблеми з специфічністю → використовувати as, теми та контекст.
-  - Автодоповнення не завжди працює → плагіни VSCode + TS.
-
-Для великих проєктів варто комбінувати CSS-in-JS з CSS Modules, Tailwind або
-ванільним CSS.
-
-</details>
-
-<details>
-<summary>51. Що означає CSS і яке його основне використання?</summary>
-
-#### CSS
-
-CSS (Cascading Style Sheets) – це мова стилів, яка використовується для опису
-зовнішнього вигляду HTML-документів. Основне використання – керування стилями
-елементів, такими як кольори, шрифти, відступи, розміри та розташування на
-сторінці.
-
-</details>
-
-<details>
-<summary>52. Які способи підключення CSS до HTML ти знаєш?</summary>
-
-#### CSS
-
-Є три способи:
-
-1. **Вбудований (Inline CSS)** – через атрибут `style` в HTML-елементі:
-
-```html
-<p style="color: red;">Текст</p>
-```
-
-2. **Вбудований блок (Internal CSS)** – у `<style>` всередині `<head>`:
-
-```html
-<head>
-  <style>
-    p {
-      color: red;
-    }
-  </style>
-</head>
-```
-
-3. **Зовнішній файл (External CSS)** – підключення окремого `.css` файлу через
-   `<link>`:
-
-```html
-<head>
-  <link rel="stylesheet" href="styles.css" />
-</head>
-```
-
-</details>
-
-<details>
-<summary>53. Яка різниця між селекторами класу та ID</summary>
-
-#### CSS
-
-**Селектор класу (`.`)**
-
-- Використовується для стилізації групи елементів.
-- Позначається крапкою (`.`) перед назвою класу.
-- Один клас можна застосувати до багатьох елементів.
-
-#### Приклад:
-
-```html
-<p class="text">Це параграф</p>
-```
-
-```css
-.text {
-  color: blue;
-}
-```
-
-**Селектор ID (`#`)**
-
-- Використовується для унікального елемента на сторінці.
-- Позначається решіткою (#) перед назвою ID.
-- Один ID має бути лише в одному елементі.
-
-#### Приклад:
-
-```html
-<p id="unique-text">Це унікальний параграф</p>
-```
-
-```css
-#unique-text {
-  color: red;
-}
-```
-
-#### Основні відмінності між селекторами класу та ID
-
-| Характеристика            | Клас (`.`)      | ID (`#`)                     |
-| ------------------------- | --------------- | ---------------------------- |
-| **Призначення**           | Група елементів | Унікальний елемент           |
-| **Повторне використання** | Так             | Ні (повинен бути унікальним) |
-| **Специфічність**         | Менша           | Вища                         |
-
-</details>
-
-<details>
-<summary>54. Що таке псевдокласи в CSS?</summary>
-
-#### CSS
-
-Псевдокласи в CSS – це спеціальні ключові слова, які додаються до селекторів і
-дозволяють стилізувати елементи в залежності від їхнього стану або положення в
-DOM.
-
-#### Приклади псевдокласів:
-
-- `:hover` – застосовується, коли користувач наводить курсор на елемент.
-- `:focus` – активується, коли елемент отримує фокус.
-- `:nth-child(n)` – вибирає елементи за їхньою позицією серед братніх елементів.
-- `:first-child` – вибирає перший дочірній елемент.
-- `:last-child` – вибирає останній дочірній елемент.
-- `:checked` – застосовується до вибраних чекбоксів або радіокнопок.
-
-#### Приклад використання:
-
-```css
-button:hover {
-  background-color: blue;
-  color: white;
-}
-
-input:focus {
-  border: 2px solid green;
-}
-
-li:nth-child(2) {
-  font-weight: bold;
-}
-```
-
-#### Важливі особливості:
-
-- Псевдокласи не змінюють HTML-структуру, а лише впливають на стилізацію.
-- Можна комбінувати кілька псевдокласів для одного елемента.
-
-</details>
-
-<details>
-<summary>55. Опишіть, як реалізувати скидання CSS і чому це корисно.</summary>
-
-#### CSS
-
-1. `Normalize.css` — не прибирає все, а уніфікує:
-
-Підключаєш файл:
-
-```html
-<link
-  rel="stylesheet"
-  href="https://necolas.github.io/normalize.css/latest/normalize.css"
-/>
-```
-
-Перевага — зберігає корисні стилі, робить вигляд однаковим у всіх браузерах.
-
-2. `Eric Meyer Reset` — агресивне скидання:
-
-```css
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-... {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-```
-
-Мінус: треба переписувати багато стилів з нуля.
-
-3. Modern CSS Reset — компактна сучасна версія:
-
-```css
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-```
-
-- Ціль — контроль. Без скидання різні браузери дають різні стилі. Це зламає
-  дизайн.
-
-#### Користь:
-
-- Усуває розбіжності в дефолтних стилях між браузерами. Дає чисту стартову
-  точку. Менше багів, стабільніше верстання.
-
-</details>
-
-<details>
-<summary>56. Як ви вибираєте елементи за атрибутами в CSS?</summary>
-
-#### CSS
-
-- Звернення до атрибутів пишемо у квадратних дужках:
-
-```css
-/* Всі лінки, що відкриваються в новій вкладці */
-a[target='_blank'] {
-  color: red;
-}
-
-/* Всі інпути з атрибутом required */
-input[required] {
-  border: 2px solid orange;
-}
-
-/* Всі кнопки зі специфічним типом */
-button[type='submit'] {
-  background-color: green;
-}
-
-/* Всі зображення з alt, що містить слово "logo" */
-img[alt*='logo'] {
-  width: 150px;
-}
-```
-
-</details>
-
-<details>
-<summary>57. Що таке псевдоелементи і для чого вони використовуються?</summary>
-
-#### CSS
-
-Псевдоелементи — це спецконструкції для стилізації частин елементів, яких нема в
-HTML.
-
-**Використовуються для:**
-
-- додавання контенту (`::before`, `::after`)
-
-- стилізації першої літери або рядка (`::first-letter`, `::first-line`)
-
-- кастомізації `::placeholder` в інпутах
-
-**Приклад:**
-
-```css
-p::first-line {
-  font-weight: bold;
-}
-
-button::after {
-  content: ' →';
-}
-```
-
-Це дає гнучкість без зайвого HTML.
-
-</details>
-
-<details>
-<summary>58. Поясніть різницю між дочірнім комбінатором і нащадком комбінатора.</summary>
-
-#### CSS
-
-- **Дочірній комбінатор** (`>`) — стилізує тільки безпосереднього потомка.
-- **Нащадок комбінатор** (`пробіл`) — стилізує будь-якого нащадка на будь-якій
-  глибині.
-
-#### Приклад:
-
-```css
-/* Дочірній комбінатор */
-div > p {
-  color: blue;
-}
-
-/* Нащадок комбінатор */
-div p {
-  color: red;
-}
-```
-
-- У першому випадку — тільки ті `<p>`, що прямо всередині `<div>`.
-- У другому — всі `<p>`, навіть вкладені через кілька рівнів.
-
-</details>
-
-<details>
-<summary>59. Як би ви вибрали всі прямі дочірні елементи певного типу?</summary>
-
-#### CSS
-
-- Через дочірній комбінатор `>`.
-
-#### Приклад:
-
-```css
-ul > li {
-  list-style: none;
-}
-```
-
-- Вибере тільки ті `<li>`, які безпосередньо всередині `<ul>`.
-
-</details>
-
-<details>
-<summary>60. Що таке універсальний селектор і однорідний комбінатор, і коли ви їх використаєте?</summary>
-
-#### CSS
-
-- **Універсальний селектор** (`*`) — вибирає всі елементи.
-
-- **Однорідний комбінатор** (`+`) — вибирає елемент, що безпосередньо слідує за
-  іншим.
-
-#### Коли використовую:
-
-`*` — для глобального скидання стилів:
-
-```css
-* {
-  margin: 0;
-  padding: 0;
-}
-```
-
-`+` — для стилізації сусідніх елементів, наприклад:
-
-```css
-h1 + p {
-  margin-top: 0;
-}
-```
-
-- Працюють швидко, якщо не зловживати.
-
-</details>
-
-<details>
-<summary>61. Що таке CSS Box Model?</summary>
-
-#### CSS
-
-**CSS Box Model** — це структура кожного елемента у вигляді прямокутника, що
-складається з чотирьох шарів:
-
-1. `Content` — сам вміст (текст, зображення).
-
-2. `Padding` — відступи всередині рамки, навколо контенту.
-
-3. `Border` — рамка навколо паддінгу і контенту.
-
-4. `Margin` — зовнішній відступ від інших елементів.
-
-Без розуміння **_Box Model_** верстати нормально не вийде.
-
-</details>
-
-<details>
-<summary>62. Поясніть що таке Margin Collapsing.</summary>
-
-#### CSS
-
-- **Margin Collapsing** — це коли вертикальні зовнішні відступи двох елементів
-  зливаються в один.
-
-- Бере більший з двох `margin`, а не сумує їх.
-
-#### Приклад:
-
-```html
-<div style="margin-bottom: 20px;"></div>
-<div style="margin-top: 30px;"></div>
-```
-
-- Відстань між дивами буде `30px`, а не `50px`.
-
-- Працює тільки вертикально.
-
-</details>
-
-<details>
-<summary>63. Які є значення і властивості box-sizing і що вони роблять?</summary>
-
-#### CSS
-
-- **Властивість: box-sizing.**
-
-- Значення:
-
-  - `content-box` — ширина і висота враховують тільки контент, `padding` і
-    `border` додаються окремо.
-
-  - `border-box` — ширина і висота включають контент, `padding` і `border`.
-
-</details>
-
-<details>
-<summary>64. Як відцентрувати "div" за допомогою CSS?</summary>
-
-#### CSS
-
-- Щоб відцентрувати `<div>` за допомогою `CSS`, можна використовувати кілька
-  підходів. Ось найбільш популярні:
-
-1. За допомогою `margin: auto` (для блочних елементів з заданою шириною):
-
-```css
-.element {
-  width: 50%;
-  margin: 0 auto;
-}
-```
-
-2. `Flexbox` (центрування в контейнері):
-
-```css
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-
-.element {
-  width: 50%;
-}
-```
-
-3. `Grid` (центрування в контейнері):
-
-```css
-.container {
-  display: grid;
-  place-items: center;
-  height: 100vh;
-}
-
-.element {
-  width: 50%;
-}
-```
-
-4. Абсолютне позиціонування з `transform` для точного центрування:
-
-```css
-.container {
-  position: relative;
-  height: 100vh;
-}
-
-.element {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 50%;
-}
-```
-
-- Ці методи дозволяють вам відцентрувати `<div>` по горизонталі та/або вертикалі
-  в залежності від вимог.
-
-</details>
-
-<details>
-<summary>65. Яка різниця між block, inline, і inline-block  елементами?</summary>
-
-#### CSS
-
-- Різниця така:
-
-  - **block** — займає всю ширину батьківського елемента, починається з нового
-    рядка. Можна задавати `ширину`, `висоту`, `margin`, `padding`.
-
-  - **inline** — займає тільки ширину свого контенту, не переноситься на новий
-    рядок. Ширину й висоту задавати неможливо (ігноруються).
-
-  - **inline-block** — поводиться як **inline** (на одному рядку з іншими), але
-    дозволяє задавати `ширину`, `висоту`, `margin`, `padding` як **block**.
-
-</details>
-
-<details>
-<summary>66. Поясніть різні значення властивості position.</summary>
-
-#### CSS
-
-- Властивість position в CSS визначає метод позиціонування елемента в документі.
-  Вона має кілька значень, кожне з яких поводиться по-різному:
-
-🔹 `static` (за замовчуванням) Опис: Елемент розташовується у нормальному потоці
-документу.
-
-Не працюють: top, right, bottom, left, z-index.
-
-```css
-.element {
-  position: static;
-}
-```
-
-🔹 `relative` Опис: Елемент залишається у своєму звичному місці, але його можна
-зсунути відносно цього місця за допомогою top, left, right, bottom.
-
-Зручно: для створення позиціонованих "контейнерів" для absolute.
-
-```css
-.element {
-  position: relative;
-  top: 10px; /* зсувається вниз */
-  left: 20px; /* зсувається вправо */
-}
-```
-
-🔹 `absolute` Опис: Елемент вилучається з нормального потоку й позиціонується
-відносно найближчого предка з position: relative|absolute|fixed|sticky.
-
-Якщо таких предків нема — позиціонується відносно body.
-
-```css
-.wrapper {
-  position: relative;
-}
-
-.element {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-```
-
-🔹 `fixed` Опис: Елемент фіксується відносно вікна браузера (viewport).
-
-Залишається на місці при прокручуванні.
-
-```css
-.element {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-}
-```
-
-🔹 `sticky` Опис: Гібрид relative та fixed.
-
-Елемент поводиться як relative, поки не досягне певної позиції при прокрутці —
-після цього стає fixed.
-
-```css
-.element {
-  position: sticky;
-  top: 0; /* стане фіксованим, коли дійде до верху */
-}
-```
-
-</details>
-
-<details>
-<summary>67. Опишіть z-індекс і те, як порядок стекування контролюється в CSS.</summary>
-
-#### CSS
-
-- В CSS z-індекс (z-index) визначає порядок розташування елементів по осі Z —
-  тобто, хто буде «над» ким на екрані.
-
-#### 🧱 Основи стекування (stacking)
-
-Усі елементи на сторінці утворюють stacking context (контекст накладання), де
-визначається порядок накладання (тобто, що зверху, а що знизу).
-
-🔹 `z-index` Це числове значення, яке вказує порядок стекування елементів. Чим
-більше значення — тим вище елемент у візуальному стеку.
-
-```css
-.box {
-  position: absolute;
-  z-index: 10;
-}
-```
-
-⚠️ z-index працює тільки на елементах з position значенням relative, absolute,
-fixed, або sticky.
-
-#### 🔢 Як формується стек:
-
-1. Контекст накладання (stacking context) починається з html, але може
-   створюватись новими елементами за певних умов.
-
-2. Новий контекст створюється, коли:
-
-- Елемент має position (relative, absolute, fixed, sticky) + z-index, відмінний
-  від auto.
-
-- opacity < 1
-
-- transform, filter, perspective, will-change, mix-blend-mode і т.д.
-
-#### 📚 Приклад стекування
-
-```html
-<div class="container">
-  <div class="box box--red"></div>
-  <div class="box box--blue"></div>
-</div>
-```
-
-```css
-.container {
-  position: relative;
-}
-
-.box {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-}
-
-.box--red {
-  background: red;
-  top: 0;
-  left: 0;
-  z-index: 1;
-}
-
-.box--blue {
-  background: blue;
-  top: 20px;
-  left: 20px;
-  z-index: 2;
-}
-```
-
-🔎 Тут синій блок буде зверху, бо має більший z-index.
-
-#### 🪜 Пріоритети стекування (спрощено)
-
-У межах одного stacking context елементи розташовуються так:
-
-1. `z-index`: negative — позаду всіх
-
-2. `z-index`: auto (блоки без явного індексу)
-
-3. `z-index`: 0 і вище — зверху
-
-#### 📌 Поради:
-
-- Уникай зайвого використання високих z-index (типу 9999). Краще керуй
-  контекстом.
-
-- Створюй окремі stacking context-и для складних компонентів (наприклад,
-  модальних вікон).
-
-- Використовуй BEM або семантичні класи, щоб зрозуміло керувати елементами в
-  контексті.
-
-</details>
-
-<details>
-<summary>68. Як створити sticky footer за допомогою CSS?</summary>
-
-#### CSS
-
-- Щоб створити sticky footer (футер, що прилипає до низу сторінки, навіть якщо
-  контенту мало), можна скористатися Flexbox-макетом. Це сучасний, простий і
-  стабільний підхід.
-
-#### ✅ Готове рішення з поясненням:
-
-```html
-<!DOCTYPE html>
-<html lang="uk">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sticky Footer</title>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
-      html,
-      body {
-        height: 100%;
-      }
-
-      .layout {
-        min-height: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .main {
-        flex: 1;
-      }
-
-      .footer {
-        background-color: #333;
-        color: white;
-        padding: 20px;
-        text-align: center;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="layout">
-      <main class="main">
-        <p>Контент сторінки (може бути короткий)</p>
-      </main>
-      <footer class="footer">
-        <p>Я — футер. Я завжди внизу!</p>
-      </footer>
-    </div>
-  </body>
-</html>
-```
-
-#### Як це працює:
-
-- html, body → мають height: 100% — дозволяє контейнеру .layout зайняти всю
-  висоту.
-
-- .layout → display: flex; flex-direction: column — компоненти йдуть
-  вертикально.
-
-- .main → flex: 1 — займає всю доступну висоту, «виштовхує» футер вниз.
-
-- .footer → автоматично лишається внизу, навіть коли мало контенту.
-
-</details>
-
-<details>
-<summary>69. Як створити фіксований header, який залишається зверху під час прокручування?</summary>
-
-#### CSS
-
-- Щоб створити фіксований header, який залишається зверху сторінки під час
-  прокручування, можна використати властивість CSS `position: fixed`.
-
-```html
-<header class="fixed-header">
-  <h1>Мій сайт</h1>
-</header>
-
-<main>
-  <p>Контент сторінки...</p>
-  <!-- Багато тексту, щоб зʼявився скрол -->
-</main>
-```
-
-```css
-.fixed-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 60px; /* висота хедера */
-  background-color: #ffffff;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  padding: 10px 20px;
-}
-
-/* Щоб основний контент не ховався під хедером */
-main {
-  margin-top: 60px; /* дорівнює висоті header */
-}
-```
-
-#### Пояснення:
-
-- `position: fixed;` — фіксує елемент на місці, незалежно від прокрутки.
-
-- `top: 0;` — закріплює хедер до верхнього краю вікна.
-
-- `z-index: 1000;` — забезпечує відображення хедера поверх інших елементів.
-
-- `margin-top: 60px;` — зміщує основний контент вниз, щоб його не перекрив
-  хедер.
-
-</details>
-
-<details>
-<summary>70. Коли ви використовуєте position: sticky?</summary>
-
-#### CSS
-
-- `position: sticky` використовується, коли ви хочете, щоб елемент:
-
-  - **вів себе як звичайний (static або relative)**, поки не досягне певної
-    позиції (наприклад, верхнього краю екрана),
-
-  - **а потім "прилипав" (sticky)** до цієї позиції під час прокрутки.
-
-#### Коли використовувати position: sticky?
-
-**Приклади використання:**
-
-- Заголовки таблиць або розділів, які залишаються зверху, поки не з’явиться
-  наступний.
-
-- Меню навігації, що "прилипає" після певної прокрутки, але не перекриває весь
-  час.
-
-- Фільтри або сайдбари, які залишаються в межах свого батьківського контейнера.
-
-#### Синтаксис:
-
-```css
-.sticky-header {
-  position: sticky;
-  top: 0;
-  background: white;
-  z-index: 10;
-}
-```
-
-#### Важливо:
-
-- Батьківський елемент не повинен мати `overflow: hidden` або `overflow: auto`,
-  інакше `sticky` не працюватиме.
-
-- `sticky` працює в межах свого контейнера, тобто "відлипає", коли контейнер
-  закінчується.
-
-</details>
-
-<details>
-<summary>71. Як змінити шрифт тексту за допомогою CSS?</summary>
-
-#### CSS
-
-- Щоб змінити шрифт тексту в CSS, використовується властивість font-family.
-
-```css
-p {
-  font-family: 'Arial', sans-serif;
-}
-```
-
-#### Деталі:
-
-font-family приймає список шрифтів через кому.
-
-Перший — основний, далі — запасні (fallback).
-
-Якщо ні один не підтримується — браузер візьме системний з тієї ж групи
-(sans-serif, serif, monospace тощо).
-
-#### Приклад з Google Fonts:
-
-```html
-<!-- index.html -->
-<link
-  href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
-  rel="stylesheet"
-/>
-```
-
-```css
-body {
-  font-family: 'Roboto', sans-serif;
-}
-```
-
-</details>
-
-<details>
-<summary>72. Що таке «веббезпечний» (web-safe) шрифт у CSS і чому він важливий?</summary>
-
-#### CSS
-
-- Веббезпечний шрифт (англ. web-safe font) — це шрифт, який вже встановлений на
-  більшості операційних систем (Windows, macOS, Linux). Такий шрифт
-  відображається однаково на різних пристроях, навіть без інтернету чи
-  зовнішнього підключення до шрифтів.
-
-#### Навіщо це потрібно:
-
-Гарантована підтримка — браузер не шукає, не завантажує, а одразу використовує
-локальний шрифт.
-
-Швидше завантаження сторінки.
-
-Немає проблем з авторським правом.
-
-#### Приклади веббезпечних шрифтів:
-
-| Категорія  | Назва                             |
-| ---------- | --------------------------------- |
-| Sans-serif | Arial, Verdana, Tahoma, Helvetica |
-| Serif      | Times New Roman, Georgia          |
-| Monospace  | Courier New, Lucida Console       |
-
-#### Як використовувати fallback (резервні шрифти):
-
-```css
-body {
-  font-family: 'Helvetica', 'Arial', sans-serif;
-}
-```
-
-Якщо перший недоступний — спробує другий, потім третій (системна група).
-
-</details>
-
-<details>
-<summary>73. Коли доцільно використовувати скорочену (shorthand) властивість font у CSS?</summary>
-
-#### CSS
-
-- Скорочену властивість font у CSS доцільно використовувати тоді, коли потрібно
-  задати кілька параметрів шрифту одночасно, щоб:
-
-зменшити обсяг коду,
-
-забезпечити консистентність стилів,
-
-покращити читабельність і продуктивність стилізації.
-
-#### Приклад використання:
-
-```css
-p {
-  font: italic small-caps bold 16px/1.5 'Arial', sans-serif;
-}
-```
-
-#### Цей запис одночасно задає:
-
-font-style: italic
-
-font-variant: small-caps
-
-font-weight: bold
-
-font-size: 16px
-
-line-height: 1.5
-
-font-family: 'Arial', sans-serif
-
-#### Обов’язкові значення:
-
-При використанні shorthand font треба вказати мінімум:
-
-font-size
-
-font-family
-
-Без них CSS проігнорує весь запис.
-
-#### Коли НЕ варто використовувати shorthand:
-
-Коли ти хочеш перевизначити тільки одну властивість (наприклад, лише
-font-weight).
-
-Коли потрібно уникнути перезапису інших властивостей шрифту.
-
-#### Підсумок:
-
-Використовуй font shorthand, коли задаєш кілька параметрів одночасно — це
-чистіше, швидше і зручніше.
-
-</details>
-
-<details>
-<summary>74. Як додати та використовувати власні (кастомні) шрифти на вебсторінці за допомогою CSS?</summary>
-
-#### CSS
-
-- Щоб додати власні шрифти (які не входять до стандартних системних),
-  використовують директиву @font-face у CSS. Це дозволяє завантажити шрифт з
-  локального файлу або з сервера.
-
-#### Кроки для додавання локального кастомного шрифту:
-
-1. Поклади шрифт у папку, напр.:
-
-```swift
-/fonts/open-sans.woff2
-```
-
-2. Оголоси шрифт у CSS:
-
-```css
-@font-face {
-  font-family: 'open-sans';
-  src: url('fonts/open-sans.woff2') format('woff2');
-  font-weight: normal;
-  font-style: normal;
-}
-```
-
-3. Використай його:
-
-```css
-body {
-  font-family: 'open-sans', sans-serif;
-}
-```
-
-#### Пояснення:
-
-font-family — задає ім’я, яке потім використовуватиметься в CSS.
-
-src — шлях до шрифту та його формат (woff2 — найоптимальніший).
-
-Можна підключити кілька варіантів (bold, italic) — треба окремий @font-face для
-кожного.
-
-#### Альтернатива — Google Fonts:
-
-```html
-<link
-  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
-  rel="stylesheet"
-/>
-```
-
-```css
-body {
-  font-family: 'Inter', sans-serif;
-}
-```
-
-#### Рекомендації:
-
-Використовуй формат .woff2 — мінімальний розмір + найкраща підтримка.
-
-Завжди вказуй fallback-шрифт (наприклад, sans-serif).
-
-Винось кастомні шрифти у папку fonts/ і називай у kebab-case.
-
-</details>
-
-<details>
-<summary>75. У чому полягає різниця між одиницями em та rem у CSS?</summary>
-
-#### CSS
-
-- Одиниці em та rem — це відносні одиниці вимірювання в CSS, які залежать від
-  розміру шрифту:
-
-| Одиниця | Повна назва | Залежить від                              |
-| ------- | ----------- | ----------------------------------------- |
-| em      | element em  | розміру шрифту батьківського елемента     |
-| rem     | root em     | розміру шрифту кореневого елемента (html) |
-
-#### Приклад: `em`
-
-```css
-/* html font-size: 16px */
-
-.container {
-  font-size: 20px;
-}
-
-.container .title {
-  font-size: 2em; /* 2 × 20px = 40px */
-}
-```
-
-2em = 2 × 20px, бо береться шрифт батька (.container)
-
-#### Приклад: rem
-
-```css
-html {
-  font-size: 16px;
-}
-
-.title {
-  font-size: 2rem; /* 2 × 16px = 32px */
-}
-```
-
-2rem завжди базується на html, незалежно від ієрархії.
-
-#### Коли яку краще використовувати:
-
-| Випадок                                            | Краще використовувати |
-| -------------------------------------------------- | --------------------- |
-| Потрібна гнучка масштабованість у вкладених блоках | em                    |
-| Потрібна послідовність по всьому сайту             | rem                   |
-| Margin, padding, line-height — стабільна відстань  | rem                   |
-| Font-size в компонентах, що успадковуються         | em                    |
-
-#### Висновок:
-
-- `em` — відноситься до батьківського шрифту.
-- `rem` — відноситься до кореневого (html) шрифту.
-
-В сучасній практиці частіше використовують rem для передбачуваної верстки.
-
-</details>
-
-<details>
-<summary>76. Як правильно додати фонове зображення до елемента в HTML/CSS?</summary>
-
-#### CSS
-
-- Щоб додати фонове зображення до елемента, використовуємо CSS-властивість
-  background-image. Найчастіше це робиться через CSS-класи або стилі:
-
-**Варіант 1: Через CSS-клас**
-
-```css
-.hero-section {
-  background-image: url('/images/hero.jpg');
-  background-size: cover; /* масштабування */
-  background-position: center; /* центрування */
-  background-repeat: no-repeat; /* відключення повторення */
-}
-```
-
-```html
-<div class="hero-section">
-  <!-- контент -->
-</div>
-```
-
-**Варіант 2: Inline-стиль (не рекомендовано для масштабних проєктів)**
-
-```html
-<div
-  style="background-image: url('/images/hero.jpg'); background-size: cover; background-position: center;"
-></div>
-```
-
-</details>
-
-<details>
-<summary>77. У чому полягає різниця між шістнадцятковим записом кольорів, RGB-форматом і іменованими значеннями в CSS?</summary>
-
-#### CSS
-
-**Шістнадцяткові коди (Hex)**
-
-- Базується на системі числення з основою 16 (від 00 до FF).
-
-```css
-Складається з 3 або 6 символів: #RRGGBB або #RGB
-
-#ffffff — білий
-
-#000000 — чорний
-
-Можна використовувати скорочення: #f00 = #ff0000
-```
-
-⛔ Не підтримує прозорість напряму (окрім #rrggbbaa, але підтримка обмежена в
-старих браузерах)
-
-**RGB / RGBA**
-
-- Працює в десятковій системі: rgb(red, green, blue) з кожним значенням від 0 до
-  255
-
-Перевага rgba — можливість встановити прозорість (альфа-канал)
-
-```css
-color: rgba(255, 0, 0, 0.5); /* напівпрозорий червоний */
-```
-
-**Іменовані кольори**
-
-- Вбудований набір близько 140 назв кольорів:
-
-```css
-red, blue, green, darkslategray, transparent, тощо
-```
-
-Зручно для простих UI або для швидкого прототипування
-
-❗ Не підходить для складних дизайнів — обмежена палітра, неможливо точно
-налаштувати відтінки.
-
-</details>
-
-<details>
-<summary>78. Що таке альфа-прозорість у CSS і як працює формат RGBA?</summary>
-
-#### CSS
-
-- Що таке альфа-прозорість? Альфа-прозорість (або alpha channel) — це параметр,
-  який визначає ступінь прозорості кольору. Значення прозорості задається числом
-  від 0 до 1:
-
-0 — повністю прозорий
-
-1 — повністю непрозорий (суцільний колір)
-
-Наприклад: 0.5 — 50% прозорості
-
-- `RGBA` — це розширення формату `RGB`, яке додає альфа-канал:
-
-```css
-color: rgba(R, G, B, A);
-```
-
-R — Red (червоний): 0–255
-
-G — Green (зелений): 0–255
-
-B — Blue (синій): 0–255
-
-A — Alpha (прозорість): 0–1
-
-📘 Приклад:
-
-```css
-background-color: rgba(0, 0, 255, 0.3); /* синій з 30% непрозорістю */
-```
-
-</details>
-
-<details>
-<summary>79. Як створити градієнтний фон у CSS і які є типи градієнтів?</summary>
-
-#### CSS
-
-**Лінійний градієнт (linear-gradient)**
-
-```css
-background: linear-gradient(to right, #ff7e5f, #feb47b);
-```
-
-- to right — напрям (може бути: to left, to bottom, 45deg, тощо)
-
-- #ff7e5f — стартовий колір
-
-- #feb47b — кінцевий колір
-
-Приклад для кнопки:
-
-```css
-button {
-  background: linear-gradient(to bottom right, #4facfe, #00f2fe);
-}
-```
-
-**Радіальний градієнт (radial-gradient)**
-
-```css
-background: radial-gradient(circle, #ff9a9e, #fad0c4);
-```
-
-- Центрований круговий перехід кольорів
-
-- Можна змінювати форму: circle, ellipse
-
-Приклад:
-
-```css
-div {
-  background: radial-gradient(circle at center, #ff9a9e 0%, #fad0c4 100%);
-}
-```
-
-</details>
-
-<details>
-<summary>80. Як реалізувати кілька фонів (background layers) для одного елемента в CSS і як вони працюють?</summary>
-
-#### CSS
-
-- CSS дозволяє використовувати кілька фонів одночасно в одному елементі,
-  наприклад:
-
-  - градієнт + зображення
-
-  - кілька іконок
-
-  - шар затемнення + фонова картинка
-
-#### Синтаксис:
-
-```css
-background-image: url('stars.png'), linear-gradient(to bottom, #000000aa, #00000000);
-```
-
-#### Головна ідея:
-
-- Фони вказуються через кому
-
-- Перший — верхній шар, останній — нижній (базовий)
-
-#### Приклад — градієнт поверх зображення:
-
-```css
-.element {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
-    /* верхній шар */ url('/images/bg.jpg'); /* нижній шар */
-
-  background-size: cover, cover;
-  background-position: center, center;
-  background-repeat: no-repeat, no-repeat;
-}
-```
-
-</details>
-
-<details>
-<summary>81. Що таке Flexbox у CSS, які його ключові властивості та основні переваги у верстці?</summary>
-
-#### CSS
-
-- Flexbox — це одновимірна модель розмітки в CSS, яка дозволяє гнучко
-  розташовувати та вирівнювати елементи в ряд або стовпчик.
-
-#### Ключові властивості:
-
-- `display: flex` — активує флекс-контейнер
-
-- `flex-direction` — напрямок (row, column)
-
-- `justify-content` — вирівнювання по головній осі
-
-- `align-items` — вирівнювання по поперечній осі
-
-- `gap` — відстань між елементами
-
-- `flex` — керує розміром елементів (grow, shrink, basis)
-
-#### Переваги:
-
-- Просте вирівнювання по обох осях
-
-- Адаптивність без медіа-запитів
-
-- Підтримка переносу рядків (flex-wrap)
-
-- Менше хаків і простіший код
-
-</details>
-
-<details>
-<summary>82. Як працює властивість flex-grow у CSS Flexbox?</summary>
-
-#### CSS
-
-- `flex-grow` визначає, наскільки елемент може збільшуватись у розмірі, щоб
-  зайняти вільний простір у флекс-контейнері.
-
-#### Приклад:
-
-```css
-.item {
-  flex-grow: 1;
-}
-```
-
-- Це означає, що елемент отримає частку вільного простору пропорційно значенню
-  flex-grow.
-
-#### Наприклад:
-
-```html
-<div class="box" style="flex-grow: 1;"></div>
-<div class="box" style="flex-grow: 2;"></div>
-```
-
-- Другий блок займе вдвічі більше простору, ніж перший.
-
-</details>
-
-<details>
-<summary>83. У чому різниця між justify-content та align-items у Flexbox?</summary>
-
-#### CSS
-
-- `justify-content` — вирівнює елементи по головній осі (горизонтальній за
-  замовчуванням).
-
-**Напр.: flex-start, center, space-between**
-
-- `align-items` — вирівнює елементи по поперечній осі (вертикальній за
-  замовчуванням).
-
-**Напр.: stretch, center, flex-end**
-
-#### Приклад:
-
-```css
-.container {
-  display: flex;
-  justify-content: center; /* по горизонталі */
-  align-items: center; /* по вертикалі */
-}
-```
-
-#### Головне:
-
-Напрям justify-content змінюється з flex-direction.
-
-align-items — завжди перпендикулярна до нього.
-
-</details>
-
-<details>
-<summary>84. У яких випадках доцільно використовувати align-self у Flexbox?</summary>
-
-#### CSS
-
-- `align-self` дозволяє перевизначити вирівнювання одного окремого елемента по
-  поперечній осі, незалежно від align-items контейнера.
-
-#### Приклад:
-
-```css
-.item {
-  align-self: flex-end;
-}
-```
-
-- Цей елемент буде вирівняний донизу, навіть якщо інші — по центру або
-  розтягнуті.
-
-#### Використовуйте align-self, коли:
-
-- потрібно виділити один елемент в групі (наприклад, останній пункт у меню —
-  вирівняти вниз);
-
-- елемент має іншу висоту або позицію, ніж решта;
-
-- потрібно точково налаштувати позицію без впливу на інші елементи.
-
-</details>
-
-<details>
-<summary>85. Як у Flexbox створити стовпці однакової ширини незалежно від їхнього вмісту?</summary>
-
-#### CSS
-
-- Щоб створити стовпці однакової ширини у Flexbox, кожному елементу задаємо:
-
-```css
-.item {
-  flex: 1;
-}
-```
-
-- А контейнеру:
-
-```css
-.container {
-  display: flex;
-}
-```
-
-- Пояснення:
-
-flex: 1 = flex-grow: 1; flex-shrink: 1; flex-basis: 0;
-
-Усі елементи ділять простір порівну, незалежно від вмісту.
-
-</details>
-
-<details>
-<summary>86. Що таке CSS Grid Layout і чому він корисний у веброзробці?</summary>
-
-#### CSS
-
-- CSS Grid — це система двовимірного макетування, яка дозволяє створювати
-  складні сітки з рядками та стовпцями. Вона спрощує позиціонування елементів на
-  сторінці без потреби у флоатах або флексах. Корисна для адаптивних і
-  структурованих дизайнів.
-
-</details>
-
-<details>
-<summary>87. Як у CSS Grid визначити кількість стовпців і рядків сітки?</summary>
-
-#### CSS
-
-- Стовпці задаються через `grid-template-columns`, а рядки — через
-  `grid-template-rows`.
-
-#### Наприклад:
-
-```css
-display: grid;
-grid-template-columns: 1fr 2fr;
-grid-template-rows: 100px auto;
-```
-
-Це створить сітку з 2 стовпцями та 2 рядками.
-
-</details>
-
-<details>
-<summary>88. У чому різниця між grid-template-areas та grid-template-columns?</summary>
-
-#### CSS
-
-- Відповідь:
-
-  - `grid-template-columns` задає ширину стовпців сітки (кількість і розміри).
-
-  - `grid-template-areas` задає візуальне розміщення іменованих областей у сітці
-    для зручного позиціонування елементів за назвами.
-
-#### Приклад:
-
-```css
-grid-template-columns: 1fr 1fr;
-grid-template-areas:
-  'header header'
-  'sidebar main';
-```
-
-Це визначає 2 стовпці однакової ширини та розкладку з іменами областей.
-
-</details>
-
-<details>
-<summary>89. Як розмістити елементи в сітці CSS Grid?</summary>
-
-#### CSS
-
-- Відповідь:
-
-Елементи розміщуються за допомогою властивостей:
-
-- grid-row, grid-column — для вказання позицій (наприклад, grid-column: 1 / 3)
-
-- grid-area — якщо використовується grid-template-areas
-
-Автоматично — якщо не задані координати, елементи розміщуються у вільні клітинки
-
-#### Приклад:
-
-```css
-.item {
-  grid-column: 2 / 4;
-  grid-row: 1 / 2;
-}
-```
-
-</details>
-
-<details>
-<summary>90. Як CSS Grid обробляє перекриття елементів, якщо вони займають одні й ті самі області?</summary>
-
-#### CSS
-
-- Відповідь:
-
-Якщо кілька елементів займають одну й ту саму область сітки, вони
-перекриваються, і порядок їх відображення залежить від:
-
-Порядку в `HTML` (останній — зверху)
-
-`z-index` — якщо заданий
-
-`position`— якщо елементи позиціоновані
-
-- Щоб уникнути перекриття — уникай однакових координат або використовуй z-index
-  для керування шарами.
-
-</details>
-
-<details>
-<summary>91. Що таке медіа-запит?</summary>
-
-#### CSS
-
-- Медіа-запит (media query) — це інструмент CSS, що дозволяє застосовувати стилі
-  залежно від характеристик пристрою (ширини екрана, орієнтації, роздільної
-  здатності тощо).
-
-#### Приклад:
-
-```css
-@media (max-width: 768px) {
-  body {
-    background-color: lightgray;
-  }
-}
-```
-
-- Цей стиль застосовується лише, якщо ширина екрана ≤ 768px.
-
-</details>
-
-<details>
-<summary>92. Як метатег viewport допомагає у створенні адаптивного дизайну для мобільних пристроїв?</summary>
-
-#### CSS
-
-- Метатег viewport керує тим, як сторінка масштабується та відображається на
-  мобільних пристроях. Без нього сторінка відображається з масштабом, як для
-  десктопа.
-
-#### Приклад:
-
-```html
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-```
-
-#### Що робить:
-
-- `width=device-width` — встановлює ширину вікна відповідно до ширини пристрою.
-
-- `initial-scale=1.0` — встановлює початковий масштаб.
-
-Результат: коректне масштабування і адаптивність для різних екранів.
-
-</details>
-
-<details>
-<summary>93. Опишіть, як створити адаптивний дизайн, орієнтований на мобільні пристрої.</summary>
-
-#### CSS
-
-- Щоб створити адаптивний мобільний дизайн:
-
-1. Використай метатег viewport:
-
-```html
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-```
-
-2. Використовуй гнучкі одиниці виміру:
-
-%, vw, vh, em, rem замість px.
-
-3. Застосовуй медіа-запити:
-
-Щоб змінювати стилі під різні розміри екранів:
-
-```css
-@media (max-width: 768px) {
-  .menu {
-    flex-direction: column;
-  }
-}
-```
-
-4. Flexbox або CSS Grid:
-
-Для побудови гнучких макетів.
-
-5. Уникай фіксованої ширини елементів.
-
-6. Забезпечуй адаптивні зображення:
-
-Встановлюй max-width: 100%; height: auto;.
-
-- Це дозволяє інтерфейсу підлаштовуватись під різні розміри екранів без
-  горизонтальної прокрутки.
-
-</details>
-
-<details>
-<summary>94. Як можна створити макет, який змінюється з двоколонкового на одноколонковий, за допомогою медіа-запитів?</summary>
-
-#### CSS
-
-- Створи двоколонковий макет (наприклад, з CSS Grid або Flexbox), а потім через
-  медіа-запит змінюй його на одноколонковий при меншій ширині екрана.
-
-#### Приклад (Flexbox):
-
-```css
-.container {
-  display: flex;
-  gap: 20px;
-}
-
-@media (max-width: 768px) {
-  .container {
-    flex-direction: column;
-  }
-}
-```
-
-#### Приклад (CSS Grid):
-
-```css
-.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-}
-
-@media (max-width: 768px) {
-  .container {
-    grid-template-columns: 1fr;
-  }
-}
-```
-
-#### Результат:
-
-- На великих екранах — 2 колонки, на мобільних — 1 колонка.
-
-</details>
-
-<details>
-<summary>95. Поясніть використання min-width та max-width у медіа-запитах.</summary>
-
-#### CSS
-
-- `min-width` і `max-width` у медіа-запитах визначають діапазон ширини екрана,
-  на який мають застосовуватись стилі.
-
-#### min-width — стилі застосовуються від цієї ширини і вище (mobile-first підхід).
-
-```css
-@media (min-width: 768px) {
-  body {
-    background-color: lightblue;
-  }
-}
-```
-
-#### max-width — стилі застосовуються до цієї ширини включно.
-
-```css
-@media (max-width: 767px) {
-  body {
-    background-color: lightgray;
-  }
-}
-```
-
-#### Використання:
-
-- `min-width` — адаптація від мобільного до десктопа.
-
-- `max-width` — адаптація від десктопа до мобільного.
-
-Зазвичай рекомендується `mobile-first` підхід з `min-width`.
-
-</details>
-
-<details>
-<summary>96. Як створити перехід CSS?</summary>
-
-#### CSS
-
-- Перехід у CSS (transition) дозволяє анімувати зміну властивостей елементів,
-  таких як колір, розмір чи положення, коли вони змінюються.
-
-#### Основний синтаксис:
-
-```css
-.element {
-  transition: property duration timing-function delay;
-}
-```
-
-#### Приклад:
-
-```css
-.element {
-  background-color: blue;
-  transition: background-color 0.3s ease;
-}
-
-.element:hover {
-  background-color: red;
-}
-```
-
-- У цьому прикладі, коли елемент отримує ховер, його колір плавно змінюється з
-  синього на червоний за 0.3 секунди.
-
-#### Пояснення:
-
-`background-color` — властивість, що анімується.
-
-`0.3s` — тривалість анімації.
-
-`ease` — функція часу для плавності.
-
-</details>
-
-<details>
-<summary>97. У чому різниця між переходом CSS та анімацією?</summary>
-
-#### CSS
-
-- CSS Transition і CSS Animation обидва використовуються для створення анімацій,
-  але є важливі відмінності в їх підході та використанні:
-
-#### CSS Transition:
-
-- Триггер: анімація починається тільки тоді, коли відбувається зміна стану
-  елемента (наприклад, при ховері або кліку).
-
-- Обмеження: можна анімувати лише зміни існуючих стилів.
-
-- Синтаксис: простіший, зазвичай використовується для ефектів при взаємодії з
-  користувачем.
-
-#### Приклад:
-
-```css
-.element {
-  background-color: blue;
-  transition: background-color 0.3s ease;
-}
-
-.element:hover {
-  background-color: red;
-}
-```
-
-- Тут зміна кольору відбудеться тільки при ховері.
-
-#### CSS Animation:
-
-- Триггер: анімація запускається автоматично або за заданим ключовим кадром.
-
-- Гнучкість: дозволяє задавати послідовність анімацій за допомогою @keyframes,
-  де можна визначити кілька етапів анімації.
-
-- Без взаємодії: анімація може працювати без будь-якої взаємодії з користувачем.
-
-#### Приклад:
-
-```css
-@keyframes example {
-  0% {
-    background-color: blue;
-  }
-  100% {
-    background-color: red;
-  }
-}
-
-.element {
-  animation: example 2s infinite;
-}
-```
-
-- У цьому прикладі анімація почнеться автоматично і повторюватиметься
-  нескінченно.
-
-#### Основні відмінності:
-
-- Transition: працює лише на зміну стану (наприклад, ховер або фокус).
-
-- Animation: дозволяє створювати складні анімації з багатьма етапами й
-  автоматичним запуском.
-
-</details>
-
-<details>
-<summary>98. Які способи є для анімації появи та зникнення елемента на сторінці??</summary>
-
-#### CSS
-
-- Можна використати CSS-анімації або transition у поєднанні з класами
-  (наприклад, opacity + transform), або бібліотеки типу Framer Motion / React
-  Transition Group для керування станом появи/зникнення.
-
-</details>
-
-<details>
-<summary>99. Можете пояснити, як працює та використовується @keyframes у CSS?</summary>
-
-#### CSS
-
-- `@keyframes` визначає проміжні стани анімації в CSS.
-
-#### Синтаксис:
-
-```css
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.element {
-  animation: fadeIn 0.5s ease-in;
-}
-```
-
-- Використовується з властивістю `animation` для запуску анімації.
-
-</details>
-
-<details>
-<summary>100. Як налаштувати функцію прискорення в CSS-анімації?</summary>
-
-#### CSS
-
-- Функції синхронізації задають, як змінюється швидкість анімації протягом часу.
-
-#### Встановлюються через `animation-timing-function`, приклади:
-
-- `linear` — рівномірно.
-
-- `ease` — повільний старт і кінець.
-
-- `ease-in` — повільний старт.
-
-- `ease-out` — повільний кінець.
-
-- `ease-in-out` — повільний старт і кінець, швидко посередині.
-
-- `cubic-bezier(x1, y1, x2, y2)` — кастомна крива.
-
-</details>
-
-<details>
-<summary>101. Що таке CSS-препроцесор і які його переваги?</summary>
-
-#### CSS
-
-- CSS-препроцесор — це інструмент (наприклад, Sass, LESS, Stylus), який розширює
-  можливості CSS: змінні, вкладені селектори, міксіни, функції.
-
-- Використовується для структурованішого, повторно використовуваного та легше
-  підтримуваного коду.
-
-</details>
-
-<details>
-<summary>102. Яке значення мають CSS-змінні та чому їх варто використовувати?</summary>
-
-#### CSS
-
-- CSS-змінні `(--var-name)` дозволяють зберігати значення в одному місці та
-  використовувати їх повторно по всьому проєкту.
-
-#### Переваги:
-
-- Легко оновлювати тему/стиль.
-
-- Підтримують динамічні зміни через JS.
-
-- Зменшують дублювання коду.
-
-</details>
-
-<details>
-<summary>103. Що таке CSS-модулі та як їх застосовувати?</summary>
-
-#### CSS
-
-- CSS-модулі — це підхід, де стилі автоматично обмежуються тільки тим
-  компонентом, у якому їх імпортують (ізольований скоуп).
-
-#### Використання в React:
-
-```jsx
-import styles from './Button.module.css';
-
-<button className={styles.primary}>Click</button>;
-```
-
-- Переваги — уникнення конфліктів імен класів та краща підтримка коду.
-
-</details>
-
-<details>
-<summary>104. Що таке CSS-in-JS і які його переваги?</summary>
-
-#### CSS
-
-- `CSS-in-JS` — це підхід, коли стилі пишуться безпосередньо в
-  JavaScript/TypeScript-файлах, часто прив’язані до компонентів.
-
-#### Приклади: styled-components, Emotion.
-
-- Переваги:
-
-  - Ізоляція стилів на рівні компонентів.
-
-  - Динамічні стилі через пропси/стан.
-
-  - Спільний код JS і стилів.
-
-</details>
-
-<details>
-<summary>105. Які інструменти використовуються для лінтингу та форматування CSS?</summary>
-
-#### CSS
-
-- Для лінтингу — Stylelint (перевірка якості та відповідності стилів
-  стандартам).
-
-- Для форматування — Prettier (автоматичне вирівнювання й оформлення коду).
-
-Часто інтегруються разом у CI/CD та редактор.
-
-</details>
-
-<details>
-<summary>106. Як зробити, щоб кнопка виглядала як звичайне посилання?</summary>
-
-#### CSS
-
-- Просто прибрати стандартні стилі кнопки та застосувати стилі посилання:
-
-```css
-button {
-  background: none;
-  border: none;
-  color: blue;
-  text-decoration: underline;
-  cursor: pointer;
-}
-```
-
-</details>
-
-<details>
-<summary>107. Як створити кастомні чекбокси та радіокнопки за допомогою CSS?</summary>
-
-#### CSS
-
-- Роблять прихований `<input type="checkbox/radio">` і стилізують його
-  пов’язаний `<label>` або псевдоелементи (`::before`, `::after`).
-- Стан `:checked` використовують для зміни стилю при виборі.
-
-#### Приклад:
-
-```css
-input[type='checkbox'] {
-  display: none;
-}
-
-label::before {
-  content: '';
-  width: 16px;
-  height: 16px;
-  border: 1px solid #000;
-  display: inline-block;
-}
-
-input:checked + label::before {
-  background: #000;
-}
-```
-
-</details>
-
-<details>
-<summary>108. Як можна стилізувати елемент select лише за допомогою CSS?</summary>
-
-#### CSS
-
-- Використовують селектор `select` і його внутрішні елементи, але можливості
-  обмежені через нативний рендер браузера.
-
-#### Основні прийоми:
-
-`appearance: none;` / `-webkit-appearance: none;` — прибрати стандартну стрілку.
-
-Додати власну іконку через `background` або `::after` у контейнері.
-
-Стилізувати `option` (шрифт, колір, фон), але в різних браузерах підтримка
-різна.
-
-</details>
-
-<details>
-<summary>109. Яка найкраща практика для стилізації плейсхолдера у полі введення?</summary>
-
-#### CSS
-
-- Використовувати псевдоклас `::placeholder` для зміни стилю заповнювача,
-  зберігаючи достатній контраст і читабельність.
-
-#### Приклад:
-
-```css
-input::placeholder {
-  color: #888;
-  font-style: italic;
-}
-```
-
-</details>
-
-<details>
-<summary>110. Як правильно реалізувати стилі фокуса для забезпечення доступності?</summary>
-
-#### CSS
-
-- Використовують псевдоклас `:focus` (і бажано `:focus-visible`) для чіткого
-  візуального індикатора.
-
-- Найкраща практика — не прибирати `outline`, а кастомізувати його:
-
-```css
-button:focus-visible {
-  outline: 2px solid #000;
-  outline-offset: 2px;
-}
-```
-
-- Це допомагає користувачам з клавіатурною навігацією.
-
-</details>
-
-<details>
-<summary>111. Як діагностувати і виправити проблеми з версткою?</summary>
-
-#### CSS
-
-1. Використовуй `DevTools` (інспектор) для перевірки стилів, розмірів,
-   відступів.
-
-2. Перевіряй `flexbox/grid` налаштування, `display`, `position`.
-
-3. Шукай проблеми з переповненням, `z-index`, або невірними розмірами.
-
-4. Використовуй тимчасові кольори/рамки для візуалізації блоків.
-
-5. Перевіряй адаптивність на різних екранах.
-
-</details>
-
-<details>
-<summary>112. Як виправити проблеми з пошкодженими колонками у макеті?</summary>
-
-#### CSS
-
-- Перевір:
-
-  - чи правильно заданий `display` (`flex` або `grid`) на контейнері;
-
-  - чи всі колонки мають коректні розміри (`flex-basis`, `width` або
-    `grid-template-columns`);
-
-  - чи немає зайвих `margin/padding`, що зрушують колонки;
-
-  - чи не порушує макет `box-sizing` (краще `border-box`);
-
-  - чи не спричиняє проблеми `overflow` або `min-width`.
-
-Часто допомагає тимчасове підсвічування меж (`outline: 1px solid red`).
-
-</details>
-
-<details>
-<summary>113. Як вирішувати проблеми кросбраузерності у CSS?</summary>
-
-#### CSS
-
-- Використовуй префікси (`-webkit-`, `-moz-`, `-ms-`) для нових властивостей
-  (через `Autoprefixer`).
-
-- Перевіряй підтримку фіч на `Can I Use`.
-
-- Використовуй `fallbacks` — запасні стилі для старих браузерів.
-
-- Уникай нестабільних експериментальних властивостей.
-
-- Тестуй на основних браузерах і версіях.
-
-- За потреби — поліполіфи або JavaScript-обхідники.
-
-</details>
-
-<details>
-<summary>114. Як визначити, який CSS стиль переважає при конфлікті?</summary>
-
-#### CSS
-
-- Перевіряй через `DevTools` вкладку `Styles` — показує застосовані стилі, їх
-  пріоритет і джерело.
-
-- Пріоритет визначається специфічністю селекторів, важливістю (`!important`) і
-  порядком підключення.
-
-#### Правила:
-
-- Inline стилі мають вищий пріоритет.
-
-- Специфічніші селектори переважають універсальні.
-
-- Пізніші оголошення перекривають ранні.
-
-</details>
-
-<details>
-<summary>115. Які CSS проблеми можуть погіршувати продуктивність?</summary>
-
-#### CSS
-
-- Занадто складні селектори (особливо універсальні `*` або глибокі вкладення).
-
-- Часті зміни `layout (reflow)` через властивості типу `width`, `height`,
-  `margin`, `padding`.
-
-- Використання `!important`, що ускладнює перезапис стилів.
-
-- Велика кількість анімацій або трансформацій без апаратного прискорення.
-
-- Надмірний використання глобальних стилів і дублювання.
-
-</details>
-
-<details>
-<summary>116. Як застосовувати 3D-перетворення в CSS?</summary>
-
-#### CSS
-
-- В CSS 3D-перетворення застосовують через властивості:
-
-  - `transform: rotateX(), rotateY(), rotateZ()` — обертання по осях.
-
-  - `transform: translateZ()` — переміщення по Z-ось.
-
-  - `perspective` — задає глибину (перспективу) контейнеру.
-
-  - `transform-style: preserve-3d` — для вкладених елементів, щоб зберегти 3D
-    ефект.
-
-#### Приклад:
-
-```css
-.container {
-  perspective: 600px;
-}
-
-.element {
-  transform-style: preserve-3d;
-  transform: rotateY(45deg);
-}
-```
-
-</details>
-
-<details>
-<summary>117. Як працює і як використовувати властивість perspective у CSS?</summary>
-
-#### CSS
-
-- `perspective` задає відстань від глядача до площини елемента, створюючи ефект
-  глибини для 3D-перетворень.
-
-#### Синтаксис:
-
-```css
-.container {
-  perspective: 500px; /* менше значення — сильніша перспектива */
-}
-```
-
-- Властивість застосовується до батьківського елемента, а дочірні з transform із
-  3D-перетвореннями використовують цю перспективу.
-
-</details>
-
-<details>
-<summary>118. Що таке backface-visibility у CSS і як його використовувати?</summary>
-
-#### CSS
-
-- Видимість задньої поверхні (`backface-visibility`) — це CSS-властивість, яка
-  визначає, чи видно ли задню сторону елемента при його 3D-обертанні.
-
-  - `visible` — задня сторона показується (за замовчуванням).
-
-  - `hidden` — задня сторона прихована, не відображається при обертанні на 180°.
-
-#### Приклад:
-
-```css
-.element {
-  backface-visibility: hidden;
-}
-```
-
-</details>
-
-<details>
-<summary>119. Як зробити ефект перевернутої картки (card flip) на CSS?</summary>
-
-#### CSS
-
-- Створюють контейнер з двома сторонами (`front` і `back`), використовують
-  3D-перетворення і `backface-visibility: hidden`.
-
-#### Приклад:
-
-```css
-.container {
-  perspective: 1000px;
-}
-
-.card {
-  width: 200px;
-  height: 300px;
-  position: relative;
-  transform-style: preserve-3d;
-  transition: transform 0.6s;
-}
-
-.card:hover {
-  transform: rotateY(180deg);
-}
-
-.front,
-.back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-}
-
-.back {
-  transform: rotateY(180deg);
-}
-```
-
-</details>
-
-<details>
-<summary>120. Які візуальні ефекти можна створити за допомогою CSS-фільтрів?</summary>
-
-#### CSS
-
-- CSS-фільтри дають змогу створювати ефекти:
-
-`blur()` — розмиття
-
-`brightness()` — яскравість
-
-`contrast()` — контраст
-
-`grayscale()` — відтінки сірого
-
-`invert()` — інверсія кольорів
-
-`sepia()` — сепія
-
-`saturate()` — насиченість
-
-`drop-shadow()` — тінь
-
-- Їх можна комбінувати через пробіл:
-
-```css
-filter: grayscale(50%) blur(2px);
-```
-
-</details>
-
-<details>
-<summary>121. Які основні принципи адаптивного вебдизайну?</summary>
-
-#### CSS
-
-- Основні принципи адаптивного вебдизайну:
-
-  - Гнучка сітка (flex, grid, % замість фіксованих px).
-
-  - Гнучкі зображення та медіа (max-width: 100%).
-
-  - Media queries для різних розмірів екранів.
-
-  - Мобільний підхід спочатку (mobile-first).
-
-  - Тестування на різних пристроях і орієнтаціях.
-
-</details>
-
-<details>
-<summary>122. Як створити сіткову систему за допомогою CSS Grid?</summary>
-
-#### CSS
-
-1. Створюю контейнер з display: grid.
-
-2. Визначаю колонки та рядки через grid-template-columns / grid-template-rows
-   (можна з fr, auto, %).
-
-3. Додаю проміжки (gap).
-
-4. Для адаптивності — змінюю налаштування через @media або repeat(auto-fit,
-   minmax()).
-
-#### Приклад:
-
-```css
-.container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-}
-```
-
-</details>
-
-<details>
-<summary>123. Що таке mobile-first підхід у вебдизайні?</summary>
-
-#### CSS
-
-- Mobile-first — підхід, коли дизайн і верстка спочатку створюються для
-  мобільних пристроїв (малий екран), а потім розширюються для більших екранів
-  через min-width media queries.
-
-#### Переваги:
-
-- Оптимізація продуктивності для мобільних.
-
-- Краща доступність і зручність.
-
-- Легше масштабувати до desktop, ніж навпаки.
-
-</details>
-
-<details>
-<summary>124. Які способи підтримати співвідношення сторін в адаптивному дизайні?</summary>
-
-#### CSS
-
-Методи підтримки співвідношення сторін:
-
-- `aspect-ratio` (сучасний спосіб):
-
-```css
-.box {
-  aspect-ratio: 16 / 9;
-}
-```
-
-- Через `padding-хаки` (старий спосіб, `padding-top` у `%` від ширини).
-
-- `SVG` та `viewBox` для масштабованих елементів.
-
-- Контейнер із `object-fit` для медіа (зображення, відео).
-
-</details>
-
-<details>
-<summary>125. Як забезпечити доступність і інклюзивність вебдизайну?</summary>
-
-#### CSS
-
-- Для доступності та інклюзивності дотримуюсь принципів WCAG:
-
-  - Контраст тексту ≥ 4.5:1.
-
-  - Чіткі `focus-стилі` для клавіатурної навігації.
-
-  - Альтернативний текст (`alt`) для зображень.
-
-  - Семантична `HTML-розмітка` (заголовки, списки, `<button>` замість `div`).
-
-  - `ARIA-атрибути`, якщо стандартної семантики недостатньо.
-
-  - Перевірка з екранними рідерами.
-
-  - Не покладатися тільки на колір для передачі інформації.
-
-</details>
-
-<details>
-<summary>126. Як додати таблицю стилів для друку на вебсторінці?</summary>
-
-#### CSS
-
-- Створюють окремі стилі з медіатипом print:
-
-**_Через окремий файл:_**
-
-```html
-<link rel="stylesheet" href="print.css" media="print" />
-```
-
-**_Або всередині CSS:_**
-
-```css
-@media print {
-  body {
-    color: black;
-    background: white;
-  }
-
-  nav,
-  footer {
-    display: none;
-  }
-}
-```
-
-- Використовується для спрощення макета, видалення непотрібних елементів і
-  оптимізації читабельності при друку.
-
-</details>
-
-<details>
-<summary>127. Які best practices при створенні CSS для друку?</summary>
-
-#### CSS
-
-- Найкращі практики для CSS-друку:
-
-  - Прибрати непотрібні елементи (nav, footer, рекламу).
-
-  - Зробити фон білим, текст чорним для читабельності.
-
-  - Використовувати читабельний шрифт без надмірних стилів.
-
-  - Показувати посилання як текстові URL (a::after { content: attr(href) }).
-
-  - Оптимізувати відступи та розміри для формату сторінки.
-
-  - Перевіряти друк у різних браузерах.
-
-</details>
-
-<details>
-<summary>128. Як використовувати розрив сторінки в CSS для друку?</summary>
-
-#### CSS
-
-- Розрив сторінки в CSS керується властивостями page-break-before,
-  page-break-after, page-break-inside (застарілі) або їх новими аналогами —
-  break-before, break-after, break-inside.
-
-#### Приклад:
-
-```css
-h2 {
-  break-before: page; /* Почати з нової сторінки при друку */
-}
-
-section {
-  break-inside: avoid; /* Не розривати всередині секції */
-}
-```
-
-- Використовується у друкованих стилях, щоб контролювати, де сторінка має
-  ділитися.
-
-</details>
-
-<details>
-<summary>129. Як протестувати версію вебсторінки для друку?</summary>
-
-#### CSS
-
-- Тестують версію для друку так:
-
-  - У браузері відкрити Print Preview (Ctrl+P / Cmd+P).
-
-  - У DevTools вибрати emulate print media (Chrome: More tools → Rendering →
-    Emulate CSS media: print).
-
-  - Перевірити відображення в різних браузерах (Chrome, Firefox, Edge).
-
-  - За потреби протестувати на реальному принтері або PDF-експортері.
-
-</details>
-
-<details>
-<summary>130. Які типові проблеми виникають при розробці CSS для друку?</summary>
-
-#### CSS
-
-Поширені труднощі при створенні CSS для друку:
-
-- Різна підтримка друкованих стилів у браузерах.
-
-- Відсутність відтворення фону або зображень за замовчуванням.
-
-- Неконтрольовані розриви сторінок у великому контенті.
-
-- Неправильні пропорції зображень чи таблиць.
-
-- Проблеми з шрифтами при друкуванні у PDF.
-
-- Важко зберегти точне позиціонування без порушення адаптивності.
-
-</details>
-
-<details>
-<summary>131. Для чого призначені псевдоелементи ::before і ::after у CSS?</summary>
-
-#### CSS
-
-- `::before` і `::after` створюють віртуальні елементи до або після вмісту
-  вибраного елемента. Використовуються для декоративного або додаткового
-  контенту без зміни HTML.
-
-#### Приклад:
-
-```css
-button::before {
-  content: '→ ';
-}
-```
-
-#### Особливості:
-
-Працюють тільки з властивістю content.
-
-Не впливають на DOM, але беруть участь у візуальному рендері.
-
-</details>
-
-<details>
-<summary>132. Що таке псевдоклас :hover у CSS і як він працює?</summary>
-
-#### CSS
-
-- :hover — псевдоклас, що застосовує стилі, коли користувач наводить курсор миші
-  на елемент.
-
-#### Приклад:
-
-```css
-a:hover {
-  color: red;
-}
-```
-
-Працює тільки для інтерактивних пристроїв з курсором (на сенсорних — обмежено).
-
-</details>
-
-<details>
-<summary>133. У чому різниця між :nth-child та :nth-of-type у CSS?</summary>
-
-#### CSS
-
-- `:nth-child(n)` — вибирає елемент, якщо він є n-м дочірнім серед усіх
-  елементів батька.
-
-- `:nth-of-type(n)` — вибирає елемент, якщо він є n-м дочірнім серед елементів
-  того ж типу.
-
-#### Приклад:
-
-```css
-p:nth-child(2)      /* другий дочірній елемент, неважливо, p це чи ні */
-p:nth-of-type(2)    /* другий <p> серед усіх <p> */
-```
-
-</details>
-
-<details>
-<summary>134. Як працюють псевдокласи :first-child і :last-child у CSS?</summary>
-
-#### CSS
-
-- `:first-child` вибирає елемент, якщо він перший серед усіх дочірніх елементів
-  свого батька.
-
-- `:last-child` — якщо він останній серед дочірніх.
-
-#### Приклад:
-
-```css
-li:first-child {
-  font-weight: bold;
-}
-
-li:last-child {
-  color: red;
-}
-```
-
-- Важливо: вони дивляться на позицію, а не на тип елемента (на відміну від
-  `:first-of-type` / `:last-of-type`).
-
-</details>
-
-<details>
-<summary>135. Що таке псевдоклас :not у CSS і для чого він використовується?</summary>
-
-#### CSS
-
-- `:not(селектор)` — псевдоклас, що вибирає елементи, які не відповідають
-  вказаному селектору.
-
-#### Приклад:
-
-```css
-button:not(.primary) {
-  background: gray;
-}
-```
-
-- Використовується, коли треба застосувати стиль до групи елементів, крім певних
-  винятків, щоб уникнути дублювання правил.
-
-</details>
-
-<details>
-<summary>136. Як складність CSS-селекторів впливає на продуктивність?</summary>
-
-#### CSS
-
-- Складні селектори (глибокі вкладення, універсальний `*`, комбінації кількох
-  умов) збільшують час, який браузер витрачає на обхід DOM для пошуку
-  відповідних елементів.
-
-- Хоч сучасні браузери оптимізовані, надмірно складні селектори можуть
-  уповільнити рендеринг у великих проєктах, а також ускладнюють підтримку коду.
-
-- Найкраща практика — використовувати короткі й конкретні селектори.
-
-</details>
-
-<details>
-<summary>137. Які стратегії ви б використали для оптимізації шляху рендерингу CSS?</summary>
-
-#### CSS
-
-**Мінімізація блокуючого CSS**
-
-- Розміщувати критичні стилі (`critical CSS`) прямо в `<head>` — лише ті, що
-  потрібні для початкового рендеру.
-
-- Виносити другорядні стилі в окремі файли та підключати їх асинхронно
-  (`media="print"` → потім `media="all"` через JS).
-
-**Оптимізація та зменшення обсягу CSS**
-
-- Видалення невикористаних стилів (`PurifyCSS`, `UnCSS`, `purgecss`).
-
-- Мініфікація (`cssnano`, `CleanCSS`).
-
-- Уникати дублювання селекторів і зайвих правил.
-
-**Обмеження кількості та складності селекторів**
-
-- Використовувати класи замість універсальних або глибоких комбінацій
-  селекторів.
-
-- Не перевантажувати DOM пошуком через дуже складні селектори.
-
-**Використання кешування**
-
-- Задавати довгі `cache headers` для CSS-файлів з рідкими змінами.
-
-- Використовувати версіонування (`hash` у назві файлу) для оновлень.
-
-**Порядок підключення стилів**
-
-- CSS-файли, що впливають на `Above-the-Fold` контент — якомога вище у `<head>`.
-
-- Модульні стилі — підключати лише там, де вони реально потрібні.
-
-**Зменшення залежностей від зовнішніх ресурсів**
-
-- Якщо є зовнішні шрифти або бібліотеки CSS — підключати лише потрібні частини
-  (наприклад, `font-subset`).
-
-- Використовувати `preload` для ключових стилів
-  (`<link rel="preload" as="style" href="...">`).
-
-</details>
-
-<details>
-<summary>138. Як мінімізувати перемальовування та перекомпонування CSS?</summary>
-
-#### CSS
-
-- Щоб мінімізувати перемальовування (`repaint`) та перекомпонування (`reflow`,
-  також називають `layout`), треба розуміти, що вони — найвитратніші операції в
-  рендерингу браузера.
-
-  - `Reflow` відбувається, коли змінюється структура DOM або стилі, що впливають
-    на розташування елементів, і браузер змушений перераховувати позиції та
-    розміри.
-
-  - `Repaint` трапляється, коли змінюється зовнішній вигляд елемента (колір, фон
-    тощо), але не його розташування.
-
-#### Основні стратегії зменшення reflow/repaint
-
-**Мінімізуйте зміни в DOM**
-
-- Уникайте частого додавання/видалення елементів у циклах.
-
-- Використовуйте DocumentFragment або приховування елемента (`display: none`)
-  перед масовими змінами, а потім показуйте назад.
-
-```javascript
-element.style.display = 'none'; // масові зміни
-DOM element.style.display = 'block';
-```
-
-**Уникайте читання і запису стилів впереміш**
-
-- Читання властивостей, що викликають `reflow` (наприклад `offsetHeight`,
-  `scrollTop`, `getComputedStyle`), після зміни стилів примушує браузер
-  синхронно перерахувати `layout`.
-
-❌ **Погано:**
-
-```javascript
-element.style.width = '200px';
-console.log(element.offsetHeight); // змусить layout виконатися двічі
-```
-
-✅ **Добре:**
-
-```javascript
-const height = element.offsetHeight;
-element.style.width = '200px';
-```
-
-**Використовуйте CSS-трансформації замість зміни геометрії**
-
-- Зміни `top`, `left`, `width`, `height` спричиняють `reflow`.
-
-- Використання `transform: translate()` чи `scale()` виконується на GPU і не
-  викликає перерахунку розташування.
-
-```css
-/* краще */
-transform: translateX(50px);
-
-/* гірше */
-left: 50px;
-```
-
-**Виносьте анімації на композитний шар**
-
-- Використовуйте `will-change: transform;` або `transform` та `opacity` для
-  плавних анімацій.
-
-- Не анімуйте властивості, які впливають на розміри/flow (наприклад `margin`,
-  `width`).
-
-**Групуйте зміни стилів**
-
-- Зміни кількох властивостей через `classList.add()` або через `style.cssText`
-  зменшують кількість `reflow`.
-
-```javascript
-element.classList.add('active', 'highlight');
-```
-
-**Оптимізуйте складні селектори**
-
-- Глибокі та складні селектори збільшують час обчислення стилів.
-
-- Віддавайте перевагу простим класам замість каскаду в 5–6 рівнів.
-
-**Використовуйте requestAnimationFrame для оновлень у JS**
-
-- Щоб уникнути "рваних" анімацій, синхронізуйте зміни стилів з кадрами анімації
-  браузера.
-
-```javascript
-function animate() {
-  element.style.transform = `translateX(${x}px)`;
-  requestAnimationFrame(animate);
-}
-```
-
-**Обмежуйте використання таблиць**
-
-- HTML-таблиці перераховуються складніше, бо зміни в одній клітинці можуть
-  вплинути на всю таблицю.
-
-**Кешуйте розрахунки**
-
-- Якщо потрібно кілька разів читати властивість, що викликає `reflow` —
-  збережіть її в змінній.
-
-</details>
-
-<details>
-<summary>139. Які найкращі практики написання ефективного CSS?</summary>
-
-#### CSS
-
-**Структуруйте код і використовуйте конвенції**
-
-- Дотримуйтеся єдиного стилю написання (BEM, SMACSS, ITCSS).
-
-- Використовуйте змістовні імена класів замість описових по вигляду
-  (.btn-primary замість .blue-btn).
-
-- Логічно групуйте стилі (базові, компоненти, утиліти).
-
-**Мінімізуйте специфічність**
-
-- Уникайте довгих селекторів (header nav ul li a) — вони ускладнюють
-  перевизначення.
-
-- Перевага — класи над ID:
-
-```css
-/* Добре */
-.card-title {
-  ...;
-}
-
-/* Погано */
-#main-content h2.title {
-  ...;
-}
-```
-
-- Не зловживайте `!important` — він ускладнює підтримку.
-
-**Використовуйте каскад розумно**
-
-- Пишіть стилі так, щоб вони перевизначалися природно, без зайвих хитрощів.
-
-- Використовуйте успадкування для шрифтів, кольорів і загальних властивостей.
-
-**Оптимізуйте для продуктивності**
-
-- Використовуйте простi селектори: браузер читає їх справа наліво, тож div ul li
-  a гірший, ніж .nav-link.
-
-- Видаляйте непотрібні стилі — вони лише уповільнюють рендеринг.
-
-- Об’єднуйте спільні властивості у короткі записи (margin: 10px 0; замість
-  чотирьох окремих).
-
-**Уникайте дублювання**
-
-- Виносьте повторювані значення у змінні (у SCSS або CSS Custom Properties):
-
-```css
-:root {
-  --main-color: #3498db;
-}
-
-.btn {
-  background: var(--main-color);
-}
-```
-
-**Думайте про масштабованість**
-
-- Проєктуйте стилі так, щоб додавання нового компонента не ламало існуючі.
-
-- Використовуйте компонентний підхід у фреймворках (React, Vue, Angular).
-
-**Мінімізуйте вплив на перерисовку**
-
-- Уникайте частих змін layout-властивостей (width, height, margin).
-
-- Для анімацій використовуйте transform та opacity — вони не викликають reflow.
-
-**Готуйте до продакшну**
-
-- Мініфікуйте CSS (через cssnano, clean-css).
-
-- Використовуйте critical CSS для швидкого відображення above-the-fold контенту.
-
-- Вмикайте автопрефікси для кросбраузерності.
-
-**Тестуйте**
-
-- Перевіряйте сторінку в різних браузерах та на різних пристроях.
-
-- Використовуйте Lighthouse/DevTools для аналізу unused CSS.
-
-</details>
-
-<details>
-<summary>140. Як оптимізувати CSS для критичного шляху рендерингу та швидкого завантаження?</summary>
-
-#### CSS
-
-**Виділення критичного CSS**
-
-- Витягніть стилі, які потрібні для першого екрану ("above the fold"), і вставте
-  їх інлайн у `<head>`:
-
-```html
-<style>
-  body {
-    font-family: sans-serif;
-  }
-  header {
-    background: #333;
-    color: #fff;
-    padding: 1rem;
-  }
-</style>
-```
-
-- Решту стилів підвантажуйте окремим файлом асинхронно.
-
-**Використання media та preload**
-
-- Для неосновних стилів вказуйте медіа-умови:
-
-```html
-<link rel="stylesheet" href="print.css" media="print" />
-```
-
-- Або використовуйте preload:
-
-```html
-<link
-  rel="preload"
-  href="styles.css"
-  as="style"
-  onload="this.rel='stylesheet'"
-/>
-```
-
-**Мінімізація та об’єднання**
-
-- Мінімізуйте CSS (remove spaces, comments, unused rules).
-
-- Об’єднуйте файли, щоб зменшити кількість HTTP-запитів (але не до абсурду, якщо
-  є код для різних частин сайту).
-
-**Уникання блокуючих CSS**
-
-- Розбийте стилі на критичні (inline) і другорядні (завантаження після
-  DOMContentLoaded).
-
-#### Наприклад:
-
-```html
-<link
-  rel="stylesheet"
-  href="main.css"
-  media="print"
-  onload="this.media='all'"
-/>
-```
-
-**Прибирання зайвих стилів**
-
-- Використовуйте PurgeCSS, UnCSS або аналогічні інструменти для видалення
-  невикористаних селекторів.
-
-- Це особливо важливо при роботі з великими фреймворками (Bootstrap, Tailwind).
-
-**Оптимізація селекторів**
-
-- Уникайте надто складних і глибоких селекторів (div ul li a span).
-
-- Віддавайте перевагу класам — вони швидші для обробки.
-
-**Використання HTTP/2**
-
-- Якщо сервер підтримує HTTP/2, можна не об’єднувати файли, а завантажувати їх
-  паралельно — це зменшує час до першого рендеру.
-
-</details>
-
-<details>
-<summary>141. Що таке об'єктно-орієнтований CSS (OOCSS)?</summary>
-
-#### CSS
-
-- OOCSS (Object-Oriented CSS) — це методологія написання CSS, що базується на
-  розділенні стилів на структуру (layout) і шкіру (theme), та повторному
-  використанні класів як «об’єктів» для зменшення дублювання і підвищення
-  гнучкості коду.
-
-</details>
-
-<details>
-<summary>142. Поясніть принціпи іменування BEM, зокрема як працюють блоки, елементи та модифікатори.</summary>
-
-#### CSS
-
-- `BEM` — це методологія іменування CSS-класів для покращення читабельності і
-  масштабованості коду.
-
-**Структура:**
-
-- block — незалежний компонент (наприклад, menu)
-
-- block**element — частина блоку (menu**item)
-
-- block--modifier — варіант блоку (menu--dark) або елемента
-  (menu\_\_item--active)
-
-Це допомагає уникати конфліктів і чітко структурує стилі.
-
-</details>
-
-<details>
-<summary>143. Які переваги використання CSS-фреймворку, такого як Bootstrap або TailwindCSS?</summary>
-
-#### CSS
-
-- Прискорюють розробку завдяки готовим стилям і компонентам.
-
-- Забезпечують консистентність дизайну між командами.
-
-- Мають адаптивність «з коробки» (responsive).
-
-- Підтримують кросбраузерність.
-
-- TailwindCSS дає гнучкість через утиліти, Bootstrap — готові UI-компоненти.
-
-- Зменшують обсяг кастомного CSS і допомагають уникати помилок.
-
-</details>
-
-<details>
-<summary>144. Як забезпечити масштабованість та зручність підтримки CSS у великому проекті?</summary>
-
-#### CSS
-
-- Використовувати методології: BEM, OOCSS, SMACSS для структуризації.
-
-- Розбивати CSS на модулі або компоненти.
-
-- Використовувати препроцесори (Sass, Less) і змінні.
-
-- Мінімізувати специфічність селекторів.
-
-- Документувати стилі і слідувати код-стайлу.
-
-- Писати повторно використовувані утиліти й міксіни.
-
-- Впроваджувати автоматичний лінтинг і тестування стилів.
-
-</details>
-
-<details>
-<summary>145. Які підходи до архітектури CSS для великомасштабних застосунків ви знаєте?</summary>
-
-#### CSS
-
-- BEM — чітке розділення блоків, елементів і модифікаторів для передбачуваності.
-
-- OOCSS — розділення структури і стилів, повторне використання об’єктів.
-
-- SMACSS — категоризація стилів на базові, макетні, модульні, станів і теми.
-
-- ITCSS — ієрархія шарів від глобальних до компонентних стилів для кращої
-  організації.
-
-- Atomic CSS / Utility-first — маленькі повторно використовувані класи для
-  швидкого стилювання.
-
-Кожен підхід можна комбінувати залежно від потреб проекту.
-
-</details>
-
-<details>
-<summary>146. Як зробити гамбургер-меню лише на CSS?</summary>
-
-#### CSS
-
-- Створити гамбургер-меню на CSS можна так:
-
-1. Використати чекбокс (`<input type="checkbox">`) для контролю відкриття меню.
-
-2. Стилізувати три смужки як гамбургер через псевдоелементи.
-
-3. При відміченому чекбоксі через CSS (`:checked`) показувати/ховати меню.
-
-#### Простий приклад:
-
-```html
-<input type="checkbox" id="menu-toggle" />
-<label for="menu-toggle" class="hamburger">
-  <span></span><span></span><span></span>
-</label>
-<nav class="menu">
-  <a href="#">Home</a>
-  <a href="#">About</a>
-</nav>
-```
-
-```css
-.hamburger span {
-  display: block;
-  width: 30px;
-  height: 3px;
-  margin: 5px 0;
-  background: black;
-  transition: 0.3s;
-}
-
-.menu {
-  display: none;
-}
-
-#menu-toggle:checked + .hamburger + .menu {
-  display: block;
-}
-```
-
-</details>
-
-<details>
-<summary>147. Як зробити слайдер або карусель лише на CSS?</summary>
-
-#### CSS
-
-- Карусель на чистому CSS роблять через:
-
-1. Використання `input type="radio"` або чекбоксів для керування слайдами.
-
-2. Приховані елементи-контролери (`radio buttons`), стилізовані як навігація.
-
-3. Позиціонування слайдів абсолютом в контейнері.
-
-4. Показ слайду через CSS-селектор `:checked` (наприклад, #slide1:checked ~
-   .slides .slide1 { opacity: 1; }).
-
-5. Анімації або переходи для плавності.
-
-#### Простий приклад:
-
-```html
-<input type="radio" name="slider" id="slide1" checked />
-<input type="radio" name="slider" id="slide2" />
-<div class="slides">
-  <div class="slide slide1">Slide 1</div>
-  <div class="slide slide2">Slide 2</div>
-</div>
-<label for="slide1">1</label>
-<label for="slide2">2</label>
-```
-
-```css
-.slides .slide {
-  opacity: 0;
-  position: absolute;
-  transition: opacity 0.5s ease;
-}
-
-#slide1:checked ~ .slides .slide1,
-#slide2:checked ~ .slides .slide2 {
-  opacity: 1;
-  position: relative;
-}
-```
-
-</details>
-
-<details>
-<summary>148. Як реалізувати макет у стилі мура (masonry layout) за допомогою CSS?</summary>
-
-#### CSS
-
-- Щоб створити макет у стилі мура (masonry layout) на CSS, можна використовувати
-  кілька підходів:
-
-1. CSS Grid із властивістю grid-auto-rows та grid-row-end
-
-Потрібно вручну або через JS задавати висоту рядків, щоб елементи «заповнювали»
-вертикальний простір без фіксованої висоти.
-
-2. Використання CSS Columns (найпростіший спосіб)
-
-```css
-.container {
-  column-count: 3;
-  column-gap: 1rem;
-}
-
-.item {
-  break-inside: avoid;
-  margin-bottom: 1rem;
-}
-```
-
-Переваги: автоматичне «обтікання» елементів у колонки, але порядок читання зліва
-направо, зверху вниз.
-
-3. Новий спосіб — grid-template-rows: masonry (поки експериментальний, підтримка
-   обмежена).
-
-- Підсумок:
-
-  - Для простих проектів — CSS Columns.
-
-  - Для складніших — поєднання Grid і JS для обчислення висот.
-
-</details>
-
-<details>
-<summary>149. Як застосувати CSS до вебзастосунку, який має друкуватися, а також відображатися на екрані?</summary>
-
-#### CSS
-
-- Для окремого стилювання під друк і екран використовують медіа-запити:
-
-```css
-/* Стилі для екрану */
-@media screen {
-  /* тут стилі для екрана */
-}
-
-/* Стилі для друку */
-@media print {
-  /* тут стилі для друку */
-}
-```
-
-- Також можна підключати окремі CSS-файли:
-
-```html
-<link rel="stylesheet" href="screen.css" media="screen" />
-<link rel="stylesheet" href="print.css" media="print" />
-```
-
-- Це дозволяє оптимізувати вигляд для кожного режиму — приховувати меню,
-  змінювати кольори, поліпшувати читабельність при друку.
-
-</details>
-
-<details>
-<summary>150. Як реалізувати безперебійний каскадний потік елементів у адаптивному дизайні?</summary>
-
-#### CSS
-
-- Щоб створити безперебійний каскадний потік (flow) елементів в адаптивному
-  дизайні, використовують:
-
-  - CSS Flexbox з властивістю flex-wrap: wrap; — елементи переходять на новий
-    рядок при браку місця.
-
-  - CSS Grid з автоматичним заповненням колонок (grid-template-columns:
-    repeat(auto-fill, minmax(200px, 1fr));).
-
-  - Media queries для корекції кількості елементів у рядку залежно від ширини
-    екрана.
-
-  - Використання відсоткових/гнучких ширин замість фіксованих пікселів.
-
-</details>
diff --git a/frontend/parse/questions.json b/frontend/parse/questions.json
index a28bc353..e69de29b 100644
--- a/frontend/parse/questions.json
+++ b/frontend/parse/questions.json
@@ -1,13419 +0,0 @@
-[
-  {
-    "category": "css",
-    "order": 1,
-    "translations": {
-      "uk": {
-        "question": "1. Що таке CSS? І навіщо він використовується?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS (Cascading Style Sheets)",
-                "bold": true
-              },
-              {
-                "text": " — це мова стилів для опису зовнішнього вигляду веб-сторінок. Вона визначає шрифти, кольори, відступи, розташування елементів та інші візуальні параметри."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS дозволяє відокремити структуру контенту (HTML) від його оформлення, що спрощує підтримку, масштабування та зміну дизайну сайту."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "1. What is CSS and why is it used?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS (Cascading Style Sheets)",
-                "bold": true
-              },
-              {
-                "text": " is a style sheet language used to describe the visual presentation of web pages. It controls fonts, colors, spacing, layout, and other visual aspects."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS separates content structure (HTML) from presentation, making websites easier to maintain, scale, and redesign."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "1. Czym jest CSS i do czego służy?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS (Cascading Style Sheets)",
-                "bold": true
-              },
-              {
-                "text": " to język arkuszy stylów służący do opisu wyglądu stron internetowych. Określa czcionki, kolory, odstępy, układ oraz inne aspekty wizualne."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS oddziela strukturę treści (HTML) od warstwy prezentacji, co ułatwia utrzymanie, rozwój i zmianę wyglądu strony."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 2,
-    "translations": {
-      "uk": {
-        "question": "2. Що таке каскадність у CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Каскадність у CSS",
-                "bold": true
-              },
-              {
-                "text": " — це механізм, який визначає, які стилі застосовуються до елемента, якщо для нього задано кілька правил з різних джерел або рівнів."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Браузер обирає фінальні стилі на основі пріоритетів: походження стилю, специфічності селектора та порядку оголошення."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "2. What is the cascade in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The cascade in CSS",
-                "bold": true
-              },
-              {
-                "text": " is the mechanism that determines which styles are applied to an element when multiple CSS rules target the same element."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The browser resolves conflicts based on style origin, selector specificity, and the order in which rules are declared."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "2. Czym jest kaskadowość w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Kaskadowość w CSS",
-                "bold": true
-              },
-              {
-                "text": " to mechanizm określający, które style zostaną zastosowane do elementu, gdy wiele reguł dotyczy tego samego elementu."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Przeglądarka rozstrzyga konflikty na podstawie źródła stylu, specyficzności selektora oraz kolejności deklaracji."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 3,
-    "translations": {
-      "uk": {
-        "question": "3. Які є способи підключення CSS до HTML-документу?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Вбудовані стилі (inline). Безпосередньо в HTML-тегах через атрибут "
-                  },
-                  {
-                    "text": "style",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Внутрішні стилі. Усередині HTML-документа в секції "
-                  },
-                  {
-                    "text": "<style>...</style>",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зовнішні стилі. Окремі CSS-файли, підключені через "
-                  },
-                  {
-                    "text": "<link rel=\"stylesheet\" href=\"styles.css\">",
-                    "code": true
-                  },
-                  {
-                    "text": " або "
-                  },
-                  {
-                    "text": "@import",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "3. What are the ways to include CSS in an HTML document?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Inline styles. Applied directly in HTML tags using the "
-                  },
-                  {
-                    "text": "style",
-                    "code": true
-                  },
-                  {
-                    "text": " attribute."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Internal styles. Defined inside the HTML document within "
-                  },
-                  {
-                    "text": "<style>...</style>",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "External styles. Separate CSS files linked via "
-                  },
-                  {
-                    "text": "<link rel=\"stylesheet\" href=\"styles.css\">",
-                    "code": true
-                  },
-                  {
-                    "text": " or "
-                  },
-                  {
-                    "text": "@import",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "3. Jakie są sposoby podłączania CSS do dokumentu HTML?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Style inline. Bezpośrednio w znacznikach HTML za pomocą atrybutu "
-                  },
-                  {
-                    "text": "style",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Style wewnętrzne. Zdefiniowane w dokumencie HTML w sekcji "
-                  },
-                  {
-                    "text": "<style>...</style>",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Style zewnętrzne. Oddzielne pliki CSS podłączane przez "
-                  },
-                  {
-                    "text": "<link rel=\"stylesheet\" href=\"styles.css\">",
-                    "code": true
-                  },
-                  {
-                    "text": " lub "
-                  },
-                  {
-                    "text": "@import",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 4,
-    "translations": {
-      "uk": {
-        "question": "4. Що таке CSS-селектори? Наведіть приклади.",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS-селектори",
-                "bold": true
-              },
-              {
-                "text": " використовуються для вибору HTML-елементів, до яких застосовуються стилі."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Приклади:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "За тегом: " },
-                  { "text": "h1 { color: red; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "За класом: " },
-                  { "text": ".button { background: blue; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "За ID: " },
-                  { "text": "#header { padding: 10px; }", "code": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Комбіновані:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Дочірні: " },
-                  { "text": "ul > li { margin: 5px; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Нащадки: " },
-                  { "text": "div p { font-size: 14px; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Атрибутивні: " },
-                  {
-                    "text": "[type=\"text\"] { border: 1px solid gray; }",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Псевдокласи:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "a:hover { color: green; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": ":nth-child(2) { font-weight: bold; }",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Псевдоелементи:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "p::first-line { text-transform: uppercase; }",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "4. What are CSS selectors? Give examples.",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "CSS selectors", "bold": true },
-              {
-                "text": " are used to select HTML elements to which styles are applied."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Examples:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "By tag: " },
-                  { "text": "h1 { color: red; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "By class: " },
-                  { "text": ".button { background: blue; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "By ID: " },
-                  { "text": "#header { padding: 10px; }", "code": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Combined:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Child selectors: " },
-                  { "text": "ul > li { margin: 5px; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Descendants: " },
-                  { "text": "div p { font-size: 14px; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Attribute selectors: " },
-                  {
-                    "text": "[type=\"text\"] { border: 1px solid gray; }",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Pseudo-classes:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "a:hover { color: green; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": ":nth-child(2) { font-weight: bold; }",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Pseudo-elements:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "p::first-line { text-transform: uppercase; }",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "4. Czym są selektory CSS? Podaj przykłady.",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Selektory CSS", "bold": true },
-              {
-                "text": " służą do wybierania elementów HTML, do których stosowane są style."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Przykłady:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Po znaczniku: " },
-                  { "text": "h1 { color: red; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Po klasie: " },
-                  { "text": ".button { background: blue; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Po ID: " },
-                  { "text": "#header { padding: 10px; }", "code": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Złożone:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selektory potomne: " },
-                  { "text": "ul > li { margin: 5px; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Potomkowie: " },
-                  { "text": "div p { font-size: 14px; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Atrybuty: " },
-                  {
-                    "text": "[type=\"text\"] { border: 1px solid gray; }",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Pseudoklasy:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "a:hover { color: green; }", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": ":nth-child(2) { font-weight: bold; }",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Pseudoelementy:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "p::first-line { text-transform: uppercase; }",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 5,
-    "translations": {
-      "uk": {
-        "question": "5. Як працює наслідування в CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Наслідування в CSS",
-                "bold": true
-              },
-              {
-                "text": " дозволяє деяким властивостям автоматично передаватися від батьківського елемента до дочірніх."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Особливості:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Автоматично наслідуються переважно текстові та декоративні властивості:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "color", "code": true },
-              { "text": ", " },
-              { "text": "font", "code": true },
-              { "text": ", " },
-              { "text": "visibility", "code": true },
-              { "text": ", " },
-              { "text": "line-height", "code": true },
-              { "text": " тощо." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Властивості коробкової моделі не наслідуються автоматично:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": ", " },
-              { "text": "padding", "code": true },
-              { "text": ", " },
-              { "text": "border", "code": true },
-              { "text": ", " },
-              { "text": "width", "code": true },
-              { "text": ", " },
-              { "text": "height", "code": true },
-              { "text": " тощо." }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Контроль наслідування:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Примусове наслідування: ", "bold": true },
-                  { "text": "використовуйте значення inherit." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p {\n  border: inherit;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Скасування наслідування: ", "bold": true },
-                  {
-                    "text": "значення initial скидає властивість до стандартного."
-                  },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p {\n  color: initial;\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "5. How does inheritance work in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Inheritance in CSS", "bold": true },
-              {
-                "text": " allows certain properties to be automatically passed from a parent element to its children."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Key points:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mostly text and decorative properties are inherited automatically:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "color", "code": true },
-              { "text": ", " },
-              { "text": "font", "code": true },
-              { "text": ", " },
-              { "text": "visibility", "code": true },
-              { "text": ", " },
-              { "text": "line-height", "code": true },
-              { "text": ", etc." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Box model properties are not inherited automatically:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": ", " },
-              { "text": "padding", "code": true },
-              { "text": ", " },
-              { "text": "border", "code": true },
-              { "text": ", " },
-              { "text": "width", "code": true },
-              { "text": ", " },
-              { "text": "height", "code": true },
-              { "text": ", etc." }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Controlling inheritance:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Force inheritance: ", "bold": true },
-                  { "text": "use the inherit value." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p {\n  border: inherit;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Disable inheritance: ", "bold": true },
-                  {
-                    "text": "the initial value resets the property to its default."
-                  },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p {\n  color: initial;\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "5. Jak działa dziedziczenie w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Dziedziczenie w CSS", "bold": true },
-              {
-                "text": " pozwala na automatyczne przekazywanie niektórych właściwości z elementu nadrzędnego do potomnych."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Najważniejsze cechy:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Automatycznie dziedziczone są głównie właściwości tekstowe i dekoracyjne:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "color", "code": true },
-              { "text": ", " },
-              { "text": "font", "code": true },
-              { "text": ", " },
-              { "text": "visibility", "code": true },
-              { "text": ", " },
-              { "text": "line-height", "code": true },
-              { "text": ", itd." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Właściwości modelu pudełkowego nie są dziedziczone automatycznie:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": ", " },
-              { "text": "padding", "code": true },
-              { "text": ", " },
-              { "text": "border", "code": true },
-              { "text": ", " },
-              { "text": "width", "code": true },
-              { "text": ", " },
-              { "text": "height", "code": true },
-              { "text": ", itd." }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Kontrola dziedziczenia:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wymuszenie dziedziczenia: ", "bold": true },
-                  { "text": "użyj wartości inherit." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p {\n  border: inherit;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wyłączenie dziedziczenia: ", "bold": true },
-                  { "text": "wartość initial przywraca domyślne ustawienie." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p {\n  color: initial;\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 6,
-    "translations": {
-      "uk": {
-        "question": "6. Що таке «модель коробки» (box model) в CSS і як її можна змінити?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Модель коробки (box model)",
-                "bold": true
-              },
-              {
-                "text": " визначає, як обчислюються розміри елемента в CSS."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Content:", "bold": true },
-                  { "text": " вміст елемента." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Padding:", "bold": true },
-                  { "text": " внутрішній відступ." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Border:", "bold": true },
-                  { "text": " рамка навколо елемента." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin:", "bold": true },
-                  { "text": " зовнішній відступ." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Зміна моделі коробки виконується через властивість " },
-              { "text": "box-sizing", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "content-box (за замовчуванням): ширина і висота включають лише вміст."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "border-box: ширина і висота включають вміст, padding і border."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "* {\n  box-sizing: border-box;\n}"
-          }
-        ]
-      },
-      "en": {
-        "question": "6. What is the CSS box model and how can it be changed?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The box model", "bold": true },
-              {
-                "text": " defines how element dimensions are calculated in CSS."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Content:", "bold": true },
-                  { "text": " the element content." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Padding:", "bold": true },
-                  { "text": " inner spacing." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Border:", "bold": true },
-                  { "text": " element border." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin:", "bold": true },
-                  { "text": " outer spacing." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The box model is controlled using the " },
-              { "text": "box-sizing", "code": true },
-              { "text": " property." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "content-box (default): width and height include only content."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "border-box: width and height include content, padding, and border."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "* {\n  box-sizing: border-box;\n}"
-          }
-        ]
-      },
-      "pl": {
-        "question": "6. Czym jest model pudełkowy (box model) w CSS i jak go zmienić?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Model pudełkowy", "bold": true },
-              { "text": " określa sposób obliczania rozmiarów elementu w CSS." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Content:", "bold": true },
-                  { "text": " zawartość elementu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Padding:", "bold": true },
-                  { "text": " odstęp wewnętrzny." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Border:", "bold": true },
-                  { "text": " obramowanie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin:", "bold": true },
-                  { "text": " odstęp zewnętrzny." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Zmiana modelu odbywa się za pomocą właściwości " },
-              { "text": "box-sizing", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "content-box (domyślnie): szerokość i wysokość obejmują tylko zawartość."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "border-box: szerokość i wysokość obejmują zawartość, padding i border."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "* {\n  box-sizing: border-box;\n}"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 7,
-    "translations": {
-      "uk": {
-        "question": "7. У чому різниця між margin і padding?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Різниця між " },
-              { "text": "margin", "code": true },
-              { "text": " і " },
-              { "text": "padding", "code": true },
-              { "text": ":" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Розташування:" }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": " створює зовнішній відступ між елементами. " },
-              { "text": "padding", "code": true },
-              { "text": " створює внутрішній відступ між вмістом і рамкою." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Вплив на фон:" }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": " не впливає на фон. " },
-              { "text": "padding", "code": true },
-              { "text": " входить у фон елемента." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Колізія:" }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": " може зливатися між блоками. " },
-              { "text": "padding", "code": true },
-              { "text": " не зливається." }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "div {\n  margin: 20px;\n  padding: 20px;\n  background-color: lightblue;\n}"
-          }
-        ]
-      },
-      "en": {
-        "question": "7. What is the difference between margin and padding?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Difference between " },
-              { "text": "margin", "code": true },
-              { "text": " and " },
-              { "text": "padding", "code": true },
-              { "text": ":" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Position:" }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": " creates outer spacing. " },
-              { "text": "padding", "code": true },
-              { "text": " creates inner spacing." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Background:" }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": " does not affect background. " },
-              { "text": "padding", "code": true },
-              { "text": " is included in the background area." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Collapsing:" }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": " can collapse. " },
-              { "text": "padding", "code": true },
-              { "text": " never collapses." }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "div {\n  margin: 20px;\n  padding: 20px;\n  background-color: lightblue;\n}"
-          }
-        ]
-      },
-      "pl": {
-        "question": "7. Jaka jest różnica między margin a padding?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Różnica między " },
-              { "text": "margin", "code": true },
-              { "text": " a " },
-              { "text": "padding", "code": true },
-              { "text": ":" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Położenie:" }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": " tworzy odstęp zewnętrzny. " },
-              { "text": "padding", "code": true },
-              { "text": " tworzy odstęp wewnętrzny." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Tło:" }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": " nie wpływa na tło. " },
-              { "text": "padding", "code": true },
-              { "text": " jest częścią tła elementu." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Kolaps:" }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "margin", "code": true },
-              { "text": " może się zlewać. " },
-              { "text": "padding", "code": true },
-              { "text": " nigdy się nie zlewa." }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "div {\n  margin: 20px;\n  padding: 20px;\n  background-color: lightblue;\n}"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "question": "8. Що таке Flexbox?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Flexbox (Flexible Box Layout) — це CSS-модель розташування елементів, яка забезпечує гнучке вирівнювання та розподіл простору в межах контейнера, навіть якщо розміри елементів невідомі або змінюються."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні поняття:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Flex-контейнер:",
-            "bold": true
-          },
-          {
-            "text": " Батьківський елемент, на який застосовується "
-          },
-          {
-            "text": "display: flex;",
-            "code": true
-          },
-          {
-            "text": ". "
-          },
-          {
-            "text": "Flex-елементи:",
-            "bold": true
-          },
-          {
-            "text": " Дочірні елементи flex-контейнера."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні властивості Flexbox:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для контейнера:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-direction",
-                "code": true
-              },
-              {
-                "text": ": Напрямок розташування елементів ("
-              },
-              {
-                "text": "row",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "row-reverse",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "column",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "column-reverse",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "justify-content",
-                "code": true
-              },
-              {
-                "text": ": Горизонтальне вирівнювання елементів ("
-              },
-              {
-                "text": "flex-start",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "center",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "space-between",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "space-around",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "space-evenly",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "align-items",
-                "code": true
-              },
-              {
-                "text": ": Вертикальне вирівнювання елементів ("
-              },
-              {
-                "text": "stretch",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "center",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "flex-start",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "flex-end",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "baseline",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "align-content",
-                "code": true
-              },
-              {
-                "text": ": Вирівнювання рядків у багаторядковому контейнері ("
-              },
-              {
-                "text": "stretch",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "center",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "space-between",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-wrap",
-                "code": true
-              },
-              {
-                "text": ": Дозволяє елементам переноситися ("
-              },
-              {
-                "text": "nowrap",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "wrap",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "wrap-reverse",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для елементів:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-grow",
-                "code": true
-              },
-              {
-                "text": ": Як елемент збільшується вільним простором."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-shrink",
-                "code": true
-              },
-              {
-                "text": ": Як елемент зменшується при нестачі простору."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-basis",
-                "code": true
-              },
-              {
-                "text": ": Базовий розмір елемента перед розподілом простору."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "align-self",
-                "code": true
-              },
-              {
-                "text": ": Вирівнювання конкретного елемента всередині контейнера."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Приклад:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "  .container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .item {\n    flex: 1; /* Рівний розподіл простору */\n  }"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "category": "css",
-    "order": 9,
-    "translations": {
-      "uk": {
-        "question": "9. Що таке Grid?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS Grid",
-                "bold": true
-              },
-              {
-                "text": " — це двовимірна система розмітки для побудови сіток з керуванням розташуванням елементів по рядках і колонках."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Основні поняття:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Grid-контейнер:", "bold": true },
-                  { "text": " елемент з " },
-                  { "text": "display: grid", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Grid-елементи:", "bold": true },
-                  { "text": " дочірні елементи контейнера." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Треки:", "bold": true },
-                  { "text": " рядки (" },
-                  { "text": "rows", "code": true },
-                  { "text": ") і колонки (" },
-                  { "text": "columns", "code": true },
-                  { "text": ")." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Області:", "bold": true },
-                  { "text": " іменовані зони з кількох клітинок." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Основні властивості:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid-template-rows", "code": true },
-                  { "text": ", " },
-                  { "text": "grid-template-columns", "code": true },
-                  { "text": " — розміри сітки." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "gap", "code": true },
-                  { "text": " — відступи між треками." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid-area", "code": true },
-                  { "text": " — розміщення елемента в області." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "9. What is Grid?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "CSS Grid", "bold": true },
-              {
-                "text": " is a two-dimensional layout system for building grids with control over rows and columns."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Core concepts:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Grid container:", "bold": true },
-                  { "text": " an element with " },
-                  { "text": "display: grid", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Grid items:", "bold": true },
-                  { "text": " children of the container." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tracks:", "bold": true },
-                  { "text": " rows and columns." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Areas:", "bold": true },
-                  { "text": " named rectangular regions." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Key properties:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid-template-rows", "code": true },
-                  { "text": ", " },
-                  { "text": "grid-template-columns", "code": true },
-                  { "text": " — grid sizing." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "gap", "code": true },
-                  { "text": " — spacing between tracks." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid-area", "code": true },
-                  { "text": " — area placement." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "9. Czym jest Grid?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "CSS Grid", "bold": true },
-              {
-                "text": " to dwuwymiarowy system układu umożliwiający budowę siatek z kontrolą wierszy i kolumn."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Podstawowe pojęcia:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kontener grid:", "bold": true },
-                  { "text": " element z " },
-                  { "text": "display: grid", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Elementy grid:", "bold": true },
-                  { "text": " elementy potomne." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tory:", "bold": true },
-                  { "text": " wiersze i kolumny." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Obszary:", "bold": true },
-                  { "text": " nazwane regiony." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Główne właściwości:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid-template-rows", "code": true },
-                  { "text": ", " },
-                  { "text": "grid-template-columns", "code": true },
-                  { "text": " — definicja siatki." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "gap", "code": true },
-                  { "text": " — odstępy między torami." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid-area", "code": true },
-                  { "text": " — pozycjonowanie w obszarze." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 10,
-    "translations": {
-      "uk": {
-        "question": "10. Що таке медіазапити та як їх використовувати?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Медіазапити",
-                "bold": true
-              },
-              {
-                "text": " — це умови в CSS, які дозволяють застосовувати стилі залежно від характеристик пристрою, таких як ширина екрана або орієнтація."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Використовуються через правило ",
-                "bold": false
-              },
-              {
-                "text": "@media",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "@media (max-width: 768px) {\n  body {\n    background-color: lightblue;\n  }\n}\n\n@media (min-width: 769px) {\n  body {\n    background-color: lightgreen;\n  }\n}"
-          }
-        ]
-      },
-      "en": {
-        "question": "10. What are media queries and how are they used?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Media queries",
-                "bold": true
-              },
-              {
-                "text": " are CSS conditions that apply styles based on device characteristics such as screen width or orientation."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "They are defined using the ",
-                "bold": false
-              },
-              {
-                "text": "@media",
-                "code": true
-              },
-              {
-                "text": " rule."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "@media (max-width: 768px) {\n  body {\n    background-color: lightblue;\n  }\n}\n\n@media (min-width: 769px) {\n  body {\n    background-color: lightgreen;\n  }\n}"
-          }
-        ]
-      },
-      "pl": {
-        "question": "10. Czym są media queries i jak ich używać?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Media queries",
-                "bold": true
-              },
-              {
-                "text": " to warunki w CSS umożliwiające stosowanie stylów w zależności od cech urządzenia, np. szerokości ekranu."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Definiuje się je za pomocą reguły ",
-                "bold": false
-              },
-              {
-                "text": "@media",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "@media (max-width: 768px) {\n  body {\n    background-color: lightblue;\n  }\n}\n\n@media (min-width: 769px) {\n  body {\n    background-color: lightgreen;\n  }\n}"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 11,
-    "translations": {
-      "uk": {
-        "question": "11. Як можна приховати елемент за допомогою CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Елемент у CSS можна приховати кількома способами залежно від бажаної поведінки."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "display: none", "code": true },
-                  {
-                    "text": " — повністю прибирає елемент з потоку документа. Він не відображається і не займає місця."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "visibility: hidden", "code": true },
-                  {
-                    "text": " — робить елемент невидимим, але він зберігає своє місце в розмітці."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "opacity: 0", "code": true },
-                  {
-                    "text": " — робить елемент повністю прозорим, але він залишається у потоці та доступний для взаємодії."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "11. How can an element be hidden using CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "An element can be hidden in CSS in several ways depending on the required behavior."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "display: none", "code": true },
-                  {
-                    "text": " — completely removes the element from the document flow. It does not occupy space."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "visibility: hidden", "code": true },
-                  {
-                    "text": " — hides the element visually but keeps its space in the layout."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "opacity: 0", "code": true },
-                  {
-                    "text": " — makes the element fully transparent while keeping it in the layout and interactive."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "11. Jak ukryć element za pomocą CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Element w CSS można ukryć na kilka sposobów w zależności od oczekiwanego efektu."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "display: none", "code": true },
-                  {
-                    "text": " — całkowicie usuwa element z układu strony. Nie zajmuje on miejsca."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "visibility: hidden", "code": true },
-                  {
-                    "text": " — ukrywa element wizualnie, ale zachowuje jego miejsce w układzie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "opacity: 0", "code": true },
-                  {
-                    "text": " — czyni element całkowicie przezroczystym, pozostawiając go w układzie i interaktywnym."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 12,
-    "translations": {
-      "uk": {
-        "question": "12. Як можна зробити лого посередині екрана?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Лого можна вирівняти по центру екрана кількома стандартними способами."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Flexbox:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "html, body {\n  height: 100%;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Grid:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "html, body {\n  height: 100%;\n  margin: 0;\n  display: grid;\n  place-items: center;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Absolute позиціювання:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".logo {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "12. How can you center a logo on the screen?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A logo can be centered on the screen using common CSS layout techniques."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Flexbox:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "html, body {\n  height: 100%;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Grid:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "html, body {\n  height: 100%;\n  margin: 0;\n  display: grid;\n  place-items: center;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Absolute positioning:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".logo {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "12. Jak wyśrodkować logo na ekranie?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Logo można wyśrodkować na ekranie za pomocą standardowych technik CSS."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Flexbox:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "html, body {\n  height: 100%;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Grid:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "html, body {\n  height: 100%;\n  margin: 0;\n  display: grid;\n  place-items: center;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pozycjonowanie absolutne:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".logo {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 13,
-    "translations": {
-      "uk": {
-        "question": "13. Як розмістити хрестик для закриття справа зверху елемента?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Хрестик для закриття зазвичай розміщують за допомогою абсолютного позиціювання відносно контейнера."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".container {\n  position: relative;\n}\n\n.close-btn {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n}"
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<div class=\"container\">\n  <div class=\"close-btn\">&times;</div>\n</div>"
-          }
-        ]
-      },
-      "en": {
-        "question": "13. How can you place a close icon in the top right corner of an element?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A close icon is typically positioned using absolute positioning relative to its container."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".container {\n  position: relative;\n}\n\n.close-btn {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n}"
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<div class=\"container\">\n  <div class=\"close-btn\">&times;</div>\n</div>"
-          }
-        ]
-      },
-      "pl": {
-        "question": "13. Jak umieścić przycisk zamykania w prawym górnym rogu elementu?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Przycisk zamykania umieszcza się zazwyczaj za pomocą pozycjonowania absolutnego względem kontenera."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".container {\n  position: relative;\n}\n\n.close-btn {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n}"
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<div class=\"container\">\n  <div class=\"close-btn\">&times;</div>\n</div>"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 14,
-    "translations": {
-      "uk": {
-        "question": "14. Як зробити останній елемент списку червоним, незалежно від довжини списку без JS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Останній елемент списку можна стилізувати без JavaScript за допомогою CSS-псевдокласу."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":last-child", "code": true },
-                  {
-                    "text": " — вибирає останній дочірній елемент у батьківському контейнері."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "ul li:last-child {\n  color: red;\n}"
-          }
-        ]
-      },
-      "en": {
-        "question": "14. How can you make the last list item red regardless of list length without JS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The last list item can be styled without JavaScript using a CSS pseudo-class."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":last-child", "code": true },
-                  {
-                    "text": " — selects the last child element within its parent."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "ul li:last-child {\n  color: red;\n}"
-          }
-        ]
-      },
-      "pl": {
-        "question": "14. Jak ustawić ostatni element listy na czerwono bez JS, niezależnie od jej długości?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ostatni element listy można ostylować bez użycia JavaScript za pomocą pseudoklasy CSS."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":last-child", "code": true },
-                  {
-                    "text": " — wybiera ostatni element potomny w kontenerze."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "ul li:last-child {\n  color: red;\n}"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 15,
-    "translations": {
-      "uk": {
-        "question": "15. Які є можливості задати колір?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "У CSS існує кілька способів задання кольору." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ім’я кольору:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: red;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Шістнадцятковий код:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: #ff0000;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGB:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgb(255, 0, 0);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGBA:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgba(255, 0, 0, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSL:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsl(0, 100%, 50%);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSLA:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsla(0, 100%, 50%, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ключові слова:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: transparent;"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "15. What ways are there to define a color?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "CSS provides multiple ways to define colors." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Color names:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: red;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hexadecimal:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: #ff0000;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGB:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgb(255, 0, 0);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGBA:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgba(255, 0, 0, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSL:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsl(0, 100%, 50%);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSLA:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsla(0, 100%, 50%, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Keywords:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: transparent;"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "15. Jakie są sposoby definiowania koloru?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "W CSS istnieje kilka sposobów definiowania kolorów." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Nazwy kolorów:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: red;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kod szesnastkowy:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: #ff0000;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGB:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgb(255, 0, 0);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGBA:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgba(255, 0, 0, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSL:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsl(0, 100%, 50%);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSLA:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsla(0, 100%, 50%, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Słowa kluczowe:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: transparent;"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 16,
-    "translations": {
-      "uk": {
-        "question": "16. Що таке z-index? Чи кожен елемент його має?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "z-index", "code": true },
-              {
-                "text": " — це CSS-властивість, яка визначає порядок накладання елементів по осі Z. Елемент з більшим значенням перекриває елемент з меншим."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Важливі моменти:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Працює лише для позиційованих елементів з "
-                  },
-                  { "text": "position", "code": true },
-                  {
-                    "text": " значеннями relative, absolute, fixed або sticky."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Значення за замовчуванням — "
-                  },
-                  { "text": "auto", "code": true },
-                  {
-                    "text": ", у цьому випадку порядок визначається DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Може бути від’ємним і розміщувати елемент позаду інших."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".div1 {\n  position: relative;\n  z-index: 10;\n}\n\n.div2 {\n  position: relative;\n  z-index: 5;\n}"
-          }
-        ]
-      },
-      "en": {
-        "question": "16. What is z-index? Does every element have it?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "z-index", "code": true },
-              {
-                "text": " is a CSS property that controls the stacking order of elements along the Z-axis. Higher values appear on top."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Key points:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Works only on positioned elements with "
-                  },
-                  { "text": "position", "code": true },
-                  {
-                    "text": " set to relative, absolute, fixed, or sticky."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Default value is "
-                  },
-                  { "text": "auto", "code": true },
-                  {
-                    "text": ", stacking is then based on DOM order."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Can be negative to place elements behind others."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".div1 {\n  position: relative;\n  z-index: 10;\n}\n\n.div2 {\n  position: relative;\n  z-index: 5;\n}"
-          }
-        ]
-      },
-      "pl": {
-        "question": "16. Czym jest z-index? Czy każdy element go posiada?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "z-index", "code": true },
-              {
-                "text": " to właściwość CSS określająca kolejność nakładania elementów w osi Z. Wyższa wartość oznacza wyświetlanie na wierzchu."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Najważniejsze informacje:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Działa tylko dla elementów z "
-                  },
-                  { "text": "position", "code": true },
-                  {
-                    "text": " ustawionym na relative, absolute, fixed lub sticky."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Domyślna wartość to "
-                  },
-                  { "text": "auto", "code": true },
-                  {
-                    "text": ", wtedy decyduje kolejność w DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Może przyjmować wartości ujemne."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".div1 {\n  position: relative;\n  z-index: 10;\n}\n\n.div2 {\n  position: relative;\n  z-index: 5;\n}"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 17,
-    "translations": {
-      "uk": {
-        "question": "17. Які переваги і недоліки використання CSS-препроцесорів?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Переваги CSS-препроцесорів:", "bold": true }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Змінні:", "bold": true },
-                  {
-                    "text": " централізоване керування кольорами, шрифтами, розмірами."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вкладеність:", "bold": true },
-                  { "text": " логічніша структура стилів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Міксіни:", "bold": true },
-                  { "text": " повторне використання коду." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Функції:", "bold": true },
-                  { "text": " обчислення та маніпуляції значеннями." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Модульність:", "bold": true },
-                  { "text": " поділ стилів на файли." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Недоліки CSS-препроцесорів:", "bold": true }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Додаткові інструменти:", "bold": true },
-                  { "text": " потрібен етап компіляції." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ускладнення CSS:", "bold": true },
-                  { "text": " надмірна вкладеність погіршує підтримку." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Залежність від синтаксису:", "bold": true },
-                  { "text": " не всі розробники знайомі з препроцесорами." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Складніший дебагінг:", "bold": true },
-                  { "text": " без source maps важче шукати помилки." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "17. What are the advantages and disadvantages of using CSS preprocessors?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Advantages of CSS preprocessors:", "bold": true }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Variables:", "bold": true },
-                  { "text": " centralized control of colors and sizes." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Nesting:", "bold": true },
-                  { "text": " clearer structure for styles." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mixins:", "bold": true },
-                  { "text": " reusable blocks of code." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Functions:", "bold": true },
-                  { "text": " calculations inside styles." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Modularity:", "bold": true },
-                  { "text": " splitting styles into files." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Disadvantages of CSS preprocessors:", "bold": true }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Build step required:", "bold": true },
-                  { "text": " needs a compiler." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Overcomplicated CSS:", "bold": true },
-                  { "text": " deep nesting harms maintainability." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Learning curve:", "bold": true },
-                  { "text": " extra syntax to learn." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Harder debugging:", "bold": true },
-                  { "text": " without source maps." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "17. Jakie są zalety i wady stosowania preprocesorów CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Zalety preprocesorów CSS:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zmienne:", "bold": true },
-                  { "text": " centralne zarządzanie stylami." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zagnieżdżenia:", "bold": true },
-                  { "text": " czytelniejsza struktura kodu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Miksy:", "bold": true },
-                  { "text": " ponowne użycie kodu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Funkcje:", "bold": true },
-                  { "text": " obliczenia w stylach." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Modularność:", "bold": true },
-                  { "text": " podział na pliki." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Wady preprocesorów CSS:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dodatkowa konfiguracja:", "bold": true },
-                  { "text": " wymagany etap kompilacji." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przerost złożoności:", "bold": true },
-                  { "text": " nadmierne zagnieżdżenia." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zależność zespołowa:", "bold": true },
-                  { "text": " nie każdy zna składnię." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Trudniejszy debug:", "bold": true },
-                  { "text": " bez source maps." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 18,
-    "translations": {
-      "uk": {
-        "question": "18. Для чого існують різні рівні заголовків, якщо розмір можна встановити стилями?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Рівні заголовків",
-                "bold": true
-              },
-              {
-                "text": " ("
-              },
-              {
-                "text": "<h1>–<h6>",
-                "code": true
-              },
-              {
-                "text": ") потрібні не для розміру, а для семантичної структури документа."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Семантика:", "bold": true },
-                  { "text": " формують ієрархію контенту." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO:", "bold": true },
-                  {
-                    "text": " допомагають пошуковим системам зрозуміти зміст сторінки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Доступність:", "bold": true },
-                  {
-                    "text": " екранні читачі використовують заголовки для навігації."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Підтримка коду:", "bold": true },
-                  { "text": " роблять HTML зрозумілим для інших розробників." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Візуальний розмір визначається CSS, але рівень заголовка визначає його роль."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "18. Why do different heading levels exist if size can be set with CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Heading levels", "bold": true },
-              {
-                "text": " ("
-              },
-              {
-                "text": "<h1>–<h6>",
-                "code": true
-              },
-              {
-                "text": ") exist for semantic structure, not visual size."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Semantics:", "bold": true },
-                  { "text": " define document hierarchy." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO:", "bold": true },
-                  { "text": " help search engines understand content." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Accessibility:", "bold": true },
-                  { "text": " screen readers rely on headings for navigation." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Maintainability:", "bold": true },
-                  { "text": " clearer structure for developers." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS controls appearance, heading levels define meaning."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "18. Dlaczego istnieją różne poziomy nagłówków, skoro rozmiar można ustawić w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Poziomy nagłówków", "bold": true },
-              {
-                "text": " ("
-              },
-              {
-                "text": "<h1>–<h6>",
-                "code": true
-              },
-              {
-                "text": ") służą semantyce, a nie wyglądowi."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Semantyka:", "bold": true },
-                  { "text": " buduje hierarchię treści." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO:", "bold": true },
-                  { "text": " ułatwia zrozumienie strony wyszukiwarkom." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dostępność:", "bold": true },
-                  { "text": " czytniki ekranu używają nagłówków do nawigacji." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Czytelność kodu:", "bold": true },
-                  { "text": " ułatwia pracę zespołową." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS odpowiada za wygląd, nagłówki za znaczenie."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 19,
-    "translations": {
-      "uk": {
-        "question": "19. Які є варіанти позиціонування елемента на сторінці?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "У CSS існує кілька типів позиціонування елементів." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "static", "code": true },
-                  {
-                    "text": " — стандартне позиціонування в потоці документа. "
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "relative", "code": true },
-                  { "text": " — зміщення відносно власної початкової позиції." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "absolute", "code": true },
-                  {
-                    "text": " — позиціонування відносно найближчого позиційованого предка."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "fixed", "code": true },
-                  { "text": " — фіксація відносно вікна браузера." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "sticky", "code": true },
-                  {
-                    "text": " — поводиться як relative до моменту прокрутки, потім як fixed."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inherit", "code": true },
-                  { "text": ", " },
-                  { "text": "initial", "code": true },
-                  { "text": ", " },
-                  { "text": "unset", "code": true },
-                  { "text": " — керують наслідуванням або скиданням значення." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "19. What positioning options are available in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS provides several positioning methods for elements."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "static", "code": true },
-                  {
-                    "text": " — default positioning in the normal document flow."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "relative", "code": true },
-                  { "text": " — positioned relative to its original place." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "absolute", "code": true },
-                  {
-                    "text": " — positioned relative to the nearest positioned ancestor."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "fixed", "code": true },
-                  { "text": " — fixed relative to the viewport." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "sticky", "code": true },
-                  {
-                    "text": " — switches from relative to fixed when scrolling."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inherit", "code": true },
-                  { "text": ", " },
-                  { "text": "initial", "code": true },
-                  { "text": ", " },
-                  { "text": "unset", "code": true },
-                  { "text": " — control inheritance and reset behavior." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "19. Jakie są sposoby pozycjonowania elementów w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "CSS oferuje kilka metod pozycjonowania elementów." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "static", "code": true },
-                  { "text": " — domyślne położenie w normalnym układzie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "relative", "code": true },
-                  { "text": " — przesunięcie względem własnej pozycji." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "absolute", "code": true },
-                  { "text": " — pozycjonowanie względem najbliższego przodka." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "fixed", "code": true },
-                  { "text": " — przyklejony do okna przeglądarki." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "sticky", "code": true },
-                  { "text": " — łączy relative i fixed." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inherit", "code": true },
-                  { "text": ", " },
-                  { "text": "initial", "code": true },
-                  { "text": ", " },
-                  { "text": "unset", "code": true },
-                  { "text": " — zarządzają dziedziczeniem i resetem." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 20,
-    "translations": {
-      "uk": {
-        "question": "20. Які бувають види display? Який використовуєте найчастіше? У чому особливість inline-block?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Основні значення властивості display в CSS:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "block", "code": true },
-                  {
-                    "text": " — блочний елемент, займає всю ширину, починається з нового рядка."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline", "code": true },
-                  {
-                    "text": " — рядковий елемент, ширина та висота не задаються."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-block", "code": true },
-                  {
-                    "text": " — рядкове розташування з можливістю задавати ширину, висоту та відступи."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "flex", "code": true },
-                  { "text": " — гнучке одновимірне компонування." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid", "code": true },
-                  { "text": " — двовимірна сітка для макетів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "none", "code": true },
-                  { "text": " — елемент не відображається і не займає місця." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Найчастіше використовують:", "bold": true },
-              { "text": " block, flex і grid." }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Особливість inline-block:", "bold": true },
-              {
-                "text": " елемент стоїть у рядку, але поводиться як блок. Недолік — проміжки між елементами через пробіли в HTML."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "20. What display values exist? Which do you use most often? What is special about inline-block?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Main display values in CSS:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "block", "code": true },
-                  { "text": " — full-width block element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline", "code": true },
-                  {
-                    "text": " — inline element without width or height control."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-block", "code": true },
-                  { "text": " — inline layout with block-level sizing." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "flex", "code": true },
-                  { "text": " — flexible one-dimensional layout." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid", "code": true },
-                  { "text": " — two-dimensional grid layout." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "none", "code": true },
-                  { "text": " — element is not rendered." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Most commonly used:", "bold": true },
-              { "text": " block, flex, and grid." }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "inline-block specificity:", "bold": true },
-              {
-                "text": " behaves like inline but supports width and height. Drawback: whitespace gaps between elements."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "20. Jakie są rodzaje display? Których używasz najczęściej? Na czym polega inline-block?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Podstawowe wartości display w CSS:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "block", "code": true },
-                  { "text": " — element blokowy na całą szerokość." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline", "code": true },
-                  { "text": " — element liniowy bez kontroli rozmiaru." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-block", "code": true },
-                  { "text": " — element liniowy z cechami bloku." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "flex", "code": true },
-                  { "text": " — elastyczny układ jednowymiarowy." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid", "code": true },
-                  { "text": " — dwuwymiarowa siatka." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "none", "code": true },
-                  { "text": " — element niewidoczny." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Najczęściej używane:", "bold": true },
-              { "text": " block, flex i grid." }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Cechy inline-block:", "bold": true },
-              {
-                "text": " element jest w linii, ale obsługuje szerokość i wysokość. Wadą są przerwy między elementami."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 21,
-    "translations": {
-      "uk": {
-        "question": "21. Що таке CSS-правило?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS-правило",
-                "bold": true
-              },
-              {
-                "text": " складається з селектора та блоку декларацій. Селектор визначає, до яких елементів застосовуються стилі, а декларації описують властивості та їх значення."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "p {\n  color: red;\n  font-size: 16px;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У цьому прикладі "
-              },
-              {
-                "text": "p",
-                "code": true
-              },
-              {
-                "text": " — селектор, а всередині фігурних дужок описані стилі для вибраних елементів."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "21. What is a CSS rule?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A CSS rule",
-                "bold": true
-              },
-              {
-                "text": " consists of a selector and a declaration block. The selector targets elements, while declarations define properties and their values."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "p {\n  color: red;\n  font-size: 16px;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Here "
-              },
-              {
-                "text": "p",
-                "code": true
-              },
-              {
-                "text": " is the selector, and the declarations describe how the selected elements should look."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "21. Czym jest reguła CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Reguła CSS",
-                "bold": true
-              },
-              {
-                "text": " składa się z selektora oraz bloku deklaracji. Selektor wskazuje elementy, a deklaracje określają właściwości i ich wartości."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "p {\n  color: red;\n  font-size: 16px;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W tym przykładzie "
-              },
-              {
-                "text": "p",
-                "code": true
-              },
-              {
-                "text": " jest selektorem, a deklaracje definiują wygląd akapitów."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 22,
-    "translations": {
-      "uk": {
-        "question": "22. Варіанти додавання CSS стилів на сторінку?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inline CSS:", "bold": true },
-                  { "text": " стилі задаються безпосередньо в атрибуті " },
-                  { "text": "style", "code": true },
-                  { "text": " HTML-елемента." },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<p style=\"color: red;\">Text</p>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Internal CSS:", "bold": true },
-                  { "text": " стилі описуються в тезі " },
-                  { "text": "<style>", "code": true },
-                  { "text": " всередині " },
-                  { "text": "<head>", "code": true },
-                  { "text": "." },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<style>\n  p { color: red; }\n</style>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "External CSS:", "bold": true },
-                  {
-                    "text": " стилі зберігаються в окремому файлі та підключаються через "
-                  },
-                  { "text": "<link>", "code": true },
-                  { "text": "." },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<link rel=\"stylesheet\" href=\"styles.css\">"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "22. What are the ways to add CSS styles to a page?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inline CSS:", "bold": true },
-                  { "text": " styles are added directly via the " },
-                  { "text": "style", "code": true },
-                  { "text": " attribute." },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<p style=\"color: red;\">Text</p>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Internal CSS:", "bold": true },
-                  { "text": " styles are written inside the " },
-                  { "text": "<style>", "code": true },
-                  { "text": " tag within " },
-                  { "text": "<head>", "code": true },
-                  { "text": "." },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<style>\n  p { color: red; }\n</style>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "External CSS:", "bold": true },
-                  {
-                    "text": " styles are placed in a separate file and linked using "
-                  },
-                  { "text": "<link>", "code": true },
-                  { "text": "." },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<link rel=\"stylesheet\" href=\"styles.css\">"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "22. Jakie są sposoby dodawania stylów CSS do strony?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inline CSS:", "bold": true },
-                  { "text": " style dodawane bezpośrednio przez atrybut " },
-                  { "text": "style", "code": true },
-                  { "text": "." },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<p style=\"color: red;\">Text</p>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Internal CSS:", "bold": true },
-                  { "text": " style umieszczone w znaczniku " },
-                  { "text": "<style>", "code": true },
-                  { "text": " w sekcji " },
-                  { "text": "<head>", "code": true },
-                  { "text": "." },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<style>\n  p { color: red; }\n</style>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "External CSS:", "bold": true },
-                  { "text": " style w osobnym pliku podłączanym przez " },
-                  { "text": "<link>", "code": true },
-                  { "text": "." },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<link rel=\"stylesheet\" href=\"styles.css\">"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 23,
-    "translations": {
-      "uk": {
-        "question": "23. Типи позиціонування у CSS?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "static:", "bold": true },
-                  {
-                    "text": " стандартне позиціонування в нормальному потоці документа."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "relative:", "bold": true },
-                  {
-                    "text": " зміщення відносно власної початкової позиції з використанням top, right, bottom, left."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "absolute:", "bold": true },
-                  {
-                    "text": " позиціонування відносно найближчого позиційованого батьківського елемента або документа."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "fixed:", "bold": true },
-                  {
-                    "text": " фіксація елемента відносно вікна браузера, незалежно від прокрутки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "sticky:", "bold": true },
-                  {
-                    "text": " поєднання relative і fixed залежно від позиції прокрутки."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "23. Types of positioning in CSS?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "static:", "bold": true },
-                  {
-                    "text": " default positioning in the normal document flow."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "relative:", "bold": true },
-                  { "text": " positioned relative to its original position." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "absolute:", "bold": true },
-                  {
-                    "text": " positioned relative to the nearest positioned ancestor."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "fixed:", "bold": true },
-                  { "text": " fixed relative to the browser viewport." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "sticky:", "bold": true },
-                  {
-                    "text": " behaves as relative until a scroll threshold, then acts as fixed."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "23. Typy pozycjonowania w CSS?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "static:", "bold": true },
-                  { "text": " domyślne pozycjonowanie w normalnym układzie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "relative:", "bold": true },
-                  {
-                    "text": " przesunięcie względem własnej pozycji początkowej."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "absolute:", "bold": true },
-                  {
-                    "text": " pozycjonowanie względem najbliższego pozycjonowanego przodka."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "fixed:", "bold": true },
-                  { "text": " przyklejenie do okna przeglądarki." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "sticky:", "bold": true },
-                  {
-                    "text": " łączy zachowanie relative i fixed podczas przewijania."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 24,
-    "translations": {
-      "uk": {
-        "question": "24. Блокова модель CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Блокова модель CSS",
-                "bold": true
-              },
-              {
-                "text": " (Box Model) описує, з яких частин складається елемент і як обчислюються його розміри."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Content:", "bold": true },
-                  { "text": " вміст елемента. Розміри задаються через " },
-                  { "text": "width", "code": true },
-                  { "text": " і " },
-                  { "text": "height", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Padding:", "bold": true },
-                  { "text": " внутрішній відступ між контентом і рамкою." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Border:", "bold": true },
-                  { "text": " рамка навколо елемента." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin:", "bold": true },
-                  { "text": " зовнішній відступ між елементами." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "За замовчуванням розміри враховують лише контент. Поведінку можна змінити через "
-              },
-              {
-                "text": "box-sizing",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "24. What is the CSS box model?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The CSS box model",
-                "bold": true
-              },
-              {
-                "text": " describes how element dimensions are calculated and how elements occupy space."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Content:", "bold": true },
-                  { "text": " the actual content area controlled by " },
-                  { "text": "width", "code": true },
-                  { "text": " and " },
-                  { "text": "height", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Padding:", "bold": true },
-                  { "text": " space between content and border." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Border:", "bold": true },
-                  { "text": " the element’s border." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin:", "bold": true },
-                  { "text": " outer space between elements." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "By default only content is counted. This can be changed using "
-              },
-              {
-                "text": "box-sizing",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "24. Czym jest model pudełkowy CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Model pudełkowy CSS",
-                "bold": true
-              },
-              {
-                "text": " opisuje, z jakich części składa się element i jak liczone są jego wymiary."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Content:", "bold": true },
-                  { "text": " zawartość elementu określona przez " },
-                  { "text": "width", "code": true },
-                  { "text": " i " },
-                  { "text": "height", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Padding:", "bold": true },
-                  { "text": " odstęp wewnętrzny." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Border:", "bold": true },
-                  { "text": " obramowanie elementu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin:", "bold": true },
-                  { "text": " odstęp zewnętrzny między elementami." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Domyślnie rozmiar obejmuje tylko treść. Można to zmienić przez "
-              },
-              {
-                "text": "box-sizing",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 25,
-    "translations": {
-      "uk": {
-        "question": "25. Що таке селектор? І які селектори є?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Селектор", "bold": true },
-              {
-                "text": " — це частина CSS-правила, яка визначає, до яких HTML-елементів застосовуються стилі."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Типовий (tag):", "bold": true },
-                  { "text": " вибір за назвою тега." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p { color: red; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Класовий:", "bold": true },
-                  { "text": " вибір за класом." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".box { color: blue; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ID:", "bold": true },
-                  { "text": " вибір за унікальним ідентифікатором." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "#main { color: green; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Атрибутний:", "bold": true },
-                  { "text": " вибір за атрибутами." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "input[type='text'] { border: 1px solid #000; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Псевдокласи:", "bold": true },
-                  { "text": " стани елементів." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "a:hover { color: red; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Псевдоелементи:", "bold": true },
-                  { "text": " частини елементів." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p::first-letter { font-size: 2em; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Комбінатори:", "bold": true },
-                  {
-                    "text": " descendant, child, adjacent sibling, general sibling."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "25. What is a selector? What types of selectors exist?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "A selector", "bold": true },
-              {
-                "text": " is a part of a CSS rule that defines which HTML elements styles apply to."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Type selector:", "bold": true },
-                  { "text": " selects by tag name." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p { color: red; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Class selector:", "bold": true },
-                  { "text": " selects by class." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".box { color: blue; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ID selector:", "bold": true },
-                  { "text": " selects by unique ID." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "#main { color: green; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Attribute selector:", "bold": true },
-                  { "text": " selects by attribute." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "input[type='text'] { border: 1px solid #000; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pseudo-classes:", "bold": true },
-                  { "text": " element states." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "a:hover { color: red; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pseudo-elements:", "bold": true },
-                  { "text": " parts of elements." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p::first-letter { font-size: 2em; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Combinators:", "bold": true },
-                  {
-                    "text": " descendant, child, adjacent sibling, general sibling."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "25. Czym jest selektor? Jakie są rodzaje selektorów?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Selektor", "bold": true },
-              {
-                "text": " to część reguły CSS określająca, do jakich elementów HTML stosowane są style."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selektor typu:", "bold": true },
-                  { "text": " wybór po nazwie znacznika." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p { color: red; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selektor klasy:", "bold": true },
-                  { "text": " wybór po klasie." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".box { color: blue; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selektor ID:", "bold": true },
-                  { "text": " wybór po identyfikatorze." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "#main { color: green; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selektor atrybutu:", "bold": true },
-                  { "text": " wybór po atrybutach." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "input[type='text'] { border: 1px solid #000; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pseudoklasy:", "bold": true },
-                  { "text": " stany elementów." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "a:hover { color: red; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pseudoelementy:", "bold": true },
-                  { "text": " części elementów." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "p::first-letter { font-size: 2em; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kombinatory:", "bold": true },
-                  {
-                    "text": " descendant, child, adjacent sibling, general sibling."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 26,
-    "translations": {
-      "uk": {
-        "question": "26. Різниця між Reset.css та Normalize.css?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reset.css", "bold": true },
-              { "text": " і " },
-              { "text": "Normalize.css", "bold": true },
-              {
-                "text": " — це два різні підходи до управління стилями за замовчуванням у браузерах, але з різними цілями:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Reset.css:", "bold": true },
-                  { "text": "Мета:", "bold": true },
-                  {
-                    "text": " Видалити всі стилі браузера, щоб почати з чистого аркуша."
-                  },
-                  { "text": "Результат:", "bold": true },
-                  {
-                    "text": " Усі стилі за замовчуванням скидаються, базові елементи потрібно стилізувати вручну."
-                  },
-                  { "text": "Приклад:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "* {\n  margin: 0;\n  padding: 0;\n  border: 0;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Normalize.css:", "bold": true }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Мета:", "bold": true },
-              {
-                "text": " Зберегти корисні стандартні стилі та зробити їх однаковими в різних браузерах."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Результат:", "bold": true },
-              {
-                "text": " Частина стилів зберігається, але нормалізується для консистентного відображення."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Приклад:", "bold": true }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "h1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Основна різниця:", "bold": true },
-              {
-                "text": " Reset.css усе скидає, Normalize.css коригує та уніфікує."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "26. What is the difference between Reset.css and Normalize.css?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reset.css", "bold": true },
-              { "text": " and " },
-              { "text": "Normalize.css", "bold": true },
-              {
-                "text": " are two different approaches to handling default browser styles, with different goals:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Reset.css:", "bold": true },
-                  { "text": "Goal:", "bold": true },
-                  {
-                    "text": " Remove all default browser styles to start from a clean slate."
-                  },
-                  { "text": "Result:", "bold": true },
-                  {
-                    "text": " All default styles are removed, basic elements must be styled manually."
-                  },
-                  { "text": "Example:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "* {\n  margin: 0;\n  padding: 0;\n  border: 0;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Normalize.css:", "bold": true }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Goal:", "bold": true },
-              {
-                "text": " Preserve useful default styles while making them consistent across browsers."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Result:", "bold": true },
-              {
-                "text": " Some default styles remain but are normalized for consistent rendering."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Example:", "bold": true }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "h1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Key difference:", "bold": true },
-              {
-                "text": " Reset.css removes everything, Normalize.css standardizes."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "26. Jaka jest różnica między Reset.css a Normalize.css?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reset.css", "bold": true },
-              { "text": " i " },
-              { "text": "Normalize.css", "bold": true },
-              {
-                "text": " to dwa różne podejścia do zarządzania domyślnymi stylami przeglądarek, o odmiennych celach:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Reset.css:", "bold": true },
-                  { "text": "Cel:", "bold": true },
-                  {
-                    "text": " Usunięcie wszystkich domyślnych stylów, aby zacząć od zera."
-                  },
-                  { "text": "Rezultat:", "bold": true },
-                  {
-                    "text": " Wszystkie style są resetowane, podstawowe elementy wymagają ręcznego stylowania."
-                  },
-                  { "text": "Przykład:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "* {\n  margin: 0;\n  padding: 0;\n  border: 0;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Normalize.css:", "bold": true }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Cel:", "bold": true },
-              {
-                "text": " Zachowanie użytecznych stylów domyślnych i ich ujednolicenie."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Rezultat:", "bold": true },
-              {
-                "text": " Część stylów pozostaje, ale jest normalizowana dla spójnego wyglądu."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Przykład:", "bold": true }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "h1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Główna różnica:", "bold": true },
-              {
-                "text": " Reset.css usuwa wszystko, Normalize.css ujednolica."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 27,
-    "translations": {
-      "uk": {
-        "question": "27. Різниця між display: none та visibility: hidden?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "display: none", "code": true },
-              { "text": " і " },
-              { "text": "visibility: hidden", "code": true },
-              { "text": " приховують елементи, але працюють по-різному:" }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "display: none", "code": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Елемент повністю зникає зі сторінки." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Не займає місця в макеті." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Інші елементи зміщуються." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Події не спрацьовують." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Використовується для повного приховування." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".hidden {\n  display: none;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "visibility: hidden", "code": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Елемент стає невидимим, але залишається в DOM." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Продовжує займати місце в макеті." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Інші елементи не зміщуються." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Події не спрацьовують." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".hidden {\n  visibility: hidden;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Різниця:", "bold": true },
-              { "text": " display: none", "code": true },
-              { "text": " повністю прибирає елемент, а " },
-              { "text": "visibility: hidden", "code": true },
-              { "text": " лише ховає його, зберігаючи місце." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "27. What is the difference between display: none and visibility: hidden?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "display: none", "code": true },
-              { "text": " and " },
-              { "text": "visibility: hidden", "code": true },
-              { "text": " both hide elements, but behave differently:" }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "display: none", "code": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "The element is completely removed from the page." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "It does not take up space in the layout." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Other elements shift." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Events do not trigger." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Used for full removal." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".hidden {\n  display: none;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "visibility: hidden", "code": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The element becomes invisible but remains in the DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "It still occupies space." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Other elements do not move." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Events do not trigger." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".hidden {\n  visibility: hidden;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Difference:", "bold": true },
-              { "text": " display: none", "code": true },
-              { "text": " removes the element entirely, while " },
-              { "text": "visibility: hidden", "code": true },
-              { "text": " only hides it." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "27. Jaka jest różnica między display: none a visibility: hidden?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "display: none", "code": true },
-              { "text": " i " },
-              { "text": "visibility: hidden", "code": true },
-              { "text": " ukrywają elementy, ale działają inaczej:" }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "display: none", "code": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Element całkowicie znika ze strony." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Nie zajmuje miejsca w układzie." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Inne elementy się przesuwają." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Zdarzenia nie działają." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Stosowane do pełnego usunięcia." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".hidden {\n  display: none;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "visibility: hidden", "code": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Element jest niewidoczny, ale pozostaje w DOM." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Nadal zajmuje miejsce." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Inne elementy się nie przesuwają." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zdarzenia nie działają." },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".hidden {\n  visibility: hidden;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Różnica:", "bold": true },
-              { "text": " display: none", "code": true },
-              { "text": " usuwa element całkowicie, a " },
-              { "text": "visibility: hidden", "code": true },
-              { "text": " tylko go ukrywa." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 28,
-    "translations": {
-      "uk": {
-        "question": "28. Різниця між блоковим та інлайновим елементами?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Блокові (block) та інлайнові (inline) елементи",
-                "bold": true
-              },
-              {
-                "text": " відрізняються способом відображення та впливом на структуру сторінки."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Блокові елементи (display: block)" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Починаються з нового рядка." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Займають всю доступну ширину." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Можуть містити блокові та інлайнові елементи." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Підтримують width, height, margin, padding." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Приклади:", "bold": true },
-              {
-                "text": " <div>, <p>, <h1>-<h6>, <section>, <article>, <form>, <header>, <footer>",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "div {\n  display: block;\n  width: 100%;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Інлайнові елементи (display: inline)" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Розташовуються в потоці тексту." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Розмір залежить від вмісту." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "width і height ігноруються." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "margin і padding працюють лише по горизонталі." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Приклади:", "bold": true },
-              { "text": " <span>, <a>, <strong>, <em>, <b>, <i>", "code": true }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "span {\n  display: inline;\n  color: red;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Різниця" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Блокові елементи формують окремий рядок." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Інлайнові елементи займають лише простір свого вмісту."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "28. What is the difference between block and inline elements?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Block and inline elements", "bold": true },
-              {
-                "text": " differ in how they are rendered and how they affect page layout."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Block elements (display: block)" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Start on a new line." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Take up the full available width." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Can contain block and inline elements." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Support width, height, margin, padding." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Examples:", "bold": true },
-              {
-                "text": " <div>, <p>, <h1>-<h6>, <section>, <article>, <form>, <header>, <footer>",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "div {\n  display: block;\n  width: 100%;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Inline elements (display: inline)" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Flow within text." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Size depends on content." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "width and height are ignored." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "margin and padding work horizontally only." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Examples:", "bold": true },
-              { "text": " <span>, <a>, <strong>, <em>, <b>, <i>", "code": true }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "span {\n  display: inline;\n  color: red;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Difference" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Block elements create a new line and structure." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inline elements stay within text flow." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "28. Jaka jest różnica między elementami blokowymi a liniowymi?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Elementy blokowe i liniowe", "bold": true },
-              {
-                "text": " różnią się sposobem wyświetlania i wpływem na układ strony."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Elementy blokowe (display: block)" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Zaczynają się w nowej linii." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Zajmują całą dostępną szerokość." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Mogą zawierać inne elementy." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Obsługują width, height, margin, padding." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Przykłady:", "bold": true },
-              {
-                "text": " <div>, <p>, <h1>-<h6>, <section>, <article>, <form>, <header>, <footer>",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "div {\n  display: block;\n  width: 100%;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Elementy liniowe (display: inline)" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Są częścią tekstu." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Rozmiar zależy od treści." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "width i height są ignorowane." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "margin i padding działają tylko poziomo." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Przykłady:", "bold": true },
-              { "text": " <span>, <a>, <strong>, <em>, <b>, <i>", "code": true }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "span {\n  display: inline;\n  color: red;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Różnica" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Elementy blokowe tworzą osobne wiersze." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Elementy liniowe pozostają w przepływie tekstu." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 29,
-    "translations": {
-      "uk": {
-        "question": "29. Різниця між класом та ідентифікатором у CSS?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Клас (", "bold": false },
-              { "text": "class", "code": true },
-              { "text": ") vs Ідентифікатор (" },
-              { "text": "id", "code": true },
-              { "text": ") у CSS" }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Параметр" }],
-              [{ "text": "Клас (class)" }],
-              [{ "text": "Ідентифікатор (id)" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Синтаксис" }],
-                [{ "text": "Починається з ." }],
-                [{ "text": "Починається з #" }]
-              ],
-              [
-                [{ "text": "Призначення" }],
-                [{ "text": "Для групи елементів" }],
-                [{ "text": "Для одного унікального елемента" }]
-              ],
-              [
-                [{ "text": "Повторне використання" }],
-                [{ "text": "Можна використовувати багато разів" }],
-                [{ "text": "Повинен бути унікальним" }]
-              ],
-              [
-                [{ "text": "Пріоритет у CSS" }],
-                [{ "text": "Нижчий (0,0,1,0)" }],
-                [{ "text": "Вищий (0,1,0,0)" }]
-              ],
-              [
-                [{ "text": "HTML приклад" }],
-                [{ "text": "<div class=\"box\"></div>", "code": true }],
-                [{ "text": "<div id=\"unique\"></div>", "code": true }]
-              ],
-              [
-                [{ "text": "CSS приклад" }],
-                [{ "text": ".box { color: red; }", "code": true }],
-                [{ "text": "#unique { color: blue; }", "code": true }]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Різниця" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Клас застосовується до багатьох елементів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "ID призначений для одного елемента." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ID має вищу специфічність і складніше перевизначається."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Для стилів краще використовувати класи." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "29. What is the difference between a class and an id in CSS?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Class (" },
-              { "text": "class", "code": true },
-              { "text": ") vs ID (" },
-              { "text": "id", "code": true },
-              { "text": ") in CSS" }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Parameter" }],
-              [{ "text": "Class" }],
-              [{ "text": "ID" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Syntax" }],
-                [{ "text": "Starts with ." }],
-                [{ "text": "Starts with #" }]
-              ],
-              [
-                [{ "text": "Purpose" }],
-                [{ "text": "Group of elements" }],
-                [{ "text": "Single unique element" }]
-              ],
-              [
-                [{ "text": "Reusability" }],
-                [{ "text": "Reusable" }],
-                [{ "text": "Must be unique" }]
-              ],
-              [
-                [{ "text": "CSS specificity" }],
-                [{ "text": "Lower (0,0,1,0)" }],
-                [{ "text": "Higher (0,1,0,0)" }]
-              ],
-              [
-                [{ "text": "HTML example" }],
-                [{ "text": "<div class=\"box\"></div>", "code": true }],
-                [{ "text": "<div id=\"unique\"></div>", "code": true }]
-              ],
-              [
-                [{ "text": "CSS example" }],
-                [{ "text": ".box { color: red; }", "code": true }],
-                [{ "text": "#unique { color: blue; }", "code": true }]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Difference" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Classes style multiple elements." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "IDs identify a single element." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "IDs have higher specificity." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Classes are preferred for styling." }]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "29. Jaka jest różnica między klasą a identyfikatorem w CSS?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Klasa (" },
-              { "text": "class", "code": true },
-              { "text": ") vs Identyfikator (" },
-              { "text": "id", "code": true },
-              { "text": ") w CSS" }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Parametr" }],
-              [{ "text": "Klasa" }],
-              [{ "text": "Identyfikator" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Składnia" }],
-                [{ "text": "Zaczyna się od ." }],
-                [{ "text": "Zaczyna się od #" }]
-              ],
-              [
-                [{ "text": "Przeznaczenie" }],
-                [{ "text": "Grupa elementów" }],
-                [{ "text": "Jeden unikalny element" }]
-              ],
-              [
-                [{ "text": "Wielokrotne użycie" }],
-                [{ "text": "Dozwolone" }],
-                [{ "text": "Musi być unikalny" }]
-              ],
-              [
-                [{ "text": "Specyficzność CSS" }],
-                [{ "text": "Niższa (0,0,1,0)" }],
-                [{ "text": "Wyższa (0,1,0,0)" }]
-              ],
-              [
-                [{ "text": "Przykład HTML" }],
-                [{ "text": "<div class=\"box\"></div>", "code": true }],
-                [{ "text": "<div id=\"unique\"></div>", "code": true }]
-              ],
-              [
-                [{ "text": "Przykład CSS" }],
-                [{ "text": ".box { color: red; }", "code": true }],
-                [{ "text": "#unique { color: blue; }", "code": true }]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Różnica" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Klasy służą do stylowania wielu elementów." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Identyfikator dotyczy jednego elementu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "ID ma wyższy priorytet." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Klasy są lepszym wyborem do stylów." }]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 30,
-    "translations": {
-      "uk": {
-        "question": "30. Що таке CSS спрайт? І для чого він використовується?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS спрайт — це техніка, за якої кілька зображень об’єднуються в одне велике зображення, а потрібна частина відображається через background-position."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Використовується для зменшення кількості HTTP-запитів і прискорення завантаження сторінки. Найчастіше застосовувався для іконок та дрібних UI-елементів."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад використання CSS спрайту:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Створення спрайта:", "bold": true },
-                  {
-                    "text": " Об’єднання кількох іконок в один файл sprite.png."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".icon {\n  width: 50px;\n  height: 50px;\n  background-image: url('sprite.png');\n  display: inline-block;\n}\n\n.icon-facebook { background-position: 0 0; }\n.icon-twitter { background-position: -50px 0; }\n.icon-linkedin { background-position: -100px 0; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HTML:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<div class=\"icon icon-facebook\"></div>\n<div class=\"icon icon-twitter\"></div>\n<div class=\"icon icon-linkedin\"></div>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Усі іконки завантажуються з одного файлу, а CSS визначає, яка частина зображення відображається."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Сьогодні спрайти майже не використовуються через HTTP/2, SVG та icon fonts, але концепцію варто знати."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "30. What is a CSS sprite and what is it used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A CSS sprite is a technique where multiple images are combined into a single image, and specific parts are displayed using background-position."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "It is used to reduce the number of HTTP requests and improve page loading performance, mainly for icons and small UI elements."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "CSS sprite example:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sprite creation:", "bold": true },
-                  {
-                    "text": " Combine multiple icons into a single sprite.png file."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".icon {\n  width: 50px;\n  height: 50px;\n  background-image: url('sprite.png');\n  display: inline-block;\n}\n\n.icon-facebook { background-position: 0 0; }\n.icon-twitter { background-position: -50px 0; }\n.icon-linkedin { background-position: -100px 0; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HTML:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<div class=\"icon icon-facebook\"></div>\n<div class=\"icon icon-twitter\"></div>\n<div class=\"icon icon-linkedin\"></div>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "All icons are loaded from a single image, while CSS controls which part is visible."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This approach is mostly obsolete today due to HTTP/2, SVG, and icon fonts, but it is still worth understanding."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "30. Czym jest sprite CSS i do czego służy?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Sprite CSS to technika polegająca na łączeniu wielu obrazów w jeden plik i wyświetlaniu ich fragmentów za pomocą background-position."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Służy do zmniejszenia liczby zapytań HTTP i przyspieszenia ładowania strony, głównie dla ikon i małych elementów interfejsu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład użycia sprite CSS:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tworzenie sprite’a:", "bold": true },
-                  { "text": " Połączenie kilku ikon w jeden plik sprite.png." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": ".icon {\n  width: 50px;\n  height: 50px;\n  background-image: url('sprite.png');\n  display: inline-block;\n}\n\n.icon-facebook { background-position: 0 0; }\n.icon-twitter { background-position: -50px 0; }\n.icon-linkedin { background-position: -100px 0; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HTML:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<div class=\"icon icon-facebook\"></div>\n<div class=\"icon icon-twitter\"></div>\n<div class=\"icon icon-linkedin\"></div>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wszystkie ikony są ładowane z jednego pliku, a CSS określa widoczny fragment."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Obecnie sprite’y są rzadko używane z powodu HTTP/2, SVG i fontów ikon, ale warto znać tę technikę."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 31,
-    "translations": {
-      "uk": {
-        "question": "31. Що таке вендорні префікси? І навіщо вони використовуються?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Вендорні префікси — це спеціальні префікси, які додаються до CSS-властивостей для підтримки нових або експериментальних можливостей у різних браузерах."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Вони застосовуються, коли властивість ще не стандартизована або реалізована браузерами по-різному, щоб забезпечити кросбраузерну сумісність."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад вендорних префіксів:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".element {\n  -webkit-transform: rotate(45deg); /* Chrome, Safari */\n  -moz-transform: rotate(45deg);    /* Firefox */\n  -ms-transform: rotate(45deg);     /* Internet Explorer */\n  transform: rotate(45deg);         /* стандарт */\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Після повної стандартизації властивості префікси зазвичай стають непотрібними."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "31. What are vendor prefixes and why are they used?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Vendor prefixes are special prefixes added to CSS properties to enable support for new or experimental features in different browsers."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "They are used when a feature is not yet standardized or is implemented differently across browsers, ensuring cross-browser compatibility."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Vendor prefix example:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".element {\n  -webkit-transform: rotate(45deg);\n  -moz-transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n  transform: rotate(45deg);\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Once a property becomes part of the official CSS standard, prefixes are usually no longer required."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "31. Czym są prefiksy vendorowe i do czego służą?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Prefiksy vendorowe to specjalne przedrostki dodawane do właściwości CSS w celu obsługi nowych lub eksperymentalnych funkcji w różnych przeglądarkach."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Stosuje się je, gdy dana funkcja nie jest jeszcze standardem lub jest różnie zaimplementowana, aby zapewnić zgodność między przeglądarkami."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład prefiksów vendorowych:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".element {\n  -webkit-transform: rotate(45deg);\n  -moz-transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n  transform: rotate(45deg);\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Po pełnej standaryzacji właściwości prefiksy zazwyczaj przestają być potrzebne."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 32,
-    "translations": {
-      "uk": {
-        "question": "32. Що таке псевдоелементи? І навіщо вони використовуються?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Псевдоелементи — це CSS-конструкції, які дозволяють стилізувати частини елементів, що не мають окремого HTML-представлення."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Вони застосовуються для стилізації окремих фрагментів елемента або додавання декоративного контенту без зміни HTML-розмітки."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні псевдоелементи:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::before", "code": true },
-                  { "text": " — додає вміст перед елементом." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::after", "code": true },
-                  { "text": " — додає вміст після елемента." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::first-letter", "code": true },
-                  { "text": " — стилізує першу літеру." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::first-line", "code": true },
-                  { "text": " — стилізує перший рядок." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Приклад:", "bold": true }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "p::before {\n  content: '• ';\n}\n\np::after {\n  content: ' •';\n}\n\np::first-letter {\n  font-size: 2em;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Псевдоелементи використовуються для декоративних ефектів і розширення стилів без додаткових HTML-елементів."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "32. What are pseudo-elements and why are they used?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudo-elements are CSS constructs that allow styling parts of elements that do not have their own HTML representation."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "They are used to style specific fragments of elements or add decorative content without modifying HTML markup."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Common pseudo-elements:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::before", "code": true },
-                  { "text": " — inserts content before an element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::after", "code": true },
-                  { "text": " — inserts content after an element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::first-letter", "code": true },
-                  { "text": " — styles the first letter." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::first-line", "code": true },
-                  { "text": " — styles the first line." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Example:", "bold": true }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "p::before {\n  content: '• ';\n}\n\np::after {\n  content: ' •';\n}\n\np::first-letter {\n  font-size: 2em;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudo-elements are mainly used for decorative purposes and fine-grained styling without extra HTML."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "32. Czym są pseudoelementy i do czego służą?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudoelementy to konstrukcje CSS pozwalające stylizować części elementów, które nie mają własnej reprezentacji w HTML."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Służą do stylizacji fragmentów elementów lub dodawania dekoracyjnej treści bez zmiany struktury HTML."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Najczęstsze pseudoelementy:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::before", "code": true },
-                  { "text": " — dodaje treść przed elementem." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::after", "code": true },
-                  { "text": " — dodaje treść po elemencie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::first-letter", "code": true },
-                  { "text": " — stylizuje pierwszą literę." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::first-line", "code": true },
-                  { "text": " — stylizuje pierwszy wiersz." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Przykład:", "bold": true }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "p::before {\n  content: '• ';\n}\n\np::after {\n  content: ' •';\n}\n\np::first-letter {\n  font-size: 2em;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudoelementy są używane głównie do efektów dekoracyjnych i precyzyjnej stylizacji."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 33,
-    "translations": {
-      "uk": {
-        "question": "33. Що таке схлопування меж (margin collapsing)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Схлопування меж (margin collapsing) — це поведінка CSS, за якої вертикальні margin суміжних блокових елементів об’єднуються в один замість додавання."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Коли це відбувається:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Між сусідніми блоковими елементами з вертикальними margin."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Між батьківським і першим або останнім дочірнім блоком без padding або border."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Фактична відстань дорівнює найбільшому з двох margin, а не їх сумі."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Приклад:", "bold": true }]
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<div style=\"margin-bottom: 20px;\">Block 1</div>\n<div style=\"margin-top: 10px;\">Block 2</div>"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Відстань між блоками буде 20px, а не 30px."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Як уникнути:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Використовувати ", "bold": false },
-                  { "text": "padding", "code": true },
-                  { "text": " замість ", "bold": false },
-                  { "text": "margin", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Додати border або padding батьківському елементу."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Задати ", "bold": false },
-                  { "text": "overflow", "code": true },
-                  { "text": " відмінний від visible." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "33. What is margin collapsing?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Margin collapsing is a CSS behavior where vertical margins of adjacent block elements combine into a single margin instead of adding up."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "When it happens:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Between adjacent block elements with vertical margins."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Between a parent and its first or last child without padding or border."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The resulting space equals the largest margin, not their sum."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Example:", "bold": true }]
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<div style=\"margin-bottom: 20px;\">Block 1</div>\n<div style=\"margin-top: 10px;\">Block 2</div>"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The space between blocks will be 20px, not 30px."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "How to prevent it:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Use ", "bold": false },
-                  { "text": "padding", "code": true },
-                  { "text": " instead of ", "bold": false },
-                  { "text": "margin", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Add border or padding to the parent element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Set ", "bold": false },
-                  { "text": "overflow", "code": true },
-                  { "text": " to a value other than visible." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "33. Czym jest zjawisko margin collapsing?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Margin collapsing to zachowanie CSS, w którym pionowe marginesy sąsiadujących elementów blokowych łączą się w jeden."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Kiedy występuje:", "bold": true }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Między sąsiadującymi elementami blokowymi z pionowymi marginesami."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Między elementem nadrzędnym a pierwszym lub ostatnim dzieckiem bez paddingu lub obramowania."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Końcowa odległość równa jest większemu z marginesów."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Przykład:", "bold": true }]
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<div style=\"margin-bottom: 20px;\">Block 1</div>\n<div style=\"margin-top: 10px;\">Block 2</div>"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Odstęp wyniesie 20px, a nie 30px."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Jak temu zapobiec:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Użyć ", "bold": false },
-                  { "text": "padding", "code": true },
-                  { "text": " zamiast ", "bold": false },
-                  { "text": "margin", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dodać border lub padding do elementu nadrzędnego."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ustawić ", "bold": false },
-                  { "text": "overflow", "code": true },
-                  { "text": " na wartość inną niż visible." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 34,
-    "translations": {
-      "uk": {
-        "question": "34. Що таке z-index? Як формується контекст накладання?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "z-index", "code": true },
-              {
-                "text": " — це CSS-властивість, яка визначає порядок накладання елементів уздовж осі Z, тобто який елемент буде поверх іншого при перекритті."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює z-index:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Працює лише для елементів з position, відмінним від ",
-                    "bold": false
-                  },
-                  { "text": "static", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Приймає цілі значення: 1, 10, -1." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Більше значення — елемент вище в межах одного контексту накладання."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Контекст накладання" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Контекст накладання — це ізольована область, у межах якої порівнюються значення z-index. Елементи з різних контекстів не конкурують між собою напряму."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Новий контекст накладання створюється, якщо елемент:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Має position (relative, absolute, fixed, sticky) і z-index ≠ auto."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Має opacity < 1." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Має transform, filter, perspective, clip-path." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Всередині одного контексту z-index порівнюється, але між різними контекстами — ні."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "34. What is z-index? How is a stacking context formed?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "z-index", "code": true },
-              {
-                "text": " is a CSS property that controls the stacking order of overlapping elements along the Z-axis."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How z-index works:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Works only on elements with position other than ",
-                    "bold": false
-                  },
-                  { "text": "static", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Accepts integer values: 1, 10, -1." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Higher value means higher stacking order within the same context."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Stacking context" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A stacking context is an isolated hierarchy where z-index values are compared only among elements inside it."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A new stacking context is created when an element:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Has position set and z-index not equal to auto." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Has opacity less than 1." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Uses transform, filter, perspective, or clip-path."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Elements from different stacking contexts do not directly compete by z-index."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "34. Czym jest z-index? Jak powstaje kontekst nakładania?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "z-index", "code": true },
-              {
-                "text": " to właściwość CSS określająca kolejność nakładania się elementów w osi Z."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa z-index:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Działa tylko dla elementów z position innym niż ",
-                    "bold": false
-                  },
-                  { "text": "static", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Przyjmuje liczby całkowite." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Większa wartość oznacza wyższe położenie w tym samym kontekście."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kontekst nakładania" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Kontekst nakładania to obszar, w którym wartości z-index są porównywane tylko między elementami należącymi do tego samego kontekstu."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Nowy kontekst powstaje, gdy element:", "bold": true }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Ma position i z-index różny od auto." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Ma opacity mniejsze niż 1." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Używa transform, filter, perspective lub clip-path."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Elementy z różnych kontekstów nie porównują bezpośrednio swoich z-index."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 35,
-    "translations": {
-      "uk": {
-        "question": "35. Порядок накладання елементів у CSS (Stacking Order)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Порядок накладання елементів (stacking order) — це правила, за якими браузер визначає, який елемент відображається поверх іншого при перекритті."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Базові правила:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Фон і рамки елемента." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Непозиціоновані елементи (position: static) у порядку HTML."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Позиціоновані елементи з z-index: auto." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Позиціоновані елементи з z-index (від меншого до більшого)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Усі ці правила працюють лише в межах одного контексту накладання."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Елементи з власним контекстом накладання (transform, opacity < 1, filter тощо) ізольовані та не порівнюються напряму з іншими контекстами."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "35. What is the stacking order in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Stacking order defines how elements overlap each other when they occupy the same space on the page."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Basic rules:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Background and borders of the element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Non-positioned elements (position: static) in DOM order."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Positioned elements with z-index: auto." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Positioned elements with explicit z-index values."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "These rules apply only within the same stacking context."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Elements that create their own stacking context are isolated from others."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "35. Jaka jest kolejność nakładania elementów w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Kolejność nakładania określa, w jakiej kolejności elementy są renderowane, gdy na siebie zachodzą."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Podstawowe zasady:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Tło i obramowanie elementu." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Elementy statyczne w kolejności HTML." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Elementy pozycjonowane z z-index: auto." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Elementy pozycjonowane z określonym z-index." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zasady te obowiązują tylko w obrębie jednego kontekstu nakładania."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Elementy tworzące własny kontekst nakładania są od siebie niezależne."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 36,
-    "translations": {
-      "uk": {
-        "question": "36. Як за допомогою CSS визначити, чи підтримується властивість у браузері?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У CSS для перевірки підтримки властивостей використовується директива @supports. Вона дозволяє умовно застосовувати стилі, якщо браузер підтримує певну властивість або значення."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад використання @supports:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "@supports (display: flex) {\n  .container {\n    display: flex;\n  }\n}\n\n@supports not (display: flex) {\n  .container {\n    display: block;\n  }\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Якщо браузер підтримує властивість, застосовується відповідний блок стилів."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для складніших перевірок або старих браузерів використовують JavaScript або бібліотеки на кшталт Modernizr."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "36. How can you detect if a CSS property is supported by the browser?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In CSS, feature support can be detected using the @supports rule. It conditionally applies styles based on browser support for a property or value."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example using @supports:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "@supports (display: flex) {\n  .container {\n    display: flex;\n  }\n}\n\n@supports not (display: flex) {\n  .container {\n    display: block;\n  }\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The browser applies the matching block depending on feature support."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "For advanced detection or legacy browsers, JavaScript solutions like Modernizr are used."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "36. Jak sprawdzić wsparcie właściwości CSS w przeglądarce?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W CSS do sprawdzania wsparcia właściwości służy dyrektywa @supports. Pozwala ona warunkowo stosować style w zależności od obsługi danej funkcji."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład użycia @supports:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "@supports (display: flex) {\n  .container {\n    display: flex;\n  }\n}\n\n@supports not (display: flex) {\n  .container {\n    display: block;\n  }\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Przeglądarka wybiera odpowiedni blok stylów w zależności od obsługi właściwości."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Dla starszych przeglądarek stosuje się JavaScript lub biblioteki typu Modernizr."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 37,
-    "translations": {
-      "uk": {
-        "question": "37. Глобальні ключові слова у CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Глобальні ключові слова — це спеціальні значення, які можна застосувати до будь-якої CSS-властивості для керування її обчисленням у каскаді."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Глобальні ключові слова:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inherit", "code": true },
-                  {
-                    "text": " — успадковує значення від батьківського елемента."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "initial", "code": true },
-                  { "text": " — встановлює значення за специфікацією CSS." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "unset", "code": true },
-                  {
-                    "text": " — працює як inherit або initial залежно від властивості."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "revert", "code": true },
-                  {
-                    "text": " — повертає значення з браузерних або користувацьких стилів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "revert-layer", "code": true },
-                  {
-                    "text": " — повертає значення з попереднього шару каскаду."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Глобальні ключові слова корисні для контролю спадкування, скидання стилів і роботи з каскадом."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "37. Global keywords in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Global keywords are special values that can be applied to any CSS property to control how its value is computed in the cascade."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Global keywords:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inherit", "code": true },
-                  { "text": " — inherits the value from the parent element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "initial", "code": true },
-                  {
-                    "text": " — resets the value to the CSS specification default."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "unset", "code": true },
-                  {
-                    "text": " — acts as inherit or initial depending on the property."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "revert", "code": true },
-                  { "text": " — reverts to browser or user stylesheet values." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "revert-layer", "code": true },
-                  { "text": " — reverts to the previous cascade layer." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "These keywords are used to control inheritance, resets, and cascade behavior."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "37. Globalne słowa kluczowe w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Globalne słowa kluczowe to specjalne wartości, które można przypisać do dowolnej właściwości CSS w celu kontrolowania jej zachowania w kaskadzie."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Globalne słowa kluczowe:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inherit", "code": true },
-                  { "text": " — dziedziczy wartość od elementu nadrzędnego." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "initial", "code": true },
-                  { "text": " — ustawia wartość domyślną według specyfikacji." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "unset", "code": true },
-                  {
-                    "text": " — działa jak inherit lub initial w zależności od właściwości."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "revert", "code": true },
-                  { "text": " — przywraca style przeglądarki lub użytkownika." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "revert-layer", "code": true },
-                  {
-                    "text": " — przywraca wartość z poprzedniej warstwy kaskady."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Są używane do kontroli dziedziczenia, resetowania stylów i zarządzania kaskadą."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 38,
-    "translations": {
-      "uk": {
-        "question": "38. Що таке перерахування селекторів?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Перерахування селекторів — це спосіб застосувати один набір CSS-правил до кількох селекторів одночасно, розділяючи їх комами."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Синтаксис" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "selector1,\nselector2,\nselector3 {\n  property: value;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Усі перелічені селектори отримають однакові стилі."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Особливості" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Кожен селектор обробляється незалежно." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Кома означає логічне АБО, а не вкладеність." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Дозволяє зменшити дублювання CSS-коду." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "38. What is selector grouping?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Selector grouping is a CSS technique that applies the same style rules to multiple selectors separated by commas."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Syntax" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "selector1,\nselector2,\nselector3 {\n  property: value;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "All listed selectors receive the same styles."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key points" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Each selector is evaluated independently." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "The comma represents logical OR, not nesting." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Helps reduce duplicated CSS rules." }]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "38. Czym jest grupowanie selektorów?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Grupowanie selektorów to technika CSS polegająca na stosowaniu tych samych reguł stylów do wielu selektorów oddzielonych przecinkami."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Składnia" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "selector1,\nselector2,\nselector3 {\n  property: value;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wszystkie wymienione selektory otrzymują te same style."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Cechy" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Każdy selektor działa niezależnie." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przecinek oznacza alternatywę, a nie zagnieżdżenie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pozwala ograniczyć powielanie kodu CSS." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 39,
-    "translations": {
-      "uk": {
-        "question": "39. Для чого використовується ключове слово currentColor у CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "currentColor",
-                "code": true
-              },
-              {
-                "text": " — це глобальне CSS-значення, яке підставляє поточне значення властивості "
-              },
-              {
-                "text": "color",
-                "code": true
-              },
-              {
-                "text": " у будь-яку іншу властивість, що підтримує колір."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Значення "
-              },
-              {
-                "text": "currentColor",
-                "code": true
-              },
-              {
-                "text": " завжди дорівнює обчисленому значенню "
-              },
-              {
-                "text": "color",
-                "code": true
-              },
-              {
-                "text": " елемента."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклади" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "button {\n  color: blue;\n  border: 2px solid currentColor;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Рамка автоматично набуде кольору тексту."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".icon {\n  color: red;\n  fill: currentColor;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "SVG-іконка наслідує колір тексту."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "currentColor зменшує дублювання стилів і спрощує темізацію."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "39. What is the currentColor keyword used for in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "currentColor",
-                "code": true
-              },
-              {
-                "text": " is a CSS keyword that resolves to the computed value of the "
-              },
-              {
-                "text": "color",
-                "code": true
-              },
-              {
-                "text": " property."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "currentColor always reflects the element’s current text color and can be reused in other color-related properties."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Examples" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "button {\n  color: blue;\n  border: 2px solid currentColor;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The border automatically matches the text color."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".icon {\n  color: red;\n  fill: currentColor;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "SVG icons inherit the text color."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "It helps avoid duplicated color definitions and simplifies theming."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "39. Do czego służy słowo kluczowe currentColor w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "currentColor",
-                "code": true
-              },
-              {
-                "text": " to słowo kluczowe CSS, które przyjmuje obliczoną wartość właściwości "
-              },
-              {
-                "text": "color",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "currentColor zawsze odpowiada aktualnemu kolorowi tekstu elementu i może być używane w innych właściwościach kolorystycznych."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykłady" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "button {\n  color: blue;\n  border: 2px solid currentColor;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Obramowanie automatycznie dopasowuje się do koloru tekstu."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".icon {\n  color: red;\n  fill: currentColor;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ikony SVG dziedziczą kolor tekstu."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ułatwia utrzymanie spójnych kolorów i tematów."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 40,
-    "translations": {
-      "uk": {
-        "question": "40. Які псевдокласи є CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Псевдокласи в CSS — це ключові слова, що описують стан елемента або його позицію в структурі документа."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні групи псевдокласів:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Динамічні: :hover, :focus, :active, :visited, :target",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Структурні: :first-child, :last-child, :nth-child(), :only-child",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "За типом: :first-of-type, :last-of-type, :nth-of-type()",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Логічні: :not(), :is(), :where(), :has()",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для форм: :checked, :disabled, :enabled, :required, :valid, :invalid",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Псевдокласи дозволяють стилізувати елементи за станом і структурою без додаткових класів або JavaScript."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "40. What pseudo-classes exist in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudo-classes in CSS are keywords that describe an element’s state or its position in the document structure."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Main groups of pseudo-classes:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dynamic: :hover, :focus, :active, :visited, :target",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Structural: :first-child, :last-child, :nth-child(), :only-child",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Type-based: :first-of-type, :last-of-type, :nth-of-type()",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Logical: :not(), :is(), :where(), :has()",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Form-related: :checked, :disabled, :enabled, :required, :valid, :invalid",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudo-classes allow styling elements based on state and structure without extra classes or JavaScript."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "40. Jakie pseudoklasy istnieją w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudoklasy w CSS to słowa kluczowe opisujące stan elementu lub jego położenie w strukturze dokumentu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne grupy pseudoklas:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dynamiczne: :hover, :focus, :active, :visited, :target",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Strukturalne: :first-child, :last-child, :nth-child(), :only-child",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Według typu: :first-of-type, :last-of-type, :nth-of-type()",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Logiczne: :not(), :is(), :where(), :has()",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Formularzy: :checked, :disabled, :enabled, :required, :valid, :invalid",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudoklasy umożliwiają stylizację elementów bez dodatkowych klas i bez użycia JavaScript."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 41,
-    "translations": {
-      "uk": {
-        "question": "41. Які фільтри є у CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS-фільтри (filter) застосовують візуальні ефекти до елементів на етапі рендерингу."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні фільтри:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "blur()", "code": true },
-                  { "text": " — розмиття." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "brightness()", "code": true },
-                  { "text": " — яскравість." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "contrast()", "code": true },
-                  { "text": " — контраст." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grayscale()", "code": true },
-                  { "text": " — відтінки сірого." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "invert()", "code": true },
-                  { "text": " — інверсія кольорів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "opacity()", "code": true },
-                  { "text": " — прозорість." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "saturate()", "code": true },
-                  { "text": " — насиченість." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "sepia()", "code": true },
-                  { "text": " — ефект сепії." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "drop-shadow()", "code": true },
-                  { "text": " — тінь з урахуванням прозорості." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Фільтри можна комбінувати, перелічуючи їх через пробіл."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "41. What filters are available in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS filters apply visual effects to elements during rendering."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Main filters:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "blur()", "code": true },
-                  { "text": " — blur effect." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "brightness()", "code": true },
-                  { "text": " — brightness." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "contrast()", "code": true },
-                  { "text": " — contrast." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grayscale()", "code": true },
-                  { "text": " — grayscale." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "invert()", "code": true },
-                  { "text": " — color inversion." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "opacity()", "code": true },
-                  { "text": " — transparency." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "saturate()", "code": true },
-                  { "text": " — saturation." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "sepia()", "code": true },
-                  { "text": " — sepia tone." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "drop-shadow()", "code": true },
-                  { "text": " — shadow respecting transparency." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Multiple filters can be combined in a single filter property."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "41. Jakie filtry są dostępne w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Filtry CSS pozwalają stosować efekty wizualne do elementów podczas renderowania."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Podstawowe filtry:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "blur()", "code": true },
-                  { "text": " — rozmycie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "brightness()", "code": true },
-                  { "text": " — jasność." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "contrast()", "code": true },
-                  { "text": " — kontrast." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grayscale()", "code": true },
-                  { "text": " — skala szarości." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "invert()", "code": true },
-                  { "text": " — inwersja kolorów." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "opacity()", "code": true },
-                  { "text": " — przezroczystość." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "saturate()", "code": true },
-                  { "text": " — nasycenie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "sepia()", "code": true },
-                  { "text": " — efekt sepii." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "drop-shadow()", "code": true },
-                  { "text": " — cień z obsługą przezroczystości." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Filtry można łączyć, zapisując je kolejno w jednej właściwości."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 42,
-    "translations": {
-      "uk": {
-        "question": "42. Навіщо використовується псевдоклас :invalid?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Псевдоклас "
-              },
-              {
-                "text": ":invalid",
-                "code": true
-              },
-              {
-                "text": " використовується для стилізації полів форми, які не проходять HTML-валідацію."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Він спрацьовує для "
-              },
-              {
-                "text": "<input>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<textarea>",
-                "code": true
-              },
-              {
-                "text": " та "
-              },
-              {
-                "text": "<select>",
-                "code": true
-              },
-              {
-                "text": ", якщо значення не відповідає атрибутам типу, "
-              },
-              {
-                "text": "required",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "pattern",
-                "code": true
-              },
-              {
-                "text": " тощо."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Навіщо використовується" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Візуальне підсвічування помилок введення." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Покращення UX без використання JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Реакція на нативну HTML-валідацію." }]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "input:invalid {\n  border-color: red;\n}"
-          }
-        ]
-      },
-      "en": {
-        "question": "42. What is the :invalid pseudo-class used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The "
-              },
-              {
-                "text": ":invalid",
-                "code": true
-              },
-              {
-                "text": " pseudo-class targets form fields that fail built-in HTML validation."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "It applies to "
-              },
-              {
-                "text": "<input>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<textarea>",
-                "code": true
-              },
-              {
-                "text": " and "
-              },
-              {
-                "text": "<select>",
-                "code": true
-              },
-              {
-                "text": " elements with invalid values."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Why it is used" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Highlight invalid form fields." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Improve user feedback without JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Style native HTML validation states." }]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "input:invalid {\n  border-color: red;\n}"
-          }
-        ]
-      },
-      "pl": {
-        "question": "42. Do czego służy pseudoklasa :invalid?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudoklasa "
-              },
-              {
-                "text": ":invalid",
-                "code": true
-              },
-              {
-                "text": " służy do stylizowania pól formularza, które nie spełniają reguł walidacji HTML."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Dotyczy elementów "
-              },
-              {
-                "text": "<input>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<textarea>",
-                "code": true
-              },
-              {
-                "text": " oraz "
-              },
-              {
-                "text": "<select>",
-                "code": true
-              },
-              {
-                "text": " z niepoprawnymi wartościami."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zastosowanie" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wyróżnianie błędnych danych wejściowych." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Poprawa UX bez JavaScriptu." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Reakcja na natywną walidację HTML." }]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "input:invalid {\n  border-color: red;\n}"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 43,
-    "translations": {
-      "uk": {
-        "question": "43. Розкажіть про властивість display в CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Властивість "
-              },
-              {
-                "text": "display",
-                "code": true
-              },
-              {
-                "text": " визначає, як елемент відображається в макеті та як він бере участь у потоці документа."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні значення" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "none", "code": true },
-                  { "text": " — елемент не відображається і не займає місця." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "block", "code": true },
-                  { "text": " — блочний елемент на всю ширину." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline", "code": true },
-                  { "text": " — вбудований елемент у рядку." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-block", "code": true },
-                  { "text": " — inline з можливістю задати розміри." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Макети" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "flex", "code": true },
-                  { "text": " — Flexbox контейнер." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid", "code": true },
-                  { "text": " — CSS Grid контейнер." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-flex", "code": true },
-                  { "text": " — flex з inline-поведінкою." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-grid", "code": true },
-                  { "text": " — grid з inline-поведінкою." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "display: none повністю прибирає елемент з потоку, на відміну від visibility: hidden."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "43. Explain the display property in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The "
-              },
-              {
-                "text": "display",
-                "code": true
-              },
-              {
-                "text": " property defines how an element is rendered and how it participates in the document flow."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Common values" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "none", "code": true },
-                  { "text": " — removes the element from layout." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "block", "code": true },
-                  { "text": " — block-level element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline", "code": true },
-                  { "text": " — inline element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-block", "code": true },
-                  { "text": " — inline element with dimensions." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Layouts" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "flex", "code": true },
-                  { "text": " — enables Flexbox." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid", "code": true },
-                  { "text": " — enables CSS Grid." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-flex", "code": true },
-                  { "text": " — inline Flexbox container." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-grid", "code": true },
-                  { "text": " — inline Grid container." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "display: none removes the element entirely, unlike visibility: hidden."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "43. Czym jest właściwość display w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Właściwość "
-              },
-              {
-                "text": "display",
-                "code": true
-              },
-              {
-                "text": " określa sposób wyświetlania elementu i jego udział w układzie strony."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Podstawowe wartości" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "none", "code": true },
-                  { "text": " — usuwa element z układu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "block", "code": true },
-                  { "text": " — element blokowy." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline", "code": true },
-                  { "text": " — element liniowy." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-block", "code": true },
-                  { "text": " — element liniowy z rozmiarami." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Układy" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "flex", "code": true },
-                  { "text": " — kontener Flexbox." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "grid", "code": true },
-                  { "text": " — kontener CSS Grid." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-flex", "code": true },
-                  { "text": " — Flexbox inline." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "inline-grid", "code": true },
-                  { "text": " — Grid inline." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "display: none całkowicie usuwa element z przepływu dokumentu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 44,
-    "translations": {
-      "uk": {
-        "question": "44. У якому випадку краще використовувати translate() замість абсолютного позиціонування?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Використовувати " },
-              { "text": "translate()", "code": true },
-              { "text": " краще в таких випадках:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оптимізація продуктивності", "bold": true },
-                  { "text": " – " },
-                  { "text": "translate()", "code": true },
-                  {
-                    "text": " використовує GPU, що робить анімації плавнішими, ніж зміна "
-                  },
-                  { "text": "top/left", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Збереження потоку документа", "bold": true },
-                  { "text": " – " },
-                  { "text": "translate()", "code": true },
-                  {
-                    "text": " не впливає на розташування інших елементів, на відміну від "
-                  },
-                  { "text": "position: absolute", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відсутність рефлоу", "bold": true },
-                  { "text": " – зміна " },
-                  { "text": "transform", "code": true },
-                  { "text": " не викликає " },
-                  { "text": "reflow", "code": true },
-                  { "text": ", тоді як " },
-                  { "text": "top/left", "code": true },
-                  { "text": " змінюють макет сторінки." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Гнучке центрування", "bold": true },
-                  { "text": " – " },
-                  { "text": "translate(-50%, -50%)", "code": true },
-                  {
-                    "text": " дозволяє центрувати елемент незалежно від його розмірів."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Для зміщення без порушення контексту елемента "
-                          },
-                          { "text": "translate()", "code": true },
-                          { "text": " є кращим вибором." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "44. When is it better to use translate() instead of absolute positioning?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "It is better to use " },
-              { "text": "translate()", "code": true },
-              { "text": " in the following cases:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Performance optimization", "bold": true },
-                  { "text": " – " },
-                  { "text": "translate()", "code": true },
-                  {
-                    "text": " leverages GPU acceleration, producing smoother animations than changing "
-                  },
-                  { "text": "top/left", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Preserving document flow", "bold": true },
-                  { "text": " – " },
-                  { "text": "translate()", "code": true },
-                  {
-                    "text": " does not affect the layout of other elements, unlike "
-                  },
-                  { "text": "position: absolute", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "No reflow", "bold": true },
-                  { "text": " – changing " },
-                  { "text": "transform", "code": true },
-                  { "text": " does not trigger " },
-                  { "text": "reflow", "code": true },
-                  { "text": ", while " },
-                  { "text": "top/left", "code": true },
-                  { "text": " forces layout recalculation." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Flexible centering", "bold": true },
-                  { "text": " – " },
-                  { "text": "translate(-50%, -50%)", "code": true },
-                  {
-                    "text": " is commonly used to center elements regardless of their size."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "To move an element without breaking its context, "
-                          },
-                          { "text": "translate()", "code": true },
-                          { "text": " is the preferred option." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "44. Kiedy lepiej użyć translate() zamiast pozycjonowania absolutnego?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Lepiej użyć " },
-              { "text": "translate()", "code": true },
-              { "text": " w następujących przypadkach:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optymalizacja wydajności", "bold": true },
-                  { "text": " – " },
-                  { "text": "translate()", "code": true },
-                  {
-                    "text": " korzysta z GPU, zapewniając płynniejsze animacje niż zmiana "
-                  },
-                  { "text": "top/left", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zachowanie przepływu dokumentu", "bold": true },
-                  { "text": " – " },
-                  { "text": "translate()", "code": true },
-                  {
-                    "text": " nie wpływa na położenie innych elementów, w przeciwieństwie do "
-                  },
-                  { "text": "position: absolute", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Brak reflow", "bold": true },
-                  { "text": " – zmiana " },
-                  { "text": "transform", "code": true },
-                  { "text": " nie wywołuje " },
-                  { "text": "reflow", "code": true },
-                  { "text": ", natomiast " },
-                  { "text": "top/left", "code": true },
-                  { "text": " powodują ponowne przeliczanie układu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Elastyczne centrowanie", "bold": true },
-                  { "text": " – " },
-                  { "text": "translate(-50%, -50%)", "code": true },
-                  {
-                    "text": " umożliwia centrowanie elementu niezależnie od jego rozmiaru."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Do przesuwania elementu bez naruszania kontekstu "
-                          },
-                          { "text": "translate()", "code": true },
-                          { "text": " jest lepszym wyborem." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 45,
-    "translations": {
-      "uk": {
-        "question": "45. Що таке плаваючі елементи (floats)? Як вони працюють?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Плаваючі елементи", "bold": true },
-              { "text": " (" },
-              { "text": "float", "code": true },
-              {
-                "text": ") — це механізм у CSS, який дозволяє елементам виринати ліворуч або праворуч у контейнері, а тексту обтікати їх."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Як працюють " },
-              { "text": "float", "code": true },
-              { "text": ":" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Обтікання текстом", "bold": true },
-                  { "text": " – при " },
-                  { "text": "float: left", "code": true },
-                  { "text": " або " },
-                  { "text": "float: right", "code": true },
-                  { "text": " інлайн-контент обтікає елемент." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вилучення з потоку", "bold": true },
-                  { "text": " – " },
-                  { "text": "float", "code": true },
-                  { "text": " виймає елемент з нормального потоку документа." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Проблема схлопування контейнера", "bold": true },
-                  { "text": " – вирішується через " },
-                  { "text": "clearfix", "code": true },
-                  { "text": " або " },
-                  { "text": "overflow: hidden", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Застарілий підхід", "bold": true },
-                  { "text": " – для верстки сьогодні використовують " },
-                  { "text": "flexbox", "code": true },
-                  { "text": " та " },
-                  { "text": "grid", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "45. What are floating elements (floats)? How do they work?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Floating elements", "bold": true },
-              { "text": " (" },
-              { "text": "float", "code": true },
-              {
-                "text": ") are a CSS mechanism that allows elements to float left or right inside a container while text wraps around them."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "How " },
-              { "text": "float", "code": true },
-              { "text": " works:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Text wrapping", "bold": true },
-                  { "text": " – with " },
-                  { "text": "float: left", "code": true },
-                  { "text": " or " },
-                  { "text": "float: right", "code": true },
-                  { "text": " inline content flows around the element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Removed from normal flow", "bold": true },
-                  { "text": " – " },
-                  { "text": "float", "code": true },
-                  {
-                    "text": " takes the element out of the normal document flow."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Container collapse issue", "bold": true },
-                  { "text": " – fixed using " },
-                  { "text": "clearfix", "code": true },
-                  { "text": " or " },
-                  { "text": "overflow: hidden", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Outdated layout method", "bold": true },
-                  { "text": " – modern layouts rely on " },
-                  { "text": "flexbox", "code": true },
-                  { "text": " and " },
-                  { "text": "grid", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "45. Czym są elementy pływające (floats) i jak działają?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Elementy pływające", "bold": true },
-              { "text": " (" },
-              { "text": "float", "code": true },
-              {
-                "text": ") to mechanizm CSS pozwalający elementom przesuwać się w lewo lub w prawo, a tekstowi je opływać."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Jak działa " },
-              { "text": "float", "code": true },
-              { "text": ":" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Opływanie tekstu", "bold": true },
-                  { "text": " – przy " },
-                  { "text": "float: left", "code": true },
-                  { "text": " lub " },
-                  { "text": "float: right", "code": true },
-                  { "text": " tekst otacza element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Usunięcie z normalnego przepływu", "bold": true },
-                  { "text": " – " },
-                  { "text": "float", "code": true },
-                  { "text": " wyjmuje element z normalnego układu dokumentu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Problem zapadania kontenera", "bold": true },
-                  { "text": " – rozwiązywany przez " },
-                  { "text": "clearfix", "code": true },
-                  { "text": " lub " },
-                  { "text": "overflow: hidden", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przestarzałe rozwiązanie", "bold": true },
-                  { "text": " – obecnie stosuje się " },
-                  { "text": "flexbox", "code": true },
-                  { "text": " oraz " },
-                  { "text": "grid", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 46,
-    "translations": {
-      "uk": {
-        "question": "46. Способи завдання кольору CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Існує кілька способів задавати кольори в CSS:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Назва кольору:", "bold": true },
-                  { "text": " Наприклад:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: red;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Шістнадцятковий код (Hex):", "bold": true },
-                  { "text": " Наприклад:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: #ff5733;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGB (Red, Green, Blue):", "bold": true },
-                  { "text": " Значення каналів від 0 до 255. Наприклад:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgb(255, 87, 51);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGBA (з прозорістю):", "bold": true },
-                  { "text": " Додає alpha-канал. Наприклад:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgba(255, 87, 51, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSL (Hue, Saturation, Lightness):", "bold": true },
-                  { "text": " Наприклад:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsl(12, 100%, 60%);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSLA (з прозорістю):", "bold": true },
-                  { "text": " Наприклад:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsla(12, 100%, 60%, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Градієнти:", "bold": true },
-                  { "text": " Наприклад:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "background: linear-gradient(to right, red, yellow);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Прозорий колір:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: transparent;"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "46. Ways to define colors in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "There are several ways to define colors in CSS:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Color names:", "bold": true },
-                  { "text": " Example:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: red;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hexadecimal (Hex):", "bold": true },
-                  { "text": " Example:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: #ff5733;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGB:", "bold": true },
-                  { "text": " Values from 0 to 255. Example:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgb(255, 87, 51);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGBA:", "bold": true },
-                  { "text": " Includes alpha channel. Example:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgba(255, 87, 51, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSL:", "bold": true },
-                  { "text": " Example:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsl(12, 100%, 60%);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSLA:", "bold": true },
-                  { "text": " Example:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsla(12, 100%, 60%, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Gradients:", "bold": true },
-                  { "text": " Example:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "background: linear-gradient(to right, red, yellow);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Transparent color:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: transparent;"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "46. Sposoby definiowania kolorów w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Istnieje kilka sposobów definiowania kolorów w CSS:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Nazwy kolorów:", "bold": true },
-                  { "text": " Przykład:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: red;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kod szesnastkowy (Hex):", "bold": true },
-                  { "text": " Przykład:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: #ff5733;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGB:", "bold": true },
-                  { "text": " Zakres 0–255. Przykład:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgb(255, 87, 51);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "RGBA:", "bold": true },
-                  { "text": " Z kanałem alfa. Przykład:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: rgba(255, 87, 51, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSL:", "bold": true },
-                  { "text": " Przykład:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsl(12, 100%, 60%);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HSLA:", "bold": true },
-                  { "text": " Przykład:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: hsla(12, 100%, 60%, 0.5);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Gradienty:", "bold": true },
-                  { "text": " Przykład:" },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "background: linear-gradient(to right, red, yellow);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kolor przezroczysty:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "css",
-                    "content": "color: transparent;"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 47,
-    "translations": {
-      "uk": {
-        "question": "47. Які CSS-властивості використовуються для створення анімацій та плавних переходів?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для створення анімацій та плавних переходів у CSS використовуються такі властивості:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Плавні переходи (transition)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Дозволяють плавно змінювати значення CSS-властивостей."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Основні властивості:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-property", "code": true },
-                  { "text": " – властивість, що анімується." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-duration", "code": true },
-                  { "text": " – тривалість анімації." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-timing-function", "code": true },
-                  { "text": " – крива прискорення." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-delay", "code": true },
-                  { "text": " – затримка запуску." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Анімації (@keyframes + animation)", "bold": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Дають змогу створювати складні анімації з кількома ключовими кадрами."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Основні властивості:", "bold": true }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "animation-name", "code": true },
-              { "text": ", " },
-              { "text": "animation-duration", "code": true },
-              { "text": ", " },
-              { "text": "animation-timing-function", "code": true },
-              { "text": ", " },
-              { "text": "animation-delay", "code": true },
-              { "text": ", " },
-              { "text": "animation-iteration-count", "code": true },
-              { "text": ", " },
-              { "text": "animation-direction", "code": true },
-              { "text": ", " },
-              { "text": "animation-fill-mode", "code": true }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "47. Which CSS properties are used to create animations and smooth transitions?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS provides the following properties for animations and smooth transitions:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Transitions (transition)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Used to smoothly animate changes of CSS properties."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Core properties:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-property", "code": true },
-                  { "text": " – property being animated." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-duration", "code": true },
-                  { "text": " – animation duration." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-timing-function", "code": true },
-                  { "text": " – easing curve." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-delay", "code": true },
-                  { "text": " – start delay." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Animations (@keyframes + animation)",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Allow complex animations using keyframes." }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Core properties:", "bold": true }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "animation-name", "code": true },
-              { "text": ", " },
-              { "text": "animation-duration", "code": true },
-              { "text": ", " },
-              { "text": "animation-timing-function", "code": true },
-              { "text": ", " },
-              { "text": "animation-delay", "code": true },
-              { "text": ", " },
-              { "text": "animation-iteration-count", "code": true },
-              { "text": ", " },
-              { "text": "animation-direction", "code": true },
-              { "text": ", " },
-              { "text": "animation-fill-mode", "code": true }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "47. Jakie właściwości CSS służą do tworzenia animacji i płynnych przejść?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W CSS do animacji i płynnych przejść używa się następujących właściwości:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przejścia (transition)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Umożliwiają płynną zmianę wartości właściwości CSS."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Główne właściwości:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-property", "code": true },
-                  { "text": " – animowana właściwość." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-duration", "code": true },
-                  { "text": " – czas trwania animacji." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-timing-function", "code": true },
-                  { "text": " – krzywa przyspieszenia." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "transition-delay", "code": true },
-                  { "text": " – opóźnienie startu." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Animacje (@keyframes + animation)", "bold": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pozwalają tworzyć bardziej złożone animacje z klatkami kluczowymi."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Główne właściwości:", "bold": true }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "animation-name", "code": true },
-              { "text": ", " },
-              { "text": "animation-duration", "code": true },
-              { "text": ", " },
-              { "text": "animation-timing-function", "code": true },
-              { "text": ", " },
-              { "text": "animation-delay", "code": true },
-              { "text": ", " },
-              { "text": "animation-iteration-count", "code": true },
-              { "text": ", " },
-              { "text": "animation-direction", "code": true },
-              { "text": ", " },
-              { "text": "animation-fill-mode", "code": true }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 48,
-    "translations": {
-      "uk": {
-        "question": "48. Різниця між псевдокласами та псевдоелементами?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Різниця між псевдокласами і псевдоелементами полягає в їхньому призначенні та способі застосування."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Псевдокласи" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Псевдокласи описують " },
-              { "text": "стан", "bold": true },
-              { "text": " або поведінку існуючих HTML-елементів." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":hover", "code": true },
-                  { "text": " – наведення курсору." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":focus", "code": true },
-                  { "text": " – фокус елемента." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":nth-child()", "code": true },
-                  { "text": " – позиція серед сусідів." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Псевдоелементи" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Псевдоелементи працюють з " },
-              { "text": "частинами елементів", "bold": true },
-              { "text": " або створюють віртуальний контент." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::before", "code": true },
-                  { "text": " – контент перед елементом." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::after", "code": true },
-                  { "text": " – контент після елемента." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::first-letter", "code": true },
-                  { "text": " – перша літера." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Ключова відмінність:", "bold": true },
-              {
-                "text": " псевдокласи описують стан, псевдоелементи – структуру або вміст."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Синтаксис:", "bold": true },
-              { "text": " псевдокласи використовують " },
-              { "text": ":", "code": true },
-              { "text": ", псевдоелементи – " },
-              { "text": "::", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "48. What is the difference between pseudo-classes and pseudo-elements?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The difference lies in their purpose and how they are applied."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Pseudo-classes" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pseudo-classes describe the " },
-              { "text": "state", "bold": true },
-              { "text": " or interaction of existing elements." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":hover", "code": true },
-                  { "text": " – mouse hover." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":focus", "code": true },
-                  { "text": " – element focus." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":nth-child()", "code": true },
-                  { "text": " – position among siblings." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Pseudo-elements" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pseudo-elements target " },
-              { "text": "parts of elements", "bold": true },
-              { "text": " or generate virtual content." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::before", "code": true },
-                  { "text": " – content before." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::after", "code": true },
-                  { "text": " – content after." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::first-letter", "code": true },
-                  { "text": " – first letter." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Key difference:", "bold": true },
-              {
-                "text": " pseudo-classes define state, pseudo-elements define structure or content."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Syntax:", "bold": true },
-              { "text": " pseudo-classes use " },
-              { "text": ":", "code": true },
-              { "text": ", pseudo-elements use " },
-              { "text": "::", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "48. Jaka jest różnica między pseudoklasami a pseudoelementami?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Różnica dotyczy ich przeznaczenia i sposobu użycia." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Pseudoklasy" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pseudoklasy opisują " },
-              { "text": "stan", "bold": true },
-              { "text": " lub interakcję elementów." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":hover", "code": true },
-                  { "text": " – najechanie kursorem." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":focus", "code": true },
-                  { "text": " – fokus." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":nth-child()", "code": true },
-                  { "text": " – pozycja wśród elementów." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Pseudoelementy" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pseudoelementy odnoszą się do " },
-              { "text": "części elementów", "bold": true },
-              { "text": " lub tworzą wirtualną treść." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::before", "code": true },
-                  { "text": " – treść przed." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::after", "code": true },
-                  { "text": " – treść po." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "::first-letter", "code": true },
-                  { "text": " – pierwsza litera." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Kluczowa różnica:", "bold": true },
-              {
-                "text": " pseudoklasy opisują stan, pseudoelementy opisują strukturę lub treść."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Składnia:", "bold": true },
-              { "text": " pseudoklasy używają " },
-              { "text": ":", "code": true },
-              { "text": ", pseudoelementy używają " },
-              { "text": "::", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 49,
-    "translations": {
-      "uk": {
-        "question": "49. Розкажіть про псевдоклас :has()?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":has()", "code": true },
-                  { "text": " – " },
-                  { "text": "потужний CSS-псевдоклас", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":has()", "code": true },
-                  {
-                    "text": " дозволяє стилізувати елемент на основі наявності в ньому дочірніх елементів."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Його часто називають \"батьківським селектором\", хоча технічно він перевіряє вміст елемента."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".card:has(img) {\n  border: 2px solid blue;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Стиль застосовується до " },
-              { "text": ".card", "code": true },
-              { "text": ", якщо всередині є " },
-              { "text": "img", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Підтримка" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Підтримується в Chrome, Edge, Safari. У Firefox підтримки немає."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "49. What is the :has() pseudo-class?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":has()", "code": true },
-                  { "text": " – " },
-                  { "text": "a powerful CSS pseudo-class", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":has()", "code": true },
-                  {
-                    "text": " allows styling an element based on its child elements."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "It is often described as a \"parent selector\", as it enables parent-based styling."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".card:has(img) {\n  border: 2px solid blue;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The style applies to " },
-              { "text": ".card", "code": true },
-              { "text": " when it contains an " },
-              { "text": "img", "code": true },
-              { "text": " element." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Browser support" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Supported in Chrome, Edge, and Safari. Not supported in Firefox."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "49. Czym jest pseudoklasa :has()?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":has()", "code": true },
-                  { "text": " – " },
-                  { "text": "zaawansowana pseudoklasa CSS", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":has()", "code": true },
-                  {
-                    "text": " umożliwia stylowanie elementu na podstawie jego zawartości."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Często określana jako „selektor rodzica”, ponieważ reaguje na elementy potomne."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": ".card:has(img) {\n  border: 2px solid blue;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Styl zostanie zastosowany do " },
-              { "text": ".card", "code": true },
-              { "text": ", jeśli zawiera " },
-              { "text": "img", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wsparcie przeglądarek" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Działa w Chrome, Edge i Safari. Firefox nie obsługuje."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 50,
-    "translations": {
-      "uk": {
-        "question": "50. Проблеми з використанням CSS-in-JS? Як їх вирішити?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS-in-JS має низку системних проблем, які стають критичними у великих проєктах."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Продуктивність", "bold": true },
-                  { "text": " – стилі генеруються під час рендеру." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Рішення:", "bold": true },
-                  {
-                    "text": " SSR, статичні стилі, runtime-less підходи (Linaria)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Збільшення бандлу", "bold": true },
-                  { "text": " – бібліотеки додають JS-код." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Рішення:", "bold": true },
-                  { "text": " компіляція на білді, CSS Modules, Tailwind." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Специфічність і перевизначення", "bold": true },
-                  { "text": " – складно керувати каскадом." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Рішення:", "bold": true },
-                  { "text": " theme-based стилі, as, css-prop." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Погана підтримка IDE", "bold": true },
-                  { "text": " – слабке автодоповнення." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Рішення:", "bold": true },
-                  { "text": " VS Code плагіни, TypeScript, CSS variables." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "50. Problems with CSS-in-JS. How can they be solved?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS-in-JS introduces architectural issues that scale poorly in large applications."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Performance", "bold": true },
-                  { "text": " – styles are generated at runtime." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Solution:", "bold": true },
-                  {
-                    "text": " SSR, static extraction, runtime-less tools like Linaria."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Larger bundle size", "bold": true },
-                  { "text": " – styling logic lives in JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Solution:", "bold": true },
-                  { "text": " build-time compilation, CSS Modules, Tailwind." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Specificity issues", "bold": true },
-                  { "text": " – harder to override styles." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Solution:", "bold": true },
-                  { "text": " themes, as-prop, controlled style layers." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Poor IDE support", "bold": true },
-                  { "text": " – limited autocomplete." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Solution:", "bold": true },
-                  { "text": " editor plugins, TypeScript, CSS variables." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "50. Problemy z CSS-in-JS i sposoby ich rozwiązania?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS-in-JS powoduje problemy architektoniczne, które nasilają się wraz ze skalą projektu."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wydajność", "bold": true },
-                  { "text": " – style tworzone w czasie renderowania." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rozwiązanie:", "bold": true },
-                  { "text": " SSR, style statyczne, Linaria." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Większy bundle", "bold": true },
-                  { "text": " – dodatkowy kod JS." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rozwiązanie:", "bold": true },
-                  { "text": " kompilacja na buildzie, CSS Modules, Tailwind." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Problemy ze specyficznością", "bold": true },
-                  { "text": " – trudne nadpisywanie stylów." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rozwiązanie:", "bold": true },
-                  { "text": " motywy, as, kontrola warstw stylów." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Słabe wsparcie IDE", "bold": true },
-                  { "text": " – brak dobrego autocomplete." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rozwiązanie:", "bold": true },
-                  { "text": " pluginy edytora, TypeScript, CSS variables." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 51,
-    "translations": {
-      "uk": {
-        "question": "51. Що означає CSS і яке його основне використання?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS (Cascading Style Sheets) — це мова стилів, призначена для опису зовнішнього вигляду HTML-документів. Вона використовується для керування кольорами, шрифтами, відступами, розмірами, позиціонуванням та загальним макетом сторінки."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "51. What does CSS stand for and what is its main purpose?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS (Cascading Style Sheets) is a styling language used to describe the visual appearance of HTML documents. Its main purpose is to control colors, fonts, spacing, sizes, layout, and positioning of page elements."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "51. Co oznacza CSS i jakie jest jego główne zastosowanie?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS (Cascading Style Sheets) to język stylów służący do opisu wyglądu dokumentów HTML. Jego głównym zadaniem jest kontrola kolorów, czcionek, odstępów, rozmiarów, układu oraz pozycjonowania elementów strony."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 52,
-    "translations": {
-      "uk": {
-        "question": "52. Які способи підключення CSS до HTML ти знаєш?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Існує три основні способи підключення CSS до HTML:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вбудований (Inline CSS)", "bold": true },
-                  { "text": " – через атрибут " },
-                  { "text": "style", "code": true },
-                  { "text": " безпосередньо в елементі:" },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<p style=\"color: red;\">Текст</p>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Внутрішній (Internal CSS)", "bold": true },
-                  { "text": " – у тезі " },
-                  { "text": "<style>", "code": true },
-                  { "text": " всередині " },
-                  { "text": "<head>", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<head>\n  <style>\n    p { color: red; }\n  </style>\n</head>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Зовнішній файл (External CSS)", "bold": true },
-                  { "text": " – підключення окремого " },
-                  { "text": ".css", "code": true },
-                  { "text": " файлу через " },
-                  { "text": "<link>", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<head>\n  <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "52. What ways of connecting CSS to HTML do you know?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "There are three main ways to connect CSS to HTML:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inline CSS", "bold": true },
-                  { "text": " – using the " },
-                  { "text": "style", "code": true },
-                  { "text": " attribute directly on an element:" },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<p style=\"color: red;\">Text</p>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Internal CSS", "bold": true },
-                  { "text": " – inside a " },
-                  { "text": "<style>", "code": true },
-                  { "text": " tag within " },
-                  { "text": "<head>", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<head>\n  <style>\n    p { color: red; }\n  </style>\n</head>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "External CSS file", "bold": true },
-                  { "text": " – linking a separate " },
-                  { "text": ".css", "code": true },
-                  { "text": " file using " },
-                  { "text": "<link>", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<head>\n  <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "52. Jakie znasz sposoby podłączania CSS do HTML?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Istnieją trzy główne sposoby podłączania CSS do HTML:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inline CSS", "bold": true },
-                  { "text": " – za pomocą atrybutu " },
-                  { "text": "style", "code": true },
-                  { "text": " w elemencie:" },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<p style=\"color: red;\">Tekst</p>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Internal CSS", "bold": true },
-                  { "text": " – w znaczniku " },
-                  { "text": "<style>", "code": true },
-                  { "text": " wewnątrz " },
-                  { "text": "<head>", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<head>\n  <style>\n    p { color: red; }\n  </style>\n</head>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zewnętrzny plik CSS", "bold": true },
-                  { "text": " – podłączenie pliku " },
-                  { "text": ".css", "code": true },
-                  { "text": " przez znacznik " },
-                  { "text": "<link>", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "html",
-                    "content": "<head>\n  <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 53,
-    "translations": {
-      "uk": {
-        "question": "53. Яка різниця між селекторами класу та ID?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Селектор класу", "bold": true },
-              { "text": " використовується для стилізації групи елементів." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Позначається через " },
-                  { "text": ".", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Може застосовуватися до багатьох елементів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Має нижчу специфічність." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Селектор ID", "bold": true },
-              { "text": " призначений для унікального елемента." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Позначається через " },
-                  { "text": "#", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Має бути унікальним на сторінці." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Має вищу специфічність." }]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "53. What is the difference between class and ID selectors?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "A class selector", "bold": true },
-              { "text": " is used to style multiple elements." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Uses the " },
-                  { "text": ".", "code": true },
-                  { "text": " prefix." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Can be reused across many elements." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Has lower specificity." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "An ID selector", "bold": true },
-              { "text": " targets a single unique element." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Uses the " },
-                  { "text": "#", "code": true },
-                  { "text": " prefix." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Must be unique within the page." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Has higher specificity." }]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "53. Jaka jest różnica między selektorami klasy i ID?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Selektor klasy", "bold": true },
-              { "text": " służy do stylowania wielu elementów." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Oznaczany znakiem " },
-                  { "text": ".", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Może być używany wielokrotnie." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Ma niższą specyficzność." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Selektor ID", "bold": true },
-              { "text": " odnosi się do jednego unikalnego elementu." }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Oznaczany znakiem " },
-                  { "text": "#", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Powinien wystąpić tylko raz na stronie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Ma wyższą specyficzność." }]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 54,
-    "translations": {
-      "uk": {
-        "question": "54. Що таке псевдокласи в CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Псевдокласи в CSS — це спеціальні ключові слова, що додаються до селекторів і дозволяють стилізувати елементи залежно від їхнього стану або положення в DOM."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклади псевдокласів:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":hover", "code": true },
-                  { "text": " – наведення курсору." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":focus", "code": true },
-                  { "text": " – отримання фокусу." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":nth-child(n)", "code": true },
-                  { "text": " – позиція серед сусідів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":first-child", "code": true },
-                  { "text": " – перший дочірній елемент." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":last-child", "code": true },
-                  { "text": " – останній дочірній елемент." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":checked", "code": true },
-                  { "text": " – вибраний елемент форми." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "54. What are pseudo-classes in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudo-classes in CSS are special keywords added to selectors that allow styling elements based on their state or position in the DOM."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Examples of pseudo-classes:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":hover", "code": true },
-                  { "text": " – mouse hover state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":focus", "code": true },
-                  { "text": " – element focus." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":nth-child(n)", "code": true },
-                  { "text": " – position among siblings." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":first-child", "code": true },
-                  { "text": " – first child element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":last-child", "code": true },
-                  { "text": " – last child element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":checked", "code": true },
-                  { "text": " – selected form control." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "54. Czym są pseudoklasy w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudoklasy w CSS to specjalne słowa kluczowe dodawane do selektorów, które pozwalają stylować elementy w zależności od ich stanu lub położenia w DOM."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykłady pseudoklas:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":hover", "code": true },
-                  { "text": " – najechanie kursorem." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":focus", "code": true },
-                  { "text": " – fokus elementu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":nth-child(n)", "code": true },
-                  { "text": " – pozycja wśród elementów." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":first-child", "code": true },
-                  { "text": " – pierwszy element potomny." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":last-child", "code": true },
-                  { "text": " – ostatni element potomny." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ":checked", "code": true },
-                  { "text": " – zaznaczone pole formularza." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 55,
-    "translations": {
-      "uk": {
-        "question": "55. Опишіть, як реалізувати скидання CSS і чому це корисно.",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Скидання CSS — це практика усунення або уніфікації дефолтних стилів браузера, щоб отримати передбачувану стартову базу."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Normalize.css", "code": true },
-                  { "text": " — уніфікує стилі, не обнуляючи все." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<link rel=\"stylesheet\" href=\"https://necolas.github.io/normalize.css/latest/normalize.css\" />"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Зберігає корисні стилі та вирівнює відображення між браузерами."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS Reset (Eric Meyer)", "bold": true },
-                  { "text": " — повне скидання стилів." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Недолік — потрібно описувати базові стилі з нуля." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Modern CSS Reset", "bold": true },
-                  { "text": " — мінімальний сучасний підхід." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Дає контроль без агресивного обнулення." }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Користь:", "bold": true },
-              {
-                "text": " усуває відмінності між браузерами, зменшує баги та стабілізує верстку."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "55. Explain how to implement a CSS reset and why it is useful.",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A CSS reset is a technique used to remove or normalize browser default styles to achieve a consistent baseline."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Normalize.css", "code": true },
-                  {
-                    "text": " — normalizes styles instead of fully resetting them."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<link rel=\"stylesheet\" href=\"https://necolas.github.io/normalize.css/latest/normalize.css\" />"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Keeps useful defaults while ensuring cross-browser consistency."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS Reset (Eric Meyer)", "bold": true },
-                  { "text": " — removes all default styles." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Downside: all base styles must be redefined manually."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Modern CSS Reset", "bold": true },
-                  { "text": " — lightweight and practical." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Provides control without excessive resets." }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Benefit:", "bold": true },
-              {
-                "text": " consistent rendering, fewer layout bugs, predictable styling."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "55. Opisz, jak zaimplementować reset CSS i dlaczego jest to przydatne.",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Reset CSS to technika usuwania lub normalizacji domyślnych stylów przeglądarki w celu uzyskania spójnej bazy."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Normalize.css", "code": true },
-                  { "text": " — wyrównuje style zamiast je zerować." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<link rel=\"stylesheet\" href=\"https://necolas.github.io/normalize.css/latest/normalize.css\" />"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zachowuje użyteczne style i ujednolica wygląd między przeglądarkami."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS Reset (Eric Meyer)", "bold": true },
-                  { "text": " — pełne zerowanie stylów." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wada: konieczność definiowania wszystkiego od początku."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Modern CSS Reset", "bold": true },
-                  { "text": " — nowoczesna, lekka alternatywa." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Zapewnia kontrolę bez agresywnego resetu." }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Korzyść:", "bold": true },
-              {
-                "text": " spójność między przeglądarkami, mniej błędów i stabilniejszy layout."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 56,
-    "translations": {
-      "uk": {
-        "question": "56. Як ви вибираєте елементи за атрибутами в CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "В CSS елементи за атрибутами вибирають за допомогою селекторів у квадратних дужках."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Приклади:", "bold": true }]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "/* Лінки з target=\"_blank\" */\na[target='_blank'] {\n  color: red;\n}\n\n/* Інпути з атрибутом required */\ninput[required] {\n  border: 2px solid orange;\n}\n\n/* Кнопки з конкретним типом */\nbutton[type='submit'] {\n  background-color: green;\n}\n\n/* Зображення, де alt містить слово \"logo\" */\nimg[alt*='logo'] {\n  width: 150px;\n}"
-          }
-        ]
-      },
-      "en": {
-        "question": "56. How do you select elements by attributes in CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In CSS, attribute selectors are used to target elements based on their attributes using square brackets."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Examples:", "bold": true }]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "/* Links that open in a new tab */\na[target='_blank'] {\n  color: red;\n}\n\n/* Inputs with required attribute */\ninput[required] {\n  border: 2px solid orange;\n}\n\n/* Buttons with a specific type */\nbutton[type='submit'] {\n  background-color: green;\n}\n\n/* Images where alt contains the word \"logo\" */\nimg[alt*='logo'] {\n  width: 150px;\n}"
-          }
-        ]
-      },
-      "pl": {
-        "question": "56. Jak wybierać elementy po atrybutach w CSS?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W CSS do wybierania elementów na podstawie atrybutów używa się selektorów w nawiasach kwadratowych."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Przykłady:", "bold": true }]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "/* Linki otwierane w nowej karcie */\na[target='_blank'] {\n  color: red;\n}\n\n/* Inputy z atrybutem required */\ninput[required] {\n  border: 2px solid orange;\n}\n\n/* Przyciski o określonym typie */\nbutton[type='submit'] {\n  background-color: green;\n}\n\n/* Obrazy, których alt zawiera słowo \"logo\" */\nimg[alt*='logo'] {\n  width: 150px;\n}"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 57,
-    "translations": {
-      "uk": {
-        "question": "57. Що таке псевдоелементи і для чого вони використовуються?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Псевдоелементи — це CSS-конструкції, які дозволяють стилізувати окремі частини елементів або додавати віртуальний контент без зміни HTML."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Використовуються для:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "додавання контенту через " },
-                  { "text": "::before", "code": true },
-                  { "text": " та " },
-                  { "text": "::after", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "стилізації частин тексту (" },
-                  { "text": "::first-letter", "code": true },
-                  { "text": ", " },
-                  { "text": "::first-line", "code": true },
-                  { "text": ")" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "оформлення плейсхолдера (" },
-                  { "text": "::placeholder", "code": true },
-                  { "text": ")" }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "p::first-line {\n  font-weight: bold;\n}\n\nbutton::after {\n  content: ' →';\n}"
-          }
-        ]
-      },
-      "en": {
-        "question": "57. What are pseudo-elements and what are they used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudo-elements are CSS constructs that allow styling specific parts of elements or adding virtual content without modifying HTML."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "They are used for:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "adding content with " },
-                  { "text": "::before", "code": true },
-                  { "text": " and " },
-                  { "text": "::after", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "styling text fragments (" },
-                  { "text": "::first-letter", "code": true },
-                  { "text": ", " },
-                  { "text": "::first-line", "code": true },
-                  { "text": ")" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "customizing placeholders (" },
-                  { "text": "::placeholder", "code": true },
-                  { "text": ")" }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "p::first-line {\n  font-weight: bold;\n}\n\nbutton::after {\n  content: ' →';\n}"
-          }
-        ]
-      },
-      "pl": {
-        "question": "57. Czym są pseudoelementy i do czego się je wykorzystuje?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pseudoelementy to konstrukcje CSS umożliwiające stylowanie części elementów lub dodawanie wirtualnej treści bez zmiany HTML."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Służą do:", "bold": true }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "dodawania treści za pomocą " },
-                  { "text": "::before", "code": true },
-                  { "text": " i " },
-                  { "text": "::after", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "stylowania fragmentów tekstu (" },
-                  { "text": "::first-letter", "code": true },
-                  { "text": ", " },
-                  { "text": "::first-line", "code": true },
-                  { "text": ")" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "stylowania placeholderów (" },
-                  { "text": "::placeholder", "code": true },
-                  { "text": ")" }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "p::first-line {\n  font-weight: bold;\n}\n\nbutton::after {\n  content: ' →';\n}"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 58,
-    "translations": {
-      "uk": {
-        "question": "58. Поясніть різницю між дочірнім комбінатором і комбінатором нащадка.",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Дочірній комбінатор", "bold": true },
-                  { "text": " (" },
-                  { "text": ">", "code": true },
-                  {
-                    "text": ") — вибирає лише безпосередніх нащадків елемента."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Комбінатор нащадка", "bold": true },
-                  { "text": " (" },
-                  { "text": "пробіл", "code": true },
-                  {
-                    "text": ") — вибирає всіх нащадків на будь-якому рівні вкладеності."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "/* Дочірній комбінатор */\ndiv > p {\n  color: blue;\n}\n\n/* Комбінатор нащадка */\ndiv p {\n  color: red;\n}"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "У першому випадку стилізуються лише " },
-                  { "text": "<p>", "code": true },
-                  { "text": ", які є прямими дітьми " },
-                  { "text": "<div>", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "У другому випадку стилізуються всі " },
-                  { "text": "<p>", "code": true },
-                  { "text": " всередині " },
-                  { "text": "<div>", "code": true },
-                  { "text": ", незалежно від глибини вкладеності." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "58. Explain the difference between the child combinator and the descendant combinator.",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Child combinator", "bold": true },
-                  { "text": " (" },
-                  { "text": ">", "code": true },
-                  { "text": ") selects only direct children of an element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Descendant combinator", "bold": true },
-                  { "text": " (" },
-                  { "text": "space", "code": true },
-                  { "text": ") selects all descendants at any nesting level." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "/* Child combinator */\ndiv > p {\n  color: blue;\n}\n\n/* Descendant combinator */\ndiv p {\n  color: red;\n}"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "The first selector targets only " },
-                  { "text": "<p>", "code": true },
-                  { "text": " elements that are direct children of " },
-                  { "text": "<div>", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "The second selector targets all " },
-                  { "text": "<p>", "code": true },
-                  { "text": " elements inside " },
-                  { "text": "<div>", "code": true },
-                  { "text": ", regardless of nesting depth." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "58. Wyjaśnij różnicę między selektorem dziecka a selektorem potomka.",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selektor dziecka", "bold": true },
-                  { "text": " (" },
-                  { "text": ">", "code": true },
-                  { "text": ") wybiera tylko bezpośrednie dzieci elementu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selektor potomka", "bold": true },
-                  { "text": " (" },
-                  { "text": "spacja", "code": true },
-                  {
-                    "text": ") wybiera wszystkich potomków na dowolnym poziomie zagnieżdżenia."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "/* Selektor dziecka */\ndiv > p {\n  color: blue;\n}\n\n/* Selektor potomka */\ndiv p {\n  color: red;\n}"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pierwszy selektor dotyczy tylko " },
-                  { "text": "<p>", "code": true },
-                  { "text": " będących bezpośrednimi dziećmi " },
-                  { "text": "<div>", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Drugi selektor dotyczy wszystkich " },
-                  { "text": "<p>", "code": true },
-                  { "text": " wewnątrz " },
-                  { "text": "<div>", "code": true },
-                  { "text": ", niezależnie od poziomu zagnieżdżenia." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 59,
-    "translations": {
-      "uk": {
-        "question": "59. Як би ви вибрали всі прямі дочірні елементи певного типу?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для вибору всіх прямих дочірніх елементів певного типу використовується дочірній комбінатор."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Синтаксис: " },
-                  { "text": "батько > дитина", "code": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "ul > li {\n  list-style: none;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Цей селектор вибирає лише ті li, які є безпосередніми дітьми ul."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "59. How would you select all direct child elements of a specific type?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "To select all direct child elements of a specific type, the child combinator is used."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Syntax: " },
-                  { "text": "parent > child", "code": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "ul > li {\n  list-style: none;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This selector targets only li elements that are direct children of ul."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "59. Jak wybrać wszystkie bezpośrednie elementy potomne określonego typu?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Aby wybrać wszystkie bezpośrednie elementy potomne danego typu, używa się selektora dziecka."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Składnia: " },
-                  { "text": "rodzic > dziecko", "code": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "css",
-            "content": "ul > li {\n  list-style: none;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Selektor ten wybiera tylko li będące bezpośrednimi dziećmi ul."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "question": "60. Що таке універсальний селектор і однорідний комбінатор, і коли ви їх використаєте?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Універсальний селектор",
-                "bold": true
-              },
-              {
-                "text": " ("
-              },
-              {
-                "text": "*",
-                "code": true
-              },
-              {
-                "text": ") — вибирає всі елементи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Однорідний комбінатор",
-                "bold": true
-              },
-              {
-                "text": " ("
-              },
-              {
-                "text": "+",
-                "code": true
-              },
-              {
-                "text": ") — вибирає елемент, що безпосередньо слідує за іншим."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовую:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "*",
-            "code": true
-          },
-          {
-            "text": " — для глобального скидання стилів:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "* {\n  margin: 0;\n  padding: 0;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "+",
-            "code": true
-          },
-          {
-            "text": " — для стилізації сусідніх елементів, наприклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "h1 + p {\n  margin-top: 0;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Працюють швидко, якщо не зловживати."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "category": "css",
-    "order": 61,
-    "translations": {
-      "uk": {
-        "question": "61. Що таке CSS Box Model?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "CSS Box Model", "bold": true },
-              {
-                "text": " — це модель, яка описує кожен HTML-елемент як прямокутник із кількох шарів."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Content", "code": true },
-                  { "text": " — сам вміст елемента." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Padding", "code": true },
-                  { "text": " — внутрішні відступи навколо контенту." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Border", "code": true },
-                  { "text": " — рамка навколо padding." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin", "code": true },
-                  { "text": " — зовнішні відступи від інших елементів." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Без розуміння Box Model контроль розмірів і відступів неможливий."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "61. What is the CSS Box Model?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The CSS Box Model", "bold": true },
-              {
-                "text": " describes every HTML element as a rectangular box made of multiple layers."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Content", "code": true },
-                  { "text": " — the actual content of the element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Padding", "code": true },
-                  { "text": " — inner spacing around the content." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Border", "code": true },
-                  { "text": " — the border surrounding padding and content." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin", "code": true },
-                  { "text": " — outer spacing separating elements." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Without understanding the Box Model, layout control breaks."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "61. Czym jest model pudełkowy (CSS Box Model)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "CSS Box Model", "bold": true },
-              {
-                "text": " to model opisujący każdy element HTML jako prostokąt złożony z kilku warstw."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Content", "code": true },
-                  { "text": " — właściwa treść elementu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Padding", "code": true },
-                  { "text": " — wewnętrzne odstępy wokół treści." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Border", "code": true },
-                  { "text": " — obramowanie elementu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin", "code": true },
-                  { "text": " — zewnętrzne odstępy między elementami." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Bez zrozumienia Box Model trudno kontrolować układ strony."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "css",
-    "order": 62,
-    "translations": {
-      "uk": {
-        "question": "62. Поясніть що таке Margin Collapsing.",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin Collapsing", "bold": true },
-                  { "text": " — це поведінка CSS, коли вертикальні " },
-                  { "text": "margin", "code": true },
-                  { "text": " сусідніх блоків зливаються в один." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Браузер бере " },
-                  { "text": "більший", "bold": true },
-                  { "text": " відступ, а не суму." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<div style=\"margin-bottom: 20px;\"></div>\n<div style=\"margin-top: 30px;\"></div>"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Фактичний відступ буде " },
-                  { "text": "30px", "code": true },
-                  { "text": ", а не 50px." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Працює тільки для " },
-                  { "text": "вертикальних", "bold": true },
-                  { "text": " відступів." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "62. Explain what Margin Collapsing is.",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin Collapsing", "bold": true },
-                  { "text": " is a CSS behavior where vertical " },
-                  { "text": "margins", "code": true },
-                  { "text": " of adjacent elements collapse into one." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "The browser uses the " },
-                  { "text": "larger", "bold": true },
-                  { "text": " margin instead of adding them." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<div style=\"margin-bottom: 20px;\"></div>\n<div style=\"margin-top: 30px;\"></div>"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "The actual space will be " },
-                  { "text": "30px", "code": true },
-                  { "text": ", not 50px." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Applies only to " },
-                  { "text": "vertical", "bold": true },
-                  { "text": " margins." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "62. Wyjaśnij, czym jest Margin Collapsing.",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Margin Collapsing", "bold": true },
-                  { "text": " to zachowanie CSS, w którym pionowe " },
-                  { "text": "marginesy", "code": true },
-                  { "text": " sąsiadujących elementów łączą się w jeden." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przeglądarka wybiera " },
-                  { "text": "większy", "bold": true },
-                  { "text": " margines, a nie ich sumę." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<div style=\"margin-bottom: 20px;\"></div>\n<div style=\"margin-top: 30px;\"></div>"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rzeczywisty odstęp wyniesie " },
-                  { "text": "30px", "code": true },
-                  { "text": ", a nie 50px." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dotyczy tylko marginesów " },
-                  { "text": "pionowych", "bold": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  }
-]
diff --git a/frontend/parse/start.json b/frontend/parse/start.json
deleted file mode 100644
index 3c6a24d5..00000000
--- a/frontend/parse/start.json
+++ /dev/null
@@ -1,19314 +0,0 @@
-[
-  {
-    "question": "1. Що таке CSS? І навіщо він використовується?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "CSS (Cascading Style Sheets) — це мова стилів для опису вигляду веб-сторінок. Використовується для розмітки елементів на сторінці, таких як шрифти, кольори, відступи, позиціонування та інші візуальні аспекти. CSS дозволяє відокремити контент (HTML) від стилів, що полегшує підтримку та зміну вигляду сайту."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "2. Що таке каскадність у CSS??",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Каскадність у CSS — це механізм, який визначає, як застосовуються стилі до елементів веб-сторінки, якщо для одного елемента задано кілька різних стилів із різних джерел або рівнів. Вона дозволяє браузеру вирішити, які стилі будуть мати вищий пріоритет і застосовуватися в кінцевому результаті."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "3. Які є способи підключення CSS до HTML-документу?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вбудовані стилі (inline) — напряму в HTML-тегах через атрибут "
-              },
-              {
-                "text": "style",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Внутрішні стилі — у секції "
-              },
-              {
-                "text": "<style>...</style> ",
-                "code": true
-              },
-              {
-                "text": " всередині HTML-документа."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зовнішні стилі — у CSS-файлах, підключених через "
-              },
-              {
-                "text": "<link rel=”stylesheet” href=”styles.css”>",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "@import",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "4. Що таке CSS-селектори? Наведіть приклади.",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "CSS-селектори використовуються для вибору HTML-елементів, до яких застосовуються стилі."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклади:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "За тегом: "
-              },
-              {
-                "text": "h1 { color: red; }",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "За класом: "
-              },
-              {
-                "text": ".button { background: blue; }",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "За ID: "
-              },
-              {
-                "text": "#header { padding: 10px; }",
-                "code": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Комбіновані:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дочірні: "
-              },
-              {
-                "text": "ul > li { margin: 5px; }",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нащадки: "
-              },
-              {
-                "text": "div p { font-size: 14px; }",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Атрибути: "
-              },
-              {
-                "text": "[type=\"text\"] { border: 1px solid gray; }",
-                "code": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Псевдокласи:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "a:hover { color: green; }",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":nth-child(2) { font-weight: bold; }",
-                "code": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Псевдоелементи:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "p::first-line { text-transform: uppercase; }",
-                "code": true
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "5. Як працює наслідування в CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Наслідування в CSS дозволяє деяким властивостям автоматично передаватися від батьківського елемента до дочірніх."
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Особливості:",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Автоматично наслідуються тільки текстові та декоративні властивості:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "color",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "font",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "visibility",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "line-height",
-            "code": true
-          },
-          {
-            "text": " тощо."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не наслідуються автоматично властивості, що впливають на коробку (box model):"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "margin",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "padding",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "border",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "width",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "heigh",
-            "code": true
-          },
-          {
-            "text": "t тощо."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Контроль наслідування:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Примусове наслідування:",
-                "bold": true
-              },
-              {
-                "text": " використовуйте значення inherit."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   p {\n     border: inherit;\n   }"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відміна наслідування:",
-                "bold": true
-              },
-              {
-                "text": " значення initial скидає властивість до початкового (згідно стандарту)."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   p {\n     color: initial;\n   }"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "6. Що таке «модель коробки» (box model) в CSS і як її можна змінити?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "«Модель коробки» (box model) визначає, як розміри елемента розраховуються в CSS. Вона складається з:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Content:",
-                "bold": true
-              },
-              {
-                "text": " Вміст елемента (текст, зображення)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Padding:",
-                "bold": true
-              },
-              {
-                "text": " Внутрішній відступ між вмістом і рамкою."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Border:",
-                "bold": true
-              },
-              {
-                "text": " Рамка навколо padding."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Margin:",
-                "bold": true
-              },
-              {
-                "text": " Зовнішній відступ між елементом і сусідніми елементами."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Розрахунок ширини та висоти:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "За замовчуванням:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "Width/Height = Content + Padding + Border"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зміна моделі коробки:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуйте властивість box-sizing:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "content-box (за замовчуванням):"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Ширина/висота включає лише вміст. Padding і border додаються до загального розміру."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "box-sizing: content-box;"
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "border-box:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Ширина/висота включають вміст, padding і border (зручніше для макетів)."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "box-sizing: border-box;"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "* {\n  box-sizing: border-box;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це допомагає уникнути помилок у розмітці."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "7. У чому різниця між margin і padding?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Різниця між margin і padding:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розташування:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "margin",
-            "code": true
-          },
-          {
-            "text": " створює зовнішній відступ між елементом і сусідніми елементами. "
-          },
-          {
-            "text": "padding",
-            "code": true
-          },
-          {
-            "text": " створює внутрішній відступ між вмістом елемента і його рамкою (border)."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вплив на фон:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "margin",
-            "code": true
-          },
-          {
-            "text": " не впливає на фон елемента; простір залишається прозорим. "
-          },
-          {
-            "text": "padding",
-            "code": true
-          },
-          {
-            "text": " є частиною елемента, тому фон розтягується на область padding."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Колізія (margin collapsing):"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "margin",
-            "code": true
-          },
-          {
-            "text": " сусідніх блоків може \"зливатися\" в один (найбільший). "
-          },
-          {
-            "text": "padding",
-            "code": true
-          },
-          {
-            "text": " не зливається; завжди додається до внутрішнього простору."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "div {\n  margin: 20px; /* Відступ від інших елементів */\n  padding: 20px; /* Відступ між вмістом і рамкою */\n  background-color: lightblue;\n}"
-      }
-    ]
-  },
-  {
-    "question": "8. Що таке Flexbox?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Flexbox (Flexible Box Layout) — це CSS-модель розташування елементів, яка забезпечує гнучке вирівнювання та розподіл простору в межах контейнера, навіть якщо розміри елементів невідомі або змінюються."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні поняття:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Flex-контейнер:",
-            "bold": true
-          },
-          {
-            "text": " Батьківський елемент, на який застосовується "
-          },
-          {
-            "text": "display: flex;",
-            "code": true
-          },
-          {
-            "text": ". "
-          },
-          {
-            "text": "Flex-елементи:",
-            "bold": true
-          },
-          {
-            "text": " Дочірні елементи flex-контейнера."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні властивості Flexbox:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для контейнера:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-direction",
-                "code": true
-              },
-              {
-                "text": ": Напрямок розташування елементів ("
-              },
-              {
-                "text": "row",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "row-reverse",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "column",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "column-reverse",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "justify-content",
-                "code": true
-              },
-              {
-                "text": ": Горизонтальне вирівнювання елементів ("
-              },
-              {
-                "text": "flex-start",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "center",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "space-between",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "space-around",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "space-evenly",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "align-items",
-                "code": true
-              },
-              {
-                "text": ": Вертикальне вирівнювання елементів ("
-              },
-              {
-                "text": "stretch",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "center",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "flex-start",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "flex-end",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "baseline",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "align-content",
-                "code": true
-              },
-              {
-                "text": ": Вирівнювання рядків у багаторядковому контейнері ("
-              },
-              {
-                "text": "stretch",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "center",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "space-between",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-wrap",
-                "code": true
-              },
-              {
-                "text": ": Дозволяє елементам переноситися ("
-              },
-              {
-                "text": "nowrap",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "wrap",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "wrap-reverse",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для елементів:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-grow",
-                "code": true
-              },
-              {
-                "text": ": Як елемент збільшується вільним простором."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-shrink",
-                "code": true
-              },
-              {
-                "text": ": Як елемент зменшується при нестачі простору."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-basis",
-                "code": true
-              },
-              {
-                "text": ": Базовий розмір елемента перед розподілом простору."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "align-self",
-                "code": true
-              },
-              {
-                "text": ": Вирівнювання конкретного елемента всередині контейнера."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Приклад:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "  .container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .item {\n    flex: 1; /* Рівний розподіл простору */\n  }"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "9. Що таке Grid?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "CSS Grid — це потужна система розмітки, яка дозволяє створювати двовимірні сітки для розташування елементів як по горизонталі, так і по вертикалі."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні поняття:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Grid-контейнер:",
-                "bold": true
-              },
-              {
-                "text": " Елемент, на який застосовується "
-              },
-              {
-                "text": "display: grid;",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Grid-елементи:",
-                "bold": true
-              },
-              {
-                "text": " Дочірні елементи grid-контейнера."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Лінії сітки:",
-                "bold": true
-              },
-              {
-                "text": " Вертикальні та горизонтальні межі, що ділять сітку на осередки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Треки:",
-                "bold": true
-              },
-              {
-                "text": " Рядки ("
-              },
-              {
-                "text": "rows",
-                "code": true
-              },
-              {
-                "text": ") і колонки ("
-              },
-              {
-                "text": "columns",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Області:",
-                "bold": true
-              },
-              {
-                "text": " Прямокутні зони, об'єднані з кількох осередків."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Основні властивості Grid:",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для контейнера:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "grid-template-rows",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "grid-template-columns",
-                "code": true
-              },
-              {
-                "text": ": Задають кількість і розміри рядків та колонок."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "grid-template-areas",
-                "code": true
-              },
-              {
-                "text": ": Іменовані області для організації елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "gap",
-                "code": true
-              },
-              {
-                "text": " (або "
-              },
-              {
-                "text": "row-gap/column-gap",
-                "code": true
-              },
-              {
-                "text": "): Відступи між рядками та колонками."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "justify-items",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "align-items",
-                "code": true
-              },
-              {
-                "text": ": Вирівнювання елементів у клітинках."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "justify-content",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "align-content",
-                "code": true
-              },
-              {
-                "text": ": Вирівнювання всієї сітки в контейнері."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для елементів:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "grid-column",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "grid-row",
-                "code": true
-              },
-              {
-                "text": ": Позиціювання по колонках і рядках."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "grid-area",
-                "code": true
-              },
-              {
-                "text": ": Розміщення в іменованій області."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "place-self",
-                "code": true
-              },
-              {
-                "text": ": Індивідуальне вирівнювання елемента."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".container {\n  display: grid;\n  grid-template-columns: 1fr 2fr; /* Дві колонки: 1 частина та 2 частини */\n  grid-template-rows: 100px auto; /* Рядок фіксованої висоти і автоматичний */\n  gap: 10px;\n}\n\n.item1 {\n  grid-column: 1 / 3; /* Займає дві колонки */\n}\n\n.item2 {\n  grid-row: 2; /* Розташований у другому рядку */\n}"
-      }
-    ]
-  },
-  {
-    "question": "10. Що таке медіазапити та як їх використовувати?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Медіазапити — це умови, які дозволяють застосовувати різні стилі в залежності від характеристик пристрою (наприклад, розміру екрану, орієнтації). Вони використовуються в CSS через правило @media."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад медіазапиту для адаптивного дизайну:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "/* Стилі для мобільних пристроїв */\n@media (max-width: 768px) {\n  body {\n    background-color: lightblue;\n  }\n}\n\n/* Стилі для десктопів */\n@media (min-width: 769px) {\n  body {\n    background-color: lightgreen;\n  }\n}"
-      }
-    ]
-  },
-  {
-    "question": "11. Як можна приховати елемент за допомогою CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Щоб приховати елемент за допомогою CSS, можна використовувати:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "display: none;",
-                "code": true
-              },
-              {
-                "text": " — видаляє елемент з потоку документа. Він не займає місця на сторінці і з ним не можна взаємодіяти."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "visibility: hidden;",
-                "code": true
-              },
-              {
-                "text": " — елемент стає невидимим, але зберігає своє місце на сторінці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "opacity: 0;",
-                "code": true
-              },
-              {
-                "text": " — робить елемент прозорим, але він залишається видимим і займає місце на сторінці."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "12. Як можна зробити лого посередині екрана?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Щоб розмістити лого посередині екрана, можна використати такі способи:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Flexbox:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   body,\n   html {\n     height: 100%;\n     margin: 0;\n     display: flex;\n     justify-content: center;\n     align-items: center;\n   }\n\n   .logo {\n     /* стилі лого */\n   }"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Grid:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   body,\n   html {\n     height: 100%;\n     margin: 0;\n     display: grid;\n     place-items: center;\n   }\n\n   .logo {\n     /* стилі лого */\n   }"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Absolute позиціювання:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   body,\n   html {\n     height: 100%;\n     margin: 0;\n     position: relative;\n   }\n\n   .logo {\n     position: absolute;\n     top: 50%;\n     left: 50%;\n     transform: translate(-50%, -50%);\n   }"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "13. Як розмістити хрестик для закриття справа зверху елемента?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Щоб розмістити хрестик для закриття в правому верхньому куті елемента, можна використати абсолютне позиціювання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".container {\n  position: relative; /* щоб хрестик позиціонувався відносно контейнера */\n}\n\n.close-btn {\n  position: absolute;\n  top: 10px; /* відстань від верхнього краю */\n  right: 10px; /* відстань від правого краю */\n  cursor: pointer; /* щоб курсор змінювався при наведенні */\n}"
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"container\">\n  <div class=\"close-btn\">&times;</div>\n  <!-- інший контент -->\n</div>"
-      }
-    ]
-  },
-  {
-    "question": "14. Як зробити останній елемент списку червоним, незалежно від довжини списку без JS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб зробити останній елемент списку червоним без JavaScript, можна використати псевдоклас "
-              },
-              {
-                "text": ":last-child:",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це правило зробить останній елемент у будь-якому списку (незалежно від його довжини) червоним."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "  ul li:last-child {\n    color: red;\n  }"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це правило зробить останній елемент у будь-якому списку (незалежно від його довжини) червоним."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "15. Які є можливості задати колір?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "У CSS є кілька способів задати колір:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ім’я кольору:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   color: red;"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Шістнадцятковий код:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   color: #ff0000; /* червоний */"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "RGB (Red, Green, Blue):"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   color: rgb(255, 0, 0); /* червоний */"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "RGBA (Red, Green, Blue, Alpha):"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   color: rgba(255, 0, 0, 0.5); /* червоний з прозорістю */"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HSL (Hue, Saturation, Lightness):"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   color: hsl(0, 100%, 50%); /* червоний */"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HSLA (Hue, Saturation, Lightness, Alpha):"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   color: hsla(0, 100%, 50%, 0.5); /* червоний з прозорістю */"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ключові слова прозорості:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   color: transparent; /* прозорий */"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Ці способи дозволяють вибирати колір за різними параметрами: від прямого опису кольору до використання прозорості або відтінків."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "16. Що таке z-index? Чи кожен елемент його має?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": " — це властивість CSS, яка визначає порядок накладання елементів по осі Z (глибина, перетин елементів). Елементи з більшим "
-          },
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": " накладаються поверх елементів з меншим значенням."
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Особливості:",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Тільки для позиційованих елементів: "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": " працює, якщо елемент має "
-              },
-              {
-                "text": "position",
-                "code": true
-              },
-              {
-                "text": ": "
-              },
-              {
-                "text": "relative",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "absolute",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "fixed",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "sticky",
-                "code": true
-              },
-              {
-                "text": ". Без цього "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": " ігнорується."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Значення за замовчуванням: Якщо "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": " не задано, значення за замовчуванням — "
-              },
-              {
-                "text": "auto",
-                "code": true
-              },
-              {
-                "text": ". У такому випадку порядок накладання визначається порядком у DOM."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Може бути від’ємним: Елементи з від’ємним "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": " можуть накладатися позаду батьківських елементів."
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Приклад:"
-                      },
-                      {
-                        "type": "code",
-                        "language": "css",
-                        "content": "  .div1 {\n    position: relative;\n    z-index: 10; /* цей елемент буде поверх */\n  }\n\n  .div2 {\n    position: relative;\n    z-index: 5; /* цей елемент буде під div1 */\n  }"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "17. Які переваги і недоліки використання CSS-препроцесорів?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Переваги CSS-препроцесорів:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Змінні:",
-                "bold": true
-              },
-              {
-                "text": " Легко створювати глобальні змінні для кольорів, шрифтів, розмірів."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   $primary-color: #3498db;\n\n   body {\n     color: $primary-color;\n   }"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вкладеність:",
-                "bold": true
-              },
-              {
-                "text": " Зручний запис стилів для вкладених елементів."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   nav {\n     ul {\n       li {\n         a {\n           color: #000;\n         }\n       }\n     }\n   }"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Міксіни:",
-                "bold": true
-              },
-              {
-                "text": " Повторно використовувані блоки коду."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   @mixin flex-center {\n     display: flex;\n     justify-content: center;\n     align-items: center;\n   }\n\n   div {\n     @include flex-center;\n   }"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Функції:",
-                "bold": true
-              },
-              {
-                "text": " Обчислення прямо в стилях."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "   width: calc(100% - 50px);"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Управління кодом:",
-                "bold": true
-              },
-              {
-                "text": " Імпорт окремих файлів ("
-              },
-              {
-                "text": "@import",
-                "code": true
-              },
-              {
-                "text": "), що полегшує підтримку великого проекту."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Недоліки CSS-препроцесорів:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Складність налаштування:",
-                "bold": true
-              },
-              {
-                "text": " Потрібно встановлювати додаткові інструменти (наприклад, компілятор для SCSS або LESS)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Продуктивність:",
-                "bold": true
-              },
-              {
-                "text": " Велика кількість вкладеностей або міксінів може ускладнити генерований CSS і вплинути на швидкість."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Залежність:",
-                "bold": true
-              },
-              {
-                "text": " Знання синтаксису препроцесора необов'язково підтримується усіма розробниками в команді."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дебагінг:",
-                "bold": true
-              },
-              {
-                "text": " Згенерований CSS може бути складніше дебажити, якщо немає source maps."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використання залежить від розміру проекту та необхідності складних стилів. Для великих проектів переваги переважують недоліки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "18. Для чого існують різні рівні заголовків, якщо розмір можна встановити стилями?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Рівні заголовків ("
-          },
-          {
-            "text": "<h1> – <h6>",
-            "code": true
-          },
-          {
-            "text": ") мають інше призначення, окрім визначення розміру. Їхня основна функція — структуризація контенту для семантики та доступності:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантика:",
-                "bold": true
-              },
-              {
-                "text": " Заголовки формують ієрархію документа. Наприклад:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<h1>",
-            "code": true
-          },
-          {
-            "text": " — головна тема сторінки. "
-          },
-          {
-            "text": "<h2>",
-            "code": true
-          },
-          {
-            "text": " — підрозділ теми "
-          },
-          {
-            "text": "<h1>",
-            "code": true
-          },
-          {
-            "text": ". "
-          },
-          {
-            "text": "<h3>",
-            "code": true
-          },
-          {
-            "text": " — підрозділ "
-          },
-          {
-            "text": "<h2>",
-            "code": true
-          },
-          {
-            "text": ", і так далі."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO:",
-                "bold": true
-              },
-              {
-                "text": " Пошукові системи (Google, Bing) використовують заголовки для розуміння структури і змісту сторінки. Коректна ієрархія заголовків підвищує релевантність сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність:",
-                "bold": true
-              },
-              {
-                "text": " Екранні читачі для людей із порушеннями зору використовують заголовки для навігації по сторінці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стандарти:",
-                "bold": true
-              },
-              {
-                "text": " Використання заголовків за призначенням робить код зрозумілим для інших розробників."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Розмір заголовків можна стилізувати за допомогою CSS, але правильне використання тегів забезпечує краще розуміння і роботу сторінки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "19. Які є варіанти позиціонування елемента на сторінці?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "У CSS є кілька варіантів позиціонування елементів:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "static",
-                "code": true
-              },
-              {
-                "text": " (за замовчуванням): Елемент розташовується в потоці документа відповідно до порядку в HTML. Немає можливості змінювати його положення через властивості top, right, bottom, left."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "relative",
-                "code": true
-              },
-              {
-                "text": ": Елемент залишається в потоці документа, але його положення можна змінити відносно початкової позиції за допомогою top, right, bottom, left."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "absolute",
-                "code": true
-              },
-              {
-                "text": ": Елемент вилучається з потоку і позиціонується відносно найближчого батьківського елемента з позиціюванням (relative, absolute, fixed). Якщо такого немає, то відносно всього документа."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "fixed",
-                "code": true
-              },
-              {
-                "text": ": Елемент вилучається з потоку і закріплюється відносно вікна браузера. Його положення не змінюється при прокручуванні сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "sticky",
-                "code": true
-              },
-              {
-                "text": ": Комбінація relative і fixed. Елемент позиціонується відносно потоку документа, поки не досягне заданого порогу (top, bottom тощо), після чого \"прилипає\" до цього порогу при прокручуванні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "inherit",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "initial",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "unset",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "inherit — наслідує значення від батьківського елемента."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "initial — скидає до значення за замовчуванням (static)."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "unset — застосовує inherit або initial залежно від контексту."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Кожен варіант використовується залежно від завдання: від базового розташування до складного позиціонування в макетах."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "20. Які бувають види display? Який використовуєте найчастіше? У чому особливість inline-block?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні види display в CSS:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`block`",
-            "bold": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент займає всю ширину батьківського контейнера."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Починається з нового рядка."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна задавати ширину, висоту, внутрішні/зовнішні відступи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Приклад: "
-              },
-              {
-                "text": "<div>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<p>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`inline`",
-            "bold": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент розташовується в одному рядку з іншими елементами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Неможливо задавати ширину та висоту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відступи (margin/padding) впливають лише на внутрішній простір."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Приклад: "
-              },
-              {
-                "text": "<span>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<a>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`inline-block`",
-            "bold": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поєднує особливості block і inline."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент розташовується в рядку, але дозволяє задавати ширину, висоту, відступи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зручний для створення кнопок, тегів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`flex`",
-            "bold": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відображає елемент як контейнер для гнучкого компонування дочірніх елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для вирівнювання та розподілу простору між елементами."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`grid`",
-            "bold": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Задає контейнер для компонування в двовимірній сітці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зручний для складних макетів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`none`",
-            "bold": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент не відображається на сторінці."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`inline-flex` / `inline-grid`",
-            "bold": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Аналогічні flex і grid, але зберігають властивості inline."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`table` / `table-row` / `table-cell`",
-            "bold": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елементи імітують поведінку таблиць HTML."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Найчастіше використовується:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "block, inline-block, flex, і grid — залежно від завдань."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "inline-block популярний для створення кнопок або елементів меню, які потрібно розташувати в рядок, але контролювати їх розміри."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Особливість inline-block:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елементи розташовуються в рядок, як inline, але поводяться як block, дозволяючи задавати ширину, висоту, та всі відступи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Проблема: між елементами може з’явитися проміжок (через пробіли в HTML)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Виправляється:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Видаленням пробілів у коді."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Встановленням font-size: 0 для батьківського контейнера."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "21. Що таке CSS-правило?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "CSS-правило складається з селектора та блоку декларацій. Селектор визначає, до яких елементів на сторінці застосовуються стилі, а блок декларацій містить властивості та їх значення, що визначають вигляд цих елементів. Наприклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "p {\n  color: red;\n  font-size: 16px;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Тут "
-          },
-          {
-            "text": "p",
-            "code": true
-          },
-          {
-            "text": " — селектор (вибирає всі абзаци), а в блоці декларацій вказано, що текст буде червоним і розмір шрифту 16px."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "22. Варіанти додавання CSS стилів на сторінку?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Inline CSS:",
-                "bold": true
-              },
-              {
-                "text": " Стилі додаються безпосередньо до HTML елементів через атрибут "
-              },
-              {
-                "text": "style",
-                "code": true
-              },
-              {
-                "text": "."
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<p style=\"color: red; font-size: 16px;\">Text</p>"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Internal CSS:",
-                "bold": true
-              },
-              {
-                "text": " Стилі додаються в "
-              },
-              {
-                "text": "<style>",
-                "code": true
-              },
-              {
-                "text": " тег в межах "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " секції HTML документа."
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<style>\n  p {\n    color: red;\n    font-size: 16px;\n  }\n</style>"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "External CSS:",
-                "bold": true
-              },
-              {
-                "text": " Стилі прописуються в окремому CSS файлі, який підключається до HTML через тег "
-              },
-              {
-                "text": "<link>",
-                "code": true
-              },
-              {
-                "text": "."
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<link rel=\"stylesheet\" href=\"styles.css\" />"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Ці варіанти відрізняються за пріоритетом і зручністю для масштабування проектів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "23. Типи позиціонування у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "static:",
-                "bold": true
-              },
-              {
-                "text": " За замовчуванням для всіх елементів. Елементи розташовуються в нормальному потоці документа (тобто, згідно з їх порядком у HTML)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "relative:",
-                "bold": true
-              },
-              {
-                "text": " Елемент розташовується відносно його початкового положення в потоці. Можна використовувати властивості "
-              },
-              {
-                "text": "top",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "right",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "bottom",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "left",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "absolute:",
-                "bold": true
-              },
-              {
-                "text": " Елемент позиціонується відносно найближчого батьківського елемента з позиціонуванням (не "
-              },
-              {
-                "text": "static",
-                "code": true
-              },
-              {
-                "text": "). Якщо такого немає, то відносно документа."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "fixed:",
-                "bold": true
-              },
-              {
-                "text": " Елемент позиціонується відносно вікна браузера, тобто він залишатиметься на тому ж місці при прокручуванні сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "sticky:",
-                "bold": true
-              },
-              {
-                "text": " Елемент поводиться як relative до певного моменту, після чого стає fixed, коли прокручують сторінку до заданого порогу."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "24. Блокова модель CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Блокова модель CSS (Box Model) описує, як елементи розташовуються на веб-сторінці та як обчислюються їх розміри. Вона включає такі компоненти:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Content (Контент):",
-                "bold": true
-              },
-              {
-                "text": " Це основна частина елемента, де міститься текст або інші медіа. Розміри контенту визначаються властивостями "
-              },
-              {
-                "text": "width",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "height",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Padding (Відступи):",
-                "bold": true
-              },
-              {
-                "text": " Простір між контентом і межами елемента (border). Відступи додаються всередині елемента. Властивості: "
-              },
-              {
-                "text": "padding-top",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "padding-right",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "padding-bottom",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "padding-left",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Border (Межа):",
-                "bold": true
-              },
-              {
-                "text": " Лінія, яка оточує елемент. Може мати товщину, стиль та колір. Властивості: "
-              },
-              {
-                "text": "border-width",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "border-style",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "border-color",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Margin (Зовнішній відступ):",
-                "bold": true
-              },
-              {
-                "text": " Простір між елементом і його сусідніми елементами. Відступи додаються зовні елемента. Властивості: "
-              },
-              {
-                "text": "margin-top",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "margin-right",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "margin-bottom",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "margin-left",
-                "code": true
-              },
-              {
-                "text": "."
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Коли вказуються розміри елемента через "
-                      },
-                      {
-                        "text": "width",
-                        "code": true
-                      },
-                      {
-                        "text": " і "
-                      },
-                      {
-                        "text": "height",
-                        "code": true
-                      },
-                      {
-                        "text": ", вони зазвичай враховують тільки "
-                      },
-                      {
-                        "text": "content",
-                        "code": true
-                      },
-                      {
-                        "text": ", але при додаванні "
-                      },
-                      {
-                        "text": "padding",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "border",
-                        "code": true
-                      },
-                      {
-                        "text": " і "
-                      },
-                      {
-                        "text": "margin",
-                        "code": true
-                      },
-                      {
-                        "text": ", розміри елемента змінюються."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Важливо знати, що властивість "
-                      },
-                      {
-                        "text": "box-sizing",
-                        "code": true
-                      },
-                      {
-                        "text": " дозволяє визначати, як враховуються ці величини при обчисленні розмірів елемента:"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "content-box",
-                        "code": true
-                      },
-                      {
-                        "text": " (за замовчуванням): розміри елемента — це тільки контент."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "border-box",
-                        "code": true
-                      },
-                      {
-                        "text": ": розміри елемента враховують також "
-                      },
-                      {
-                        "text": "padding",
-                        "code": true
-                      },
-                      {
-                        "text": " та "
-                      },
-                      {
-                        "text": "border",
-                        "code": true
-                      },
-                      {
-                        "text": "."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "25. Що таке селектор? І які селектори є?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Селектор",
-            "bold": true
-          },
-          {
-            "text": " у CSS — це частина правила, яка визначає, до яких елементів на сторінці застосовуються стилі. Селектори дозволяють вибирати HTML елементи для застосування стилів."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні типи селекторів:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Типовий селектор (Type selector):",
-                "bold": true
-              },
-              {
-                "text": " Вибирає елементи за їх тегом."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "p {\n  color: red;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Класовий селектор (Class selector):",
-                "bold": true
-              },
-              {
-                "text": " Вибирає елементи за класом, починається з крапки."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".my-class {\n  color: blue;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ідентифікатор (ID selector):",
-                "bold": true
-              },
-              {
-                "text": " Вибирає елементи за ідентифікатором, починається з решітки."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "#my-id {\n  color: green;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Атрибутний селектор (Attribute selector):",
-                "bold": true
-              },
-              {
-                "text": " Вибирає елементи за значенням їх атрибутів."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "input[type='text'] {\n  border: 1px solid black;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Псевдоклас (Pseudo-class selector):",
-                "bold": true
-              },
-              {
-                "text": " Вибирає елементи, що знаходяться в певному стані."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "a:hover {\n  color: red;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Псевдоелемент (Pseudo-element selector):",
-                "bold": true
-              },
-              {
-                "text": " Вибирає частини елементів, наприклад, перший рядок або першу літеру."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "p::first-letter {\n  font-size: 2em;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Комбінатори (Combinators):",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "_Descendant_",
-            "bold": true
-          },
-          {
-            "text": " (потомок): Вибирає елементи, які є нащадками іншого елемента."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "div p {\n  color: purple;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "_Child_",
-            "bold": true
-          },
-          {
-            "text": " (прямий нащадок): Вибирає елементи, що є прямими дітьми іншого елемента."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "div > p {\n  color: yellow;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "_Adjacent sibling_",
-            "bold": true
-          },
-          {
-            "text": " (сусід): Вибирає елемент, який йде безпосередньо після іншого."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "h1 + p {\n  margin-top: 0;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "_General sibling_",
-            "bold": true
-          },
-          {
-            "text": " (загальний сусід): Вибирає елементи, які є сусідами певного елемента."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "h1 ~ p {\n  color: orange;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це основні типи селекторів, що використовуються для вибору та стилізації елементів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "26. Різниця між Reset.css та Normalize.css?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Reset.css",
-            "bold": true
-          },
-          {
-            "text": " і "
-          },
-          {
-            "text": "Normalize.css",
-            "bold": true
-          },
-          {
-            "text": " — це два різні підходи до управління стилями за замовчуванням у браузерах, але з різними цілями:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Reset.css:",
-                "bold": true
-              },
-              {
-                "text": "Мета:",
-                "bold": true
-              },
-              {
-                "text": " Видалити всі стилі браузера (включаючи відступи, поля, шрифти тощо), щоб почати з \"чистого аркуша\"."
-              },
-              {
-                "text": "Результат:",
-                "bold": true
-              },
-              {
-                "text": " Все, що за замовчуванням задається браузером, скидається, і елементи стають однаковими в усіх браузерах. Це часто призводить до того, що потрібно вручну додавати стилі для базових елементів."
-              },
-              {
-                "text": "Приклад:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "* {\n  margin: 0;\n  padding: 0;\n  border: 0;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Normalize.css:",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мета:",
-            "bold": true
-          },
-          {
-            "text": " Зробити стилі браузерів більш однаковими, але не скидаючи їх повністю. Підтримує стандартні стилі для елементів, щоб забезпечити однаковий вигляд у всіх браузерах."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Результат:",
-            "bold": true
-          },
-          {
-            "text": " Зберігаються деякі стилі за замовчуванням, але вони нормалізуються для забезпечення консистентності між різними браузерами (наприклад, вирівнювання шрифтів, списки, таблиці)."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "h1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основна різниця:",
-            "bold": true
-          },
-          {
-            "text": " Reset.css скидає всі стилі браузера до мінімуму, тоді як Normalize.css підтримує базові стилі, але нормалізує їх для більшої узгодженості між браузерами."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "27. Різниця між display: none та visibility: hidden?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "display: none",
-            "code": true
-          },
-          {
-            "text": " і "
-          },
-          {
-            "text": "visibility: hidden",
-            "code": true
-          },
-          {
-            "text": " приховують елементи, але працюють по-різному:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "display: none",
-            "code": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент зникає повністю зі сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Він не займає місця в макеті."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інші елементи зміщуються так, ніби його не існувало."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Події (наприклад, кліки) не спрацьовують на ньому."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для повного приховування елементів."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".hidden {\n  display: none;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "visibility: hidden",
-            "code": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент залишається на сторінці, але стає невидимим."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Він продовжує займати місце в макеті."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інші елементи не зміщуються."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Події (наприклад, кліки) не спрацьовують, хоча елемент все ще є в DOM."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".hidden {\n  visibility: hidden;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Різниця:",
-            "bold": true
-          },
-          {
-            "text": " "
-          },
-          {
-            "text": "display: none",
-            "code": true
-          },
-          {
-            "text": " прибирає елемент повністю, а "
-          },
-          {
-            "text": "visibility: hidden",
-            "code": true
-          },
-          {
-            "text": " залишає його місце, але робить невидимим."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "28. Різниця між блоковим та інлайновим елементами?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Блокові (block) та інлайнові (inline) елементи",
-            "bold": true
-          },
-          {
-            "text": " відрізняються способом відображення та впливом на структуру сторінки."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Блокові елементи (display: block)"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Починаються з нового рядка."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Автоматично займають всю доступну ширину (по горизонталі)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можуть містити як інші блокові, так і інлайнові елементи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримують width, height, margin, padding."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклади:",
-            "bold": true
-          },
-          {
-            "text": " "
-          },
-          {
-            "text": "<div>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<p>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<h1>-<h6>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<section>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<article>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<form>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<header>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<footer>",
-            "code": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "div {\n  display: block;\n  width: 100%;\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Інлайнові елементи (display: inline)"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не починаються з нового рядка, розташовуються \"в потоці\" тексту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ширина та висота залежать від вмісту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "width і height ігноруються (не можна змінювати вручну)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "margin та padding працюють тільки по горизонталі."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклади:",
-            "bold": true
-          },
-          {
-            "text": " "
-          },
-          {
-            "text": "<span>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<strong>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<em>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<b>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<i>",
-            "code": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "span {\n  display: inline;\n  color: red;\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Різниця"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Блокові елементи займають всю ширину і формують окремий рядок."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інлайнові елементи залишаються в потоці тексту та займають рівно стільки місця, скільки потрібно їх вмісту."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "29. Різниця між класом та ідентифікатором у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Клас ("
-          },
-          {
-            "text": "class",
-            "code": true
-          },
-          {
-            "text": ") vs Ідентифікатор ("
-          },
-          {
-            "text": "id",
-            "code": true
-          },
-          {
-            "text": ") у CSS"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Параметр"
-            }
-          ],
-          [
-            {
-              "text": "Клас ("
-            },
-            {
-              "text": "class",
-              "code": true
-            },
-            {
-              "text": ")"
-            }
-          ],
-          [
-            {
-              "text": "Ідентифікатор ("
-            },
-            {
-              "text": "id",
-              "code": true
-            },
-            {
-              "text": ")"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "Синтаксис"
-              }
-            ],
-            [
-              {
-                "text": "Починається з "
-              },
-              {
-                "text": ".",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Починається з "
-              },
-              {
-                "text": "#",
-                "code": true
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Призначення"
-              }
-            ],
-            [
-              {
-                "text": "Використовується для групи елементів"
-              }
-            ],
-            [
-              {
-                "text": "Призначається одному унікальному елементу"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Повторне використання"
-              }
-            ],
-            [
-              {
-                "text": "Може застосовуватися до кількох елементів"
-              }
-            ],
-            [
-              {
-                "text": "Повинен бути унікальним на сторінці"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Пріоритет у CSS"
-              }
-            ],
-            [
-              {
-                "text": "Менший (0,0,1,0)"
-              }
-            ],
-            [
-              {
-                "text": "Вищий (0,1,0,0)"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "HTML приклад"
-              }
-            ],
-            [
-              {
-                "text": "<div class=\"box\"></div>",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "<div id=\"unique-box\"></div>",
-                "code": true
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "CSS приклад"
-              }
-            ],
-            [
-              {
-                "text": ".box { color: red; }",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "#unique-box { color: blue; }",
-                "code": true
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Різниця"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Класи використовуються для стилізації кількох елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ID застосовується до одного унікального елемента (але можна порушити це правило)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ID має вищий пріоритет, тому його важко перевизначити."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Класи краще використовувати для стилізації, ID — для JavaScript або унікальної ідентифікації."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "30. Що таке CSS спрайт? І для чого він використовується?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "CSS спрайт — це техніка, де кілька зображень об'єднуються в одне велике зображення, а потім через CSS задаються позиції фону для відображення різних частин цього зображення."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовується для зменшення кількості HTTP-запитів, що підвищує швидкість завантаження сторінки. Зазвичай застосовується для іконок, кнопок або інших маленьких зображень, що використовуються на сайті."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Ось приклад використання CSS спрайту:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створення спрайта:",
-                "bold": true
-              },
-              {
-                "text": " У вас є декілька маленьких зображень (наприклад, іконки), які ви об'єднуєте в один великий файл sprite.png."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS для використання спрайта:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".icon {\n  width: 50px;\n  height: 50px;\n  background-image: url('sprite.png');\n  display: inline-block;\n}\n\n.icon-facebook {\n  background-position: 0 0; /* Перша іконка в спрайті */\n}\n\n.icon-twitter {\n  background-position: -50px 0; /* Друга іконка в спрайті */\n}\n\n.icon-linkedin {\n  background-position: -100px 0; /* Третя іконка в спрайті */\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML для іконок:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<div class=\"icon icon-facebook\"></div>\n<div class=\"icon icon-twitter\"></div>\n<div class=\"icon icon-linkedin\"></div>"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "У цьому прикладі всі іконки завантажуються з одного файлу sprite.png, і за допомогою CSS background-position визначається, яка частина спрайту відображатиметься для кожної іконки."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Цей підхід вже не використовуеться в CSS, але для себе знати треба. 📝"
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "31. Що таке вендорні префікси? І навіщо вони використовуються?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Вендорні префікси — це спеціальні префікси, які додаються до CSS властивостей для забезпечення підтримки нових або експериментальних функцій у різних браузерах. Вони використовуються, коли властивість або функція ще не є стандартом або коли браузери реалізують їх по-своєму."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад вендорних префіксів:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".element {\n  -webkit-transform: rotate(\n    45deg\n  ); /* для браузерів на WebKit, таких як Chrome, Safari */\n  -moz-transform: rotate(45deg); /* для Firefox */\n  -ms-transform: rotate(45deg); /* для Internet Explorer */\n  transform: rotate(45deg); /* стандартна властивість */\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Вендорні префікси використовуються для забезпечення сумісності з різними браузерами, поки властивість не стане частиною офіційного стандарту CSS. Вони допомагають тестувати нові функції та забезпечують їх роботу на більшій кількості браузерів, поки всі вони не впровадять підтримку стандартних властивостей."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "32. Що таке псевдоелементи? І навіщо вони використовуються?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Псевдоелементи — це конструкції в CSS, які дозволяють стилізувати частини елементів, які не мають власного HTML представлення. Вони дозволяють додавати стилі до таких частин елементів, як перший рядок тексту, вміст перед або після елемента, або створення декоративних елементів без необхідності змінювати HTML."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні псевдоелементи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "::before",
-                "code": true
-              },
-              {
-                "text": " — додає вміст перед елементом."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "::after",
-                "code": true
-              },
-              {
-                "text": " — додає вміст після елемента."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "::first-letter",
-                "code": true
-              },
-              {
-                "text": " — стилізує першу букву тексту в елементі."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "::first-line",
-                "code": true
-              },
-              {
-                "text": " — стилізує перший рядок тексту в елементі."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад використання:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "p::before {\n  content: '🔹 ';\n}\n\np::after {\n  content: ' 🔸';\n}\n\np::first-letter {\n  font-size: 2em;\n  color: red;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Застосування:",
-            "bold": true
-          },
-          {
-            "text": " Псевдоелементи використовуються для:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додавання декоративних елементів без зміни HTML."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створення візуальних ефектів (наприклад, стилізація першої літери або першого рядка)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додавання контенту перед або після елемента, наприклад, іконок або текстових маркерів, без необхідності додавати додаткові теги в HTML."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "33. Що таке схлопування меж (margin collapsing)?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Схлопування меж (margin collapsing) — це явище в CSS, коли вертикальні відступи (margins) між сусідніми блоками або елементами \"зливаються\" в один, замість того, щоб відображатися окремо."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це зазвичай відбувається в таких ситуаціях:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коли два сусідні блоки мають вертикальні відступи (margins)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коли один блок має відступ, а наступний блок не має відступу або його margin значення нульове."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "У результаті, між елементами відображається відстань, що дорівнює найбільшому з цих відступів."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div style=\"margin-bottom: 20px;\">Block 1</div>\n<div style=\"margin-top: 10px;\">Block 2</div>"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "У цьому випадку схлопування меж призведе до того, що відстань між блоками буде 20px, а не 30px (як можна було б очікувати при додаванні 20px + 10px)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Чому це відбувається?",
-                "bold": true
-              },
-              {
-                "text": " Схлопування меж застосовується, щоб уникнути зайвих відступів і зробити верстку більш зручною для використання, оскільки зазвичай не має сенсу мати два відступи, що діють на ту саму частину простору."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Як уникнути схлопування:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати "
-              },
-              {
-                "text": "padding",
-                "code": true
-              },
-              {
-                "text": ", а не "
-              },
-              {
-                "text": "margin",
-                "code": true
-              },
-              {
-                "text": ", якщо потрібно уникнути схлопування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Встановити "
-              },
-              {
-                "text": "overflow",
-                "code": true
-              },
-              {
-                "text": " на елементі."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати фонові або градієнтні елементи, щоб блокувати схлопування."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "34. Що таке z-index? Як формується контекст накладання?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": " — це CSS властивість, яка визначає порядок накладання елементів на сторінці. Вона використовується для визначення, який елемент має бути поверх іншого, коли елементи перекривають один одного. Вищий "
-          },
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": " означає, що елемент буде накладатися поверх елементів з нижчим значенням "
-          },
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Як працює "
-          },
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Значення "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": " може бути цілим числом (наприклад, 1, 10, -5)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "За замовчуванням, елементи з однаковим "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": " або без нього накладаються один на одного в порядку їх появи в HTML."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Чим більше значення "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": ", тим вище елемент буде на сторінці."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "div {\n  position: absolute;\n}\n\n.div1 {\n  z-index: 1;\n}\n\n.div2 {\n  z-index: 2;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "У цьому прикладі "
-          },
-          {
-            "text": ".div2",
-            "code": true
-          },
-          {
-            "text": " буде накладатися поверх "
-          },
-          {
-            "text": ".div1",
-            "code": true
-          },
-          {
-            "text": ", оскільки у неї вищий "
-          },
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Контекст накладання:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Контекст накладання — це область, в межах якої визначаються всі значення z-index для елементів. Це стосується елементів з властивістю position (не static), або коли застосовуються інші властивості, які створюють новий контекст накладання."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Контекст накладання формується, коли:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент має властивість "
-              },
-              {
-                "text": "position",
-                "code": true
-              },
-              {
-                "text": " з одним із значень ("
-              },
-              {
-                "text": "relative",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "absolute",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "fixed",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "sticky",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": " встановлено на значення, відмінне від auto."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Властивість opacity менша за 1."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Властивість "
-              },
-              {
-                "text": "transform",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "filter",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "perspective",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "clip-path",
-                "code": true
-              },
-              {
-                "text": " та інші створюють новий контекст."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Як формується контекст накладання:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вищезгадані умови (наприклад, "
-              },
-              {
-                "text": "position: relative",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ті елементи, які знаходяться в цьому контексті, будуть порівнювати свої z-index тільки в межах цього контексту, а не з іншими елементами на сторінці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Якщо елемент знаходиться в різних контекстах накладання, то порівнювати z-index можна лише в межах кожного з контекстів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад контексту накладання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"parent\" style=\"position: relative; z-index: 10;\">\n  <div class=\"child\" style=\"position: absolute; z-index: 5;\">Child 1</div>\n  <div class=\"child\" style=\"position: absolute; z-index: 15;\">Child 2</div>\n</div>\n\n<div class=\"sibling\" style=\"position: absolute; z-index: 20;\">Sibling</div>"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "У цьому прикладі:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ".child 1",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": ".child 2",
-                "code": true
-              },
-              {
-                "text": " знаходяться в одному контексті накладання всередині "
-              },
-              {
-                "text": ".parent",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ".sibling",
-                "code": true
-              },
-              {
-                "text": " має інший контекст накладання і з'явиться поверх обох "
-              },
-              {
-                "text": ".child",
-                "code": true
-              },
-              {
-                "text": ", оскільки має більший "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": " у своєму контексті."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "35. Порядок накладання елементів у CSS (Stacking Order)?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Порядок накладання елементів у CSS (Stacking Order) визначається порядком, у якому елементи накладаються один на одного на сторінці. Це важливо, коли елементи з різними властивостями (наприклад, "
-          },
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": ") можуть перекривати один одного."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Порядок накладання (Stacking Order):"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елементи за замовчуванням",
-            "bold": true
-          },
-          {
-            "text": " (статичні елементи, без позиціонування та без "
-          },
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": "):"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елементи без позиціонування ("
-              },
-              {
-                "text": "position: static",
-                "code": true
-              },
-              {
-                "text": " або без властивості "
-              },
-              {
-                "text": "position",
-                "code": true
-              },
-              {
-                "text": ") розташовуються один за одним у порядку їхнього розташування в HTML."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елементи з позиціонуванням",
-            "bold": true
-          },
-          {
-            "text": " ("
-          },
-          {
-            "text": "relative",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "absolute",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "fixed",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "sticky",
-            "code": true
-          },
-          {
-            "text": "):"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Якщо елемент має будь-яке інше значення "
-              },
-              {
-                "text": "position",
-                "code": true
-              },
-              {
-                "text": " (крім "
-              },
-              {
-                "text": "static",
-                "code": true
-              },
-              {
-                "text": "), він створює новий контекст накладання. У межах цього контексту елементи з більшим значенням "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": " будуть накладатися поверх елементів з меншим значенням."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елементи з z-index",
-            "bold": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елементи з більш високим "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": " будуть розташовуватися поверх елементів з нижчим значенням "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": " (якщо елементи знаходяться в одному контексті накладання)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Невидимі елементи",
-            "bold": true
-          },
-          {
-            "text": " (з "
-          },
-          {
-            "text": "opacity",
-            "code": true
-          },
-          {
-            "text": " менше 1 або з "
-          },
-          {
-            "text": "visibility: hidden",
-            "code": true
-          },
-          {
-            "text": "):"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елементи, які мають властивість "
-              },
-              {
-                "text": "opacity",
-                "code": true
-              },
-              {
-                "text": " менше 1 або "
-              },
-              {
-                "text": "visibility: hidden",
-                "code": true
-              },
-              {
-                "text": ", можуть бути розташовані поверх інших елементів, але їх все одно не видно."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елементи з властивістю",
-            "bold": true
-          },
-          {
-            "text": " "
-          },
-          {
-            "text": "transform",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "filter",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "perspective",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "clip-path",
-            "code": true
-          },
-          {
-            "text": " та іншими, що створюють новий контекст накладання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коли елемент має одну з цих властивостей, це створює новий контекст накладання, і елементи в цьому контексті будуть накладатися згідно з їхніми значеннями "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": ", незалежно від того, де вони знаходяться на сторінці."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елементи з фонового вмісту",
-            "bold": true
-          },
-          {
-            "text": " ("
-          },
-          {
-            "text": "backgrounds",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "borders",
-            "code": true
-          },
-          {
-            "text": ", etc.):"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вміст, такий як фон або бордери, не створює власного контексту накладання, але може бути важливим для визначення, як інші елементи накладаються."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Порядок накладання елементів за замовчуванням:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Блоки без позиціонування",
-                "bold": true
-              },
-              {
-                "text": " (статичні елементи)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елементи з позиціонуванням",
-                "bold": true
-              },
-              {
-                "text": " "
-              },
-              {
-                "text": "relative",
-                "code": true
-              },
-              {
-                "text": " (якщо не визначено "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елементи з позиціонуванням",
-                "bold": true
-              },
-              {
-                "text": " "
-              },
-              {
-                "text": "absolute",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "fixed",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "sticky",
-                "code": true
-              },
-              {
-                "text": " (в залежності від "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нове контексти накладання",
-                "bold": true
-              },
-              {
-                "text": " (наприклад, елементи з "
-              },
-              {
-                "text": "transform",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "opacity < 1",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "filter",
-                "code": true
-              },
-              {
-                "text": " тощо)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Простіше кажучи:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Статичні елементи не створюють контексту накладання і накладаються в порядку їхнього розташування в HTML."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елементи з позиціонуванням "
-          },
-          {
-            "text": "relative",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "absolute",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "fixed",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "sticky",
-            "code": true
-          },
-          {
-            "text": " створюють контекст накладання, де "
-          },
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": " визначає, які елементи будуть поверх інших."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елементи з новими контекстами накладання (наприклад, з "
-          },
-          {
-            "text": "transform",
-            "code": true
-          },
-          {
-            "text": " або "
-          },
-          {
-            "text": "opacity < 1",
-            "code": true
-          },
-          {
-            "text": ") накладаються поверх всіх інших елементів із меншим пріоритетом."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "36. Як за допомогою CSS визначити, чи підтримується властивість у браузері?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для того, щоб перевірити, чи підтримується властивість у браузері, в CSS безпосередньо неможливо це зробити, оскільки CSS сам по собі не має вбудованих механізмів для перевірки підтримки властивостей. Однак, є кілька способів зробити це за допомогою JavaScript та умовних конструкцій у CSS."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання JavaScript (Modernizr)",
-                "bold": true
-              },
-              {
-                "text": "Один із способів перевірити, чи підтримується CSS властивість у браузері — це використати JavaScript-бібліотеку, наприклад, Modernizr. Modernizr дозволяє перевіряти підтримку різних технологій і властивостей браузером."
-              },
-              {
-                "text": "Приклад використання Modernizr:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "javascript",
-                "content": "if (Modernizr.flexbox) {\n  console.log('Flexbox підтримується!');\n} else {\n  console.log('Flexbox не підтримується.');\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання умови @supports в CSS",
-                "bold": true
-              },
-              {
-                "text": "CSS має власну конструкцію "
-              },
-              {
-                "text": "@supports",
-                "code": true
-              },
-              {
-                "text": ", яка дозволяє перевіряти, чи підтримується певна CSS властивість або її значення в поточному браузері."
-              },
-              {
-                "text": "Приклад:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "/* Перевіряє, чи підтримується flexbox */\n@supports (display: flex) {\n  .container {\n    display: flex;\n  }\n}\n\n/* Якщо не підтримується flexbox, додається альтернативне значення */\n@supports not (display: flex) {\n  .container {\n    display: block;\n  }\n}"
-              },
-              {
-                "text": "У цьому прикладі, якщо браузер підтримує "
-              },
-              {
-                "text": "display: flex",
-                "code": true
-              },
-              {
-                "text": ", то він застосує стилі, визначені в першому блоці. Якщо ж не підтримує, застосує стилі з блоку "
-              },
-              {
-                "text": "@supports",
-                "code": true
-              },
-              {
-                "text": " not."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання префіксів для застарілих властивостей",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для старих властивостей або експериментальних властивостей браузерів часто використовуються вендорні префікси. Якщо необхідно працювати з такими властивостями, часто можна додавати ці префікси та перевіряти, чи працює код на різних браузерах."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад з вендорними префіксами:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "/* Вендорні префікси для трансформацій */\n.element {\n  -webkit-transform: rotate(45deg);\n  -moz-transform: rotate(45deg);\n  transform: rotate(45deg);\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це допоможе забезпечити сумісність з різними версіями браузерів."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Висновок"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Найбільш зручним методом перевірки підтримки властивості є використання @supports у CSS або бібліотеки Modernizr для JavaScript, яка дозволяє створити перевірки підтримки за допомогою скриптів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "37. Глобальні ключові слова у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Глобальні ключові слова в CSS — це спеціальні значення, які можна задати будь-якій CSS-властивості. Вони не змінюють саме значення властивості, а вказують, як її слід обчислювати."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Список глобальних ключових слів"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "inherit",
-                "code": true
-              },
-              {
-                "text": " – успадковує значення від батьківського елемента."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "initial",
-                "code": true
-              },
-              {
-                "text": " – скидає значення до дефолтного (згідно зі специфікацією)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "unset",
-                "code": true
-              },
-              {
-                "text": " – якщо властивість успадковується за замовчуванням (наприклад, color), діє як inherit, інакше – як initial."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "revert",
-                "code": true
-              },
-              {
-                "text": " – повертає значення до того, що визначено у стилях браузера чи користувача."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "revert-layer",
-                "code": true
-              },
-              {
-                "text": " – скидає значення до попереднього рівня каскаду (актуально для @layer)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ "
-          },
-          {
-            "text": "inherit",
-            "code": true
-          },
-          {
-            "text": " (успадкування значення)"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "p {\n  color: red;\n}\nspan {\n  color: inherit; /* отримає червоний від <p> */\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ "
-          },
-          {
-            "text": "initial",
-            "code": true
-          },
-          {
-            "text": " (повернення до стандартного значення)"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "button {\n  all: initial; /* скидає всі властивості до дефолтних */\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ "
-          },
-          {
-            "text": "unset",
-            "code": true
-          },
-          {
-            "text": " (залежно від властивості)"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "div {\n  color: unset; /* успадкує */\n  width: unset; /* повернеться до `auto` */\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ "
-          },
-          {
-            "text": "revert",
-            "code": true
-          },
-          {
-            "text": " (повернення до стандартних стилів браузера)"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "a {\n  color: green;\n}\na.special {\n  color: revert; /* поверне синій, якщо його задає браузер */\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ "
-          },
-          {
-            "text": "revert-layer",
-            "code": true
-          },
-          {
-            "text": " (актуально для @layer)"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "@layer framework {\n  button {\n    background: red;\n  }\n}\n\n@layer custom {\n  button {\n    background: blue;\n  }\n}\n\n/* revert-layer поверне червоний із framework, а не дефолтний */\nbutton {\n  background: revert-layer;\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Висновок"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "inherit",
-                "code": true
-              },
-              {
-                "text": " – для спадкування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "initial",
-                "code": true
-              },
-              {
-                "text": " – для скидання до дефолту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "unset",
-                "code": true
-              },
-              {
-                "text": " – комбінує inherit та initial."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "revert",
-                "code": true
-              },
-              {
-                "text": " – повертає значення браузера чи стилів користувача."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "revert-layer",
-                "code": true
-              },
-              {
-                "text": " – скидає значення до попереднього рівня каскаду."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "38. Що таке перерахування селекторів?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Перерахування селекторів — це використання кількох селекторів, розділених комою, для одночасного застосування стилів до різних елементів."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "selector1,\nselector2,\nselector3 {\n  property: value;\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ Стилізація кількох елементів одночасно"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "h1,\nh2,\nh3 {\n  color: red;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Усі h1, h2 і h3 стануть червоними."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ Комбінація класів і тегів"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "button,\n.btn {\n  padding: 10px;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Застосується до "
-          },
-          {
-            "text": "<button>",
-            "code": true
-          },
-          {
-            "text": " і будь-якого елемента з "
-          },
-          {
-            "text": ".btn",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ Перерахування складних селекторів"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".card .title,\n.box .header {\n  font-weight: bold;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Стилізує "
-          },
-          {
-            "text": ".title",
-            "code": true
-          },
-          {
-            "text": " всередині "
-          },
-          {
-            "text": ".card",
-            "code": true
-          },
-          {
-            "text": " і "
-          },
-          {
-            "text": ".header",
-            "code": true
-          },
-          {
-            "text": " всередині "
-          },
-          {
-            "text": ".box",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Висновок"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коми ("
-              },
-              {
-                "text": ",",
-                "code": true
-              },
-              {
-                "text": ") об'єднують селектори, застосовуючи однакові стилі."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дозволяє скорочувати код і зменшувати дублювання."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Важливо не плутати з комбінованими селекторами (наприклад, "
-              },
-              {
-                "text": ".class1 .class2",
-                "code": true
-              },
-              {
-                "text": ", де "
-              },
-              {
-                "text": ".class2",
-                "code": true
-              },
-              {
-                "text": " має бути всередині "
-              },
-              {
-                "text": ".class1",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "39. Для чого використовується ключове слово currentColor у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "currentColor",
-            "code": true
-          },
-          {
-            "text": " — це ключове слово в CSS, яке задає значення кольору ("
-          },
-          {
-            "text": "color",
-            "code": true
-          },
-          {
-            "text": ") для інших властивостей, що підтримують кольори."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Як працює"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "currentColor",
-            "code": true
-          },
-          {
-            "text": " автоматично використовує значення, встановлене у властивості "
-          },
-          {
-            "text": "color",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ Однаковий колір для тексту та рамки"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "button {\n  color: blue;\n  border: 2px solid currentColor;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Рамка кнопки буде того ж кольору, що й текст ("
-          },
-          {
-            "text": "blue",
-            "code": true
-          },
-          {
-            "text": ")."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ SVG-іконки із кольором тексту"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".icon {\n  color: red;\n  fill: currentColor;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "fill",
-            "code": true
-          },
-          {
-            "text": " у SVG прийме "
-          },
-          {
-            "text": "color",
-            "code": true
-          },
-          {
-            "text": " елемента ("
-          },
-          {
-            "text": "red",
-            "code": true
-          },
-          {
-            "text": ")."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ Прозорість зі спадкуванням кольору"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".link {\n  color: green;\n  background: linear-gradient(currentColor 0%, transparent 100%);\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Градієнт стартує від "
-          },
-          {
-            "text": "green",
-            "code": true
-          },
-          {
-            "text": ", бо це значення "
-          },
-          {
-            "text": "color",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Висновок"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовує значення "
-              },
-              {
-                "text": "color",
-                "code": true
-              },
-              {
-                "text": ", усуваючи дублювання стилів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Особливо корисно для SVG, "
-              },
-              {
-                "text": "border",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "background",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "box-shadow",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Спрощує темізацію: змінюєш "
-              },
-              {
-                "text": "color",
-                "code": true
-              },
-              {
-                "text": ", і все підлаштовується."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "40. Які псевдокласи є CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Псевдокласи в CSS"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "✅ Динамічні псевдокласи"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Псевдоклас"
-            }
-          ],
-          [
-            {
-              "text": "Опис"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": ":hover",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "При наведенні курсору."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":focus",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Коли елемент у фокусі (наприклад, "
-              },
-              {
-                "text": "input",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":active",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Під час натискання."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":visited",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Для відвіданих посилань."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":target",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Для елемента, що відповідає "
-              },
-              {
-                "text": "#anchor",
-                "code": true
-              },
-              {
-                "text": " в URL."
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "✅ Структурні псевдокласи"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Псевдоклас"
-            }
-          ],
-          [
-            {
-              "text": "Опис"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": ":first-child",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Перший дочірній елемент."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":last-child",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Останній дочірній елемент."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":nth-child(n)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Дочірній елемент за індексом "
-              },
-              {
-                "text": "n",
-                "code": true
-              },
-              {
-                "text": " (можна "
-              },
-              {
-                "text": "odd",
-                "code": true
-              },
-              {
-                "text": "/"
-              },
-              {
-                "text": "even",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":nth-last-child(n)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Те саме, але з кінця."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":only-child",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Якщо елемент єдиний у батьківському контейнері."
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "✅ Типові псевдокласи"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Псевдоклас"
-            }
-          ],
-          [
-            {
-              "text": "Опис"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": ":first-of-type",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Перший елемент певного типу."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":last-of-type",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Останній елемент певного типу."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":nth-of-type(n)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "N-ий елемент певного типу."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":nth-last-of-type(n)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "N-ий елемент певного типу з кінця."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":only-of-type",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Якщо елемент унікальний серед такого ж типу."
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "✅ Логічні псевдокласи"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Псевдоклас"
-            }
-          ],
-          [
-            {
-              "text": "Опис"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": ":not(selector)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Вибирає все, "
-              },
-              {
-                "text": "крім",
-                "bold": true
-              },
-              {
-                "text": " вказаного селектора."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":has(selector)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Вибирає елементи, що містять інший елемент ("
-              },
-              {
-                "text": "CSS4",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":where(selector)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Як "
-              },
-              {
-                "text": ":is()",
-                "code": true
-              },
-              {
-                "text": ", але без пріоритету."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":is(selector)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Спрощує складні селектори."
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "✅ Псевдокласи для форм"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Псевдоклас"
-            }
-          ],
-          [
-            {
-              "text": "Опис"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": ":checked",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Позначений чекбокс або радіокнопка."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":disabled",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Вимкнений елемент форми."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":enabled",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Активний елемент форми."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":required",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Поле "
-              },
-              {
-                "text": "input",
-                "code": true
-              },
-              {
-                "text": ", що обов’язкове."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":optional",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Поле "
-              },
-              {
-                "text": "input",
-                "code": true
-              },
-              {
-                "text": ", що не є обов’язковим."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":valid",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Поле форми з коректним значенням."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":invalid",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Поле форми з некоректним значенням."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":read-only",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Поле у режимі "
-              },
-              {
-                "text": "readonly",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": ":read-write",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Поле, що можна редагувати."
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Псевдокласи допомагають стилізувати елементи без додаткових класів або JS. Використовуйте `:is()` та `:has()` для скорочення складних селекторів у CSS4.",
-            "bold": true
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "41. Які фільтри є у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Фільтри у CSS"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Фільтри ("
-          },
-          {
-            "text": "filter",
-            "code": true
-          },
-          {
-            "text": ") дозволяють змінювати вигляд елементів, застосовуючи ефекти до їхнього рендерингу."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "🔹 Основні фільтри"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Фільтр"
-            }
-          ],
-          [
-            {
-              "text": "Опис"
-            }
-          ],
-          [
-            {
-              "text": "Приклад"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "blur(px)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Розмиття з вказаним радіусом у пікселях."
-              }
-            ],
-            [
-              {
-                "text": "filter: blur(5px);",
-                "code": true
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "brightness(%)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Змінює яскравість (100% – без змін)."
-              }
-            ],
-            [
-              {
-                "text": "filter: brightness(150%);",
-                "code": true
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "contrast(%)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Змінює контраст (100% – без змін)."
-              }
-            ],
-            [
-              {
-                "text": "filter: contrast(120%);",
-                "code": true
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "grayscale(%)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Відтінки сірого (100% – чорно-біле)."
-              }
-            ],
-            [
-              {
-                "text": "filter: grayscale(100%);",
-                "code": true
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "invert(%)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Інвертує кольори (100% – повністю інвертоване)."
-              }
-            ],
-            [
-              {
-                "text": "filter: invert(100%);",
-                "code": true
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "opacity(%)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Прозорість (0% – повністю прозоре, 100% – непрозоре)."
-              }
-            ],
-            [
-              {
-                "text": "filter: opacity(50%);",
-                "code": true
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "saturate(%)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Насиченість (100% – без змін, 0% – ч/б)."
-              }
-            ],
-            [
-              {
-                "text": "filter: saturate(200%);",
-                "code": true
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "sepia(%)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Ефект сепії (100% – повністю сепія)."
-              }
-            ],
-            [
-              {
-                "text": "filter: sepia(80%);",
-                "code": true
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "🔹 Фільтри для тіней та зміщення"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Фільтр"
-            }
-          ],
-          [
-            {
-              "text": "Опис"
-            }
-          ],
-          [
-            {
-              "text": "Приклад"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "drop-shadow(x y blur color)",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Додає тінь до зображення (аналог "
-              },
-              {
-                "text": "box-shadow",
-                "code": true
-              },
-              {
-                "text": ", але працює з прозорими PNG)."
-              }
-            ],
-            [
-              {
-                "text": "filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));",
-                "code": true
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "🔹 Комбінування фільтрів"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Фільтри можна комбінувати, вказуючи їх через пробіл:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "filter: brightness(120%) contrast(110%) blur(3px);"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Фільтри застосовуються до всіх елементів, але найчастіше – до зображень (img), відео та бекграундів."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "42. Навіщо використовується псевдоклас :invalid?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Псевдоклас "
-          },
-          {
-            "text": ":invalid",
-            "code": true
-          },
-          {
-            "text": " використовується для стилізації полів вводу ("
-          },
-          {
-            "text": "<input>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<textarea>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<select>",
-            "code": true
-          },
-          {
-            "text": "), які не відповідають вимогам валідації."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Навіщо це потрібно?"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підсвічувати некоректно заповнені поля."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращити UX, показуючи візуальний зворотний зв’язок."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додати кастомні стилі без JavaScript."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад використання"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "input:invalid {\n  border: 2px solid red;\n  background-color: #ffe6e6;\n}"
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<input type=\"email\" required placeholder=\"Введіть email\" />"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Якщо поле буде пустим або міститиме некоректний email, воно підсвітиться червоним."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "43. Розкажіть про властивість display в CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Властивість "
-          },
-          {
-            "text": "display",
-            "code": true
-          },
-          {
-            "text": " у CSS"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "display",
-            "code": true
-          },
-          {
-            "text": " визначає, як елемент відображається на сторінці та як він взаємодіє з іншими елементами."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "🔹 Основні значення"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Значення"
-            }
-          ],
-          [
-            {
-              "text": "Опис"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "none",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Елемент прихований і не займає місця в макеті."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "block",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Блочний елемент, займає всю ширину батьківського контейнера."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "inline",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Вбудований елемент, займає лише необхідну ширину."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "inline-block",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Вбудований елемент, але можна змінювати ширину/висоту."
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "🔹 Гнучкі макети"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Значення"
-            }
-          ],
-          [
-            {
-              "text": "Опис"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "flex",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Активація "
-              },
-              {
-                "text": "Flexbox",
-                "bold": true
-              },
-              {
-                "text": " для гнучкого розташування дочірніх елементів."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "grid",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Використання "
-              },
-              {
-                "text": "CSS Grid",
-                "bold": true
-              },
-              {
-                "text": " для двовимірного макету."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "inline-flex",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Flex-контейнер, але поводиться як "
-              },
-              {
-                "text": "inline",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "inline-grid",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Grid-контейнер, але поводиться як "
-              },
-              {
-                "text": "inline",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "🔹 Табличні макети"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Значення"
-            }
-          ],
-          [
-            {
-              "text": "Опис"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "table",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Елемент поводиться як таблиця."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "table-row",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Імітує рядок таблиці."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "table-cell",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Імітує комірку таблиці."
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "🔹 Інші значення"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Значення"
-            }
-          ],
-          [
-            {
-              "text": "Опис"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "list-item",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Елемент поводиться як "
-              },
-              {
-                "text": "<li>",
-                "code": true
-              },
-              {
-                "text": ", додаючи маркер списку."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "inherit",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Наслідує значення "
-              },
-              {
-                "text": "display",
-                "code": true
-              },
-              {
-                "text": " від батьківського елемента."
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "initial",
-                "code": true
-              }
-            ],
-            [
-              {
-                "text": "Встановлює значення "
-              },
-              {
-                "text": "display",
-                "code": true
-              },
-              {
-                "text": " за замовчуванням для браузера."
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`display: none` повністю прибирає елемент з потоку, на відміну від `visibility: hidden`, який просто приховує його, залишаючи місце.",
-            "bold": true
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "44. У якому випадку краще використовувати translate() замість абсолютного позиціонування?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовувати "
-          },
-          {
-            "text": "translate()",
-            "code": true
-          },
-          {
-            "text": " краще в таких випадках:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізація продуктивності",
-                "bold": true
-              },
-              {
-                "text": " – "
-              },
-              {
-                "text": "translate()",
-                "code": true
-              },
-              {
-                "text": " використовує GPU для обчислень, що робить анімації та переміщення плавнішими, ніж зміна "
-              },
-              {
-                "text": "top/left",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Збереження потоку документа",
-                "bold": true
-              },
-              {
-                "text": " – "
-              },
-              {
-                "text": "translate()",
-                "code": true
-              },
-              {
-                "text": " не впливає на положення інших елементів, на відміну від "
-              },
-              {
-                "text": "position: absolute",
-                "code": true
-              },
-              {
-                "text": ", який змінює розташування елемента відносно найближчого позиціонованого предка."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поліпшення продуктивності рендерингу",
-                "bold": true
-              },
-              {
-                "text": " – зміна "
-              },
-              {
-                "text": "transform",
-                "code": true
-              },
-              {
-                "text": " не викликає рефлоу ("
-              },
-              {
-                "text": "reflow",
-                "code": true
-              },
-              {
-                "text": "), тоді як "
-              },
-              {
-                "text": "top/left",
-                "code": true
-              },
-              {
-                "text": " змушують браузер перераховувати макет."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Гнучке центрування",
-                "bold": true
-              },
-              {
-                "text": " – "
-              },
-              {
-                "text": "translate(-50%, -50%)",
-                "code": true
-              },
-              {
-                "text": " часто використовується для центрування без залежності від розмірів контейнера."
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Якщо потрібно перемістити елемент без зміни його поточного контексту, "
-                      },
-                      {
-                        "text": "translate()",
-                        "code": true
-                      },
-                      {
-                        "text": " – кращий вибір."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "45. Що таке плаваючі елементи (floats)? Як вони працюють?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Плаваючі елементи",
-            "bold": true
-          },
-          {
-            "text": " ("
-          },
-          {
-            "text": "float",
-            "code": true
-          },
-          {
-            "text": ") — це механізм у CSS, який дозволяє елементам \"виринати\" ліворуч або праворуч усередині контейнера, при цьому текст та інші інлайн-елементи обтікають їх."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Як працюють "
-          },
-          {
-            "text": "float",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Обтікання текстом",
-                "bold": true
-              },
-              {
-                "text": " – якщо блок має "
-              },
-              {
-                "text": "float: left",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "float: right",
-                "code": true
-              },
-              {
-                "text": ", інші елементи (зазвичай текст) обтікають його."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вилучення з потоку",
-                "bold": true
-              },
-              {
-                "text": " – "
-              },
-              {
-                "text": "float",
-                "code": true
-              },
-              {
-                "text": " прибирає елемент із нормального потоку документа, але він все ще займає місце в контейнері."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розриви потоку",
-                "bold": true
-              },
-              {
-                "text": " ("
-              },
-              {
-                "text": "clearfix",
-                "code": true
-              },
-              {
-                "text": ") – якщо всі дочірні елементи контейнера float, він може схлопнутись. Виправляють це додаванням "
-              },
-              {
-                "text": "overflow: hidden",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": ".clearfix (::after { content: \"\"; display: block; clear: both; })",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Обмежена керованість",
-                "bold": true
-              },
-              {
-                "text": " – "
-              },
-              {
-                "text": "float",
-                "code": true
-              },
-              {
-                "text": " застаріває, бо не підходить для складних макетів. Замість нього зараз використовують "
-              },
-              {
-                "text": "flexbox",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "grid",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Висновок:",
-            "bold": true
-          },
-          {
-            "text": " "
-          },
-          {
-            "text": "float",
-            "code": true
-          },
-          {
-            "text": " був основним способом верстки до появи "
-          },
-          {
-            "text": "flexbox",
-            "code": true
-          },
-          {
-            "text": " і "
-          },
-          {
-            "text": "grid",
-            "code": true
-          },
-          {
-            "text": ", але зараз використовується переважно для обтікання зображень текстом."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "46. Способи завдання кольору CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Існує кілька способів задавати кольори в CSS:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Назва кольору:",
-                "bold": true
-              },
-              {
-                "text": "Наприклад:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "color: red;"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Шістнадцятковий код (Hex):",
-                "bold": true
-              },
-              {
-                "text": "Наприклад:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "color: #ff5733; /* Рожевий */"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "RGB (Red, Green, Blue):",
-                "bold": true
-              },
-              {
-                "text": "Визначається за допомогою значень для червоного, зеленого і синього каналів від 0 до 255."
-              },
-              {
-                "text": "Наприклад:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "color: rgb(255, 87, 51);"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "RGBA (Red, Green, Blue, Alpha):",
-                "bold": true
-              },
-              {
-                "text": "Подібно до RGB, але з додаванням каналу прозорості (alpha) від 0 (повністю прозорий) до 1 (непрозорий)."
-              },
-              {
-                "text": "Наприклад:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "color: rgba(255, 87, 51, 0.5);"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HSL (Hue, Saturation, Lightness):",
-                "bold": true
-              },
-              {
-                "text": "Визначається за допомогою відтінку (hue), насиченості (saturation) та яскравості (lightness)."
-              },
-              {
-                "text": "Наприклад:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "color: hsl(12, 100%, 60%);"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HSLA (Hue, Saturation, Lightness, Alpha):",
-                "bold": true
-              },
-              {
-                "text": "Як HSL, але з каналом прозорості."
-              },
-              {
-                "text": "Наприклад:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "color: hsla(12, 100%, 60%, 0.5);"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS-Gradients:",
-                "bold": true
-              },
-              {
-                "text": "Колір може бути визначений за допомогою градієнтів."
-              },
-              {
-                "text": "Наприклад:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "background: linear-gradient(to right, red, yellow);"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Прозорі кольори:",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуємо ключові слова для заданого рівня прозорості."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Наприклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "color: transparent;"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Ці методи дозволяють задавати кольори на різні випадки та з різними рівнями контролю над прозорістю."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "47. Які CSS-властивості використовуються для створення анімацій та плавних переходів?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для створення анімацій та плавних переходів у CSS використовуються такі властивості:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Плавні переходи (`transition`)",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Дозволяють змінювати значення властивостей із плавною анімацією."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні властивості:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "transition-property",
-                "code": true
-              },
-              {
-                "text": " – яка властивість анімується."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "transition-duration",
-                "code": true
-              },
-              {
-                "text": " – час анімації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "transition-timing-function",
-                "code": true
-              },
-              {
-                "text": " – крива прискорення (наприклад, "
-              },
-              {
-                "text": "ease",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "linear",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "ease-in-out",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "transition-delay",
-                "code": true
-              },
-              {
-                "text": " – затримка перед анімацією."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "button {\n  background-color: blue;\n  transition: background-color 0.3s ease-in-out;\n}\n\nbutton:hover {\n  background-color: red;\n}"
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Анімації (`@keyframes` + `animation`)",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Дозволяють створювати складніші анімації зі зміною стилів у ключових точках."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні властивості:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "animation-name",
-            "code": true
-          },
-          {
-            "text": " – ім'я анімації (відповідає @keyframes). "
-          },
-          {
-            "text": "animation-duration",
-            "code": true
-          },
-          {
-            "text": " – тривалість анімації. "
-          },
-          {
-            "text": "animation-timing-function",
-            "code": true
-          },
-          {
-            "text": " – крива прискорення. "
-          },
-          {
-            "text": "animation-delay",
-            "code": true
-          },
-          {
-            "text": " – затримка перед початком. "
-          },
-          {
-            "text": "animation-iteration-count",
-            "code": true
-          },
-          {
-            "text": " – кількість повторень (infinite для безкінечної анімації). "
-          },
-          {
-            "text": "animation-direction",
-            "code": true
-          },
-          {
-            "text": " – напрям (normal, reverse, alternate). "
-          },
-          {
-            "text": "animation-fill-mode",
-            "code": true
-          },
-          {
-            "text": " – визначає, чи зберігається стан анімації після завершення."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.element {\n  animation: fadeIn 1s ease-in-out;\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Що використовувати?"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "transition",
-                "code": true
-              },
-              {
-                "text": " – якщо треба просто змінювати стилі при наведенні або зміні класу."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "animation",
-                "code": true
-              },
-              {
-                "text": " – якщо потрібен складніший ефект з кількома ключовими кадрами."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "48. Різниця між псевдокласами та псевдоелементами?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Різниця між псевдокласами і псевдоелементами полягає у їхньому призначенні та способі застосування:"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Псевдокласи"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Псевдокласи застосовуються для вибору елементів на основі їхнього стану або взаємодії з користувачем, а не через структуру HTML. Вони дозволяють стилізувати елементи в певних умовах."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклади псевдокласів:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":hover",
-                "code": true
-              },
-              {
-                "text": " — для елементів, на які наводиться курсор."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "button:hover {\n  background-color: blue;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":focus",
-                "code": true
-              },
-              {
-                "text": " — для елементів, на які надано фокус (наприклад, поля введення)."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "input:focus {\n  border-color: green;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":nth-child()",
-                "code": true
-              },
-              {
-                "text": " — для вибору елементів за їхнім порядковим номером серед батьків."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "li:nth-child(odd) {\n  background-color: lightgray;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Псевдоелементи"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Псевдоелементи дозволяють стилізувати частини елементів або додавати вміст, який не існує в HTML. Вони створюють віртуальні елементи для маніпуляцій із частинами контенту."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклади псевдоелементів:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "::before",
-                "code": true
-              },
-              {
-                "text": "— додає вміст перед вмістом елемента."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "p::before {\n  content: '→ ';\n  color: green;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "::after",
-                "code": true
-              },
-              {
-                "text": " — додає вміст після вмісту елемента."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "p::after {\n  content: ' ←';\n  color: red;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "::first-letter",
-                "code": true
-              },
-              {
-                "text": " — для стилізації першої літери елемента."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "p::first-letter {\n  font-size: 2em;\n  color: blue;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Ключова різниця:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Псевдокласи працюють з станом елементів (наприклад, під час наведеного курсору або фокуса)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Псевдоелементи дозволяють додавати вміст до елементів або стилізувати їх частини (наприклад, перша буква чи передвміст)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Важливе зауваження:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Псевдокласи використовують один знак двокрапки (:), але для псевдоелементів традиційно використовують два знаки двокрапки (::). Тому сучасні стандарти рекомендують використовувати :: для псевдоелементів (але підтримка : для псевдоелементів залишається)."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "49. Розкажіть про псевдоклас :has()?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":has()",
-                "code": true
-              },
-              {
-                "text": " – "
-              },
-              {
-                "text": "потужний CSS-псевдоклас",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":has()",
-                "code": true
-              },
-              {
-                "text": " — це \"батьківський селектор\", який дозволяє стилізувати елемент, що містить певні дочірні елементи."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Як працює?"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Цей псевдоклас перевіряє, чи містить елемент певний вкладений елемент, і застосовує до нього стилі."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад: змінюємо стиль картки, якщо в ній є зображення"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".card:has(img) {\n  border: 2px solid blue;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Якщо "
-          },
-          {
-            "text": ".card",
-            "code": true
-          },
-          {
-            "text": " містить "
-          },
-          {
-            "text": "<img>",
-            "code": true
-          },
-          {
-            "text": ", то отримає синю рамку."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Виділення "
-              },
-              {
-                "text": "<input>",
-                "code": true
-              },
-              {
-                "text": " в контейнері, що містить кнопку \""
-              },
-              {
-                "text": "submit",
-                "code": true
-              },
-              {
-                "text": "\""
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".form:has(button[type='submit']) {\n  background-color: lightgray;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Сірий фон застосовується тільки до .form, якщо в ній є кнопка submit."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Приховуємо кнопку, якщо інпут порожній"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "button:has(+ input:placeholder-shown) {\n  display: none;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Кнопка буде схована, доки користувач не введе текст в інпут."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вибір батьківського елемента списку, якщо він містить активний пункт"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".nav:has(.active) {\n  background-color: black;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Якщо .nav містить .active елемент, змінюється фон."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Підтримка браузерами"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ Chrome, Edge, Safari (з 2023 року) ❌ Firefox (станом на 2025 рік досі немає підтримки)"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Поліфілів немає, тому варто перевіряти підтримку перед використанням."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Висновок"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":has()",
-                "code": true
-              },
-              {
-                "text": " дає можливість змінювати батьківський елемент на основі його вмісту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Робить CSS динамічнішим, замінюючи деякі JavaScript-маніпуляції."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Потрібно враховувати обмежену підтримку в Firefox."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "50. Проблеми з використанням CSS-in-JS? Як їх вирішити?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Проблеми CSS-in-JS і способи їх вирішення",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS-in-JS — потужний підхід для стилізації в React та інших фреймворках, але він має серйозні недоліки, які потрібно враховувати."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Погана продуктивність (перформанс)",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "❌ Проблема:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Динамічні стилі створюються під час рендеру, що сповільнює завантаження сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Генерація стилів на клієнті збільшує TTI (Time to Interactive)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "✅ Рішення:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати статичні стилі там, де це можливо (styled-components з as=\"tag\")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Переносити стилі на сервер (SSR) з styled-components або emotion."
-              },
-              {
-                "type": "code",
-                "language": "tsx",
-                "content": "import { ServerStyleSheet } from 'styled-components';"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати CSS Modules або Tailwind для критичних стилів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Великі розміри бандлу",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "❌ Проблема:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS-in-JS додає зайвий код у JavaScript-бандл."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання бібліотек (styled-components, emotion) збільшує розмір пакета."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "✅ Рішення:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати Linaria або Astro (CSS-in-JS без рантайму)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати компіляцію під час білду (наприклад, babel-plugin-styled-components)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати css prop у emotion, який генерує мінімальний CSS."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Проблеми з специфічністю CSS",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "❌ Проблема:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS-in-JS генерує унікальні класи, але бувають колізії."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не можна легко перевизначити стилі без !important."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "✅ Рішення:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати theme-based стилі через контекст."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати as або css для стилізації без перезапису класів."
-              },
-              {
-                "type": "code",
-                "language": "tsx",
-                "content": "<Button as=\"a\" href=\"/\">\n  Link\n</Button>"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Відсутність інтуїтивного автодоповнення в IDE",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "❌ Проблема:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "IDE не завжди правильно підказує стилі всередині JS."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Слабка підтримка підсвітки синтаксису в деяких редакторах."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "✅ Рішення:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати VSCode-плагіни для styled-components або emotion."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати TypeScript + CSS Variables."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Труднощі з анімаціями",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "❌ Проблема:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS-in-JS не завжди добре працює з keyframes."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Анімації можуть генеруватися кожен рендер."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "✅ Рішення:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати keyframes правильно:"
-              },
-              {
-                "type": "code",
-                "language": "tsx",
-                "content": "import { keyframes } from 'styled-components';\n\nconst fadeIn = keyframes`  from { opacity: 0; }\n  to { opacity: 1; }`;\n\nconst AnimatedDiv = styled.div`\n  animation: ${fadeIn} 1s ease-in-out;\n`;"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати Framer Motion або GSAP замість CSS-in-JS анімацій."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Висновок"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "✅ CSS-in-JS зручно для компонентного підходу, але:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Має проблеми продуктивності → вирішується SSR або компіляцією."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Збільшує розмір бандлу → можна мінімізувати Linaria/Astro."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Проблеми з специфічністю → використовувати as, теми та контекст."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Автодоповнення не завжди працює → плагіни VSCode + TS."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для великих проєктів варто комбінувати CSS-in-JS з CSS Modules, Tailwind або ванільним CSS."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "51. Що означає CSS і яке його основне використання?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "CSS (Cascading Style Sheets) – це мова стилів, яка використовується для опису зовнішнього вигляду HTML-документів. Основне використання – керування стилями елементів, такими як кольори, шрифти, відступи, розміри та розташування на сторінці."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "52. Які способи підключення CSS до HTML ти знаєш?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Є три способи:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вбудований (Inline CSS)",
-                "bold": true
-              },
-              {
-                "text": " – через атрибут "
-              },
-              {
-                "text": "style",
-                "code": true
-              },
-              {
-                "text": " в HTML-елементі:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<p style=\"color: red;\">Текст</p>"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вбудований блок (Internal CSS)",
-                "bold": true
-              },
-              {
-                "text": " – у "
-              },
-              {
-                "text": "<style>",
-                "code": true
-              },
-              {
-                "text": " всередині "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<head>\n  <style>\n    p {\n      color: red;\n    }\n  </style>\n</head>"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зовнішній файл (External CSS)",
-                "bold": true
-              },
-              {
-                "text": " – підключення окремого "
-              },
-              {
-                "text": ".css",
-                "code": true
-              },
-              {
-                "text": " файлу через "
-              },
-              {
-                "text": "<link>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<head>\n  <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "53. Яка різниця між селекторами класу та ID",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Селектор класу (`.`)",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для стилізації групи елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Позначається крапкою ("
-              },
-              {
-                "text": ".",
-                "code": true
-              },
-              {
-                "text": ") перед назвою класу."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Один клас можна застосувати до багатьох елементів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p class=\"text\">Це параграф</p>"
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".text {\n  color: blue;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Селектор ID (`#`)",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для унікального елемента на сторінці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Позначається решіткою (#) перед назвою ID."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Один ID має бути лише в одному елементі."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p id=\"unique-text\">Це унікальний параграф</p>"
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "#unique-text {\n  color: red;\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні відмінності між селекторами класу та ID"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Характеристика"
-            }
-          ],
-          [
-            {
-              "text": "Клас ("
-            },
-            {
-              "text": ".",
-              "code": true
-            },
-            {
-              "text": ")"
-            }
-          ],
-          [
-            {
-              "text": "ID ("
-            },
-            {
-              "text": "#",
-              "code": true
-            },
-            {
-              "text": ")"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "Призначення",
-                "bold": true
-              }
-            ],
-            [
-              {
-                "text": "Група елементів"
-              }
-            ],
-            [
-              {
-                "text": "Унікальний елемент"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Повторне використання",
-                "bold": true
-              }
-            ],
-            [
-              {
-                "text": "Так"
-              }
-            ],
-            [
-              {
-                "text": "Ні (повинен бути унікальним)"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Специфічність",
-                "bold": true
-              }
-            ],
-            [
-              {
-                "text": "Менша"
-              }
-            ],
-            [
-              {
-                "text": "Вища"
-              }
-            ]
-          ]
-        ]
-      }
-    ]
-  },
-  {
-    "question": "54. Що таке псевдокласи в CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Псевдокласи в CSS – це спеціальні ключові слова, які додаються до селекторів і дозволяють стилізувати елементи в залежності від їхнього стану або положення в DOM."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади псевдокласів:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":hover",
-                "code": true
-              },
-              {
-                "text": " – застосовується, коли користувач наводить курсор на елемент."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":focus",
-                "code": true
-              },
-              {
-                "text": " – активується, коли елемент отримує фокус."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":nth-child(n)",
-                "code": true
-              },
-              {
-                "text": " – вибирає елементи за їхньою позицією серед братніх елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":first-child",
-                "code": true
-              },
-              {
-                "text": " – вибирає перший дочірній елемент."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":last-child",
-                "code": true
-              },
-              {
-                "text": " – вибирає останній дочірній елемент."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":checked",
-                "code": true
-              },
-              {
-                "text": " – застосовується до вибраних чекбоксів або радіокнопок."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "button:hover {\n  background-color: blue;\n  color: white;\n}\n\ninput:focus {\n  border: 2px solid green;\n}\n\nli:nth-child(2) {\n  font-weight: bold;\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Важливі особливості:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Псевдокласи не змінюють HTML-структуру, а лише впливають на стилізацію."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна комбінувати кілька псевдокласів для одного елемента."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "55. Опишіть, як реалізувати скидання CSS і чому це корисно.",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Normalize.css",
-                "code": true
-              },
-              {
-                "text": " — не прибирає все, а уніфікує:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Підключаєш файл:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<link\n  rel=\"stylesheet\"\n  href=\"https://necolas.github.io/normalize.css/latest/normalize.css\"\n/>"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Перевага — зберігає корисні стилі, робить вигляд однаковим у всіх браузерах."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Eric Meyer Reset",
-                "code": true
-              },
-              {
-                "text": " — агресивне скидання:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\n... {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font: inherit;\n  vertical-align: baseline;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мінус: треба переписувати багато стилів з нуля."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Modern CSS Reset — компактна сучасна версія:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n}\n\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n  display: block;\n  max-width: 100%;\n}\n\ninput,\nbutton,\ntextarea,\nselect {\n  font: inherit;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ціль — контроль. Без скидання різні браузери дають різні стилі. Це зламає дизайн."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Користь:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Усуває розбіжності в дефолтних стилях між браузерами. Дає чисту стартову точку. Менше багів, стабільніше верстання."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "56. Як ви вибираєте елементи за атрибутами в CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Звернення до атрибутів пишемо у квадратних дужках:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "/* Всі лінки, що відкриваються в новій вкладці */\na[target='_blank'] {\n  color: red;\n}\n\n/* Всі інпути з атрибутом required */\ninput[required] {\n  border: 2px solid orange;\n}\n\n/* Всі кнопки зі специфічним типом */\nbutton[type='submit'] {\n  background-color: green;\n}\n\n/* Всі зображення з alt, що містить слово \"logo\" */\nimg[alt*='logo'] {\n  width: 150px;\n}"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "57. Що таке псевдоелементи і для чого вони використовуються?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Псевдоелементи — це спецконструкції для стилізації частин елементів, яких нема в HTML."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуються для:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "додавання контенту ("
-              },
-              {
-                "text": "::before",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "::after",
-                "code": true
-              },
-              {
-                "text": ")"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "стилізації першої літери або рядка ("
-              },
-              {
-                "text": "::first-letter",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "::first-line",
-                "code": true
-              },
-              {
-                "text": ")"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "кастомізації "
-              },
-              {
-                "text": "::placeholder",
-                "code": true
-              },
-              {
-                "text": " в інпутах"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "p::first-line {\n  font-weight: bold;\n}\n\nbutton::after {\n  content: ' →';\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це дає гнучкість без зайвого HTML."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "58. Поясніть різницю між дочірнім комбінатором і нащадком комбінатора.",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дочірній комбінатор",
-                "bold": true
-              },
-              {
-                "text": " ("
-              },
-              {
-                "text": ">",
-                "code": true
-              },
-              {
-                "text": ") — стилізує тільки безпосереднього потомка."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нащадок комбінатор",
-                "bold": true
-              },
-              {
-                "text": " ("
-              },
-              {
-                "text": "пробіл",
-                "code": true
-              },
-              {
-                "text": ") — стилізує будь-якого нащадка на будь-якій глибині."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "/* Дочірній комбінатор */\ndiv > p {\n  color: blue;\n}\n\n/* Нащадок комбінатор */\ndiv p {\n  color: red;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "У першому випадку — тільки ті "
-              },
-              {
-                "text": "<p>",
-                "code": true
-              },
-              {
-                "text": ", що прямо всередині "
-              },
-              {
-                "text": "<div>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "У другому — всі "
-              },
-              {
-                "text": "<p>",
-                "code": true
-              },
-              {
-                "text": ", навіть вкладені через кілька рівнів."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "59. Як би ви вибрали всі прямі дочірні елементи певного типу?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Через дочірній комбінатор "
-              },
-              {
-                "text": ">",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "ul > li {\n  list-style: none;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вибере тільки ті "
-              },
-              {
-                "text": "<li>",
-                "code": true
-              },
-              {
-                "text": ", які безпосередньо всередині "
-              },
-              {
-                "text": "<ul>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "60. Що таке універсальний селектор і однорідний комбінатор, і коли ви їх використаєте?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Універсальний селектор",
-                "bold": true
-              },
-              {
-                "text": " ("
-              },
-              {
-                "text": "*",
-                "code": true
-              },
-              {
-                "text": ") — вибирає всі елементи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Однорідний комбінатор",
-                "bold": true
-              },
-              {
-                "text": " ("
-              },
-              {
-                "text": "+",
-                "code": true
-              },
-              {
-                "text": ") — вибирає елемент, що безпосередньо слідує за іншим."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовую:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "*",
-            "code": true
-          },
-          {
-            "text": " — для глобального скидання стилів:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "* {\n  margin: 0;\n  padding: 0;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "+",
-            "code": true
-          },
-          {
-            "text": " — для стилізації сусідніх елементів, наприклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "h1 + p {\n  margin-top: 0;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Працюють швидко, якщо не зловживати."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "61. Що таке CSS Box Model?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "CSS Box Model",
-            "bold": true
-          },
-          {
-            "text": " — це структура кожного елемента у вигляді прямокутника, що складається з чотирьох шарів:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Content",
-                "code": true
-              },
-              {
-                "text": " — сам вміст (текст, зображення)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Padding",
-                "code": true
-              },
-              {
-                "text": " — відступи всередині рамки, навколо контенту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Border",
-                "code": true
-              },
-              {
-                "text": " — рамка навколо паддінгу і контенту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Margin",
-                "code": true
-              },
-              {
-                "text": " — зовнішній відступ від інших елементів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Без розуміння "
-          },
-          {
-            "text": "_Box Model_",
-            "bold": true
-          },
-          {
-            "text": " верстати нормально не вийде."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "62. Поясніть що таке Margin Collapsing.",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Margin Collapsing",
-                "bold": true
-              },
-              {
-                "text": " — це коли вертикальні зовнішні відступи двох елементів зливаються в один."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Бере більший з двох "
-              },
-              {
-                "text": "margin",
-                "code": true
-              },
-              {
-                "text": ", а не сумує їх."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div style=\"margin-bottom: 20px;\"></div>\n<div style=\"margin-top: 30px;\"></div>"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відстань між дивами буде "
-              },
-              {
-                "text": "30px",
-                "code": true
-              },
-              {
-                "text": ", а не "
-              },
-              {
-                "text": "50px",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Працює тільки вертикально."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "63. Які є значення і властивості box-sizing і що вони роблять?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Властивість: box-sizing.",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Значення:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "content-box",
-                "code": true
-              },
-              {
-                "text": " — ширина і висота враховують тільки контент, "
-              },
-              {
-                "text": "padding",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "border",
-                "code": true
-              },
-              {
-                "text": " додаються окремо."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "border-box",
-                "code": true
-              },
-              {
-                "text": " — ширина і висота включають контент, "
-              },
-              {
-                "text": "padding",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "border",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "64. Як відцентрувати \"div\" за допомогою CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб відцентрувати "
-              },
-              {
-                "text": "<div>",
-                "code": true
-              },
-              {
-                "text": " за допомогою "
-              },
-              {
-                "text": "CSS",
-                "code": true
-              },
-              {
-                "text": ", можна використовувати кілька підходів. Ось найбільш популярні:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "За допомогою "
-              },
-              {
-                "text": "margin: auto",
-                "code": true
-              },
-              {
-                "text": " (для блочних елементів з заданою шириною):"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".element {\n  width: 50%;\n  margin: 0 auto;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Flexbox",
-                "code": true
-              },
-              {
-                "text": " (центрування в контейнері):"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n}\n\n.element {\n  width: 50%;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Grid",
-                "code": true
-              },
-              {
-                "text": " (центрування в контейнері):"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".container {\n  display: grid;\n  place-items: center;\n  height: 100vh;\n}\n\n.element {\n  width: 50%;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Абсолютне позиціонування з "
-              },
-              {
-                "text": "transform",
-                "code": true
-              },
-              {
-                "text": " для точного центрування:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".container {\n  position: relative;\n  height: 100vh;\n}\n\n.element {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 50%;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ці методи дозволяють вам відцентрувати "
-              },
-              {
-                "text": "<div>",
-                "code": true
-              },
-              {
-                "text": " по горизонталі та/або вертикалі в залежності від вимог."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "65. Яка різниця між block, inline, і inline-block  елементами?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Різниця така:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "block",
-                "bold": true
-              },
-              {
-                "text": " — займає всю ширину батьківського елемента, починається з нового рядка. Можна задавати "
-              },
-              {
-                "text": "ширину",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "висоту",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "margin",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "padding",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "inline",
-                "bold": true
-              },
-              {
-                "text": " — займає тільки ширину свого контенту, не переноситься на новий рядок. Ширину й висоту задавати неможливо (ігноруються)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "inline-block",
-                "bold": true
-              },
-              {
-                "text": " — поводиться як "
-              },
-              {
-                "text": "inline",
-                "bold": true
-              },
-              {
-                "text": " (на одному рядку з іншими), але дозволяє задавати "
-              },
-              {
-                "text": "ширину",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "висоту",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "margin",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "padding",
-                "code": true
-              },
-              {
-                "text": " як "
-              },
-              {
-                "text": "block",
-                "bold": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "66. Поясніть різні значення властивості position.",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Властивість position в CSS визначає метод позиціонування елемента в документі. Вона має кілька значень, кожне з яких поводиться по-різному:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "🔹 "
-          },
-          {
-            "text": "static",
-            "code": true
-          },
-          {
-            "text": " (за замовчуванням) Опис: Елемент розташовується у нормальному потоці документу."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Не працюють: top, right, bottom, left, z-index."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".element {\n  position: static;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "🔹 "
-          },
-          {
-            "text": "relative",
-            "code": true
-          },
-          {
-            "text": " Опис: Елемент залишається у своєму звичному місці, але його можна зсунути відносно цього місця за допомогою top, left, right, bottom."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Зручно: для створення позиціонованих \"контейнерів\" для absolute."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".element {\n  position: relative;\n  top: 10px; /* зсувається вниз */\n  left: 20px; /* зсувається вправо */\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "🔹 "
-          },
-          {
-            "text": "absolute",
-            "code": true
-          },
-          {
-            "text": " Опис: Елемент вилучається з нормального потоку й позиціонується відносно найближчого предка з position: relative|absolute|fixed|sticky."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Якщо таких предків нема — позиціонується відносно body."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".wrapper {\n  position: relative;\n}\n\n.element {\n  position: absolute;\n  top: 0;\n  right: 0;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "🔹 "
-          },
-          {
-            "text": "fixed",
-            "code": true
-          },
-          {
-            "text": " Опис: Елемент фіксується відносно вікна браузера (viewport)."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Залишається на місці при прокручуванні."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".element {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "🔹 "
-          },
-          {
-            "text": "sticky",
-            "code": true
-          },
-          {
-            "text": " Опис: Гібрид relative та fixed."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елемент поводиться як relative, поки не досягне певної позиції при прокрутці — після цього стає fixed."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".element {\n  position: sticky;\n  top: 0; /* стане фіксованим, коли дійде до верху */\n}"
-      }
-    ]
-  },
-  {
-    "question": "67. Опишіть z-індекс і те, як порядок стекування контролюється в CSS.",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "В CSS z-індекс (z-index) визначає порядок розташування елементів по осі Z — тобто, хто буде «над» ким на екрані."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "🧱 Основи стекування (stacking)"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Усі елементи на сторінці утворюють stacking context (контекст накладання), де визначається порядок накладання (тобто, що зверху, а що знизу)."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "🔹 "
-          },
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": " Це числове значення, яке вказує порядок стекування елементів. Чим більше значення — тим вище елемент у візуальному стеку."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".box {\n  position: absolute;\n  z-index: 10;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "⚠️ z-index працює тільки на елементах з position значенням relative, absolute, fixed, або sticky."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "🔢 Як формується стек:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Контекст накладання (stacking context) починається з html, але може створюватись новими елементами за певних умов."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Новий контекст створюється, коли:"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Елемент має position (relative, absolute, fixed, sticky) + z-index, відмінний від auto."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "opacity < 1"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "transform, filter, perspective, will-change, mix-blend-mode і т.д."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "📚 Приклад стекування"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"container\">\n  <div class=\"box box--red\"></div>\n  <div class=\"box box--blue\"></div>\n</div>"
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".container {\n  position: relative;\n}\n\n.box {\n  position: absolute;\n  width: 100px;\n  height: 100px;\n}\n\n.box--red {\n  background: red;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n\n.box--blue {\n  background: blue;\n  top: 20px;\n  left: 20px;\n  z-index: 2;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "🔎 Тут синій блок буде зверху, бо має більший z-index."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "🪜 Пріоритети стекування (спрощено)"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "У межах одного stacking context елементи розташовуються так:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": ": negative — позаду всіх"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": ": auto (блоки без явного індексу)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": ": 0 і вище — зверху"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "📌 Поради:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникай зайвого використання високих z-index (типу 9999). Краще керуй контекстом."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створюй окремі stacking context-и для складних компонентів (наприклад, модальних вікон)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуй BEM або семантичні класи, щоб зрозуміло керувати елементами в контексті."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "68. Як створити sticky footer за допомогою CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб створити sticky footer (футер, що прилипає до низу сторінки, навіть якщо контенту мало), можна скористатися Flexbox-макетом. Це сучасний, простий і стабільний підхід."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "✅ Готове рішення з поясненням:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\n<html lang=\"uk\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Sticky Footer</title>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        height: 100%;\n      }\n\n      .layout {\n        min-height: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .main {\n        flex: 1;\n      }\n\n      .footer {\n        background-color: #333;\n        color: white;\n        padding: 20px;\n        text-align: center;\n      }\n    </style>\n  </head>\n  <body>\n    <div class=\"layout\">\n      <main class=\"main\">\n        <p>Контент сторінки (може бути короткий)</p>\n      </main>\n      <footer class=\"footer\">\n        <p>Я — футер. Я завжди внизу!</p>\n      </footer>\n    </div>\n  </body>\n</html>"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Як це працює:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "html, body → мають height: 100% — дозволяє контейнеру .layout зайняти всю висоту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ".layout → display: flex; flex-direction: column — компоненти йдуть вертикально."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ".main → flex: 1 — займає всю доступну висоту, «виштовхує» футер вниз."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ".footer → автоматично лишається внизу, навіть коли мало контенту."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "69. Як створити фіксований header, який залишається зверху під час прокручування?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб створити фіксований header, який залишається зверху сторінки під час прокручування, можна використати властивість CSS "
-              },
-              {
-                "text": "position: fixed",
-                "code": true
-              },
-              {
-                "text": "."
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<header class=\"fixed-header\">\n  <h1>Мій сайт</h1>\n</header>\n\n<main>\n  <p>Контент сторінки...</p>\n  <!-- Багато тексту, щоб зʼявився скрол -->\n</main>"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".fixed-header {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 60px; /* висота хедера */\n  background-color: #ffffff;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  padding: 10px 20px;\n}\n\n/* Щоб основний контент не ховався під хедером */\nmain {\n  margin-top: 60px; /* дорівнює висоті header */\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Пояснення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "position: fixed;",
-                "code": true
-              },
-              {
-                "text": " — фіксує елемент на місці, незалежно від прокрутки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "top: 0;",
-                "code": true
-              },
-              {
-                "text": " — закріплює хедер до верхнього краю вікна."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "z-index: 1000;",
-                "code": true
-              },
-              {
-                "text": " — забезпечує відображення хедера поверх інших елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "margin-top: 60px;",
-                "code": true
-              },
-              {
-                "text": " — зміщує основний контент вниз, щоб його не перекрив хедер."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "70. Коли ви використовуєте position: sticky?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "position: sticky",
-                "code": true
-              },
-              {
-                "text": " використовується, коли ви хочете, щоб елемент:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "вів себе як звичайний (static або relative)",
-                "bold": true
-              },
-              {
-                "text": ", поки не досягне певної позиції (наприклад, верхнього краю екрана),"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "а потім \"прилипав\" (sticky)",
-                "bold": true
-              },
-              {
-                "text": " до цієї позиції під час прокрутки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовувати position: sticky?"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклади використання:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Заголовки таблиць або розділів, які залишаються зверху, поки не з’явиться наступний."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Меню навігації, що \"прилипає\" після певної прокрутки, але не перекриває весь час."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Фільтри або сайдбари, які залишаються в межах свого батьківського контейнера."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".sticky-header {\n  position: sticky;\n  top: 0;\n  background: white;\n  z-index: 10;\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Важливо:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Батьківський елемент не повинен мати "
-              },
-              {
-                "text": "overflow: hidden",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "overflow: auto",
-                "code": true
-              },
-              {
-                "text": ", інакше "
-              },
-              {
-                "text": "sticky",
-                "code": true
-              },
-              {
-                "text": " не працюватиме."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "sticky",
-                "code": true
-              },
-              {
-                "text": " працює в межах свого контейнера, тобто \"відлипає\", коли контейнер закінчується."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "71. Як змінити шрифт тексту за допомогою CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб змінити шрифт тексту в CSS, використовується властивість font-family."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "p {\n  font-family: 'Arial', sans-serif;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Деталі:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "font-family приймає список шрифтів через кому."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Перший — основний, далі — запасні (fallback)."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Якщо ні один не підтримується — браузер візьме системний з тієї ж групи (sans-serif, serif, monospace тощо)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад з Google Fonts:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- index.html -->\n<link\n  href=\"https://fonts.googleapis.com/css2?family=Roboto&display=swap\"\n  rel=\"stylesheet\"\n/>"
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "body {\n  font-family: 'Roboto', sans-serif;\n}"
-      }
-    ]
-  },
-  {
-    "question": "72. Що таке «веббезпечний» (web-safe) шрифт у CSS і чому він важливий?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Веббезпечний шрифт (англ. web-safe font) — це шрифт, який вже встановлений на більшості операційних систем (Windows, macOS, Linux). Такий шрифт відображається однаково на різних пристроях, навіть без інтернету чи зовнішнього підключення до шрифтів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Навіщо це потрібно:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Гарантована підтримка — браузер не шукає, не завантажує, а одразу використовує локальний шрифт."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Швидше завантаження сторінки."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Немає проблем з авторським правом."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади веббезпечних шрифтів:"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Категорія"
-            }
-          ],
-          [
-            {
-              "text": "Назва"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "Sans-serif"
-              }
-            ],
-            [
-              {
-                "text": "Arial, Verdana, Tahoma, Helvetica"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Serif"
-              }
-            ],
-            [
-              {
-                "text": "Times New Roman, Georgia"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Monospace"
-              }
-            ],
-            [
-              {
-                "text": "Courier New, Lucida Console"
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Як використовувати fallback (резервні шрифти):"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "body {\n  font-family: 'Helvetica', 'Arial', sans-serif;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Якщо перший недоступний — спробує другий, потім третій (системна група)."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "73. Коли доцільно використовувати скорочену (shorthand) властивість font у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Скорочену властивість font у CSS доцільно використовувати тоді, коли потрібно задати кілька параметрів шрифту одночасно, щоб:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "зменшити обсяг коду,"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "забезпечити консистентність стилів,"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "покращити читабельність і продуктивність стилізації."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "p {\n  font: italic small-caps bold 16px/1.5 'Arial', sans-serif;\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Цей запис одночасно задає:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "font-style: italic"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "font-variant: small-caps"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "font-weight: bold"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "font-size: 16px"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "line-height: 1.5"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "font-family: 'Arial', sans-serif"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Обов’язкові значення:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "При використанні shorthand font треба вказати мінімум:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "font-size"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "font-family"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Без них CSS проігнорує весь запис."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли НЕ варто використовувати shorthand:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Коли ти хочеш перевизначити тільки одну властивість (наприклад, лише font-weight)."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Коли потрібно уникнути перезапису інших властивостей шрифту."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Підсумок:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуй font shorthand, коли задаєш кілька параметрів одночасно — це чистіше, швидше і зручніше."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "74. Як додати та використовувати власні (кастомні) шрифти на вебсторінці за допомогою CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб додати власні шрифти (які не входять до стандартних системних), використовують директиву @font-face у CSS. Це дозволяє завантажити шрифт з локального файлу або з сервера."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Кроки для додавання локального кастомного шрифту:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поклади шрифт у папку, напр.:"
-              },
-              {
-                "type": "code",
-                "language": "swift",
-                "content": "/fonts/open-sans.woff2"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оголоси шрифт у CSS:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "@font-face {\n  font-family: 'open-sans';\n  src: url('fonts/open-sans.woff2') format('woff2');\n  font-weight: normal;\n  font-style: normal;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використай його:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "body {\n  font-family: 'open-sans', sans-serif;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Пояснення:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "font-family — задає ім’я, яке потім використовуватиметься в CSS."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "src — шлях до шрифту та його формат (woff2 — найоптимальніший)."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Можна підключити кілька варіантів (bold, italic) — треба окремий @font-face для кожного."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Альтернатива — Google Fonts:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<link\n  href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\"\n  rel=\"stylesheet\"\n/>"
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "body {\n  font-family: 'Inter', sans-serif;\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Рекомендації:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуй формат .woff2 — мінімальний розмір + найкраща підтримка."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Завжди вказуй fallback-шрифт (наприклад, sans-serif)."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Винось кастомні шрифти у папку fonts/ і називай у kebab-case."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "75. У чому полягає різниця між одиницями em та rem у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Одиниці em та rem — це відносні одиниці вимірювання в CSS, які залежать від розміру шрифту:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Одиниця"
-            }
-          ],
-          [
-            {
-              "text": "Повна назва"
-            }
-          ],
-          [
-            {
-              "text": "Залежить від"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "em"
-              }
-            ],
-            [
-              {
-                "text": "element em"
-              }
-            ],
-            [
-              {
-                "text": "розміру шрифту батьківського елемента"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "rem"
-              }
-            ],
-            [
-              {
-                "text": "root em"
-              }
-            ],
-            [
-              {
-                "text": "розміру шрифту кореневого елемента (html)"
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад: "
-          },
-          {
-            "text": "em",
-            "code": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "/* html font-size: 16px */\n\n.container {\n  font-size: 20px;\n}\n\n.container .title {\n  font-size: 2em; /* 2 × 20px = 40px */\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "2em = 2 × 20px, бо береться шрифт батька (.container)"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад: rem"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "html {\n  font-size: 16px;\n}\n\n.title {\n  font-size: 2rem; /* 2 × 16px = 32px */\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "2rem завжди базується на html, незалежно від ієрархії."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли яку краще використовувати:"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Випадок"
-            }
-          ],
-          [
-            {
-              "text": "Краще використовувати"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "Потрібна гнучка масштабованість у вкладених блоках"
-              }
-            ],
-            [
-              {
-                "text": "em"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Потрібна послідовність по всьому сайту"
-              }
-            ],
-            [
-              {
-                "text": "rem"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Margin, padding, line-height — стабільна відстань"
-              }
-            ],
-            [
-              {
-                "text": "rem"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Font-size в компонентах, що успадковуються"
-              }
-            ],
-            [
-              {
-                "text": "em"
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Висновок:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "em",
-                "code": true
-              },
-              {
-                "text": " — відноситься до батьківського шрифту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rem",
-                "code": true
-              },
-              {
-                "text": " — відноситься до кореневого (html) шрифту."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "В сучасній практиці частіше використовують rem для передбачуваної верстки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "76. Як правильно додати фонове зображення до елемента в HTML/CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб додати фонове зображення до елемента, використовуємо CSS-властивість background-image. Найчастіше це робиться через CSS-класи або стилі:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Варіант 1: Через CSS-клас",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".hero-section {\n  background-image: url('/images/hero.jpg');\n  background-size: cover; /* масштабування */\n  background-position: center; /* центрування */\n  background-repeat: no-repeat; /* відключення повторення */\n}"
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"hero-section\">\n  <!-- контент -->\n</div>"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Варіант 2: Inline-стиль (не рекомендовано для масштабних проєктів)",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div\n  style=\"background-image: url('/images/hero.jpg'); background-size: cover; background-position: center;\"\n></div>"
-      }
-    ]
-  },
-  {
-    "question": "77. У чому полягає різниця між шістнадцятковим записом кольорів, RGB-форматом і іменованими значеннями в CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Шістнадцяткові коди (Hex)",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Базується на системі числення з основою 16 (від 00 до FF)."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "Складається з 3 або 6 символів: #RRGGBB або #RGB\n\n#ffffff — білий\n\n#000000 — чорний\n\nМожна використовувати скорочення: #f00 = #ff0000"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "⛔ Не підтримує прозорість напряму (окрім #rrggbbaa, але підтримка обмежена в старих браузерах)"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "RGB / RGBA",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Працює в десятковій системі: rgb(red, green, blue) з кожним значенням від 0 до 255"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Перевага rgba — можливість встановити прозорість (альфа-канал)"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "color: rgba(255, 0, 0, 0.5); /* напівпрозорий червоний */"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Іменовані кольори",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вбудований набір близько 140 назв кольорів:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "red, blue, green, darkslategray, transparent, тощо"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Зручно для простих UI або для швидкого прототипування"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "❗ Не підходить для складних дизайнів — обмежена палітра, неможливо точно налаштувати відтінки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "78. Що таке альфа-прозорість у CSS і як працює формат RGBA?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Що таке альфа-прозорість? Альфа-прозорість (або alpha channel) — це параметр, який визначає ступінь прозорості кольору. Значення прозорості задається числом від 0 до 1:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "0 — повністю прозорий"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "1 — повністю непрозорий (суцільний колір)"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Наприклад: 0.5 — 50% прозорості"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "RGBA",
-                "code": true
-              },
-              {
-                "text": " — це розширення формату "
-              },
-              {
-                "text": "RGB",
-                "code": true
-              },
-              {
-                "text": ", яке додає альфа-канал:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "color: rgba(R, G, B, A);"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "R — Red (червоний): 0–255"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "G — Green (зелений): 0–255"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "B — Blue (синій): 0–255"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "A — Alpha (прозорість): 0–1"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "📘 Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "background-color: rgba(0, 0, 255, 0.3); /* синій з 30% непрозорістю */"
-      }
-    ]
-  },
-  {
-    "question": "79. Як створити градієнтний фон у CSS і які є типи градієнтів?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Лінійний градієнт (linear-gradient)",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "background: linear-gradient(to right, #ff7e5f, #feb47b);"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "to right — напрям (може бути: to left, to bottom, 45deg, тощо)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "#ff7e5f — стартовий колір"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "#feb47b — кінцевий колір"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад для кнопки:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "button {\n  background: linear-gradient(to bottom right, #4facfe, #00f2fe);\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Радіальний градієнт (radial-gradient)",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "background: radial-gradient(circle, #ff9a9e, #fad0c4);"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Центрований круговий перехід кольорів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна змінювати форму: circle, ellipse"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "div {\n  background: radial-gradient(circle at center, #ff9a9e 0%, #fad0c4 100%);\n}"
-      }
-    ]
-  },
-  {
-    "question": "80. Як реалізувати кілька фонів (background layers) для одного елемента в CSS і як вони працюють?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS дозволяє використовувати кілька фонів одночасно в одному елементі, наприклад:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "градієнт + зображення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "кілька іконок"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "шар затемнення + фонова картинка"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "background-image: url('stars.png'), linear-gradient(to bottom, #000000aa, #00000000);"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Головна ідея:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Фони вказуються через кому"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перший — верхній шар, останній — нижній (базовий)"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад — градієнт поверх зображення:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".element {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),\n    /* верхній шар */ url('/images/bg.jpg'); /* нижній шар */\n\n  background-size: cover, cover;\n  background-position: center, center;\n  background-repeat: no-repeat, no-repeat;\n}"
-      }
-    ]
-  },
-  {
-    "question": "81. Що таке Flexbox у CSS, які його ключові властивості та основні переваги у верстці?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Flexbox — це одновимірна модель розмітки в CSS, яка дозволяє гнучко розташовувати та вирівнювати елементи в ряд або стовпчик."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Ключові властивості:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "display: flex",
-                "code": true
-              },
-              {
-                "text": " — активує флекс-контейнер"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-direction",
-                "code": true
-              },
-              {
-                "text": " — напрямок (row, column)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "justify-content",
-                "code": true
-              },
-              {
-                "text": " — вирівнювання по головній осі"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "align-items",
-                "code": true
-              },
-              {
-                "text": " — вирівнювання по поперечній осі"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "gap",
-                "code": true
-              },
-              {
-                "text": " — відстань між елементами"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex",
-                "code": true
-              },
-              {
-                "text": " — керує розміром елементів (grow, shrink, basis)"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Просте вирівнювання по обох осях"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Адаптивність без медіа-запитів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримка переносу рядків (flex-wrap)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Менше хаків і простіший код"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "82. Як працює властивість flex-grow у CSS Flexbox?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "flex-grow",
-                "code": true
-              },
-              {
-                "text": " визначає, наскільки елемент може збільшуватись у розмірі, щоб зайняти вільний простір у флекс-контейнері."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".item {\n  flex-grow: 1;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це означає, що елемент отримає частку вільного простору пропорційно значенню flex-grow."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Наприклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"box\" style=\"flex-grow: 1;\"></div>\n<div class=\"box\" style=\"flex-grow: 2;\"></div>"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Другий блок займе вдвічі більше простору, ніж перший."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "83. У чому різниця між justify-content та align-items у Flexbox?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "justify-content",
-                "code": true
-              },
-              {
-                "text": " — вирівнює елементи по головній осі (горизонтальній за замовчуванням)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Напр.: flex-start, center, space-between",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "align-items",
-                "code": true
-              },
-              {
-                "text": " — вирівнює елементи по поперечній осі (вертикальній за замовчуванням)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Напр.: stretch, center, flex-end",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".container {\n  display: flex;\n  justify-content: center; /* по горизонталі */\n  align-items: center; /* по вертикалі */\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Головне:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Напрям justify-content змінюється з flex-direction."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "align-items — завжди перпендикулярна до нього."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "84. У яких випадках доцільно використовувати align-self у Flexbox?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "align-self",
-                "code": true
-              },
-              {
-                "text": " дозволяє перевизначити вирівнювання одного окремого елемента по поперечній осі, незалежно від align-items контейнера."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".item {\n  align-self: flex-end;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Цей елемент буде вирівняний донизу, навіть якщо інші — по центру або розтягнуті."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використовуйте align-self, коли:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "потрібно виділити один елемент в групі (наприклад, останній пункт у меню — вирівняти вниз);"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "елемент має іншу висоту або позицію, ніж решта;"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "потрібно точково налаштувати позицію без впливу на інші елементи."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "85. Як у Flexbox створити стовпці однакової ширини незалежно від їхнього вмісту?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб створити стовпці однакової ширини у Flexbox, кожному елементу задаємо:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".item {\n  flex: 1;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "А контейнеру:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".container {\n  display: flex;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Пояснення:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "flex: 1 = flex-grow: 1; flex-shrink: 1; flex-basis: 0;"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Усі елементи ділять простір порівну, незалежно від вмісту."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "86. Що таке CSS Grid Layout і чому він корисний у веброзробці?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS Grid — це система двовимірного макетування, яка дозволяє створювати складні сітки з рядками та стовпцями. Вона спрощує позиціонування елементів на сторінці без потреби у флоатах або флексах. Корисна для адаптивних і структурованих дизайнів."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "87. Як у CSS Grid визначити кількість стовпців і рядків сітки?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стовпці задаються через "
-              },
-              {
-                "text": "grid-template-columns",
-                "code": true
-              },
-              {
-                "text": ", а рядки — через "
-              },
-              {
-                "text": "grid-template-rows",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Наприклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "display: grid;\ngrid-template-columns: 1fr 2fr;\ngrid-template-rows: 100px auto;"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це створить сітку з 2 стовпцями та 2 рядками."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "88. У чому різниця між grid-template-areas та grid-template-columns?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відповідь:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "grid-template-columns",
-                "code": true
-              },
-              {
-                "text": " задає ширину стовпців сітки (кількість і розміри)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "grid-template-areas",
-                "code": true
-              },
-              {
-                "text": " задає візуальне розміщення іменованих областей у сітці для зручного позиціонування елементів за назвами."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "grid-template-columns: 1fr 1fr;\ngrid-template-areas:\n  'header header'\n  'sidebar main';"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це визначає 2 стовпці однакової ширини та розкладку з іменами областей."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "89. Як розмістити елементи в сітці CSS Grid?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відповідь:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елементи розміщуються за допомогою властивостей:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "grid-row, grid-column — для вказання позицій (наприклад, grid-column: 1 / 3)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "grid-area — якщо використовується grid-template-areas"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Автоматично — якщо не задані координати, елементи розміщуються у вільні клітинки"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".item {\n  grid-column: 2 / 4;\n  grid-row: 1 / 2;\n}"
-      }
-    ]
-  },
-  {
-    "question": "90. Як CSS Grid обробляє перекриття елементів, якщо вони займають одні й ті самі області?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відповідь:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Якщо кілька елементів займають одну й ту саму область сітки, вони перекриваються, і порядок їх відображення залежить від:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Порядку в "
-          },
-          {
-            "text": "HTML",
-            "code": true
-          },
-          {
-            "text": " (останній — зверху)"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "z-index",
-            "code": true
-          },
-          {
-            "text": " — якщо заданий"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "position",
-            "code": true
-          },
-          {
-            "text": "— якщо елементи позиціоновані"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб уникнути перекриття — уникай однакових координат або використовуй z-index для керування шарами."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "91. Що таке медіа-запит?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Медіа-запит (media query) — це інструмент CSS, що дозволяє застосовувати стилі залежно від характеристик пристрою (ширини екрана, орієнтації, роздільної здатності тощо)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "@media (max-width: 768px) {\n  body {\n    background-color: lightgray;\n  }\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Цей стиль застосовується лише, якщо ширина екрана ≤ 768px."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "92. Як метатег viewport допомагає у створенні адаптивного дизайну для мобільних пристроїв?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Метатег viewport керує тим, як сторінка масштабується та відображається на мобільних пристроях. Без нього сторінка відображається з масштабом, як для десктопа."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Що робить:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "width=device-width",
-                "code": true
-              },
-              {
-                "text": " — встановлює ширину вікна відповідно до ширини пристрою."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "initial-scale=1.0",
-                "code": true
-              },
-              {
-                "text": " — встановлює початковий масштаб."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Результат: коректне масштабування і адаптивність для різних екранів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "93. Опишіть, як створити адаптивний дизайн, орієнтований на мобільні пристрої.",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб створити адаптивний мобільний дизайн:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використай метатег viewport:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуй гнучкі одиниці виміру:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "%, vw, vh, em, rem замість px."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Застосовуй медіа-запити:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Щоб змінювати стилі під різні розміри екранів:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "@media (max-width: 768px) {\n  .menu {\n    flex-direction: column;\n  }\n}"
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Flexbox або CSS Grid:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для побудови гнучких макетів."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникай фіксованої ширини елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечуй адаптивні зображення:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Встановлюй max-width: 100%; height: auto;."
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це дозволяє інтерфейсу підлаштовуватись під різні розміри екранів без горизонтальної прокрутки."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "94. Як можна створити макет, який змінюється з двоколонкового на одноколонковий, за допомогою медіа-запитів?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створи двоколонковий макет (наприклад, з CSS Grid або Flexbox), а потім через медіа-запит змінюй його на одноколонковий при меншій ширині екрана."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад (Flexbox):"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".container {\n  display: flex;\n  gap: 20px;\n}\n\n@media (max-width: 768px) {\n  .container {\n    flex-direction: column;\n  }\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад (CSS Grid):"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".container {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n}\n\n@media (max-width: 768px) {\n  .container {\n    grid-template-columns: 1fr;\n  }\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Результат:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "На великих екранах — 2 колонки, на мобільних — 1 колонка."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "95. Поясніть використання min-width та max-width у медіа-запитах.",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "min-width",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "max-width",
-                "code": true
-              },
-              {
-                "text": " у медіа-запитах визначають діапазон ширини екрана, на який мають застосовуватись стилі."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "min-width — стилі застосовуються від цієї ширини і вище (mobile-first підхід)."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "@media (min-width: 768px) {\n  body {\n    background-color: lightblue;\n  }\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "max-width — стилі застосовуються до цієї ширини включно."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "@media (max-width: 767px) {\n  body {\n    background-color: lightgray;\n  }\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "min-width",
-                "code": true
-              },
-              {
-                "text": " — адаптація від мобільного до десктопа."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "max-width",
-                "code": true
-              },
-              {
-                "text": " — адаптація від десктопа до мобільного."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Зазвичай рекомендується "
-          },
-          {
-            "text": "mobile-first",
-            "code": true
-          },
-          {
-            "text": " підхід з "
-          },
-          {
-            "text": "min-width",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "96. Як створити перехід CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перехід у CSS (transition) дозволяє анімувати зміну властивостей елементів, таких як колір, розмір чи положення, коли вони змінюються."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основний синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".element {\n  transition: property duration timing-function delay;\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".element {\n  background-color: blue;\n  transition: background-color 0.3s ease;\n}\n\n.element:hover {\n  background-color: red;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "У цьому прикладі, коли елемент отримує ховер, його колір плавно змінюється з синього на червоний за 0.3 секунди."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Пояснення:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "background-color",
-            "code": true
-          },
-          {
-            "text": " — властивість, що анімується."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "0.3s",
-            "code": true
-          },
-          {
-            "text": " — тривалість анімації."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "ease",
-            "code": true
-          },
-          {
-            "text": " — функція часу для плавності."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "97. У чому різниця між переходом CSS та анімацією?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS Transition і CSS Animation обидва використовуються для створення анімацій, але є важливі відмінності в їх підході та використанні:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "CSS Transition:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Триггер: анімація починається тільки тоді, коли відбувається зміна стану елемента (наприклад, при ховері або кліку)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Обмеження: можна анімувати лише зміни існуючих стилів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Синтаксис: простіший, зазвичай використовується для ефектів при взаємодії з користувачем."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".element {\n  background-color: blue;\n  transition: background-color 0.3s ease;\n}\n\n.element:hover {\n  background-color: red;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Тут зміна кольору відбудеться тільки при ховері."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "CSS Animation:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Триггер: анімація запускається автоматично або за заданим ключовим кадром."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Гнучкість: дозволяє задавати послідовність анімацій за допомогою @keyframes, де можна визначити кілька етапів анімації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Без взаємодії: анімація може працювати без будь-якої взаємодії з користувачем."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "@keyframes example {\n  0% {\n    background-color: blue;\n  }\n  100% {\n    background-color: red;\n  }\n}\n\n.element {\n  animation: example 2s infinite;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "У цьому прикладі анімація почнеться автоматично і повторюватиметься нескінченно."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні відмінності:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Transition: працює лише на зміну стану (наприклад, ховер або фокус)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Animation: дозволяє створювати складні анімації з багатьма етапами й автоматичним запуском."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "98. Які способи є для анімації появи та зникнення елемента на сторінці??",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна використати CSS-анімації або transition у поєднанні з класами (наприклад, opacity + transform), або бібліотеки типу Framer Motion / React Transition Group для керування станом появи/зникнення."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "99. Можете пояснити, як працює та використовується @keyframes у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "@keyframes",
-                "code": true
-              },
-              {
-                "text": " визначає проміжні стани анімації в CSS."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.element {\n  animation: fadeIn 0.5s ease-in;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується з властивістю "
-              },
-              {
-                "text": "animation",
-                "code": true
-              },
-              {
-                "text": " для запуску анімації."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "100. Як налаштувати функцію прискорення в CSS-анімації?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Функції синхронізації задають, як змінюється швидкість анімації протягом часу."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Встановлюються через "
-          },
-          {
-            "text": "animation-timing-function",
-            "code": true
-          },
-          {
-            "text": ", приклади:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "linear",
-                "code": true
-              },
-              {
-                "text": " — рівномірно."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ease",
-                "code": true
-              },
-              {
-                "text": " — повільний старт і кінець."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ease-in",
-                "code": true
-              },
-              {
-                "text": " — повільний старт."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ease-out",
-                "code": true
-              },
-              {
-                "text": " — повільний кінець."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ease-in-out",
-                "code": true
-              },
-              {
-                "text": " — повільний старт і кінець, швидко посередині."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "cubic-bezier(x1, y1, x2, y2)",
-                "code": true
-              },
-              {
-                "text": " — кастомна крива."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "101. Що таке CSS-препроцесор і які його переваги?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS-препроцесор — це інструмент (наприклад, Sass, LESS, Stylus), який розширює можливості CSS: змінні, вкладені селектори, міксіни, функції."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для структурованішого, повторно використовуваного та легше підтримуваного коду."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "102. Яке значення мають CSS-змінні та чому їх варто використовувати?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS-змінні "
-              },
-              {
-                "text": "(--var-name)",
-                "code": true
-              },
-              {
-                "text": " дозволяють зберігати значення в одному місці та використовувати їх повторно по всьому проєкту."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легко оновлювати тему/стиль."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримують динамічні зміни через JS."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшують дублювання коду."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "103. Що таке CSS-модулі та як їх застосовувати?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS-модулі — це підхід, де стилі автоматично обмежуються тільки тим компонентом, у якому їх імпортують (ізольований скоуп)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання в React:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "jsx",
-        "content": "import styles from './Button.module.css';\n\n<button className={styles.primary}>Click</button>;"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Переваги — уникнення конфліктів імен класів та краща підтримка коду."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "104. Що таке CSS-in-JS і які його переваги?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS-in-JS",
-                "code": true
-              },
-              {
-                "text": " — це підхід, коли стилі пишуться безпосередньо в JavaScript/TypeScript-файлах, часто прив’язані до компонентів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади: styled-components, Emotion."
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Переваги:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ізоляція стилів на рівні компонентів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Динамічні стилі через пропси/стан."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Спільний код JS і стилів."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "105. Які інструменти використовуються для лінтингу та форматування CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для лінтингу — Stylelint (перевірка якості та відповідності стилів стандартам)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для форматування — Prettier (автоматичне вирівнювання й оформлення коду)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Часто інтегруються разом у CI/CD та редактор."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "106. Як зробити, щоб кнопка виглядала як звичайне посилання?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Просто прибрати стандартні стилі кнопки та застосувати стилі посилання:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "button {\n  background: none;\n  border: none;\n  color: blue;\n  text-decoration: underline;\n  cursor: pointer;\n}"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "107. Як створити кастомні чекбокси та радіокнопки за допомогою CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Роблять прихований "
-              },
-              {
-                "text": "<input type=\"checkbox/radio\">",
-                "code": true
-              },
-              {
-                "text": " і стилізують його пов’язаний "
-              },
-              {
-                "text": "<label>",
-                "code": true
-              },
-              {
-                "text": " або псевдоелементи ("
-              },
-              {
-                "text": "::before",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "::after",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стан "
-              },
-              {
-                "text": ":checked",
-                "code": true
-              },
-              {
-                "text": " використовують для зміни стилю при виборі."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "input[type='checkbox'] {\n  display: none;\n}\n\nlabel::before {\n  content: '';\n  width: 16px;\n  height: 16px;\n  border: 1px solid #000;\n  display: inline-block;\n}\n\ninput:checked + label::before {\n  background: #000;\n}"
-      }
-    ]
-  },
-  {
-    "question": "108. Як можна стилізувати елемент select лише за допомогою CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовують селектор "
-              },
-              {
-                "text": "select",
-                "code": true
-              },
-              {
-                "text": " і його внутрішні елементи, але можливості обмежені через нативний рендер браузера."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні прийоми:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "appearance: none;",
-            "code": true
-          },
-          {
-            "text": " / "
-          },
-          {
-            "text": "-webkit-appearance: none;",
-            "code": true
-          },
-          {
-            "text": " — прибрати стандартну стрілку."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Додати власну іконку через "
-          },
-          {
-            "text": "background",
-            "code": true
-          },
-          {
-            "text": " або "
-          },
-          {
-            "text": "::after",
-            "code": true
-          },
-          {
-            "text": " у контейнері."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Стилізувати "
-          },
-          {
-            "text": "option",
-            "code": true
-          },
-          {
-            "text": " (шрифт, колір, фон), але в різних браузерах підтримка різна."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "109. Яка найкраща практика для стилізації плейсхолдера у полі введення?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати псевдоклас "
-              },
-              {
-                "text": "::placeholder",
-                "code": true
-              },
-              {
-                "text": " для зміни стилю заповнювача, зберігаючи достатній контраст і читабельність."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "input::placeholder {\n  color: #888;\n  font-style: italic;\n}"
-      }
-    ]
-  },
-  {
-    "question": "110. Як правильно реалізувати стилі фокуса для забезпечення доступності?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовують псевдоклас "
-              },
-              {
-                "text": ":focus",
-                "code": true
-              },
-              {
-                "text": " (і бажано "
-              },
-              {
-                "text": ":focus-visible",
-                "code": true
-              },
-              {
-                "text": ") для чіткого візуального індикатора."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Найкраща практика — не прибирати "
-              },
-              {
-                "text": "outline",
-                "code": true
-              },
-              {
-                "text": ", а кастомізувати його:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "button:focus-visible {\n  outline: 2px solid #000;\n  outline-offset: 2px;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це допомагає користувачам з клавіатурною навігацією."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "111. Як діагностувати і виправити проблеми з версткою?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуй "
-              },
-              {
-                "text": "DevTools",
-                "code": true
-              },
-              {
-                "text": " (інспектор) для перевірки стилів, розмірів, відступів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевіряй "
-              },
-              {
-                "text": "flexbox/grid",
-                "code": true
-              },
-              {
-                "text": " налаштування, "
-              },
-              {
-                "text": "display",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "position",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Шукай проблеми з переповненням, "
-              },
-              {
-                "text": "z-index",
-                "code": true
-              },
-              {
-                "text": ", або невірними розмірами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуй тимчасові кольори/рамки для візуалізації блоків."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевіряй адаптивність на різних екранах."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "112. Як виправити проблеми з пошкодженими колонками у макеті?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевір:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "чи правильно заданий "
-              },
-              {
-                "text": "display",
-                "code": true
-              },
-              {
-                "text": " ("
-              },
-              {
-                "text": "flex",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "grid",
-                "code": true
-              },
-              {
-                "text": ") на контейнері;"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "чи всі колонки мають коректні розміри ("
-              },
-              {
-                "text": "flex-basis",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "width",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "grid-template-columns",
-                "code": true
-              },
-              {
-                "text": ");"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "чи немає зайвих "
-              },
-              {
-                "text": "margin/padding",
-                "code": true
-              },
-              {
-                "text": ", що зрушують колонки;"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "чи не порушує макет "
-              },
-              {
-                "text": "box-sizing",
-                "code": true
-              },
-              {
-                "text": " (краще "
-              },
-              {
-                "text": "border-box",
-                "code": true
-              },
-              {
-                "text": ");"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "чи не спричиняє проблеми "
-              },
-              {
-                "text": "overflow",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "min-width",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Часто допомагає тимчасове підсвічування меж ("
-          },
-          {
-            "text": "outline: 1px solid red",
-            "code": true
-          },
-          {
-            "text": ")."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "113. Як вирішувати проблеми кросбраузерності у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуй префікси ("
-              },
-              {
-                "text": "-webkit-",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "-moz-",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "-ms-",
-                "code": true
-              },
-              {
-                "text": ") для нових властивостей (через "
-              },
-              {
-                "text": "Autoprefixer",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевіряй підтримку фіч на "
-              },
-              {
-                "text": "Can I Use",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуй "
-              },
-              {
-                "text": "fallbacks",
-                "code": true
-              },
-              {
-                "text": " — запасні стилі для старих браузерів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникай нестабільних експериментальних властивостей."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Тестуй на основних браузерах і версіях."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "За потреби — поліполіфи або JavaScript-обхідники."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "114. Як визначити, який CSS стиль переважає при конфлікті?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевіряй через "
-              },
-              {
-                "text": "DevTools",
-                "code": true
-              },
-              {
-                "text": " вкладку "
-              },
-              {
-                "text": "Styles",
-                "code": true
-              },
-              {
-                "text": " — показує застосовані стилі, їх пріоритет і джерело."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Пріоритет визначається специфічністю селекторів, важливістю ("
-              },
-              {
-                "text": "!important",
-                "code": true
-              },
-              {
-                "text": ") і порядком підключення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Правила:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Inline стилі мають вищий пріоритет."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Специфічніші селектори переважають універсальні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Пізніші оголошення перекривають ранні."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "115. Які CSS проблеми можуть погіршувати продуктивність?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Занадто складні селектори (особливо універсальні "
-              },
-              {
-                "text": "*",
-                "code": true
-              },
-              {
-                "text": " або глибокі вкладення)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Часті зміни "
-              },
-              {
-                "text": "layout (reflow)",
-                "code": true
-              },
-              {
-                "text": " через властивості типу "
-              },
-              {
-                "text": "width",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "height",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "margin",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "padding",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання "
-              },
-              {
-                "text": "!important",
-                "code": true
-              },
-              {
-                "text": ", що ускладнює перезапис стилів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Велика кількість анімацій або трансформацій без апаратного прискорення."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Надмірний використання глобальних стилів і дублювання."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "116. Як застосовувати 3D-перетворення в CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "В CSS 3D-перетворення застосовують через властивості:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "transform: rotateX(), rotateY(), rotateZ()",
-                "code": true
-              },
-              {
-                "text": " — обертання по осях."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "transform: translateZ()",
-                "code": true
-              },
-              {
-                "text": " — переміщення по Z-ось."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "perspective",
-                "code": true
-              },
-              {
-                "text": " — задає глибину (перспективу) контейнеру."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "transform-style: preserve-3d",
-                "code": true
-              },
-              {
-                "text": " — для вкладених елементів, щоб зберегти 3D ефект."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".container {\n  perspective: 600px;\n}\n\n.element {\n  transform-style: preserve-3d;\n  transform: rotateY(45deg);\n}"
-      }
-    ]
-  },
-  {
-    "question": "117. Як працює і як використовувати властивість perspective у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "perspective",
-                "code": true
-              },
-              {
-                "text": " задає відстань від глядача до площини елемента, створюючи ефект глибини для 3D-перетворень."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".container {\n  perspective: 500px; /* менше значення — сильніша перспектива */\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Властивість застосовується до батьківського елемента, а дочірні з transform із 3D-перетвореннями використовують цю перспективу."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "118. Що таке backface-visibility у CSS і як його використовувати?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Видимість задньої поверхні ("
-              },
-              {
-                "text": "backface-visibility",
-                "code": true
-              },
-              {
-                "text": ") — це CSS-властивість, яка визначає, чи видно ли задню сторону елемента при його 3D-обертанні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "visible",
-                "code": true
-              },
-              {
-                "text": " — задня сторона показується (за замовчуванням)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "hidden",
-                "code": true
-              },
-              {
-                "text": " — задня сторона прихована, не відображається при обертанні на 180°."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".element {\n  backface-visibility: hidden;\n}"
-      }
-    ]
-  },
-  {
-    "question": "119. Як зробити ефект перевернутої картки (card flip) на CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створюють контейнер з двома сторонами ("
-              },
-              {
-                "text": "front",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "back",
-                "code": true
-              },
-              {
-                "text": "), використовують 3D-перетворення і "
-              },
-              {
-                "text": "backface-visibility: hidden",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".container {\n  perspective: 1000px;\n}\n\n.card {\n  width: 200px;\n  height: 300px;\n  position: relative;\n  transform-style: preserve-3d;\n  transition: transform 0.6s;\n}\n\n.card:hover {\n  transform: rotateY(180deg);\n}\n\n.front,\n.back {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n}\n\n.back {\n  transform: rotateY(180deg);\n}"
-      }
-    ]
-  },
-  {
-    "question": "120. Які візуальні ефекти можна створити за допомогою CSS-фільтрів?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS-фільтри дають змогу створювати ефекти:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "blur()",
-            "code": true
-          },
-          {
-            "text": " — розмиття"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "brightness()",
-            "code": true
-          },
-          {
-            "text": " — яскравість"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "contrast()",
-            "code": true
-          },
-          {
-            "text": " — контраст"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "grayscale()",
-            "code": true
-          },
-          {
-            "text": " — відтінки сірого"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "invert()",
-            "code": true
-          },
-          {
-            "text": " — інверсія кольорів"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "sepia()",
-            "code": true
-          },
-          {
-            "text": " — сепія"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "saturate()",
-            "code": true
-          },
-          {
-            "text": " — насиченість"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "drop-shadow()",
-            "code": true
-          },
-          {
-            "text": " — тінь"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Їх можна комбінувати через пробіл:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "filter: grayscale(50%) blur(2px);"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "121. Які основні принципи адаптивного вебдизайну?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Основні принципи адаптивного вебдизайну:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Гнучка сітка (flex, grid, % замість фіксованих px)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Гнучкі зображення та медіа (max-width: 100%)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Media queries для різних розмірів екранів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мобільний підхід спочатку (mobile-first)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Тестування на різних пристроях і орієнтаціях."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "122. Як створити сіткову систему за допомогою CSS Grid?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створюю контейнер з display: grid."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Визначаю колонки та рядки через grid-template-columns / grid-template-rows (можна з fr, auto, %)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додаю проміжки (gap)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для адаптивності — змінюю налаштування через @media або repeat(auto-fit, minmax())."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".container {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}"
-      }
-    ]
-  },
-  {
-    "question": "123. Що таке mobile-first підхід у вебдизайні?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Mobile-first — підхід, коли дизайн і верстка спочатку створюються для мобільних пристроїв (малий екран), а потім розширюються для більших екранів через min-width media queries."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізація продуктивності для мобільних."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Краща доступність і зручність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легше масштабувати до desktop, ніж навпаки."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "124. Які способи підтримати співвідношення сторін в адаптивному дизайні?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Методи підтримки співвідношення сторін:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "aspect-ratio",
-                "code": true
-              },
-              {
-                "text": " (сучасний спосіб):"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".box {\n  aspect-ratio: 16 / 9;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Через "
-              },
-              {
-                "text": "padding-хаки",
-                "code": true
-              },
-              {
-                "text": " (старий спосіб, "
-              },
-              {
-                "text": "padding-top",
-                "code": true
-              },
-              {
-                "text": " у "
-              },
-              {
-                "text": "%",
-                "code": true
-              },
-              {
-                "text": " від ширини)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SVG",
-                "code": true
-              },
-              {
-                "text": " та "
-              },
-              {
-                "text": "viewBox",
-                "code": true
-              },
-              {
-                "text": " для масштабованих елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Контейнер із "
-              },
-              {
-                "text": "object-fit",
-                "code": true
-              },
-              {
-                "text": " для медіа (зображення, відео)."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "125. Як забезпечити доступність і інклюзивність вебдизайну?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для доступності та інклюзивності дотримуюсь принципів WCAG:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Контраст тексту ≥ 4.5:1."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Чіткі "
-              },
-              {
-                "text": "focus-стилі",
-                "code": true
-              },
-              {
-                "text": " для клавіатурної навігації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Альтернативний текст ("
-              },
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": ") для зображень."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантична "
-              },
-              {
-                "text": "HTML-розмітка",
-                "code": true
-              },
-              {
-                "text": " (заголовки, списки, "
-              },
-              {
-                "text": "<button>",
-                "code": true
-              },
-              {
-                "text": " замість "
-              },
-              {
-                "text": "div",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ARIA-атрибути",
-                "code": true
-              },
-              {
-                "text": ", якщо стандартної семантики недостатньо."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка з екранними рідерами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не покладатися тільки на колір для передачі інформації."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "126. Як додати таблицю стилів для друку на вебсторінці?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створюють окремі стилі з медіатипом print:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "_Через окремий файл:_",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<link rel=\"stylesheet\" href=\"print.css\" media=\"print\" />"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "_Або всередині CSS:_",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "@media print {\n  body {\n    color: black;\n    background: white;\n  }\n\n  nav,\n  footer {\n    display: none;\n  }\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для спрощення макета, видалення непотрібних елементів і оптимізації читабельності при друку."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "127. Які best practices при створенні CSS для друку?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Найкращі практики для CSS-друку:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Прибрати непотрібні елементи (nav, footer, рекламу)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зробити фон білим, текст чорним для читабельності."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати читабельний шрифт без надмірних стилів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Показувати посилання як текстові URL (a::after { content: attr(href) })."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізувати відступи та розміри для формату сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевіряти друк у різних браузерах."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "128. Як використовувати розрив сторінки в CSS для друку?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розрив сторінки в CSS керується властивостями page-break-before, page-break-after, page-break-inside (застарілі) або їх новими аналогами — break-before, break-after, break-inside."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "h2 {\n  break-before: page; /* Почати з нової сторінки при друку */\n}\n\nsection {\n  break-inside: avoid; /* Не розривати всередині секції */\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується у друкованих стилях, щоб контролювати, де сторінка має ділитися."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "129. Як протестувати версію вебсторінки для друку?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Тестують версію для друку так:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "У браузері відкрити Print Preview (Ctrl+P / Cmd+P)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "У DevTools вибрати emulate print media (Chrome: More tools → Rendering → Emulate CSS media: print)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірити відображення в різних браузерах (Chrome, Firefox, Edge)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "За потреби протестувати на реальному принтері або PDF-експортері."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "130. Які типові проблеми виникають при розробці CSS для друку?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Поширені труднощі при створенні CSS для друку:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Різна підтримка друкованих стилів у браузерах."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відсутність відтворення фону або зображень за замовчуванням."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Неконтрольовані розриви сторінок у великому контенті."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Неправильні пропорції зображень чи таблиць."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Проблеми з шрифтами при друкуванні у PDF."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Важко зберегти точне позиціонування без порушення адаптивності."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "131. Для чого призначені псевдоелементи ::before і ::after у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "::before",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "::after",
-                "code": true
-              },
-              {
-                "text": " створюють віртуальні елементи до або після вмісту вибраного елемента. Використовуються для декоративного або додаткового контенту без зміни HTML."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "button::before {\n  content: '→ ';\n}"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Особливості:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Працюють тільки з властивістю content."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Не впливають на DOM, але беруть участь у візуальному рендері."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "132. Що таке псевдоклас :hover у CSS і як він працює?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":hover — псевдоклас, що застосовує стилі, коли користувач наводить курсор миші на елемент."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "a:hover {\n  color: red;\n}"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Працює тільки для інтерактивних пристроїв з курсором (на сенсорних — обмежено)."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "133. У чому різниця між :nth-child та :nth-of-type у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":nth-child(n)",
-                "code": true
-              },
-              {
-                "text": " — вибирає елемент, якщо він є n-м дочірнім серед усіх елементів батька."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":nth-of-type(n)",
-                "code": true
-              },
-              {
-                "text": " — вибирає елемент, якщо він є n-м дочірнім серед елементів того ж типу."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "p:nth-child(2)      /* другий дочірній елемент, неважливо, p це чи ні */\np:nth-of-type(2)    /* другий <p> серед усіх <p> */"
-      }
-    ]
-  },
-  {
-    "question": "134. Як працюють псевдокласи :first-child і :last-child у CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":first-child",
-                "code": true
-              },
-              {
-                "text": " вибирає елемент, якщо він перший серед усіх дочірніх елементів свого батька."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":last-child",
-                "code": true
-              },
-              {
-                "text": " — якщо він останній серед дочірніх."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "li:first-child {\n  font-weight: bold;\n}\n\nli:last-child {\n  color: red;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Важливо: вони дивляться на позицію, а не на тип елемента (на відміну від "
-              },
-              {
-                "text": ":first-of-type",
-                "code": true
-              },
-              {
-                "text": " / "
-              },
-              {
-                "text": ":last-of-type",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "135. Що таке псевдоклас :not у CSS і для чого він використовується?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": ":not(селектор)",
-                "code": true
-              },
-              {
-                "text": " — псевдоклас, що вибирає елементи, які не відповідають вказаному селектору."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "button:not(.primary) {\n  background: gray;\n}"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується, коли треба застосувати стиль до групи елементів, крім певних винятків, щоб уникнути дублювання правил."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "136. Як складність CSS-селекторів впливає на продуктивність?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Складні селектори (глибокі вкладення, універсальний "
-              },
-              {
-                "text": "*",
-                "code": true
-              },
-              {
-                "text": ", комбінації кількох умов) збільшують час, який браузер витрачає на обхід DOM для пошуку відповідних елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Хоч сучасні браузери оптимізовані, надмірно складні селектори можуть уповільнити рендеринг у великих проєктах, а також ускладнюють підтримку коду."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Найкраща практика — використовувати короткі й конкретні селектори."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "137. Які стратегії ви б використали для оптимізації шляху рендерингу CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мінімізація блокуючого CSS",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розміщувати критичні стилі ("
-              },
-              {
-                "text": "critical CSS",
-                "code": true
-              },
-              {
-                "text": ") прямо в "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " — лише ті, що потрібні для початкового рендеру."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Виносити другорядні стилі в окремі файли та підключати їх асинхронно ("
-              },
-              {
-                "text": "media=\"print\"",
-                "code": true
-              },
-              {
-                "text": " → потім "
-              },
-              {
-                "text": "media=\"all\"",
-                "code": true
-              },
-              {
-                "text": " через JS)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Оптимізація та зменшення обсягу CSS",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Видалення невикористаних стилів ("
-              },
-              {
-                "text": "PurifyCSS",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "UnCSS",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "purgecss",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мініфікація ("
-              },
-              {
-                "text": "cssnano",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "CleanCSS",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникати дублювання селекторів і зайвих правил."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Обмеження кількості та складності селекторів",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати класи замість універсальних або глибоких комбінацій селекторів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не перевантажувати DOM пошуком через дуже складні селектори."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використання кешування",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Задавати довгі "
-              },
-              {
-                "text": "cache headers",
-                "code": true
-              },
-              {
-                "text": " для CSS-файлів з рідкими змінами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати версіонування ("
-              },
-              {
-                "text": "hash",
-                "code": true
-              },
-              {
-                "text": " у назві файлу) для оновлень."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Порядок підключення стилів",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS-файли, що впливають на "
-              },
-              {
-                "text": "Above-the-Fold",
-                "code": true
-              },
-              {
-                "text": " контент — якомога вище у "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Модульні стилі — підключати лише там, де вони реально потрібні."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Зменшення залежностей від зовнішніх ресурсів",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Якщо є зовнішні шрифти або бібліотеки CSS — підключати лише потрібні частини (наприклад, "
-              },
-              {
-                "text": "font-subset",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати "
-              },
-              {
-                "text": "preload",
-                "code": true
-              },
-              {
-                "text": " для ключових стилів ("
-              },
-              {
-                "text": "<link rel=\"preload\" as=\"style\" href=\"...\">",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "138. Як мінімізувати перемальовування та перекомпонування CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб мінімізувати перемальовування ("
-              },
-              {
-                "text": "repaint",
-                "code": true
-              },
-              {
-                "text": ") та перекомпонування ("
-              },
-              {
-                "text": "reflow",
-                "code": true
-              },
-              {
-                "text": ", також називають "
-              },
-              {
-                "text": "layout",
-                "code": true
-              },
-              {
-                "text": "), треба розуміти, що вони — найвитратніші операції в рендерингу браузера."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Reflow",
-                "code": true
-              },
-              {
-                "text": " відбувається, коли змінюється структура DOM або стилі, що впливають на розташування елементів, і браузер змушений перераховувати позиції та розміри."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Repaint",
-                "code": true
-              },
-              {
-                "text": " трапляється, коли змінюється зовнішній вигляд елемента (колір, фон тощо), але не його розташування."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні стратегії зменшення reflow/repaint"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мінімізуйте зміни в DOM",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникайте частого додавання/видалення елементів у циклах."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуйте DocumentFragment або приховування елемента ("
-              },
-              {
-                "text": "display: none",
-                "code": true
-              },
-              {
-                "text": ") перед масовими змінами, а потім показуйте назад."
-              },
-              {
-                "type": "code",
-                "language": "javascript",
-                "content": "element.style.display = 'none'; // масові зміни\nDOM element.style.display = 'block';"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Уникайте читання і запису стилів впереміш",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Читання властивостей, що викликають "
-              },
-              {
-                "text": "reflow",
-                "code": true
-              },
-              {
-                "text": " (наприклад "
-              },
-              {
-                "text": "offsetHeight",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "scrollTop",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "getComputedStyle",
-                "code": true
-              },
-              {
-                "text": "), після зміни стилів примушує браузер синхронно перерахувати "
-              },
-              {
-                "text": "layout",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "❌ "
-          },
-          {
-            "text": "Погано:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "element.style.width = '200px';\nconsole.log(element.offsetHeight); // змусить layout виконатися двічі"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "✅ "
-          },
-          {
-            "text": "Добре:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "const height = element.offsetHeight;\nelement.style.width = '200px';"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуйте CSS-трансформації замість зміни геометрії",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зміни "
-              },
-              {
-                "text": "top",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "left",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "width",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "height",
-                "code": true
-              },
-              {
-                "text": " спричиняють "
-              },
-              {
-                "text": "reflow",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання "
-              },
-              {
-                "text": "transform: translate()",
-                "code": true
-              },
-              {
-                "text": " чи "
-              },
-              {
-                "text": "scale()",
-                "code": true
-              },
-              {
-                "text": " виконується на GPU і не викликає перерахунку розташування."
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "/* краще */\ntransform: translateX(50px);\n\n/* гірше */\nleft: 50px;"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Виносьте анімації на композитний шар",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуйте "
-              },
-              {
-                "text": "will-change: transform;",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "transform",
-                "code": true
-              },
-              {
-                "text": " та "
-              },
-              {
-                "text": "opacity",
-                "code": true
-              },
-              {
-                "text": " для плавних анімацій."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не анімуйте властивості, які впливають на розміри/flow (наприклад "
-              },
-              {
-                "text": "margin",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "width",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Групуйте зміни стилів",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зміни кількох властивостей через "
-              },
-              {
-                "text": "classList.add()",
-                "code": true
-              },
-              {
-                "text": " або через "
-              },
-              {
-                "text": "style.cssText",
-                "code": true
-              },
-              {
-                "text": " зменшують кількість "
-              },
-              {
-                "text": "reflow",
-                "code": true
-              },
-              {
-                "text": "."
-              },
-              {
-                "type": "code",
-                "language": "javascript",
-                "content": "element.classList.add('active', 'highlight');"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Оптимізуйте складні селектори",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Глибокі та складні селектори збільшують час обчислення стилів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Віддавайте перевагу простим класам замість каскаду в 5–6 рівнів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуйте requestAnimationFrame для оновлень у JS",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб уникнути \"рваних\" анімацій, синхронізуйте зміни стилів з кадрами анімації браузера."
-              },
-              {
-                "type": "code",
-                "language": "javascript",
-                "content": "function animate() {\n  element.style.transform = `translateX(${x}px)`;\n  requestAnimationFrame(animate);\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Обмежуйте використання таблиць",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML-таблиці перераховуються складніше, бо зміни в одній клітинці можуть вплинути на всю таблицю."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Кешуйте розрахунки",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Якщо потрібно кілька разів читати властивість, що викликає "
-              },
-              {
-                "text": "reflow",
-                "code": true
-              },
-              {
-                "text": " — збережіть її в змінній."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "139. Які найкращі практики написання ефективного CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Структуруйте код і використовуйте конвенції",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дотримуйтеся єдиного стилю написання (BEM, SMACSS, ITCSS)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуйте змістовні імена класів замість описових по вигляду (.btn-primary замість .blue-btn)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Логічно групуйте стилі (базові, компоненти, утиліти)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мінімізуйте специфічність",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникайте довгих селекторів (header nav ul li a) — вони ускладнюють перевизначення."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевага — класи над ID:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "/* Добре */\n.card-title {\n  ...;\n}\n\n/* Погано */\n#main-content h2.title {\n  ...;\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не зловживайте "
-              },
-              {
-                "text": "!important",
-                "code": true
-              },
-              {
-                "text": " — він ускладнює підтримку."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуйте каскад розумно",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Пишіть стилі так, щоб вони перевизначалися природно, без зайвих хитрощів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуйте успадкування для шрифтів, кольорів і загальних властивостей."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Оптимізуйте для продуктивності",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуйте простi селектори: браузер читає їх справа наліво, тож div ul li a гірший, ніж .nav-link."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Видаляйте непотрібні стилі — вони лише уповільнюють рендеринг."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Об’єднуйте спільні властивості у короткі записи (margin: 10px 0; замість чотирьох окремих)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Уникайте дублювання",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Виносьте повторювані значення у змінні (у SCSS або CSS Custom Properties):"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ":root {\n  --main-color: #3498db;\n}\n\n.btn {\n  background: var(--main-color);\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Думайте про масштабованість",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Проєктуйте стилі так, щоб додавання нового компонента не ламало існуючі."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуйте компонентний підхід у фреймворках (React, Vue, Angular)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мінімізуйте вплив на перерисовку",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникайте частих змін layout-властивостей (width, height, margin)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для анімацій використовуйте transform та opacity — вони не викликають reflow."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Готуйте до продакшну",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мініфікуйте CSS (через cssnano, clean-css)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуйте critical CSS для швидкого відображення above-the-fold контенту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вмикайте автопрефікси для кросбраузерності."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Тестуйте",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевіряйте сторінку в різних браузерах та на різних пристроях."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуйте Lighthouse/DevTools для аналізу unused CSS."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "140. Як оптимізувати CSS для критичного шляху рендерингу та швидкого завантаження?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Виділення критичного CSS",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Витягніть стилі, які потрібні для першого екрану (\"above the fold\"), і вставте їх інлайн у "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<style>\n  body {\n    font-family: sans-serif;\n  }\n  header {\n    background: #333;\n    color: #fff;\n    padding: 1rem;\n  }\n</style>"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Решту стилів підвантажуйте окремим файлом асинхронно."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використання media та preload",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для неосновних стилів вказуйте медіа-умови:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<link rel=\"stylesheet\" href=\"print.css\" media=\"print\" />"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Або використовуйте preload:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<link\n  rel=\"preload\"\n  href=\"styles.css\"\n  as=\"style\"\n  onload=\"this.rel='stylesheet'\"\n/>"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мінімізація та об’єднання",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мінімізуйте CSS (remove spaces, comments, unused rules)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Об’єднуйте файли, щоб зменшити кількість HTTP-запитів (але не до абсурду, якщо є код для різних частин сайту)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Уникання блокуючих CSS",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розбийте стилі на критичні (inline) і другорядні (завантаження після DOMContentLoaded)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Наприклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<link\n  rel=\"stylesheet\"\n  href=\"main.css\"\n  media=\"print\"\n  onload=\"this.media='all'\"\n/>"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Прибирання зайвих стилів",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуйте PurgeCSS, UnCSS або аналогічні інструменти для видалення невикористаних селекторів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це особливо важливо при роботі з великими фреймворками (Bootstrap, Tailwind)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Оптимізація селекторів",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникайте надто складних і глибоких селекторів (div ul li a span)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Віддавайте перевагу класам — вони швидші для обробки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використання HTTP/2",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Якщо сервер підтримує HTTP/2, можна не об’єднувати файли, а завантажувати їх паралельно — це зменшує час до першого рендеру."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "141. Що таке об'єктно-орієнтований CSS (OOCSS)?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "OOCSS (Object-Oriented CSS) — це методологія написання CSS, що базується на розділенні стилів на структуру (layout) і шкіру (theme), та повторному використанні класів як «об’єктів» для зменшення дублювання і підвищення гнучкості коду."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "142. Поясніть принціпи іменування BEM, зокрема як працюють блоки, елементи та модифікатори.",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "BEM",
-                "code": true
-              },
-              {
-                "text": " — це методологія іменування CSS-класів для покращення читабельності і масштабованості коду."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Структура:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "block — незалежний компонент (наприклад, menu)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "block"
-              },
-              {
-                "text": "element — частина блоку (menu",
-                "bold": true
-              },
-              {
-                "text": "item)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "block--modifier — варіант блоку (menu--dark) або елемента (menu\\_\\_item--active)"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це допомагає уникати конфліктів і чітко структурує стилі."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "143. Які переваги використання CSS-фреймворку, такого як Bootstrap або TailwindCSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Прискорюють розробку завдяки готовим стилям і компонентам."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечують консистентність дизайну між командами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мають адаптивність «з коробки» (responsive)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримують кросбраузерність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "TailwindCSS дає гнучкість через утиліти, Bootstrap — готові UI-компоненти."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшують обсяг кастомного CSS і допомагають уникати помилок."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "144. Як забезпечити масштабованість та зручність підтримки CSS у великому проекті?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати методології: BEM, OOCSS, SMACSS для структуризації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розбивати CSS на модулі або компоненти."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати препроцесори (Sass, Less) і змінні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мінімізувати специфічність селекторів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Документувати стилі і слідувати код-стайлу."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Писати повторно використовувані утиліти й міксіни."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Впроваджувати автоматичний лінтинг і тестування стилів."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "145. Які підходи до архітектури CSS для великомасштабних застосунків ви знаєте?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "BEM — чітке розділення блоків, елементів і модифікаторів для передбачуваності."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "OOCSS — розділення структури і стилів, повторне використання об’єктів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SMACSS — категоризація стилів на базові, макетні, модульні, станів і теми."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ITCSS — ієрархія шарів від глобальних до компонентних стилів для кращої організації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Atomic CSS / Utility-first — маленькі повторно використовувані класи для швидкого стилювання."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Кожен підхід можна комбінувати залежно від потреб проекту."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "146. Як зробити гамбургер-меню лише на CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створити гамбургер-меню на CSS можна так:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використати чекбокс ("
-              },
-              {
-                "text": "<input type=\"checkbox\">",
-                "code": true
-              },
-              {
-                "text": ") для контролю відкриття меню."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стилізувати три смужки як гамбургер через псевдоелементи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "При відміченому чекбоксі через CSS ("
-              },
-              {
-                "text": ":checked",
-                "code": true
-              },
-              {
-                "text": ") показувати/ховати меню."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Простий приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<input type=\"checkbox\" id=\"menu-toggle\" />\n<label for=\"menu-toggle\" class=\"hamburger\">\n  <span></span><span></span><span></span>\n</label>\n<nav class=\"menu\">\n  <a href=\"#\">Home</a>\n  <a href=\"#\">About</a>\n</nav>"
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".hamburger span {\n  display: block;\n  width: 30px;\n  height: 3px;\n  margin: 5px 0;\n  background: black;\n  transition: 0.3s;\n}\n\n.menu {\n  display: none;\n}\n\n#menu-toggle:checked + .hamburger + .menu {\n  display: block;\n}"
-      }
-    ]
-  },
-  {
-    "question": "147. Як зробити слайдер або карусель лише на CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Карусель на чистому CSS роблять через:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання "
-              },
-              {
-                "text": "input type=\"radio\"",
-                "code": true
-              },
-              {
-                "text": " або чекбоксів для керування слайдами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Приховані елементи-контролери ("
-              },
-              {
-                "text": "radio buttons",
-                "code": true
-              },
-              {
-                "text": "), стилізовані як навігація."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Позиціонування слайдів абсолютом в контейнері."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Показ слайду через CSS-селектор "
-              },
-              {
-                "text": ":checked",
-                "code": true
-              },
-              {
-                "text": " (наприклад, #slide1:checked ~ .slides .slide1 { opacity: 1; })."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Анімації або переходи для плавності."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Простий приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<input type=\"radio\" name=\"slider\" id=\"slide1\" checked />\n<input type=\"radio\" name=\"slider\" id=\"slide2\" />\n<div class=\"slides\">\n  <div class=\"slide slide1\">Slide 1</div>\n  <div class=\"slide slide2\">Slide 2</div>\n</div>\n<label for=\"slide1\">1</label>\n<label for=\"slide2\">2</label>"
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": ".slides .slide {\n  opacity: 0;\n  position: absolute;\n  transition: opacity 0.5s ease;\n}\n\n#slide1:checked ~ .slides .slide1,\n#slide2:checked ~ .slides .slide2 {\n  opacity: 1;\n  position: relative;\n}"
-      }
-    ]
-  },
-  {
-    "question": "148. Як реалізувати макет у стилі мура (masonry layout) за допомогою CSS?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб створити макет у стилі мура (masonry layout) на CSS, можна використовувати кілька підходів:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS Grid із властивістю grid-auto-rows та grid-row-end"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Потрібно вручну або через JS задавати висоту рядків, щоб елементи «заповнювали» вертикальний простір без фіксованої висоти."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання CSS Columns (найпростіший спосіб)"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".container {\n  column-count: 3;\n  column-gap: 1rem;\n}\n\n.item {\n  break-inside: avoid;\n  margin-bottom: 1rem;\n}"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Переваги: автоматичне «обтікання» елементів у колонки, але порядок читання зліва направо, зверху вниз."
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Новий спосіб — grid-template-rows: masonry (поки експериментальний, підтримка обмежена)."
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Підсумок:"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Для простих проектів — CSS Columns."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Для складніших — поєднання Grid і JS для обчислення висот."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "149. Як застосувати CSS до вебзастосунку, який має друкуватися, а також відображатися на екрані?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для окремого стилювання під друк і екран використовують медіа-запити:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "/* Стилі для екрану */\n@media screen {\n  /* тут стилі для екрана */\n}\n\n/* Стилі для друку */\n@media print {\n  /* тут стилі для друку */\n}"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Також можна підключати окремі CSS-файли:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<link rel=\"stylesheet\" href=\"screen.css\" media=\"screen\" />\n<link rel=\"stylesheet\" href=\"print.css\" media=\"print\" />"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це дозволяє оптимізувати вигляд для кожного режиму — приховувати меню, змінювати кольори, поліпшувати читабельність при друку."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "150. Як реалізувати безперебійний каскадний потік елементів у адаптивному дизайні?",
-    "category": "css",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Щоб створити безперебійний каскадний потік (flow) елементів в адаптивному дизайні, використовують:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS Flexbox з властивістю flex-wrap: wrap; — елементи переходять на новий рядок при браку місця."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS Grid з автоматичним заповненням колонок (grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Media queries для корекції кількості елементів у рядку залежно від ширини екрана."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання відсоткових/гнучких ширин замість фіксованих пікселів."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  }
-]
diff --git a/frontend/parse/typescript/advanced/typescript-advanced-quiz-part1.json b/frontend/parse/typescript/advanced/typescript-advanced-quiz-part1.json
deleted file mode 100644
index 2b2f3be2..00000000
--- a/frontend/parse/typescript/advanced/typescript-advanced-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "ts-adv-q01",
-      "order": 1,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке декоратор методу і які параметри він отримує?",
-        "exp": "Декоратор методу — це функція, що отримує target (прототип класу), propertyKey (ім'я методу) та descriptor (PropertyDescriptor для зміни поведінки методу)."
-      },
-      "en": {
-        "q": "What is a method decorator and what parameters does it receive?",
-        "exp": "A method decorator is a function that receives target (class prototype), propertyKey (method name), and descriptor (PropertyDescriptor to modify method behavior)."
-      },
-      "pl": {
-        "q": "Czym jest dekorator metody i jakie parametry otrzymuje?",
-        "exp": "Dekorator metody to funkcja otrzymująca target (prototyp klasy), propertyKey (nazwę metody) oraz descriptor (PropertyDescriptor do modyfikacji zachowania metody)."
-      },
-      "answers": [
-        {
-          "uk": "Тільки ім'я методу",
-          "en": "Only the method name",
-          "pl": "Tylko nazwę metody",
-          "correct": false
-        },
-        {
-          "uk": "target, propertyKey, descriptor",
-          "en": "target, propertyKey, descriptor",
-          "pl": "target, propertyKey, descriptor",
-          "correct": true
-        },
-        {
-          "uk": "constructor та arguments",
-          "en": "constructor and arguments",
-          "pl": "constructor i arguments",
-          "correct": false
-        },
-        {
-          "uk": "this та super",
-          "en": "this and super",
-          "pl": "this i super",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q02",
-      "order": 2,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яку опцію потрібно увімкнути в tsconfig.json для використання декораторів?",
-        "exp": "Для декораторів потрібно experimentalDecorators: true. Для роботи з метаданими додатково emitDecoratorMetadata: true."
-      },
-      "en": {
-        "q": "What option must be enabled in tsconfig.json to use decorators?",
-        "exp": "For decorators, experimentalDecorators: true is needed. For metadata support, additionally emitDecoratorMetadata: true."
-      },
-      "pl": {
-        "q": "Jaką opcję trzeba włączyć w tsconfig.json, aby używać dekoratorów?",
-        "exp": "Dla dekoratorów potrzeba experimentalDecorators: true. Dla obsługi metadanych dodatkowo emitDecoratorMetadata: true."
-      },
-      "answers": [
-        {
-          "uk": "enableDecorators: true",
-          "en": "enableDecorators: true",
-          "pl": "enableDecorators: true",
-          "correct": false
-        },
-        {
-          "uk": "experimentalDecorators: true",
-          "en": "experimentalDecorators: true",
-          "pl": "experimentalDecorators: true",
-          "correct": true
-        },
-        {
-          "uk": "useDecorators: true",
-          "en": "useDecorators: true",
-          "pl": "useDecorators: true",
-          "correct": false
-        },
-        {
-          "uk": "Декоратори увімкнені за замовчуванням",
-          "en": "Decorators are enabled by default",
-          "pl": "Dekoratory są włączone domyślnie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q03",
-      "order": 3,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке рефлексія (reflect-metadata) у TypeScript?",
-        "exp": "Рефлексія дозволяє зберігати та зчитувати метадані про класи, методи та властивості у рантаймі через Reflect.defineMetadata та Reflect.getMetadata."
-      },
-      "en": {
-        "q": "What is reflection (reflect-metadata) in TypeScript?",
-        "exp": "Reflection allows storing and reading metadata about classes, methods, and properties at runtime via Reflect.defineMetadata and Reflect.getMetadata."
-      },
-      "pl": {
-        "q": "Czym jest refleksja (reflect-metadata) w TypeScript?",
-        "exp": "Refleksja pozwala przechowywać i odczytywać metadane o klasach, metodach i właściwościach w runtime przez Reflect.defineMetadata i Reflect.getMetadata."
-      },
-      "answers": [
-        {
-          "uk": "Механізм зберігання/зчитування метаданих у рантаймі",
-          "en": "A mechanism for storing/reading metadata at runtime",
-          "pl": "Mechanizm przechowywania/odczytywania metadanych w runtime",
-          "correct": true
-        },
-        {
-          "uk": "Спосіб дзеркального копіювання об'єктів",
-          "en": "A way to mirror copy objects",
-          "pl": "Sposób kopiowania lustrzanego obiektów",
-          "correct": false
-        },
-        {
-          "uk": "Інструмент для налагодження коду",
-          "en": "A tool for debugging code",
-          "pl": "Narzędzie do debugowania kodu",
-          "correct": false
-        },
-        {
-          "uk": "Автоматичне створення типів",
-          "en": "Automatic type creation",
-          "pl": "Automatyczne tworzenie typów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q04",
-      "order": 4,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як створити власний type guard у TypeScript?",
-        "exp": "Власний type guard — це функція з типом повернення 'paramName is Type'. Якщо повертає true, TypeScript звужує тип параметра до вказаного."
-      },
-      "en": {
-        "q": "How do you create a custom type guard in TypeScript?",
-        "exp": "A custom type guard is a function with return type 'paramName is Type'. If it returns true, TypeScript narrows the parameter type to the specified one."
-      },
-      "pl": {
-        "q": "Jak utworzyć własny type guard w TypeScript?",
-        "exp": "Własny type guard to funkcja z typem zwracanym 'paramName is Type'. Jeśli zwraca true, TypeScript zawęża typ parametru do określonego."
-      },
-      "answers": [
-        {
-          "uk": "Через ключове слово guard",
-          "en": "Using the guard keyword",
-          "pl": "Za pomocą słowa kluczowego guard",
-          "correct": false
-        },
-        {
-          "uk": "Функція з типом повернення 'param is Type'",
-          "en": "A function with return type 'param is Type'",
-          "pl": "Funkcja z typem zwracanym 'param is Type'",
-          "correct": true
-        },
-        {
-          "uk": "Через декоратор @TypeGuard",
-          "en": "Using @TypeGuard decorator",
-          "pl": "Za pomocą dekoratora @TypeGuard",
-          "correct": false
-        },
-        {
-          "uk": "Власні type guards неможливі",
-          "en": "Custom type guards are not possible",
-          "pl": "Własne type guards nie są możliwe",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q05",
-      "order": 5,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як працює оператор in для звуження типів?",
-        "exp": "Оператор in перевіряє наявність властивості в об'єкті. TypeScript використовує це для type narrowing: if ('name' in obj) — obj має властивість name."
-      },
-      "en": {
-        "q": "How does the in operator work for type narrowing?",
-        "exp": "The in operator checks for property existence in an object. TypeScript uses this for type narrowing: if ('name' in obj) — obj has property name."
-      },
-      "pl": {
-        "q": "Jak działa operator in do zawężania typów?",
-        "exp": "Operator in sprawdza istnienie właściwości w obiekcie. TypeScript używa tego do zawężania typów: if ('name' in obj) — obj ma właściwość name."
-      },
-      "answers": [
-        {
-          "uk": "Перевіряє чи об'єкт є масивом",
-          "en": "Checks if object is an array",
-          "pl": "Sprawdza czy obiekt jest tablicą",
-          "correct": false
-        },
-        {
-          "uk": "Перевіряє наявність властивості та звужує тип",
-          "en": "Checks property existence and narrows type",
-          "pl": "Sprawdza istnienie właściwości i zawęża typ",
-          "correct": true
-        },
-        {
-          "uk": "Перевіряє тип змінної",
-          "en": "Checks variable type",
-          "pl": "Sprawdza typ zmiennej",
-          "correct": false
-        },
-        {
-          "uk": "Працює тільки з масивами",
-          "en": "Works only with arrays",
-          "pl": "Działa tylko z tablicami",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q06",
-      "order": 6,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Чим instanceof відрізняється від typeof для type narrowing?",
-        "exp": "typeof перевіряє примітивні типи (string, number тощо). instanceof перевіряє чи об'єкт є екземпляром класу, що корисно для класів та їх нащадків."
-      },
-      "en": {
-        "q": "How does instanceof differ from typeof for type narrowing?",
-        "exp": "typeof checks primitive types (string, number, etc.). instanceof checks if an object is an instance of a class, useful for classes and their descendants."
-      },
-      "pl": {
-        "q": "Czym instanceof różni się od typeof przy zawężaniu typów?",
-        "exp": "typeof sprawdza typy prymitywne (string, number itp.). instanceof sprawdza czy obiekt jest instancją klasy, przydatne dla klas i ich potomków."
-      },
-      "answers": [
-        {
-          "uk": "typeof для класів, instanceof для примітивів",
-          "en": "typeof for classes, instanceof for primitives",
-          "pl": "typeof dla klas, instanceof dla prymitywów",
-          "correct": false
-        },
-        {
-          "uk": "typeof для примітивів, instanceof для екземплярів класів",
-          "en": "typeof for primitives, instanceof for class instances",
-          "pl": "typeof dla prymitywów, instanceof dla instancji klas",
-          "correct": true
-        },
-        {
-          "uk": "Немає різниці, це синоніми",
-          "en": "No difference, they are synonyms",
-          "pl": "Nie ma różnicy, to synonimy",
-          "correct": false
-        },
-        {
-          "uk": "instanceof застарілий, використовуйте typeof",
-          "en": "instanceof is deprecated, use typeof",
-          "pl": "instanceof jest przestarzały, używaj typeof",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q07",
-      "order": 7,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить утилітний тип Omit<T, K>?",
-        "exp": "Omit<T, K> створює новий тип, виключаючи вказані ключі K з типу T. Протилежність Pick — замість вибору виключає властивості."
-      },
-      "en": {
-        "q": "What does the Omit<T, K> utility type do?",
-        "exp": "Omit<T, K> creates a new type by excluding specified keys K from type T. The opposite of Pick — excludes properties instead of selecting them."
-      },
-      "pl": {
-        "q": "Co robi typ narzędziowy Omit<T, K>?",
-        "exp": "Omit<T, K> tworzy nowy typ wykluczając wskazane klucze K z typu T. Przeciwieństwo Pick — wyklucza właściwości zamiast je wybierać."
-      },
-      "answers": [
-        {
-          "uk": "Вибирає вказані властивості",
-          "en": "Selects specified properties",
-          "pl": "Wybiera wskazane właściwości",
-          "correct": false
-        },
-        {
-          "uk": "Виключає вказані властивості з типу",
-          "en": "Excludes specified properties from type",
-          "pl": "Wyklucza wskazane właściwości z typu",
-          "correct": true
-        },
-        {
-          "uk": "Робить властивості опціональними",
-          "en": "Makes properties optional",
-          "pl": "Czyni właściwości opcjonalnymi",
-          "correct": false
-        },
-        {
-          "uk": "Видаляє null і undefined",
-          "en": "Removes null and undefined",
-          "pl": "Usuwa null i undefined",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q08",
-      "order": 8,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить утилітний тип Record<K, T>?",
-        "exp": "Record<K, T> створює об'єктний тип, де ключі мають тип K, а значення — тип T. Наприклад: Record<string, number> — об'єкт з рядковими ключами та числовими значеннями."
-      },
-      "en": {
-        "q": "What does the Record<K, T> utility type do?",
-        "exp": "Record<K, T> creates an object type where keys have type K and values have type T. For example: Record<string, number> — object with string keys and number values."
-      },
-      "pl": {
-        "q": "Co robi typ narzędziowy Record<K, T>?",
-        "exp": "Record<K, T> tworzy typ obiektowy, gdzie klucze mają typ K, a wartości typ T. Na przykład: Record<string, number> — obiekt z kluczami string i wartościami number."
-      },
-      "answers": [
-        {
-          "uk": "Записує дані в базу даних",
-          "en": "Records data to database",
-          "pl": "Zapisuje dane do bazy danych",
-          "correct": false
-        },
-        {
-          "uk": "Створює об'єкт з ключами типу K та значеннями типу T",
-          "en": "Creates object with keys of type K and values of type T",
-          "pl": "Tworzy obiekt z kluczami typu K i wartościami typu T",
-          "correct": true
-        },
-        {
-          "uk": "Конвертує масив в об'єкт",
-          "en": "Converts array to object",
-          "pl": "Konwertuje tablicę na obiekt",
-          "correct": false
-        },
-        {
-          "uk": "Створює масив з елементами типу T",
-          "en": "Creates array with elements of type T",
-          "pl": "Tworzy tablicę z elementami typu T",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q09",
-      "order": 9,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить утилітний тип Exclude<T, U>?",
-        "exp": "Exclude<T, U> видаляє з union-типу T всі типи, які присвоювані до U. Наприклад: Exclude<'a' | 'b' | 'c', 'a'> дає 'b' | 'c'."
-      },
-      "en": {
-        "q": "What does the Exclude<T, U> utility type do?",
-        "exp": "Exclude<T, U> removes from union type T all types assignable to U. For example: Exclude<'a' | 'b' | 'c', 'a'> gives 'b' | 'c'."
-      },
-      "pl": {
-        "q": "Co robi typ narzędziowy Exclude<T, U>?",
-        "exp": "Exclude<T, U> usuwa z typu union T wszystkie typy przypisywalne do U. Na przykład: Exclude<'a' | 'b' | 'c', 'a'> daje 'b' | 'c'."
-      },
-      "answers": [
-        {
-          "uk": "Виключає властивості з об'єкта",
-          "en": "Excludes properties from object",
-          "pl": "Wyklucza właściwości z obiektu",
-          "correct": false
-        },
-        {
-          "uk": "Видаляє з union-типу вказані типи",
-          "en": "Removes specified types from union type",
-          "pl": "Usuwa wskazane typy z typu union",
-          "correct": true
-        },
-        {
-          "uk": "Створює новий клас без вказаних методів",
-          "en": "Creates new class without specified methods",
-          "pl": "Tworzy nową klasę bez wskazanych metod",
-          "correct": false
-        },
-        {
-          "uk": "Виключає null з типу",
-          "en": "Excludes null from type",
-          "pl": "Wyklucza null z typu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q10",
-      "order": 10,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить утилітний тип NonNullable<T>?",
-        "exp": "NonNullable<T> видаляє null та undefined з типу T. Наприклад: NonNullable<string | null | undefined> дає string."
-      },
-      "en": {
-        "q": "What does the NonNullable<T> utility type do?",
-        "exp": "NonNullable<T> removes null and undefined from type T. For example: NonNullable<string | null | undefined> gives string."
-      },
-      "pl": {
-        "q": "Co robi typ narzędziowy NonNullable<T>?",
-        "exp": "NonNullable<T> usuwa null i undefined z typu T. Na przykład: NonNullable<string | null | undefined> daje string."
-      },
-      "answers": [
-        {
-          "uk": "Робить всі властивості обов'язковими",
-          "en": "Makes all properties required",
-          "pl": "Czyni wszystkie właściwości wymaganymi",
-          "correct": false
-        },
-        {
-          "uk": "Видаляє null та undefined з типу",
-          "en": "Removes null and undefined from type",
-          "pl": "Usuwa null i undefined z typu",
-          "correct": true
-        },
-        {
-          "uk": "Забороняє присвоєння null",
-          "en": "Prohibits null assignment",
-          "pl": "Zabrania przypisania null",
-          "correct": false
-        },
-        {
-          "uk": "Перетворює nullable тип в string",
-          "en": "Converts nullable type to string",
-          "pl": "Konwertuje typ nullable na string",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/frontend/parse/typescript/advanced/typescript-advanced-quiz-part2.json b/frontend/parse/typescript/advanced/typescript-advanced-quiz-part2.json
deleted file mode 100644
index 215ebe1b..00000000
--- a/frontend/parse/typescript/advanced/typescript-advanced-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "ts-adv-q11",
-      "order": 11,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить утилітний тип ReturnType<T>?",
-        "exp": "ReturnType<T> витягує тип повернення функції T. Наприклад: ReturnType<() => string> дає string."
-      },
-      "en": {
-        "q": "What does the ReturnType<T> utility type do?",
-        "exp": "ReturnType<T> extracts the return type of function T. For example: ReturnType<() => string> gives string."
-      },
-      "pl": {
-        "q": "Co robi typ narzędziowy ReturnType<T>?",
-        "exp": "ReturnType<T> wyodrębnia typ zwracany funkcji T. Na przykład: ReturnType<() => string> daje string."
-      },
-      "answers": [
-        {
-          "uk": "Витягує тип повернення функції",
-          "en": "Extracts the return type of a function",
-          "pl": "Wyodrębnia typ zwracany funkcji",
-          "correct": true
-        },
-        {
-          "uk": "Повертає тип першого параметра",
-          "en": "Returns the type of first parameter",
-          "pl": "Zwraca typ pierwszego parametru",
-          "correct": false
-        },
-        {
-          "uk": "Створює функцію з вказаним типом повернення",
-          "en": "Creates a function with specified return type",
-          "pl": "Tworzy funkcję z określonym typem zwracanym",
-          "correct": false
-        },
-        {
-          "uk": "Перевіряє чи функція повертає значення",
-          "en": "Checks if function returns a value",
-          "pl": "Sprawdza czy funkcja zwraca wartość",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q12",
-      "order": 12,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить утилітний тип Parameters<T>?",
-        "exp": "Parameters<T> витягує типи параметрів функції T у вигляді кортежу. Наприклад: Parameters<(a: string, b: number) => void> дає [string, number]."
-      },
-      "en": {
-        "q": "What does the Parameters<T> utility type do?",
-        "exp": "Parameters<T> extracts parameter types of function T as a tuple. For example: Parameters<(a: string, b: number) => void> gives [string, number]."
-      },
-      "pl": {
-        "q": "Co robi typ narzędziowy Parameters<T>?",
-        "exp": "Parameters<T> wyodrębnia typy parametrów funkcji T jako krotkę. Na przykład: Parameters<(a: string, b: number) => void> daje [string, number]."
-      },
-      "answers": [
-        {
-          "uk": "Повертає кількість параметрів функції",
-          "en": "Returns the number of function parameters",
-          "pl": "Zwraca liczbę parametrów funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Витягує типи параметрів функції у вигляді кортежу",
-          "en": "Extracts parameter types of function as a tuple",
-          "pl": "Wyodrębnia typy parametrów funkcji jako krotkę",
-          "correct": true
-        },
-        {
-          "uk": "Робить всі параметри опціональними",
-          "en": "Makes all parameters optional",
-          "pl": "Czyni wszystkie parametry opcjonalnymi",
-          "correct": false
-        },
-        {
-          "uk": "Перейменовує параметри функції",
-          "en": "Renames function parameters",
-          "pl": "Zmienia nazwy parametrów funkcji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q13",
-      "order": 13,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Для чого використовується ключове слово infer в умовних типах?",
-        "exp": "infer дозволяє виводити тип всередині умовного типу. Наприклад: T extends Array<infer U> ? U : never витягує тип елементів масиву."
-      },
-      "en": {
-        "q": "What is the infer keyword used for in conditional types?",
-        "exp": "infer allows inferring a type within a conditional type. For example: T extends Array<infer U> ? U : never extracts the array element type."
-      },
-      "pl": {
-        "q": "Do czego służy słowo kluczowe infer w typach warunkowych?",
-        "exp": "infer pozwala wnioskować typ wewnątrz typu warunkowego. Na przykład: T extends Array<infer U> ? U : never wyodrębnia typ elementów tablicy."
-      },
-      "answers": [
-        {
-          "uk": "Для явного вказання типу",
-          "en": "For explicit type specification",
-          "pl": "Do jawnego określenia typu",
-          "correct": false
-        },
-        {
-          "uk": "Для виведення типу всередині умовного типу",
-          "en": "For inferring a type within a conditional type",
-          "pl": "Do wnioskowania typu wewnątrz typu warunkowego",
-          "correct": true
-        },
-        {
-          "uk": "Для створення нового класу",
-          "en": "For creating a new class",
-          "pl": "Do tworzenia nowej klasy",
-          "correct": false
-        },
-        {
-          "uk": "Для перевірки типу в рантаймі",
-          "en": "For runtime type checking",
-          "pl": "Do sprawdzania typu w runtime",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q14",
-      "order": 14,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке template literal types у TypeScript?",
-        "exp": "Template literal types дозволяють створювати типи на основі шаблонних рядків. Наприклад: type Event = `on${Capitalize<string>}` створює типи як 'onClick', 'onHover'."
-      },
-      "en": {
-        "q": "What are template literal types in TypeScript?",
-        "exp": "Template literal types allow creating types based on template strings. For example: type Event = `on${Capitalize<string>}` creates types like 'onClick', 'onHover'."
-      },
-      "pl": {
-        "q": "Czym są template literal types w TypeScript?",
-        "exp": "Template literal types pozwalają tworzyć typy na podstawie szablonów stringów. Na przykład: type Event = `on${Capitalize<string>}` tworzy typy jak 'onClick', 'onHover'."
-      },
-      "answers": [
-        {
-          "uk": "Типи для роботи з шаблонними рядками ES6",
-          "en": "Types for working with ES6 template strings",
-          "pl": "Typy do pracy z szablonami stringów ES6",
-          "correct": false
-        },
-        {
-          "uk": "Типи, створені на основі шаблонних рядків",
-          "en": "Types created based on template strings",
-          "pl": "Typy utworzone na podstawie szablonów stringów",
-          "correct": true
-        },
-        {
-          "uk": "Типи для HTML-шаблонів",
-          "en": "Types for HTML templates",
-          "pl": "Typy dla szablonów HTML",
-          "correct": false
-        },
-        {
-          "uk": "Застарілий синтаксис для рядків",
-          "en": "Deprecated string syntax",
-          "pl": "Przestarzała składnia dla stringów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q15",
-      "order": 15,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить опція strictNullChecks у tsconfig.json?",
-        "exp": "strictNullChecks: true змушує TypeScript розрізняти null та undefined від інших типів. Без неї всі типи неявно можуть бути null/undefined."
-      },
-      "en": {
-        "q": "What does the strictNullChecks option do in tsconfig.json?",
-        "exp": "strictNullChecks: true forces TypeScript to distinguish null and undefined from other types. Without it, all types can implicitly be null/undefined."
-      },
-      "pl": {
-        "q": "Co robi opcja strictNullChecks w tsconfig.json?",
-        "exp": "strictNullChecks: true zmusza TypeScript do rozróżniania null i undefined od innych typów. Bez niej wszystkie typy mogą niejawnie być null/undefined."
-      },
-      "answers": [
-        {
-          "uk": "Забороняє використання null",
-          "en": "Prohibits the use of null",
-          "pl": "Zabrania używania null",
-          "correct": false
-        },
-        {
-          "uk": "Розрізняє null/undefined від інших типів",
-          "en": "Distinguishes null/undefined from other types",
-          "pl": "Rozróżnia null/undefined od innych typów",
-          "correct": true
-        },
-        {
-          "uk": "Автоматично перевіряє на null",
-          "en": "Automatically checks for null",
-          "pl": "Automatycznie sprawdza null",
-          "correct": false
-        },
-        {
-          "uk": "Видаляє null з усіх типів",
-          "en": "Removes null from all types",
-          "pl": "Usuwa null ze wszystkich typów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q16",
-      "order": 16,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить опція noImplicitAny у tsconfig.json?",
-        "exp": "noImplicitAny: true забороняє TypeScript автоматично підставляти тип any, коли тип не вказано. Це змушує явно типізувати всі параметри."
-      },
-      "en": {
-        "q": "What does the noImplicitAny option do in tsconfig.json?",
-        "exp": "noImplicitAny: true prohibits TypeScript from automatically substituting any type when type is not specified. Forces explicit typing of all parameters."
-      },
-      "pl": {
-        "q": "Co robi opcja noImplicitAny w tsconfig.json?",
-        "exp": "noImplicitAny: true zabrania TypeScript automatycznego podstawiania typu any, gdy typ nie jest określony. Wymusza jawne typowanie wszystkich parametrów."
-      },
-      "answers": [
-        {
-          "uk": "Дозволяє використовувати any скрізь",
-          "en": "Allows using any everywhere",
-          "pl": "Pozwala używać any wszędzie",
-          "correct": false
-        },
-        {
-          "uk": "Забороняє неявне any, вимагає явної типізації",
-          "en": "Prohibits implicit any, requires explicit typing",
-          "pl": "Zabrania niejawnego any, wymaga jawnego typowania",
-          "correct": true
-        },
-        {
-          "uk": "Замінює any на unknown",
-          "en": "Replaces any with unknown",
-          "pl": "Zamienia any na unknown",
-          "correct": false
-        },
-        {
-          "uk": "Видаляє всі типи any з коду",
-          "en": "Removes all any types from code",
-          "pl": "Usuwa wszystkie typy any z kodu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q17",
-      "order": 17,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить опція esModuleInterop у tsconfig.json?",
-        "exp": "esModuleInterop: true дозволяє коректно імпортувати CommonJS-модулі як ES-модулі. Без неї default import з CommonJS не працює правильно."
-      },
-      "en": {
-        "q": "What does the esModuleInterop option do in tsconfig.json?",
-        "exp": "esModuleInterop: true allows correctly importing CommonJS modules as ES modules. Without it, default import from CommonJS doesn't work correctly."
-      },
-      "pl": {
-        "q": "Co robi opcja esModuleInterop w tsconfig.json?",
-        "exp": "esModuleInterop: true pozwala poprawnie importować moduły CommonJS jako moduły ES. Bez niej domyślny import z CommonJS nie działa poprawnie."
-      },
-      "answers": [
-        {
-          "uk": "Вимикає підтримку ES-модулів",
-          "en": "Disables ES module support",
-          "pl": "Wyłącza obsługę modułów ES",
-          "correct": false
-        },
-        {
-          "uk": "Дозволяє коректно імпортувати CommonJS як ES-модулі",
-          "en": "Allows correctly importing CommonJS as ES modules",
-          "pl": "Pozwala poprawnie importować CommonJS jako moduły ES",
-          "correct": true
-        },
-        {
-          "uk": "Перетворює ES-модулі на CommonJS",
-          "en": "Converts ES modules to CommonJS",
-          "pl": "Konwertuje moduły ES na CommonJS",
-          "correct": false
-        },
-        {
-          "uk": "Забороняє використання require()",
-          "en": "Prohibits the use of require()",
-          "pl": "Zabrania używania require()",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q18",
-      "order": 18,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується опція paths у tsconfig.json?",
-        "exp": "paths дозволяє створювати alias-и для шляхів імпорту. Наприклад: '@components/*': ['src/components/*'] замінює довгі відносні шляхи на короткі."
-      },
-      "en": {
-        "q": "What is the paths option used for in tsconfig.json?",
-        "exp": "paths allows creating aliases for import paths. For example: '@components/*': ['src/components/*'] replaces long relative paths with short ones."
-      },
-      "pl": {
-        "q": "Do czego służy opcja paths w tsconfig.json?",
-        "exp": "paths pozwala tworzyć aliasy dla ścieżek importu. Na przykład: '@components/*': ['src/components/*'] zastępuje długie ścieżki względne krótkimi."
-      },
-      "answers": [
-        {
-          "uk": "Вказує шлях до node_modules",
-          "en": "Specifies path to node_modules",
-          "pl": "Określa ścieżkę do node_modules",
-          "correct": false
-        },
-        {
-          "uk": "Створює alias-и для шляхів імпорту",
-          "en": "Creates aliases for import paths",
-          "pl": "Tworzy aliasy dla ścieżek importu",
-          "correct": true
-        },
-        {
-          "uk": "Вказує шляхи для компіляції",
-          "en": "Specifies paths for compilation",
-          "pl": "Określa ścieżki dla kompilacji",
-          "correct": false
-        },
-        {
-          "uk": "Видаляє файли з компіляції",
-          "en": "Removes files from compilation",
-          "pl": "Usuwa pliki z kompilacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q19",
-      "order": 19,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке поступова (incremental) компіляція в TypeScript?",
-        "exp": "Incremental: true зберігає інформацію про попередню збірку в .tsbuildinfo і компілює тільки змінені файли, значно прискорюючи збірку великих проєктів."
-      },
-      "en": {
-        "q": "What is incremental compilation in TypeScript?",
-        "exp": "Incremental: true saves previous build info in .tsbuildinfo and compiles only changed files, significantly speeding up builds for large projects."
-      },
-      "pl": {
-        "q": "Czym jest kompilacja przyrostowa (incremental) w TypeScript?",
-        "exp": "Incremental: true zapisuje informacje o poprzedniej kompilacji w .tsbuildinfo i kompiluje tylko zmienione pliki, znacznie przyspieszając budowanie dużych projektów."
-      },
-      "answers": [
-        {
-          "uk": "Компіляція по одному файлу за раз",
-          "en": "Compilation of one file at a time",
-          "pl": "Kompilacja jednego pliku na raz",
-          "correct": false
-        },
-        {
-          "uk": "Компіляція тільки змінених файлів на основі кешу",
-          "en": "Compilation of only changed files based on cache",
-          "pl": "Kompilacja tylko zmienionych plików na podstawie cache",
-          "correct": true
-        },
-        {
-          "uk": "Компіляція у зворотному порядку",
-          "en": "Compilation in reverse order",
-          "pl": "Kompilacja w odwrotnej kolejności",
-          "correct": false
-        },
-        {
-          "uk": "Автоматична компіляція при збереженні",
-          "en": "Automatic compilation on save",
-          "pl": "Automatyczna kompilacja przy zapisie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q20",
-      "order": 20,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як створити декларацію типів для JavaScript-бібліотеки без типів?",
-        "exp": "Створіть файл .d.ts з declare module 'library-name' { ... } де описуєте експортовані функції та типи. TypeScript автоматично підхопить ці визначення."
-      },
-      "en": {
-        "q": "How do you create type declarations for a JavaScript library without types?",
-        "exp": "Create a .d.ts file with declare module 'library-name' { ... } where you describe exported functions and types. TypeScript will automatically pick up these definitions."
-      },
-      "pl": {
-        "q": "Jak utworzyć deklaracje typów dla biblioteki JavaScript bez typów?",
-        "exp": "Utwórz plik .d.ts z declare module 'library-name' { ... } gdzie opisujesz eksportowane funkcje i typy. TypeScript automatycznie pobierze te definicje."
-      },
-      "answers": [
-        {
-          "uk": "Використати @ts-ignore для всіх імпортів",
-          "en": "Use @ts-ignore for all imports",
-          "pl": "Użyć @ts-ignore dla wszystkich importów",
-          "correct": false
-        },
-        {
-          "uk": "Створити .d.ts файл з declare module",
-          "en": "Create a .d.ts file with declare module",
-          "pl": "Utworzyć plik .d.ts z declare module",
-          "correct": true
-        },
-        {
-          "uk": "Перетворити бібліотеку на TypeScript",
-          "en": "Convert the library to TypeScript",
-          "pl": "Przekonwertować bibliotekę na TypeScript",
-          "correct": false
-        },
-        {
-          "uk": "Типи створюються автоматично",
-          "en": "Types are created automatically",
-          "pl": "Typy tworzone są automatycznie",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/frontend/parse/typescript/advanced/typescript-advanced-quiz-part3.json b/frontend/parse/typescript/advanced/typescript-advanced-quiz-part3.json
deleted file mode 100644
index bea70b96..00000000
--- a/frontend/parse/typescript/advanced/typescript-advanced-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "ts-adv-q21",
-      "order": 21,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як реалізувати патерн Singleton у TypeScript?",
-        "exp": "Singleton реалізується через приватний конструктор та статичний метод getInstance(), який створює або повертає єдиний екземпляр класу."
-      },
-      "en": {
-        "q": "How do you implement the Singleton pattern in TypeScript?",
-        "exp": "Singleton is implemented via a private constructor and static getInstance() method that creates or returns the single class instance."
-      },
-      "pl": {
-        "q": "Jak zaimplementować wzorzec Singleton w TypeScript?",
-        "exp": "Singleton implementuje się przez prywatny konstruktor i statyczną metodę getInstance(), która tworzy lub zwraca pojedynczą instancję klasy."
-      },
-      "answers": [
-        {
-          "uk": "Через декоратор @Singleton",
-          "en": "Using @Singleton decorator",
-          "pl": "Za pomocą dekoratora @Singleton",
-          "correct": false
-        },
-        {
-          "uk": "Приватний конструктор + статичний getInstance()",
-          "en": "Private constructor + static getInstance()",
-          "pl": "Prywatny konstruktor + statyczny getInstance()",
-          "correct": true
-        },
-        {
-          "uk": "Через ключове слово singleton",
-          "en": "Using singleton keyword",
-          "pl": "Za pomocą słowa kluczowego singleton",
-          "correct": false
-        },
-        {
-          "uk": "TypeScript не підтримує Singleton",
-          "en": "TypeScript does not support Singleton",
-          "pl": "TypeScript nie obsługuje Singleton",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q22",
-      "order": 22,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке патерн Factory у TypeScript?",
-        "exp": "Factory — патерн, де функція або метод створює об'єкти на основі параметрів, приховуючи логіку створення. Дозволяє гнучко створювати різні реалізації інтерфейсу."
-      },
-      "en": {
-        "q": "What is the Factory pattern in TypeScript?",
-        "exp": "Factory is a pattern where a function or method creates objects based on parameters, hiding creation logic. Allows flexible creation of different interface implementations."
-      },
-      "pl": {
-        "q": "Czym jest wzorzec Factory w TypeScript?",
-        "exp": "Factory to wzorzec, gdzie funkcja lub metoda tworzy obiekty na podstawie parametrów, ukrywając logikę tworzenia. Pozwala elastycznie tworzyć różne implementacje interfejsu."
-      },
-      "answers": [
-        {
-          "uk": "Метод для копіювання об'єктів",
-          "en": "Method for copying objects",
-          "pl": "Metoda do kopiowania obiektów",
-          "correct": false
-        },
-        {
-          "uk": "Функція, що створює об'єкти приховуючи логіку створення",
-          "en": "Function that creates objects hiding creation logic",
-          "pl": "Funkcja tworząca obiekty ukrywając logikę tworzenia",
-          "correct": true
-        },
-        {
-          "uk": "Клас для роботи з базою даних",
-          "en": "Class for database operations",
-          "pl": "Klasa do operacji na bazie danych",
-          "correct": false
-        },
-        {
-          "uk": "Спосіб валідації даних",
-          "en": "Way to validate data",
-          "pl": "Sposób walidacji danych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q23",
-      "order": 23,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як декоратори використовуються для Dependency Injection у NestJS/Angular?",
-        "exp": "Декоратори @Injectable, @Inject записують метадані про залежності. DI-контейнер читає ці метадані та автоматично підставляє потрібні сервіси в конструктор."
-      },
-      "en": {
-        "q": "How are decorators used for Dependency Injection in NestJS/Angular?",
-        "exp": "Decorators @Injectable, @Inject write metadata about dependencies. The DI container reads this metadata and automatically injects required services into the constructor."
-      },
-      "pl": {
-        "q": "Jak dekoratory są używane do Dependency Injection w NestJS/Angular?",
-        "exp": "Dekoratory @Injectable, @Inject zapisują metadane o zależnościach. Kontener DI odczytuje te metadane i automatycznie wstrzykuje wymagane serwisy do konstruktora."
-      },
-      "answers": [
-        {
-          "uk": "Декоратори створюють нові екземпляри вручну",
-          "en": "Decorators create new instances manually",
-          "pl": "Dekoratory tworzą nowe instancje ręcznie",
-          "correct": false
-        },
-        {
-          "uk": "Записують метадані для автоматичного впровадження залежностей",
-          "en": "Write metadata for automatic dependency injection",
-          "pl": "Zapisują metadane do automatycznego wstrzykiwania zależności",
-          "correct": true
-        },
-        {
-          "uk": "Декоратори не використовуються для DI",
-          "en": "Decorators are not used for DI",
-          "pl": "Dekoratory nie są używane do DI",
-          "correct": false
-        },
-        {
-          "uk": "Тільки для логування залежностей",
-          "en": "Only for logging dependencies",
-          "pl": "Tylko do logowania zależności",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q24",
-      "order": 24,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як типізувати React-компонент з пропсами у TypeScript?",
-        "exp": "Створюється interface або type для props, потім використовується React.FC<Props> або функція з типізованим параметром: const Component = ({ title }: Props) => ..."
-      },
-      "en": {
-        "q": "How do you type a React component with props in TypeScript?",
-        "exp": "Create an interface or type for props, then use React.FC<Props> or a function with typed parameter: const Component = ({ title }: Props) => ..."
-      },
-      "pl": {
-        "q": "Jak typować komponent React z propsami w TypeScript?",
-        "exp": "Tworzy się interface lub type dla props, potem używa React.FC<Props> lub funkcji z typowanym parametrem: const Component = ({ title }: Props) => ..."
-      },
-      "answers": [
-        {
-          "uk": "Через коментарі JSDoc",
-          "en": "Using JSDoc comments",
-          "pl": "Za pomocą komentarzy JSDoc",
-          "correct": false
-        },
-        {
-          "uk": "Interface/type для props + React.FC<Props> або типізований параметр",
-          "en": "Interface/type for props + React.FC<Props> or typed parameter",
-          "pl": "Interface/type dla props + React.FC<Props> lub typowany parametr",
-          "correct": true
-        },
-        {
-          "uk": "TypeScript автоматично виводить пропси",
-          "en": "TypeScript automatically infers props",
-          "pl": "TypeScript automatycznie wnioskuje propsy",
-          "correct": false
-        },
-        {
-          "uk": "Через PropTypes",
-          "en": "Using PropTypes",
-          "pl": "Za pomocą PropTypes",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q25",
-      "order": 25,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як типізувати useState hook у React з TypeScript?",
-        "exp": "useState типізується через generic: useState<string>('') або useState<User | null>(null). TypeScript виведе тип автоматично, якщо початкове значення однозначне."
-      },
-      "en": {
-        "q": "How do you type the useState hook in React with TypeScript?",
-        "exp": "useState is typed via generic: useState<string>('') or useState<User | null>(null). TypeScript will infer the type automatically if initial value is unambiguous."
-      },
-      "pl": {
-        "q": "Jak typować hook useState w React z TypeScript?",
-        "exp": "useState typuje się przez generic: useState<string>('') lub useState<User | null>(null). TypeScript automatycznie wywnioskuje typ, jeśli wartość początkowa jest jednoznaczna."
-      },
-      "answers": [
-        {
-          "uk": "Типізація не потрібна для useState",
-          "en": "Typing is not needed for useState",
-          "pl": "Typowanie nie jest potrzebne dla useState",
-          "correct": false
-        },
-        {
-          "uk": "Через generic: useState<Type>(initialValue)",
-          "en": "Via generic: useState<Type>(initialValue)",
-          "pl": "Przez generic: useState<Type>(initialValue)",
-          "correct": true
-        },
-        {
-          "uk": "Через декоратор @State",
-          "en": "Using @State decorator",
-          "pl": "Za pomocą dekoratora @State",
-          "correct": false
-        },
-        {
-          "uk": "Через PropTypes.state",
-          "en": "Using PropTypes.state",
-          "pl": "Za pomocą PropTypes.state",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q26",
-      "order": 26,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як налаштувати Jest для тестування TypeScript-коду?",
-        "exp": "Встановити jest, ts-jest та @types/jest. Потім налаштувати jest.config.js з preset: 'ts-jest' або виконати npx ts-jest config:init."
-      },
-      "en": {
-        "q": "How do you configure Jest for testing TypeScript code?",
-        "exp": "Install jest, ts-jest and @types/jest. Then configure jest.config.js with preset: 'ts-jest' or run npx ts-jest config:init."
-      },
-      "pl": {
-        "q": "Jak skonfigurować Jest do testowania kodu TypeScript?",
-        "exp": "Zainstalować jest, ts-jest i @types/jest. Następnie skonfigurować jest.config.js z preset: 'ts-jest' lub wykonać npx ts-jest config:init."
-      },
-      "answers": [
-        {
-          "uk": "Jest працює з TypeScript без налаштувань",
-          "en": "Jest works with TypeScript without configuration",
-          "pl": "Jest działa z TypeScript bez konfiguracji",
-          "correct": false
-        },
-        {
-          "uk": "Встановити ts-jest та налаштувати preset: 'ts-jest'",
-          "en": "Install ts-jest and configure preset: 'ts-jest'",
-          "pl": "Zainstalować ts-jest i skonfigurować preset: 'ts-jest'",
-          "correct": true
-        },
-        {
-          "uk": "Використовувати тільки Mocha для TypeScript",
-          "en": "Use only Mocha for TypeScript",
-          "pl": "Używać tylko Mocha dla TypeScript",
-          "correct": false
-        },
-        {
-          "uk": "Спочатку скомпілювати в JS, потім тестувати",
-          "en": "First compile to JS, then test",
-          "pl": "Najpierw skompilować do JS, potem testować",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке tree shaking і як TypeScript його підтримує?",
-        "exp": "Tree shaking — видалення невикористаного коду при збірці. TypeScript підтримує його через ES-модулі (module: 'ESNext') та іменовані експорти."
-      },
-      "en": {
-        "q": "What is tree shaking and how does TypeScript support it?",
-        "exp": "Tree shaking is removing unused code during build. TypeScript supports it through ES modules (module: 'ESNext') and named exports."
-      },
-      "pl": {
-        "q": "Czym jest tree shaking i jak TypeScript go obsługuje?",
-        "exp": "Tree shaking to usuwanie nieużywanego kodu podczas budowania. TypeScript obsługuje go przez moduły ES (module: 'ESNext') i nazwane eksporty."
-      },
-      "answers": [
-        {
-          "uk": "Оптимізація швидкості виконання коду",
-          "en": "Optimization of code execution speed",
-          "pl": "Optymalizacja szybkości wykonywania kodu",
-          "correct": false
-        },
-        {
-          "uk": "Видалення невикористаного коду через ES-модулі",
-          "en": "Removing unused code through ES modules",
-          "pl": "Usuwanie nieużywanego kodu przez moduły ES",
-          "correct": true
-        },
-        {
-          "uk": "Спосіб структурування файлів",
-          "en": "Way to structure files",
-          "pl": "Sposób strukturyzowania plików",
-          "correct": false
-        },
-        {
-          "uk": "Автоматичне видалення коментарів",
-          "en": "Automatic removal of comments",
-          "pl": "Automatyczne usuwanie komentarzy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q28",
-      "order": 28,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як працює code splitting з динамічними імпортами у TypeScript?",
-        "exp": "Динамічний імпорт import('./module') повертає Promise з модулем. Bundler (Webpack, Vite) автоматично виділяє модуль в окремий chunk для відкладеного завантаження."
-      },
-      "en": {
-        "q": "How does code splitting with dynamic imports work in TypeScript?",
-        "exp": "Dynamic import import('./module') returns a Promise with the module. Bundler (Webpack, Vite) automatically extracts the module into a separate chunk for lazy loading."
-      },
-      "pl": {
-        "q": "Jak działa code splitting z dynamicznymi importami w TypeScript?",
-        "exp": "Dynamiczny import import('./module') zwraca Promise z modułem. Bundler (Webpack, Vite) automatycznie wyodrębnia moduł do osobnego chunka do leniwego ładowania."
-      },
-      "answers": [
-        {
-          "uk": "Через спеціальну директиву // @split",
-          "en": "Through special directive // @split",
-          "pl": "Przez specjalną dyrektywę // @split",
-          "correct": false
-        },
-        {
-          "uk": "import() повертає Promise, bundler створює окремий chunk",
-          "en": "import() returns Promise, bundler creates separate chunk",
-          "pl": "import() zwraca Promise, bundler tworzy osobny chunk",
-          "correct": true
-        },
-        {
-          "uk": "TypeScript не підтримує code splitting",
-          "en": "TypeScript does not support code splitting",
-          "pl": "TypeScript nie obsługuje code splitting",
-          "correct": false
-        },
-        {
-          "uk": "Через ключове слово lazy",
-          "en": "Using lazy keyword",
-          "pl": "Za pomocą słowa kluczowego lazy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q29",
-      "order": 29,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке barrel exports (re-exports) у TypeScript?",
-        "exp": "Barrel export — це index.ts файл, що реекспортує модулі з папки: export * from './moduleA'. Дозволяє імпортувати все з однієї точки: import { A, B } from './folder'."
-      },
-      "en": {
-        "q": "What are barrel exports (re-exports) in TypeScript?",
-        "exp": "Barrel export is an index.ts file that re-exports modules from a folder: export * from './moduleA'. Allows importing everything from one point: import { A, B } from './folder'."
-      },
-      "pl": {
-        "q": "Czym są barrel exports (re-exports) w TypeScript?",
-        "exp": "Barrel export to plik index.ts reeksportujący moduły z folderu: export * from './moduleA'. Pozwala importować wszystko z jednego punktu: import { A, B } from './folder'."
-      },
-      "answers": [
-        {
-          "uk": "Спосіб стиснення коду",
-          "en": "Way to compress code",
-          "pl": "Sposób kompresji kodu",
-          "correct": false
-        },
-        {
-          "uk": "index.ts що реекспортує модулі з папки",
-          "en": "index.ts that re-exports modules from folder",
-          "pl": "index.ts reeksportujący moduły z folderu",
-          "correct": true
-        },
-        {
-          "uk": "Тип для колекцій",
-          "en": "Type for collections",
-          "pl": "Typ dla kolekcji",
-          "correct": false
-        },
-        {
-          "uk": "Налаштування компілятора",
-          "en": "Compiler setting",
-          "pl": "Ustawienie kompilatora",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q30",
-      "order": 30,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як TypeScript інтегрується з Node.js?",
-        "exp": "Встановити typescript, @types/node та ts-node. Налаштувати tsconfig.json з module: 'CommonJS' або 'NodeNext'. Запускати через ts-node або компілювати tsc."
-      },
-      "en": {
-        "q": "How does TypeScript integrate with Node.js?",
-        "exp": "Install typescript, @types/node and ts-node. Configure tsconfig.json with module: 'CommonJS' or 'NodeNext'. Run via ts-node or compile with tsc."
-      },
-      "pl": {
-        "q": "Jak TypeScript integruje się z Node.js?",
-        "exp": "Zainstalować typescript, @types/node i ts-node. Skonfigurować tsconfig.json z module: 'CommonJS' lub 'NodeNext'. Uruchamiać przez ts-node lub kompilować tsc."
-      },
-      "answers": [
-        {
-          "uk": "Node.js має вбудовану підтримку TypeScript",
-          "en": "Node.js has built-in TypeScript support",
-          "pl": "Node.js ma wbudowaną obsługę TypeScript",
-          "correct": false
-        },
-        {
-          "uk": "@types/node + ts-node або компіляція через tsc",
-          "en": "@types/node + ts-node or compilation via tsc",
-          "pl": "@types/node + ts-node lub kompilacja przez tsc",
-          "correct": true
-        },
-        {
-          "uk": "TypeScript не сумісний з Node.js",
-          "en": "TypeScript is not compatible with Node.js",
-          "pl": "TypeScript nie jest kompatybilny z Node.js",
-          "correct": false
-        },
-        {
-          "uk": "Тільки через Deno",
-          "en": "Only through Deno",
-          "pl": "Tylko przez Deno",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/frontend/parse/typescript/advanced/typescript-advanced-quiz-part4.json b/frontend/parse/typescript/advanced/typescript-advanced-quiz-part4.json
deleted file mode 100644
index bd8e100d..00000000
--- a/frontend/parse/typescript/advanced/typescript-advanced-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "ts-adv-q31",
-      "order": 31,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке distributive conditional types у TypeScript?",
-        "exp": "Коли conditional type застосовується до union-типу, він 'розподіляється' по кожному члену union. Наприклад: T extends U ? X : Y для T = A | B дає (A extends U ? X : Y) | (B extends U ? X : Y)."
-      },
-      "en": {
-        "q": "What are distributive conditional types in TypeScript?",
-        "exp": "When a conditional type is applied to a union type, it 'distributes' over each union member. For example: T extends U ? X : Y for T = A | B gives (A extends U ? X : Y) | (B extends U ? X : Y)."
-      },
-      "pl": {
-        "q": "Czym są distributive conditional types w TypeScript?",
-        "exp": "Gdy typ warunkowy jest stosowany do typu union, 'rozprowadza się' po każdym członku unii. Na przykład: T extends U ? X : Y dla T = A | B daje (A extends U ? X : Y) | (B extends U ? X : Y)."
-      },
-      "answers": [
-        {
-          "uk": "Типи для роботи з розподіленими системами",
-          "en": "Types for working with distributed systems",
-          "pl": "Typy do pracy z systemami rozproszonymi",
-          "correct": false
-        },
-        {
-          "uk": "Conditional type розподіляється по кожному члену union",
-          "en": "Conditional type distributes over each union member",
-          "pl": "Typ warunkowy rozprowadza się po każdym członku unii",
-          "correct": true
-        },
-        {
-          "uk": "Спосіб поділу коду на модулі",
-          "en": "Way to split code into modules",
-          "pl": "Sposób dzielenia kodu na moduły",
-          "correct": false
-        },
-        {
-          "uk": "Типи для паралельних обчислень",
-          "en": "Types for parallel computations",
-          "pl": "Typy dla obliczeń równoległych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q32",
-      "order": 32,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як типізувати асинхронний ітератор у TypeScript?",
-        "exp": "Асинхронний ітератор типізується як AsyncGenerator<YieldType, ReturnType, NextType> або AsyncIterable<T>. Використовується з for await...of."
-      },
-      "en": {
-        "q": "How do you type an async iterator in TypeScript?",
-        "exp": "An async iterator is typed as AsyncGenerator<YieldType, ReturnType, NextType> or AsyncIterable<T>. Used with for await...of."
-      },
-      "pl": {
-        "q": "Jak typować asynchroniczny iterator w TypeScript?",
-        "exp": "Asynchroniczny iterator typuje się jako AsyncGenerator<YieldType, ReturnType, NextType> lub AsyncIterable<T>. Używany z for await...of."
-      },
-      "answers": [
-        {
-          "uk": "Через Promise<Iterator<T>>",
-          "en": "Via Promise<Iterator<T>>",
-          "pl": "Przez Promise<Iterator<T>>",
-          "correct": false
-        },
-        {
-          "uk": "AsyncGenerator<T> або AsyncIterable<T>",
-          "en": "AsyncGenerator<T> or AsyncIterable<T>",
-          "pl": "AsyncGenerator<T> lub AsyncIterable<T>",
-          "correct": true
-        },
-        {
-          "uk": "Через ключове слово async iterator",
-          "en": "Using async iterator keyword",
-          "pl": "Za pomocą słowa kluczowego async iterator",
-          "correct": false
-        },
-        {
-          "uk": "TypeScript не підтримує async iterators",
-          "en": "TypeScript does not support async iterators",
-          "pl": "TypeScript nie obsługuje async iterators",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q33",
-      "order": 33,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Value Object у Domain-Driven Design з TypeScript?",
-        "exp": "Value Object — об'єкт без ідентичності, визначений лише своїми значеннями. У TypeScript реалізується як клас з readonly полями та валідацією в конструкторі."
-      },
-      "en": {
-        "q": "What is a Value Object in Domain-Driven Design with TypeScript?",
-        "exp": "Value Object is an object without identity, defined only by its values. In TypeScript, implemented as a class with readonly fields and validation in constructor."
-      },
-      "pl": {
-        "q": "Czym jest Value Object w Domain-Driven Design z TypeScript?",
-        "exp": "Value Object to obiekt bez tożsamości, definiowany tylko przez swoje wartości. W TypeScript implementowany jako klasa z polami readonly i walidacją w konstruktorze."
-      },
-      "answers": [
-        {
-          "uk": "Об'єкт з унікальним ідентифікатором",
-          "en": "Object with unique identifier",
-          "pl": "Obiekt z unikalnym identyfikatorem",
-          "correct": false
-        },
-        {
-          "uk": "Незмінний об'єкт без ідентичності, визначений значеннями",
-          "en": "Immutable object without identity, defined by values",
-          "pl": "Niezmienny obiekt bez tożsamości, definiowany wartościami",
-          "correct": true
-        },
-        {
-          "uk": "Тип для примітивних значень",
-          "en": "Type for primitive values",
-          "pl": "Typ dla wartości prymitywnych",
-          "correct": false
-        },
-        {
-          "uk": "Контейнер для залежностей",
-          "en": "Container for dependencies",
-          "pl": "Kontener dla zależności",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке ізоморфний (універсальний) додаток у контексті TypeScript?",
-        "exp": "Ізоморфний додаток — застосунок, де один TypeScript-код виконується і на сервері (SSR), і на клієнті. Типовий приклад — Next.js з TypeScript."
-      },
-      "en": {
-        "q": "What is an isomorphic (universal) application in the context of TypeScript?",
-        "exp": "An isomorphic application is an app where the same TypeScript code runs on both server (SSR) and client. Typical example — Next.js with TypeScript."
-      },
-      "pl": {
-        "q": "Czym jest aplikacja izomorficzna (uniwersalna) w kontekście TypeScript?",
-        "exp": "Aplikacja izomorficzna to aplikacja, gdzie ten sam kod TypeScript wykonuje się zarówno na serwerze (SSR), jak i na kliencie. Typowy przykład — Next.js z TypeScript."
-      },
-      "answers": [
-        {
-          "uk": "Додаток тільки для браузера",
-          "en": "Browser-only application",
-          "pl": "Aplikacja tylko dla przeglądarki",
-          "correct": false
-        },
-        {
-          "uk": "Код виконується і на сервері, і на клієнті",
-          "en": "Code runs on both server and client",
-          "pl": "Kod wykonuje się zarówno na serwerze, jak i na kliencie",
-          "correct": true
-        },
-        {
-          "uk": "Додаток без залежностей",
-          "en": "Application without dependencies",
-          "pl": "Aplikacja bez zależności",
-          "correct": false
-        },
-        {
-          "uk": "Тільки API без UI",
-          "en": "Only API without UI",
-          "pl": "Tylko API bez UI",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q35",
-      "order": 35,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як реалізувати memoization у TypeScript з типобезпекою?",
-        "exp": "Memoization реалізується через generic-функцію, що приймає функцію T та повертає обгортку з кешем. Використовується Map для зберігання результатів за ключем аргументів."
-      },
-      "en": {
-        "q": "How do you implement memoization in TypeScript with type safety?",
-        "exp": "Memoization is implemented via a generic function that takes function T and returns a wrapper with cache. Map is used to store results by argument key."
-      },
-      "pl": {
-        "q": "Jak zaimplementować memoization w TypeScript z bezpieczeństwem typów?",
-        "exp": "Memoization implementuje się przez funkcję generyczną przyjmującą funkcję T i zwracającą wrapper z cache. Map służy do przechowywania wyników według klucza argumentów."
-      },
-      "answers": [
-        {
-          "uk": "Через декоратор @Memoize",
-          "en": "Using @Memoize decorator",
-          "pl": "Za pomocą dekoratora @Memoize",
-          "correct": false
-        },
-        {
-          "uk": "Generic-функція з Map для кешування результатів",
-          "en": "Generic function with Map for caching results",
-          "pl": "Funkcja generyczna z Map do cachowania wyników",
-          "correct": true
-        },
-        {
-          "uk": "TypeScript має вбудовану memoization",
-          "en": "TypeScript has built-in memoization",
-          "pl": "TypeScript ma wbudowane memoization",
-          "correct": false
-        },
-        {
-          "uk": "Тільки через localStorage",
-          "en": "Only through localStorage",
-          "pl": "Tylko przez localStorage",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q36",
-      "order": 36,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як використовувати as const для створення літеральних типів?",
-        "exp": "as const робить значення readonly та зберігає літеральний тип замість розширеного. ['a', 'b'] as const дає readonly ['a', 'b'] замість string[]."
-      },
-      "en": {
-        "q": "How do you use as const to create literal types?",
-        "exp": "as const makes values readonly and preserves literal type instead of widened. ['a', 'b'] as const gives readonly ['a', 'b'] instead of string[]."
-      },
-      "pl": {
-        "q": "Jak używać as const do tworzenia typów literalnych?",
-        "exp": "as const czyni wartości readonly i zachowuje typ literalny zamiast poszerzonego. ['a', 'b'] as const daje readonly ['a', 'b'] zamiast string[]."
-      },
-      "answers": [
-        {
-          "uk": "Створює копію константи",
-          "en": "Creates a copy of the constant",
-          "pl": "Tworzy kopię stałej",
-          "correct": false
-        },
-        {
-          "uk": "Робить readonly та зберігає літеральний тип",
-          "en": "Makes readonly and preserves literal type",
-          "pl": "Czyni readonly i zachowuje typ literalny",
-          "correct": true
-        },
-        {
-          "uk": "Конвертує в const змінну",
-          "en": "Converts to const variable",
-          "pl": "Konwertuje na zmienną const",
-          "correct": false
-        },
-        {
-          "uk": "Перевіряє чи значення є константою",
-          "en": "Checks if value is a constant",
-          "pl": "Sprawdza czy wartość jest stałą",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q37",
-      "order": 37,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як витягти тип елементів масиву за допомогою indexed access types?",
-        "exp": "Використовується T[number] для отримання типу елементів масиву. Наприклад: type ArrayElement = typeof arr[number] витягує union-тип всіх елементів."
-      },
-      "en": {
-        "q": "How do you extract array element type using indexed access types?",
-        "exp": "T[number] is used to get the array element type. For example: type ArrayElement = typeof arr[number] extracts a union type of all elements."
-      },
-      "pl": {
-        "q": "Jak wyodrębnić typ elementów tablicy używając indexed access types?",
-        "exp": "T[number] służy do uzyskania typu elementów tablicy. Na przykład: type ArrayElement = typeof arr[number] wyodrębnia typ union wszystkich elementów."
-      },
-      "answers": [
-        {
-          "uk": "Через Array.getElementType()",
-          "en": "Via Array.getElementType()",
-          "pl": "Przez Array.getElementType()",
-          "correct": false
-        },
-        {
-          "uk": "T[number] для отримання типу елементів",
-          "en": "T[number] to get element type",
-          "pl": "T[number] do uzyskania typu elementów",
-          "correct": true
-        },
-        {
-          "uk": "Через утилітний тип ElementOf<T>",
-          "en": "Via ElementOf<T> utility type",
-          "pl": "Przez typ narzędziowy ElementOf<T>",
-          "correct": false
-        },
-        {
-          "uk": "TypeScript автоматично виводить тип",
-          "en": "TypeScript automatically infers the type",
-          "pl": "TypeScript automatycznie wnioskuje typ",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між Project References та звичайними імпортами?",
-        "exp": "Project References (composite: true) дозволяють розбити великий проєкт на частини з окремими tsconfig, що прискорює інкрементальну збірку та забезпечує чіткі залежності між частинами."
-      },
-      "en": {
-        "q": "What is the difference between Project References and regular imports?",
-        "exp": "Project References (composite: true) allow splitting large projects into parts with separate tsconfigs, speeding up incremental builds and ensuring clear dependencies between parts."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między Project References a zwykłymi importami?",
-        "exp": "Project References (composite: true) pozwalają dzielić duże projekty na części z osobnymi tsconfig, przyspieszając inkrementalne budowanie i zapewniając jasne zależności między częściami."
-      },
-      "answers": [
-        {
-          "uk": "Немає різниці",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        },
-        {
-          "uk": "Дозволяють розбити проєкт на частини з окремими tsconfig",
-          "en": "Allow splitting project into parts with separate tsconfigs",
-          "pl": "Pozwalają dzielić projekt na części z osobnymi tsconfig",
-          "correct": true
-        },
-        {
-          "uk": "Project References тільки для бібліотек",
-          "en": "Project References only for libraries",
-          "pl": "Project References tylko dla bibliotek",
-          "correct": false
-        },
-        {
-          "uk": "Застаріла функція TypeScript",
-          "en": "Deprecated TypeScript feature",
-          "pl": "Przestarzała funkcja TypeScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q39",
-      "order": 39,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як правильно обробляти помилки в async/await з TypeScript?",
-        "exp": "Використовувати try/catch з типізацією error як unknown. Потім перевіряти instanceof Error для доступу до message. Альтернатива — .catch() на Promise."
-      },
-      "en": {
-        "q": "How do you properly handle errors in async/await with TypeScript?",
-        "exp": "Use try/catch with error typed as unknown. Then check instanceof Error to access message. Alternative — .catch() on Promise."
-      },
-      "pl": {
-        "q": "Jak prawidłowo obsługiwać błędy w async/await z TypeScript?",
-        "exp": "Użyć try/catch z error typowanym jako unknown. Następnie sprawdzić instanceof Error dla dostępu do message. Alternatywa — .catch() na Promise."
-      },
-      "answers": [
-        {
-          "uk": "Помилки типізуються автоматично як Error",
-          "en": "Errors are automatically typed as Error",
-          "pl": "Błędy są automatycznie typowane jako Error",
-          "correct": false
-        },
-        {
-          "uk": "try/catch з error: unknown та перевіркою instanceof",
-          "en": "try/catch with error: unknown and instanceof check",
-          "pl": "try/catch z error: unknown i sprawdzeniem instanceof",
-          "correct": true
-        },
-        {
-          "uk": "TypeScript автоматично обробляє помилки",
-          "en": "TypeScript automatically handles errors",
-          "pl": "TypeScript automatycznie obsługuje błędy",
-          "correct": false
-        },
-        {
-          "uk": "Через декоратор @CatchError",
-          "en": "Using @CatchError decorator",
-          "pl": "Za pomocą dekoratora @CatchError",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-adv-q40",
-      "order": 40,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які best practices для роботи з any у TypeScript?",
-        "exp": "Уникати any де можливо. Використовувати unknown замість any для невідомих типів. Якщо any неминучий — ізолювати його та якнайшвидше звузити до конкретного типу."
-      },
-      "en": {
-        "q": "What are the best practices for working with any in TypeScript?",
-        "exp": "Avoid any where possible. Use unknown instead of any for unknown types. If any is unavoidable — isolate it and narrow to a specific type as soon as possible."
-      },
-      "pl": {
-        "q": "Jakie są najlepsze praktyki pracy z any w TypeScript?",
-        "exp": "Unikać any gdzie możliwe. Używać unknown zamiast any dla nieznanych typów. Jeśli any jest nieunikniony — izolować go i zawęzić do konkretnego typu jak najszybciej."
-      },
-      "answers": [
-        {
-          "uk": "Використовувати any скрізь для гнучкості",
-          "en": "Use any everywhere for flexibility",
-          "pl": "Używać any wszędzie dla elastyczności",
-          "correct": false
-        },
-        {
-          "uk": "Уникати any, використовувати unknown, ізолювати та звужувати",
-          "en": "Avoid any, use unknown, isolate and narrow",
-          "pl": "Unikać any, używać unknown, izolować i zawężać",
-          "correct": true
-        },
-        {
-          "uk": "any і unknown — однакові",
-          "en": "any and unknown are the same",
-          "pl": "any i unknown są takie same",
-          "correct": false
-        },
-        {
-          "uk": "Завжди використовувати @ts-ignore",
-          "en": "Always use @ts-ignore",
-          "pl": "Zawsze używać @ts-ignore",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/frontend/parse/typescript/fundamentals/typescript-quiz-part1.json b/frontend/parse/typescript/fundamentals/typescript-quiz-part1.json
deleted file mode 100644
index 93a7ba95..00000000
--- a/frontend/parse/typescript/fundamentals/typescript-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "ts-q01",
-      "order": 1,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке TypeScript?",
-        "exp": "TypeScript — це надбудова над JavaScript, яка додає статичну типізацію та компілюється у звичайний JavaScript."
-      },
-      "en": {
-        "q": "What is TypeScript?",
-        "exp": "TypeScript is a superset of JavaScript that adds static typing and compiles to plain JavaScript."
-      },
-      "pl": {
-        "q": "Czym jest TypeScript?",
-        "exp": "TypeScript to nadzbiór JavaScript, który dodaje statyczne typowanie i kompiluje się do zwykłego JavaScript."
-      },
-      "answers": [
-        {
-          "uk": "Окрема мова програмування, несумісна з JavaScript",
-          "en": "A separate programming language incompatible with JavaScript",
-          "pl": "Oddzielny język programowania niekompatybilny z JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Надбудова над JavaScript зі статичною типізацією",
-          "en": "A superset of JavaScript with static typing",
-          "pl": "Nadzbiór JavaScript ze statycznym typowaniem",
-          "correct": true
-        },
-        {
-          "uk": "Фреймворк для розробки бекенду",
-          "en": "A framework for backend development",
-          "pl": "Framework do tworzenia backendu",
-          "correct": false
-        },
-        {
-          "uk": "Бібліотека для роботи з DOM",
-          "en": "A library for working with the DOM",
-          "pl": "Biblioteka do pracy z DOM",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q02",
-      "order": 2,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що означає твердження, що TypeScript є надмножиною JavaScript?",
-        "exp": "Будь-який коректний JavaScript-код є також коректним TypeScript-кодом. TS розширює JS, не змінюючи базову мову."
-      },
-      "en": {
-        "q": "What does it mean that TypeScript is a superset of JavaScript?",
-        "exp": "Any valid JavaScript code is also valid TypeScript code. TS extends JS without changing the base language."
-      },
-      "pl": {
-        "q": "Co oznacza stwierdzenie, że TypeScript jest nadzbiorem JavaScript?",
-        "exp": "Każdy poprawny kod JavaScript jest również poprawnym kodem TypeScript. TS rozszerza JS bez zmiany bazowego języka."
-      },
-      "answers": [
-        {
-          "uk": "TypeScript замінює JavaScript повністю",
-          "en": "TypeScript completely replaces JavaScript",
-          "pl": "TypeScript całkowicie zastępuje JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "TypeScript працює швидше за JavaScript",
-          "en": "TypeScript runs faster than JavaScript",
-          "pl": "TypeScript działa szybciej niż JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Будь-який валідний JS-код є валідним TS-кодом",
-          "en": "Any valid JS code is valid TS code",
-          "pl": "Każdy poprawny kod JS jest poprawnym kodem TS",
-          "correct": true
-        },
-        {
-          "uk": "TypeScript не підтримує функції JavaScript",
-          "en": "TypeScript does not support JavaScript features",
-          "pl": "TypeScript nie obsługuje funkcji JavaScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q03",
-      "order": 3,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Який тип у TypeScript означає, що функція нічого не повертає?",
-        "exp": "Тип void використовується для функцій, які не повертають значення. Це відрізняється від undefined — void явно показує намір."
-      },
-      "en": {
-        "q": "Which TypeScript type indicates that a function returns nothing?",
-        "exp": "The void type is used for functions that do not return a value. This differs from undefined — void explicitly shows intent."
-      },
-      "pl": {
-        "q": "Który typ w TypeScript oznacza, że funkcja nic nie zwraca?",
-        "exp": "Typ void jest używany dla funkcji, które nie zwracają wartości. Różni się od undefined — void jawnie pokazuje intencję."
-      },
-      "answers": [
-        {
-          "uk": "null",
-          "en": "null",
-          "pl": "null",
-          "correct": false
-        },
-        {
-          "uk": "undefined",
-          "en": "undefined",
-          "pl": "undefined",
-          "correct": false
-        },
-        {
-          "uk": "void",
-          "en": "void",
-          "pl": "void",
-          "correct": true
-        },
-        {
-          "uk": "never",
-          "en": "never",
-          "pl": "never",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q04",
-      "order": 4,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке виведення типу (type inference) у TypeScript?",
-        "exp": "Type inference — це автоматичне визначення типу змінної на основі присвоєного значення без явного оголошення типу."
-      },
-      "en": {
-        "q": "What is type inference in TypeScript?",
-        "exp": "Type inference is the automatic determination of a variable's type based on the assigned value without explicit type declaration."
-      },
-      "pl": {
-        "q": "Czym jest wnioskowanie typów (type inference) w TypeScript?",
-        "exp": "Wnioskowanie typów to automatyczne określanie typu zmiennej na podstawie przypisanej wartości bez jawnej deklaracji typu."
-      },
-      "answers": [
-        {
-          "uk": "Автоматичне визначення типу на основі значення",
-          "en": "Automatic type determination based on value",
-          "pl": "Automatyczne określanie typu na podstawie wartości",
-          "correct": true
-        },
-        {
-          "uk": "Перетворення одного типу в інший",
-          "en": "Converting one type to another",
-          "pl": "Konwersja jednego typu na inny",
-          "correct": false
-        },
-        {
-          "uk": "Видалення типів під час компіляції",
-          "en": "Removing types during compilation",
-          "pl": "Usuwanie typów podczas kompilacji",
-          "correct": false
-        },
-        {
-          "uk": "Обов'язкове оголошення типу для кожної змінної",
-          "en": "Mandatory type declaration for every variable",
-          "pl": "Obowiązkowa deklaracja typu dla każdej zmiennej",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q05",
-      "order": 5,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Чим тип unknown відрізняється від any?",
-        "exp": "unknown — безпечніша альтернатива any. З unknown потрібно перевірити тип перед використанням, а any дозволяє будь-які операції."
-      },
-      "en": {
-        "q": "How does the unknown type differ from any?",
-        "exp": "unknown is a safer alternative to any. With unknown, you must check the type before use, while any allows any operations."
-      },
-      "pl": {
-        "q": "Czym typ unknown różni się od any?",
-        "exp": "unknown to bezpieczniejsza alternatywa dla any. Z unknown trzeba sprawdzić typ przed użyciem, podczas gdy any pozwala na dowolne operacje."
-      },
-      "answers": [
-        {
-          "uk": "unknown та any — це синоніми",
-          "en": "unknown and any are synonyms",
-          "pl": "unknown i any to synonimy",
-          "correct": false
-        },
-        {
-          "uk": "unknown вимагає перевірки типу перед використанням",
-          "en": "unknown requires type checking before use",
-          "pl": "unknown wymaga sprawdzenia typu przed użyciem",
-          "correct": true
-        },
-        {
-          "uk": "any безпечніший за unknown",
-          "en": "any is safer than unknown",
-          "pl": "any jest bezpieczniejszy niż unknown",
-          "correct": false
-        },
-        {
-          "uk": "unknown не можна присвоювати змінним",
-          "en": "unknown cannot be assigned to variables",
-          "pl": "unknown nie można przypisać do zmiennych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q06",
-      "order": 6,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовуються інтерфейси (interface) у TypeScript?",
-        "exp": "Інтерфейси описують структуру об'єкта — його властивості та їх типи. Вони створюють контракт між частинами коду."
-      },
-      "en": {
-        "q": "What are interfaces used for in TypeScript?",
-        "exp": "Interfaces describe the structure of an object — its properties and their types. They create a contract between parts of code."
-      },
-      "pl": {
-        "q": "Do czego służą interfejsy (interface) w TypeScript?",
-        "exp": "Interfejsy opisują strukturę obiektu — jego właściwości i ich typy. Tworzą kontrakt między częściami kodu."
-      },
-      "answers": [
-        {
-          "uk": "Для створення нових класів",
-          "en": "For creating new classes",
-          "pl": "Do tworzenia nowych klas",
-          "correct": false
-        },
-        {
-          "uk": "Для опису структури об'єкта та контракту коду",
-          "en": "For describing object structure and code contract",
-          "pl": "Do opisywania struktury obiektu i kontraktu kodu",
-          "correct": true
-        },
-        {
-          "uk": "Для виконання асинхронних операцій",
-          "en": "For executing asynchronous operations",
-          "pl": "Do wykonywania operacji asynchronicznych",
-          "correct": false
-        },
-        {
-          "uk": "Для зміни рантайм-поведінки коду",
-          "en": "For changing runtime behavior of code",
-          "pl": "Do zmiany zachowania kodu w runtime",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q07",
-      "order": 7,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке enum у TypeScript?",
-        "exp": "enum (перерахування) — це тип, який дозволяє задати набір іменованих констант. Робить код читабельнішим замість 'магічних' чисел."
-      },
-      "en": {
-        "q": "What is an enum in TypeScript?",
-        "exp": "enum (enumeration) is a type that allows defining a set of named constants. It makes code more readable instead of 'magic' numbers."
-      },
-      "pl": {
-        "q": "Czym jest enum w TypeScript?",
-        "exp": "enum (wyliczenie) to typ pozwalający zdefiniować zestaw nazwanych stałych. Czyni kod bardziej czytelnym zamiast 'magicznych' liczb."
-      },
-      "answers": [
-        {
-          "uk": "Функція для ітерації по масивах",
-          "en": "A function for iterating over arrays",
-          "pl": "Funkcja do iterowania po tablicach",
-          "correct": false
-        },
-        {
-          "uk": "Набір іменованих констант",
-          "en": "A set of named constants",
-          "pl": "Zestaw nazwanych stałych",
-          "correct": true
-        },
-        {
-          "uk": "Тип для роботи з датами",
-          "en": "A type for working with dates",
-          "pl": "Typ do pracy z datami",
-          "correct": false
-        },
-        {
-          "uk": "Метод для сортування об'єктів",
-          "en": "A method for sorting objects",
-          "pl": "Metoda do sortowania obiektów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q08",
-      "order": 8,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як позначити необов'язковий параметр функції у TypeScript?",
-        "exp": "Необов'язкові параметри позначаються знаком питання (?). Наприклад: function greet(name?: string). Такі параметри можуть бути undefined."
-      },
-      "en": {
-        "q": "How do you mark an optional function parameter in TypeScript?",
-        "exp": "Optional parameters are marked with a question mark (?). For example: function greet(name?: string). Such parameters can be undefined."
-      },
-      "pl": {
-        "q": "Jak oznaczyć opcjonalny parametr funkcji w TypeScript?",
-        "exp": "Parametry opcjonalne oznacza się znakiem zapytania (?). Na przykład: function greet(name?: string). Takie parametry mogą być undefined."
-      },
-      "answers": [
-        {
-          "uk": "За допомогою знаку оклику (!)",
-          "en": "Using an exclamation mark (!)",
-          "pl": "Za pomocą wykrzyknika (!)",
-          "correct": false
-        },
-        {
-          "uk": "За допомогою знаку питання (?)",
-          "en": "Using a question mark (?)",
-          "pl": "Za pomocą znaku zapytania (?)",
-          "correct": true
-        },
-        {
-          "uk": "За допомогою ключового слова optional",
-          "en": "Using the optional keyword",
-          "pl": "Za pomocą słowa kluczowego optional",
-          "correct": false
-        },
-        {
-          "uk": "За допомогою типу null",
-          "en": "Using the null type",
-          "pl": "Za pomocą typu null",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q09",
-      "order": 9,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як скомпілювати TypeScript-файл у JavaScript?",
-        "exp": "Використовується TypeScript Compiler (tsc). Команда tsc file.ts створить відповідний JavaScript-файл."
-      },
-      "en": {
-        "q": "How do you compile a TypeScript file to JavaScript?",
-        "exp": "The TypeScript Compiler (tsc) is used. The command tsc file.ts will create the corresponding JavaScript file."
-      },
-      "pl": {
-        "q": "Jak skompilować plik TypeScript do JavaScript?",
-        "exp": "Używa się TypeScript Compiler (tsc). Polecenie tsc file.ts utworzy odpowiedni plik JavaScript."
-      },
-      "answers": [
-        {
-          "uk": "npm run typescript",
-          "en": "npm run typescript",
-          "pl": "npm run typescript",
-          "correct": false
-        },
-        {
-          "uk": "tsc file.ts",
-          "en": "tsc file.ts",
-          "pl": "tsc file.ts",
-          "correct": true
-        },
-        {
-          "uk": "node compile file.ts",
-          "en": "node compile file.ts",
-          "pl": "node compile file.ts",
-          "correct": false
-        },
-        {
-          "uk": "ts-compile file.ts",
-          "en": "ts-compile file.ts",
-          "pl": "ts-compile file.ts",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q10",
-      "order": 10,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Який тип позначає значення, яке ніколи не може існувати?",
-        "exp": "Тип never означає значення, що ніколи не існує. Використовується для функцій, які завжди кидають помилку або мають нескінченний цикл."
-      },
-      "en": {
-        "q": "Which type represents a value that can never exist?",
-        "exp": "The never type represents a value that never exists. It's used for functions that always throw an error or have an infinite loop."
-      },
-      "pl": {
-        "q": "Który typ oznacza wartość, która nigdy nie może istnieć?",
-        "exp": "Typ never oznacza wartość, która nigdy nie istnieje. Używany dla funkcji, które zawsze rzucają błąd lub mają nieskończoną pętlę."
-      },
-      "answers": [
-        {
-          "uk": "void",
-          "en": "void",
-          "pl": "void",
-          "correct": false
-        },
-        {
-          "uk": "null",
-          "en": "null",
-          "pl": "null",
-          "correct": false
-        },
-        {
-          "uk": "undefined",
-          "en": "undefined",
-          "pl": "undefined",
-          "correct": false
-        },
-        {
-          "uk": "never",
-          "en": "never",
-          "pl": "never",
-          "correct": true
-        }
-      ]
-    }
-  ]
-}
diff --git a/frontend/parse/typescript/fundamentals/typescript-quiz-part2.json b/frontend/parse/typescript/fundamentals/typescript-quiz-part2.json
deleted file mode 100644
index 248b9f8f..00000000
--- a/frontend/parse/typescript/fundamentals/typescript-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "ts-q11",
-      "order": 11,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Які модифікатори доступу підтримує TypeScript?",
-        "exp": "TypeScript підтримує public (за замовчуванням), private (тільки у класі), protected (у класі та нащадках) та readonly."
-      },
-      "en": {
-        "q": "Which access modifiers does TypeScript support?",
-        "exp": "TypeScript supports public (default), private (only within class), protected (class and descendants), and readonly."
-      },
-      "pl": {
-        "q": "Jakie modyfikatory dostępu obsługuje TypeScript?",
-        "exp": "TypeScript obsługuje public (domyślny), private (tylko w klasie), protected (klasa i potomkowie) oraz readonly."
-      },
-      "answers": [
-        {
-          "uk": "Тільки public та private",
-          "en": "Only public and private",
-          "pl": "Tylko public i private",
-          "correct": false
-        },
-        {
-          "uk": "public, private, protected, readonly",
-          "en": "public, private, protected, readonly",
-          "pl": "public, private, protected, readonly",
-          "correct": true
-        },
-        {
-          "uk": "internal, external, global",
-          "en": "internal, external, global",
-          "pl": "internal, external, global",
-          "correct": false
-        },
-        {
-          "uk": "TypeScript не підтримує модифікатори доступу",
-          "en": "TypeScript does not support access modifiers",
-          "pl": "TypeScript nie obsługuje modyfikatorów dostępu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q12",
-      "order": 12,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке абстрактний клас у TypeScript?",
-        "exp": "Абстрактний клас не можна інстанціювати напряму. Він може містити реалізовані методи та abstract методи, які мають реалізувати нащадки."
-      },
-      "en": {
-        "q": "What is an abstract class in TypeScript?",
-        "exp": "An abstract class cannot be instantiated directly. It can contain implemented methods and abstract methods that descendants must implement."
-      },
-      "pl": {
-        "q": "Czym jest klasa abstrakcyjna w TypeScript?",
-        "exp": "Klasy abstrakcyjnej nie można bezpośrednio instancjonować. Może zawierać zaimplementowane metody oraz metody abstrakcyjne, które muszą zaimplementować potomkowie."
-      },
-      "answers": [
-        {
-          "uk": "Клас, який можна створити тільки один раз",
-          "en": "A class that can only be created once",
-          "pl": "Klasa, którą można utworzyć tylko raz",
-          "correct": false
-        },
-        {
-          "uk": "Клас, який не можна інстанціювати і задає контракт для нащадків",
-          "en": "A class that cannot be instantiated and defines a contract for descendants",
-          "pl": "Klasa, której nie można instancjonować i definiuje kontrakt dla potomków",
-          "correct": true
-        },
-        {
-          "uk": "Клас без жодних методів",
-          "en": "A class without any methods",
-          "pl": "Klasa bez żadnych metod",
-          "correct": false
-        },
-        {
-          "uk": "Клас, який існує тільки під час компіляції",
-          "en": "A class that only exists during compilation",
-          "pl": "Klasa, która istnieje tylko podczas kompilacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q13",
-      "order": 13,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке union-тип у TypeScript?",
-        "exp": "Union-тип (|) дозволяє змінній приймати один із кількох можливих типів. Наприклад: string | number."
-      },
-      "en": {
-        "q": "What is a union type in TypeScript?",
-        "exp": "A union type (|) allows a variable to accept one of several possible types. For example: string | number."
-      },
-      "pl": {
-        "q": "Czym jest typ union w TypeScript?",
-        "exp": "Typ union (|) pozwala zmiennej przyjmować jeden z kilku możliwych typów. Na przykład: string | number."
-      },
-      "answers": [
-        {
-          "uk": "Тип, який об'єднує кілька об'єктів в один",
-          "en": "A type that combines multiple objects into one",
-          "pl": "Typ, który łączy wiele obiektów w jeden",
-          "correct": false
-        },
-        {
-          "uk": "Тип, що дозволяє змінній бути одним із кількох типів",
-          "en": "A type that allows a variable to be one of several types",
-          "pl": "Typ pozwalający zmiennej być jednym z kilku typów",
-          "correct": true
-        },
-        {
-          "uk": "Тип для роботи з масивами",
-          "en": "A type for working with arrays",
-          "pl": "Typ do pracy z tablicami",
-          "correct": false
-        },
-        {
-          "uk": "Тип, який створює новий клас",
-          "en": "A type that creates a new class",
-          "pl": "Typ, który tworzy nową klasę",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q14",
-      "order": 14,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке intersection-тип у TypeScript?",
-        "exp": "Intersection-тип (&) поєднує кілька типів в один. Об'єкт повинен відповідати всім типам одночасно."
-      },
-      "en": {
-        "q": "What is an intersection type in TypeScript?",
-        "exp": "An intersection type (&) combines multiple types into one. The object must satisfy all types simultaneously."
-      },
-      "pl": {
-        "q": "Czym jest typ intersection w TypeScript?",
-        "exp": "Typ intersection (&) łączy wiele typów w jeden. Obiekt musi spełniać wszystkie typy jednocześnie."
-      },
-      "answers": [
-        {
-          "uk": "Тип, де значення може бути одним із варіантів",
-          "en": "A type where the value can be one of the variants",
-          "pl": "Typ, gdzie wartość może być jednym z wariantów",
-          "correct": false
-        },
-        {
-          "uk": "Тип, що поєднує кілька типів, вимагаючи відповідності всім",
-          "en": "A type that combines multiple types, requiring compliance with all",
-          "pl": "Typ łączący wiele typów, wymagający zgodności ze wszystkimi",
-          "correct": true
-        },
-        {
-          "uk": "Тип для перетину масивів",
-          "en": "A type for array intersection",
-          "pl": "Typ do przecięcia tablic",
-          "correct": false
-        },
-        {
-          "uk": "Тип, що видаляє спільні властивості",
-          "en": "A type that removes common properties",
-          "pl": "Typ usuwający wspólne właściwości",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q15",
-      "order": 15,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке узагальнені типи (Generics) у TypeScript?",
-        "exp": "Generics — це параметризовані типи, що дозволяють писати універсальний код зі збереженням типобезпеки. Тип визначається при використанні."
-      },
-      "en": {
-        "q": "What are Generics in TypeScript?",
-        "exp": "Generics are parameterized types that allow writing universal code while maintaining type safety. The type is determined at usage."
-      },
-      "pl": {
-        "q": "Czym są typy generyczne (Generics) w TypeScript?",
-        "exp": "Generics to typy sparametryzowane pozwalające pisać uniwersalny kod z zachowaniem bezpieczeństwa typów. Typ określa się przy użyciu."
-      },
-      "answers": [
-        {
-          "uk": "Типи, які генеруються автоматично компілятором",
-          "en": "Types that are automatically generated by the compiler",
-          "pl": "Typy generowane automatycznie przez kompilator",
-          "correct": false
-        },
-        {
-          "uk": "Параметризовані типи для універсального типобезпечного коду",
-          "en": "Parameterized types for universal type-safe code",
-          "pl": "Sparametryzowane typy dla uniwersalnego kodu bezpiecznego typowo",
-          "correct": true
-        },
-        {
-          "uk": "Спеціальні типи для роботи з базами даних",
-          "en": "Special types for working with databases",
-          "pl": "Specjalne typy do pracy z bazami danych",
-          "correct": false
-        },
-        {
-          "uk": "Типи, доступні тільки в рантаймі",
-          "en": "Types available only at runtime",
-          "pl": "Typy dostępne tylko w runtime",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q16",
-      "order": 16,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як обмежити generic-параметр певним типом?",
-        "exp": "Використовується ключове слово extends. Наприклад: function fn<T extends { length: number }>(item: T) гарантує наявність length."
-      },
-      "en": {
-        "q": "How do you constrain a generic parameter to a specific type?",
-        "exp": "The extends keyword is used. For example: function fn<T extends { length: number }>(item: T) guarantees the presence of length."
-      },
-      "pl": {
-        "q": "Jak ograniczyć parametr generyczny do określonego typu?",
-        "exp": "Używa się słowa kluczowego extends. Na przykład: function fn<T extends { length: number }>(item: T) gwarantuje obecność length."
-      },
-      "answers": [
-        {
-          "uk": "За допомогою ключового слова implements",
-          "en": "Using the implements keyword",
-          "pl": "Za pomocą słowa kluczowego implements",
-          "correct": false
-        },
-        {
-          "uk": "За допомогою ключового слова extends",
-          "en": "Using the extends keyword",
-          "pl": "Za pomocą słowa kluczowego extends",
-          "correct": true
-        },
-        {
-          "uk": "За допомогою ключового слова restrict",
-          "en": "Using the restrict keyword",
-          "pl": "Za pomocą słowa kluczowego restrict",
-          "correct": false
-        },
-        {
-          "uk": "Generic-параметри не можна обмежувати",
-          "en": "Generic parameters cannot be constrained",
-          "pl": "Parametrów generycznych nie można ograniczać",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q17",
-      "order": 17,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке кортеж (Tuple) у TypeScript?",
-        "exp": "Tuple — це масив із фіксованою кількістю елементів та визначеними типами для кожної позиції. Порядок і типи наперед відомі."
-      },
-      "en": {
-        "q": "What is a Tuple in TypeScript?",
-        "exp": "A Tuple is an array with a fixed number of elements and defined types for each position. The order and types are known in advance."
-      },
-      "pl": {
-        "q": "Czym jest krotka (Tuple) w TypeScript?",
-        "exp": "Tuple to tablica ze stałą liczbą elementów i określonymi typami dla każdej pozycji. Kolejność i typy są znane z góry."
-      },
-      "answers": [
-        {
-          "uk": "Звичайний масив без обмежень",
-          "en": "A regular array without restrictions",
-          "pl": "Zwykła tablica bez ograniczeń",
-          "correct": false
-        },
-        {
-          "uk": "Масив з фіксованою кількістю елементів і типів",
-          "en": "An array with fixed number of elements and types",
-          "pl": "Tablica ze stałą liczbą elementów i typów",
-          "correct": true
-        },
-        {
-          "uk": "Об'єкт з числовими ключами",
-          "en": "An object with numeric keys",
-          "pl": "Obiekt z kluczami numerycznymi",
-          "correct": false
-        },
-        {
-          "uk": "Колекція унікальних значень",
-          "en": "A collection of unique values",
-          "pl": "Kolekcja unikalnych wartości",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q18",
-      "order": 18,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке type assertion у TypeScript?",
-        "exp": "Type assertion — це спосіб сказати компілятору: 'Я знаю тип цього значення'. Використовується синтаксис as або кутові дужки."
-      },
-      "en": {
-        "q": "What is type assertion in TypeScript?",
-        "exp": "Type assertion is a way to tell the compiler: 'I know the type of this value'. It uses the as syntax or angle brackets."
-      },
-      "pl": {
-        "q": "Czym jest type assertion w TypeScript?",
-        "exp": "Type assertion to sposób powiedzenia kompilatorowi: 'Znam typ tej wartości'. Używa składni as lub nawiasów kątowych."
-      },
-      "answers": [
-        {
-          "uk": "Перетворення значення в інший тип у рантаймі",
-          "en": "Converting a value to another type at runtime",
-          "pl": "Konwersja wartości na inny typ w runtime",
-          "correct": false
-        },
-        {
-          "uk": "Підказка компілятору про відомий тип значення",
-          "en": "A hint to the compiler about the known type of a value",
-          "pl": "Podpowiedź dla kompilatora o znanym typie wartości",
-          "correct": true
-        },
-        {
-          "uk": "Автоматична перевірка типів під час виконання",
-          "en": "Automatic type checking at runtime",
-          "pl": "Automatyczne sprawdzanie typów podczas wykonywania",
-          "correct": false
-        },
-        {
-          "uk": "Створення нового типу на основі існуючого",
-          "en": "Creating a new type based on an existing one",
-          "pl": "Tworzenie nowego typu na podstawie istniejącego",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q19",
-      "order": 19,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується ключове слово keyof?",
-        "exp": "keyof створює union-тип з ключів об'єкта. Наприклад: keyof { id: number; name: string } дає 'id' | 'name'."
-      },
-      "en": {
-        "q": "What is the keyof keyword used for?",
-        "exp": "keyof creates a union type from object keys. For example: keyof { id: number; name: string } gives 'id' | 'name'."
-      },
-      "pl": {
-        "q": "Do czego służy słowo kluczowe keyof?",
-        "exp": "keyof tworzy typ union z kluczy obiektu. Na przykład: keyof { id: number; name: string } daje 'id' | 'name'."
-      },
-      "answers": [
-        {
-          "uk": "Для видалення ключів з об'єкта",
-          "en": "For removing keys from an object",
-          "pl": "Do usuwania kluczy z obiektu",
-          "correct": false
-        },
-        {
-          "uk": "Для створення union-типу з ключів об'єкта",
-          "en": "For creating a union type from object keys",
-          "pl": "Do tworzenia typu union z kluczy obiektu",
-          "correct": true
-        },
-        {
-          "uk": "Для перевірки наявності ключа в об'єкті",
-          "en": "For checking if a key exists in an object",
-          "pl": "Do sprawdzania istnienia klucza w obiekcie",
-          "correct": false
-        },
-        {
-          "uk": "Для сортування ключів об'єкта",
-          "en": "For sorting object keys",
-          "pl": "Do sortowania kluczy obiektu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q20",
-      "order": 20,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як працює typeof на рівні типів у TypeScript?",
-        "exp": "typeof у контексті типів дозволяє отримати тип змінної. Наприклад: const user = {name: 'Alice'}; type User = typeof user."
-      },
-      "en": {
-        "q": "How does typeof work at the type level in TypeScript?",
-        "exp": "typeof in the type context allows getting a variable's type. For example: const user = {name: 'Alice'}; type User = typeof user."
-      },
-      "pl": {
-        "q": "Jak działa typeof na poziomie typów w TypeScript?",
-        "exp": "typeof w kontekście typów pozwala uzyskać typ zmiennej. Na przykład: const user = {name: 'Alice'}; type User = typeof user."
-      },
-      "answers": [
-        {
-          "uk": "Повертає рядок з назвою типу, як у JavaScript",
-          "en": "Returns a string with the type name, like in JavaScript",
-          "pl": "Zwraca ciąg z nazwą typu, jak w JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Дозволяє отримати тип змінної для використання в анотаціях",
-          "en": "Allows getting a variable's type for use in annotations",
-          "pl": "Pozwala uzyskać typ zmiennej do użycia w adnotacjach",
-          "correct": true
-        },
-        {
-          "uk": "Перевіряє рівність двох типів",
-          "en": "Checks equality of two types",
-          "pl": "Sprawdza równość dwóch typów",
-          "correct": false
-        },
-        {
-          "uk": "Видаляє тип зі змінної",
-          "en": "Removes the type from a variable",
-          "pl": "Usuwa typ ze zmiennej",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/frontend/parse/typescript/fundamentals/typescript-quiz-part3.json b/frontend/parse/typescript/fundamentals/typescript-quiz-part3.json
deleted file mode 100644
index 0977ba71..00000000
--- a/frontend/parse/typescript/fundamentals/typescript-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "ts-q21",
-      "order": 21,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить утилітний тип Partial<T>?",
-        "exp": "Partial<T> робить усі властивості типу T опціональними. Корисно для об'єктів оновлення, де потрібно передати лише частину полів."
-      },
-      "en": {
-        "q": "What does the Partial<T> utility type do?",
-        "exp": "Partial<T> makes all properties of type T optional. Useful for update objects where you need to pass only some fields."
-      },
-      "pl": {
-        "q": "Co robi typ narzędziowy Partial<T>?",
-        "exp": "Partial<T> czyni wszystkie właściwości typu T opcjonalnymi. Przydatne dla obiektów aktualizacji, gdzie trzeba przekazać tylko część pól."
-      },
-      "answers": [
-        {
-          "uk": "Робить усі властивості обов'язковими",
-          "en": "Makes all properties required",
-          "pl": "Czyni wszystkie właściwości wymaganymi",
-          "correct": false
-        },
-        {
-          "uk": "Робить усі властивості опціональними",
-          "en": "Makes all properties optional",
-          "pl": "Czyni wszystkie właściwości opcjonalnymi",
-          "correct": true
-        },
-        {
-          "uk": "Видаляє всі властивості",
-          "en": "Removes all properties",
-          "pl": "Usuwa wszystkie właściwości",
-          "correct": false
-        },
-        {
-          "uk": "Робить тип доступним тільки для читання",
-          "en": "Makes the type read-only",
-          "pl": "Czyni typ tylko do odczytu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q22",
-      "order": 22,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить утилітний тип Readonly<T>?",
-        "exp": "Readonly<T> робить усі властивості типу доступними тільки для читання. Після ініціалізації їх не можна змінювати."
-      },
-      "en": {
-        "q": "What does the Readonly<T> utility type do?",
-        "exp": "Readonly<T> makes all properties of the type read-only. After initialization, they cannot be changed."
-      },
-      "pl": {
-        "q": "Co robi typ narzędziowy Readonly<T>?",
-        "exp": "Readonly<T> czyni wszystkie właściwości typu tylko do odczytu. Po inicjalizacji nie można ich zmieniać."
-      },
-      "answers": [
-        {
-          "uk": "Робить властивості опціональними",
-          "en": "Makes properties optional",
-          "pl": "Czyni właściwości opcjonalnymi",
-          "correct": false
-        },
-        {
-          "uk": "Робить властивості доступними тільки для читання",
-          "en": "Makes properties read-only",
-          "pl": "Czyni właściwości tylko do odczytu",
-          "correct": true
-        },
-        {
-          "uk": "Робить властивості приватними",
-          "en": "Makes properties private",
-          "pl": "Czyni właściwości prywatnymi",
-          "correct": false
-        },
-        {
-          "uk": "Видаляє readonly модифікатор",
-          "en": "Removes the readonly modifier",
-          "pl": "Usuwa modyfikator readonly",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q23",
-      "order": 23,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить утилітний тип Pick<T, K>?",
-        "exp": "Pick<T, K> вибирає підмножину властивостей K із типу T. Наприклад: Pick<User, 'id' | 'name'> створює тип лише з id та name."
-      },
-      "en": {
-        "q": "What does the Pick<T, K> utility type do?",
-        "exp": "Pick<T, K> selects a subset of properties K from type T. For example: Pick<User, 'id' | 'name'> creates a type with only id and name."
-      },
-      "pl": {
-        "q": "Co robi typ narzędziowy Pick<T, K>?",
-        "exp": "Pick<T, K> wybiera podzbiór właściwości K z typu T. Na przykład: Pick<User, 'id' | 'name'> tworzy typ tylko z id i name."
-      },
-      "answers": [
-        {
-          "uk": "Вибирає підмножину властивостей із типу",
-          "en": "Selects a subset of properties from a type",
-          "pl": "Wybiera podzbiór właściwości z typu",
-          "correct": true
-        },
-        {
-          "uk": "Видаляє вказані властивості з типу",
-          "en": "Removes specified properties from a type",
-          "pl": "Usuwa wskazane właściwości z typu",
-          "correct": false
-        },
-        {
-          "uk": "Об'єднує два типи",
-          "en": "Merges two types",
-          "pl": "Łączy dwa typy",
-          "correct": false
-        },
-        {
-          "uk": "Перейменовує властивості типу",
-          "en": "Renames type properties",
-          "pl": "Zmienia nazwy właściwości typu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q24",
-      "order": 24,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке mapped types у TypeScript?",
-        "exp": "Mapped types створюють нові типи шляхом ітерації по ключах існуючого типу та трансформації їх. На них побудовані Partial, Readonly, Pick."
-      },
-      "en": {
-        "q": "What are mapped types in TypeScript?",
-        "exp": "Mapped types create new types by iterating over keys of an existing type and transforming them. Partial, Readonly, Pick are built on them."
-      },
-      "pl": {
-        "q": "Czym są mapped types w TypeScript?",
-        "exp": "Mapped types tworzą nowe typy przez iterację po kluczach istniejącego typu i ich transformację. Na nich zbudowane są Partial, Readonly, Pick."
-      },
-      "answers": [
-        {
-          "uk": "Типи для роботи з Map колекціями",
-          "en": "Types for working with Map collections",
-          "pl": "Typy do pracy z kolekcjami Map",
-          "correct": false
-        },
-        {
-          "uk": "Типи, що створюються ітерацією по ключах і їх трансформацією",
-          "en": "Types created by iterating over keys and transforming them",
-          "pl": "Typy tworzone przez iterację po kluczach i ich transformację",
-          "correct": true
-        },
-        {
-          "uk": "Типи для географічних координат",
-          "en": "Types for geographic coordinates",
-          "pl": "Typy dla współrzędnych geograficznych",
-          "correct": false
-        },
-        {
-          "uk": "Типи, які автоматично мапляться на JavaScript",
-          "en": "Types that automatically map to JavaScript",
-          "pl": "Typy automatycznie mapowane na JavaScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q25",
-      "order": 25,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке умовні типи (Conditional Types)?",
-        "exp": "Умовні типи використовують конструкцію T extends U ? X : Y. Якщо T є підтипом U, результат буде X, інакше — Y."
-      },
-      "en": {
-        "q": "What are Conditional Types?",
-        "exp": "Conditional types use the construct T extends U ? X : Y. If T is a subtype of U, the result is X, otherwise Y."
-      },
-      "pl": {
-        "q": "Czym są typy warunkowe (Conditional Types)?",
-        "exp": "Typy warunkowe używają konstrukcji T extends U ? X : Y. Jeśli T jest podtypem U, wynik to X, w przeciwnym razie Y."
-      },
-      "answers": [
-        {
-          "uk": "Типи, які залежать від умов у рантаймі",
-          "en": "Types that depend on runtime conditions",
-          "pl": "Typy zależące od warunków w runtime",
-          "correct": false
-        },
-        {
-          "uk": "Типи з конструкцією T extends U ? X : Y",
-          "en": "Types with the T extends U ? X : Y construct",
-          "pl": "Typy z konstrukcją T extends U ? X : Y",
-          "correct": true
-        },
-        {
-          "uk": "Типи, які можуть бути null або undefined",
-          "en": "Types that can be null or undefined",
-          "pl": "Typy, które mogą być null lub undefined",
-          "correct": false
-        },
-        {
-          "uk": "Типи для if-else конструкцій",
-          "en": "Types for if-else constructs",
-          "pl": "Typy dla konstrukcji if-else",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q26",
-      "order": 26,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке дискримінований союз (Discriminated Union)?",
-        "exp": "Це union типів зі спільною властивістю-дискримінатором. Компілятор автоматично звужує тип при перевірці цієї властивості."
-      },
-      "en": {
-        "q": "What is a Discriminated Union?",
-        "exp": "It's a union of types with a common discriminator property. The compiler automatically narrows the type when checking this property."
-      },
-      "pl": {
-        "q": "Czym jest suma dyskryminowana (Discriminated Union)?",
-        "exp": "To unia typów ze wspólną właściwością-dyskryminatorem. Kompilator automatycznie zawęża typ przy sprawdzaniu tej właściwości."
-      },
-      "answers": [
-        {
-          "uk": "Union з літеральною властивістю для автоматичного звуження типу",
-          "en": "Union with a literal property for automatic type narrowing",
-          "pl": "Unia z właściwością literalną do automatycznego zawężania typu",
-          "correct": true
-        },
-        {
-          "uk": "Union типів, які виключають один одного",
-          "en": "Union of types that exclude each other",
-          "pl": "Unia typów wykluczających się wzajemnie",
-          "correct": false
-        },
-        {
-          "uk": "Спеціальний тип для роботи з профспілками",
-          "en": "A special type for working with trade unions",
-          "pl": "Specjalny typ do pracy ze związkami zawodowymi",
-          "correct": false
-        },
-        {
-          "uk": "Тип, що дискримінує за розміром даних",
-          "en": "A type that discriminates by data size",
-          "pl": "Typ dyskryminujący po rozmiarze danych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке декоратори у TypeScript?",
-        "exp": "Декоратори — це функції, які застосовуються до класів, методів, властивостей або параметрів для зміни або розширення їхньої поведінки."
-      },
-      "en": {
-        "q": "What are decorators in TypeScript?",
-        "exp": "Decorators are functions applied to classes, methods, properties, or parameters to modify or extend their behavior."
-      },
-      "pl": {
-        "q": "Czym są dekoratory w TypeScript?",
-        "exp": "Dekoratory to funkcje stosowane do klas, metod, właściwości lub parametrów w celu modyfikacji lub rozszerzenia ich zachowania."
-      },
-      "answers": [
-        {
-          "uk": "CSS-стилі для компонентів",
-          "en": "CSS styles for components",
-          "pl": "Style CSS dla komponentów",
-          "correct": false
-        },
-        {
-          "uk": "Функції для зміни поведінки класів, методів, властивостей",
-          "en": "Functions for modifying behavior of classes, methods, properties",
-          "pl": "Funkcje do modyfikacji zachowania klas, metod, właściwości",
-          "correct": true
-        },
-        {
-          "uk": "Коментарі для документації коду",
-          "en": "Comments for code documentation",
-          "pl": "Komentarze do dokumentacji kodu",
-          "correct": false
-        },
-        {
-          "uk": "Спеціальні типи для валідації",
-          "en": "Special types for validation",
-          "pl": "Specjalne typy do walidacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q28",
-      "order": 28,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як організувати код за допомогою модулів у TypeScript?",
-        "exp": "Кожен файл з import або export стає модулем. Використовуються ключові слова export для експорту та import для імпорту."
-      },
-      "en": {
-        "q": "How do you organize code using modules in TypeScript?",
-        "exp": "Each file with import or export becomes a module. The keywords export and import are used for exporting and importing."
-      },
-      "pl": {
-        "q": "Jak zorganizować kod za pomocą modułów w TypeScript?",
-        "exp": "Każdy plik z import lub export staje się modułem. Słowa kluczowe export i import służą do eksportowania i importowania."
-      },
-      "answers": [
-        {
-          "uk": "За допомогою глобальних змінних",
-          "en": "Using global variables",
-          "pl": "Za pomocą zmiennych globalnych",
-          "correct": false
-        },
-        {
-          "uk": "За допомогою export та import",
-          "en": "Using export and import",
-          "pl": "Za pomocą export i import",
-          "correct": true
-        },
-        {
-          "uk": "Тільки через namespace",
-          "en": "Only through namespace",
-          "pl": "Tylko przez namespace",
-          "correct": false
-        },
-        {
-          "uk": "TypeScript не підтримує модулі",
-          "en": "TypeScript does not support modules",
-          "pl": "TypeScript nie obsługuje modułów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q29",
-      "order": 29,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Коли доцільно використовувати namespace замість модулів?",
-        "exp": "Namespace використовується рідко: у legacy-проєктах без модульної системи або для групування типів у .d.ts файлах. Сучасний стандарт — ES6 модулі."
-      },
-      "en": {
-        "q": "When is it appropriate to use namespace instead of modules?",
-        "exp": "Namespace is rarely used: in legacy projects without a module system or for grouping types in .d.ts files. The modern standard is ES6 modules."
-      },
-      "pl": {
-        "q": "Kiedy warto używać namespace zamiast modułów?",
-        "exp": "Namespace używa się rzadko: w projektach legacy bez systemu modułów lub do grupowania typów w plikach .d.ts. Współczesny standard to moduły ES6."
-      },
-      "answers": [
-        {
-          "uk": "Завжди, це кращий підхід",
-          "en": "Always, it's a better approach",
-          "pl": "Zawsze, to lepsze podejście",
-          "correct": false
-        },
-        {
-          "uk": "Тільки для frontend-проєктів",
-          "en": "Only for frontend projects",
-          "pl": "Tylko dla projektów frontendowych",
-          "correct": false
-        },
-        {
-          "uk": "У legacy-проєктах або для .d.ts файлів",
-          "en": "In legacy projects or for .d.ts files",
-          "pl": "W projektach legacy lub dla plików .d.ts",
-          "correct": true
-        },
-        {
-          "uk": "Для всіх нових проєктів",
-          "en": "For all new projects",
-          "pl": "Dla wszystkich nowych projektów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q30",
-      "order": 30,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що налаштовує файл tsconfig.json?",
-        "exp": "tsconfig.json містить налаштування компілятора TypeScript: цільову версію JS (target), систему модулів, строгість перевірок та інше."
-      },
-      "en": {
-        "q": "What does the tsconfig.json file configure?",
-        "exp": "tsconfig.json contains TypeScript compiler settings: target JS version, module system, strictness checks, and more."
-      },
-      "pl": {
-        "q": "Co konfiguruje plik tsconfig.json?",
-        "exp": "tsconfig.json zawiera ustawienia kompilatora TypeScript: docelową wersję JS, system modułów, ścisłość kontroli i więcej."
-      },
-      "answers": [
-        {
-          "uk": "Залежності проєкту",
-          "en": "Project dependencies",
-          "pl": "Zależności projektu",
-          "correct": false
-        },
-        {
-          "uk": "Налаштування компілятора TypeScript",
-          "en": "TypeScript compiler settings",
-          "pl": "Ustawienia kompilatora TypeScript",
-          "correct": true
-        },
-        {
-          "uk": "Стилі CSS для проєкту",
-          "en": "CSS styles for the project",
-          "pl": "Style CSS dla projektu",
-          "correct": false
-        },
-        {
-          "uk": "Маршрутизацію застосунку",
-          "en": "Application routing",
-          "pl": "Routing aplikacji",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/frontend/parse/typescript/fundamentals/typescript-quiz-part4.json b/frontend/parse/typescript/fundamentals/typescript-quiz-part4.json
deleted file mode 100644
index 7df995b8..00000000
--- a/frontend/parse/typescript/fundamentals/typescript-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "ts-q31",
-      "order": 31,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як працює type narrowing з typeof?",
-        "exp": "typeof використовується для звуження union-типів. У гілці if (typeof x === 'string') TypeScript знає, що x — це string."
-      },
-      "en": {
-        "q": "How does type narrowing with typeof work?",
-        "exp": "typeof is used to narrow union types. In the if (typeof x === 'string') branch, TypeScript knows that x is a string."
-      },
-      "pl": {
-        "q": "Jak działa zawężanie typów z typeof?",
-        "exp": "typeof służy do zawężania typów union. W gałęzi if (typeof x === 'string') TypeScript wie, że x jest stringiem."
-      },
-      "answers": [
-        {
-          "uk": "typeof не впливає на типи у TypeScript",
-          "en": "typeof does not affect types in TypeScript",
-          "pl": "typeof nie wpływa na typy w TypeScript",
-          "correct": false
-        },
-        {
-          "uk": "Компілятор звужує тип у відповідній гілці коду",
-          "en": "The compiler narrows the type in the corresponding code branch",
-          "pl": "Kompilator zawęża typ w odpowiedniej gałęzi kodu",
-          "correct": true
-        },
-        {
-          "uk": "typeof працює тільки з примітивами в рантаймі",
-          "en": "typeof only works with primitives at runtime",
-          "pl": "typeof działa tylko z prymitywami w runtime",
-          "correct": false
-        },
-        {
-          "uk": "Потрібно використовувати instanceof замість typeof",
-          "en": "You need to use instanceof instead of typeof",
-          "pl": "Trzeba używać instanceof zamiast typeof",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q32",
-      "order": 32,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке .d.ts файли?",
-        "exp": "Файли .d.ts — це декларації типів без реалізації. Вони описують типи для JavaScript-бібліотек, щоб TypeScript міг їх перевіряти."
-      },
-      "en": {
-        "q": "What are .d.ts files?",
-        "exp": ".d.ts files are type declarations without implementation. They describe types for JavaScript libraries so TypeScript can check them."
-      },
-      "pl": {
-        "q": "Czym są pliki .d.ts?",
-        "exp": "Pliki .d.ts to deklaracje typów bez implementacji. Opisują typy dla bibliotek JavaScript, aby TypeScript mógł je sprawdzać."
-      },
-      "answers": [
-        {
-          "uk": "Скомпільований JavaScript код",
-          "en": "Compiled JavaScript code",
-          "pl": "Skompilowany kod JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Декларації типів для JavaScript-бібліотек",
-          "en": "Type declarations for JavaScript libraries",
-          "pl": "Deklaracje typów dla bibliotek JavaScript",
-          "correct": true
-        },
-        {
-          "uk": "Файли конфігурації проєкту",
-          "en": "Project configuration files",
-          "pl": "Pliki konfiguracyjne projektu",
-          "correct": false
-        },
-        {
-          "uk": "Тестові файли",
-          "en": "Test files",
-          "pl": "Pliki testowe",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q33",
-      "order": 33,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовується прапорець strict у tsconfig.json?",
-        "exp": "strict: true вмикає всі строгі перевірки типів: strictNullChecks, strictFunctionTypes та інші. Рекомендується для нових проєктів."
-      },
-      "en": {
-        "q": "What is the strict flag in tsconfig.json used for?",
-        "exp": "strict: true enables all strict type checks: strictNullChecks, strictFunctionTypes, and others. Recommended for new projects."
-      },
-      "pl": {
-        "q": "Do czego służy flaga strict w tsconfig.json?",
-        "exp": "strict: true włącza wszystkie ścisłe kontrole typów: strictNullChecks, strictFunctionTypes i inne. Zalecane dla nowych projektów."
-      },
-      "answers": [
-        {
-          "uk": "Вимикає всі перевірки типів",
-          "en": "Disables all type checks",
-          "pl": "Wyłącza wszystkie kontrole typów",
-          "correct": false
-        },
-        {
-          "uk": "Вмикає всі строгі перевірки типів",
-          "en": "Enables all strict type checks",
-          "pl": "Włącza wszystkie ścisłe kontrole typów",
-          "correct": true
-        },
-        {
-          "uk": "Забороняє використання any",
-          "en": "Prohibits the use of any",
-          "pl": "Zabrania używania any",
-          "correct": false
-        },
-        {
-          "uk": "Вмикає режим продакшену",
-          "en": "Enables production mode",
-          "pl": "Włącza tryb produkcyjny",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як перевизначити метод батьківського класу?",
-        "exp": "Метод у похідному класі з тією самою сигнатурою перевизначає батьківський. Для виклику оригінального методу використовується super.method()."
-      },
-      "en": {
-        "q": "How do you override a parent class method?",
-        "exp": "A method in a derived class with the same signature overrides the parent's. To call the original method, use super.method()."
-      },
-      "pl": {
-        "q": "Jak nadpisać metodę klasy nadrzędnej?",
-        "exp": "Metoda w klasie pochodnej z tą samą sygnaturą nadpisuje rodzica. Aby wywołać oryginalną metodę, użyj super.method()."
-      },
-      "answers": [
-        {
-          "uk": "Використати ключове слово override обов'язково",
-          "en": "Must use the override keyword",
-          "pl": "Trzeba użyć słowa kluczowego override",
-          "correct": false
-        },
-        {
-          "uk": "Створити метод з тією самою сигнатурою у похідному класі",
-          "en": "Create a method with the same signature in the derived class",
-          "pl": "Utworzyć metodę z tą samą sygnaturą w klasie pochodnej",
-          "correct": true
-        },
-        {
-          "uk": "Видалити метод з батьківського класу",
-          "en": "Delete the method from the parent class",
-          "pl": "Usunąć metodę z klasy nadrzędnej",
-          "correct": false
-        },
-        {
-          "uk": "Перевизначення методів неможливе в TypeScript",
-          "en": "Method overriding is not possible in TypeScript",
-          "pl": "Nadpisywanie metod nie jest możliwe w TypeScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q35",
-      "order": 35,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке перевантаження функцій (function overloading)?",
-        "exp": "Перевантаження дозволяє оголосити кілька сигнатур функції з різними параметрами, але реалізація одна. TypeScript перевіряє виклики за сигнатурами."
-      },
-      "en": {
-        "q": "What is function overloading?",
-        "exp": "Overloading allows declaring multiple function signatures with different parameters, but there's one implementation. TypeScript checks calls against signatures."
-      },
-      "pl": {
-        "q": "Czym jest przeciążanie funkcji (function overloading)?",
-        "exp": "Przeciążanie pozwala zadeklarować wiele sygnatur funkcji z różnymi parametrami, ale implementacja jest jedna. TypeScript sprawdza wywołania względem sygnatur."
-      },
-      "answers": [
-        {
-          "uk": "Створення кількох функцій з однаковими іменами",
-          "en": "Creating multiple functions with the same name",
-          "pl": "Tworzenie wielu funkcji o tych samych nazwach",
-          "correct": false
-        },
-        {
-          "uk": "Оголошення кількох сигнатур з однією реалізацією",
-          "en": "Declaring multiple signatures with one implementation",
-          "pl": "Deklarowanie wielu sygnatur z jedną implementacją",
-          "correct": true
-        },
-        {
-          "uk": "Автоматичне створення варіантів функції",
-          "en": "Automatic creation of function variants",
-          "pl": "Automatyczne tworzenie wariantów funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Завантаження функцій з зовнішніх модулів",
-          "en": "Loading functions from external modules",
-          "pl": "Ładowanie funkcji z zewnętrznych modułów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q36",
-      "order": 36,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить ключове слово static у класах?",
-        "exp": "static створює члени класу, які належать самому класу, а не його екземплярам. Доступ через ClassName.member, не через об'єкт."
-      },
-      "en": {
-        "q": "What does the static keyword do in classes?",
-        "exp": "static creates class members that belong to the class itself, not its instances. Access via ClassName.member, not through an object."
-      },
-      "pl": {
-        "q": "Co robi słowo kluczowe static w klasach?",
-        "exp": "static tworzy składowe klasy należące do samej klasy, nie jej instancji. Dostęp przez ClassName.member, nie przez obiekt."
-      },
-      "answers": [
-        {
-          "uk": "Робить властивість незмінною",
-          "en": "Makes a property immutable",
-          "pl": "Czyni właściwość niezmienną",
-          "correct": false
-        },
-        {
-          "uk": "Створює члени, що належать класу, а не екземплярам",
-          "en": "Creates members that belong to the class, not instances",
-          "pl": "Tworzy składowe należące do klasy, nie instancji",
-          "correct": true
-        },
-        {
-          "uk": "Робить метод асинхронним",
-          "en": "Makes a method asynchronous",
-          "pl": "Czyni metodę asynchroniczną",
-          "correct": false
-        },
-        {
-          "uk": "Забороняє наслідування",
-          "en": "Prevents inheritance",
-          "pl": "Zabrania dziedziczenia",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q37",
-      "order": 37,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між interface та type alias?",
-        "exp": "interface можна розширювати через extends і доповнювати (declaration merging). type alias гнучкіший: підтримує union, intersection, mapped types."
-      },
-      "en": {
-        "q": "What is the difference between interface and type alias?",
-        "exp": "interface can be extended via extends and augmented (declaration merging). type alias is more flexible: supports union, intersection, mapped types."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między interface a type alias?",
-        "exp": "interface można rozszerzać przez extends i uzupełniać (declaration merging). type alias jest bardziej elastyczny: obsługuje union, intersection, mapped types."
-      },
-      "answers": [
-        {
-          "uk": "Немає різниці, це синоніми",
-          "en": "No difference, they are synonyms",
-          "pl": "Nie ma różnicy, to synonimy",
-          "correct": false
-        },
-        {
-          "uk": "interface підтримує розширення, type — union та mapped types",
-          "en": "interface supports extension, type supports union and mapped types",
-          "pl": "interface obsługuje rozszerzanie, type — union i mapped types",
-          "correct": true
-        },
-        {
-          "uk": "type швидший за interface",
-          "en": "type is faster than interface",
-          "pl": "type jest szybszy niż interface",
-          "correct": false
-        },
-        {
-          "uk": "interface для об'єктів, type для функцій",
-          "en": "interface for objects, type for functions",
-          "pl": "interface dla obiektów, type dla funkcji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке exhaustive checking у TypeScript?",
-        "exp": "Exhaustive checking гарантує обробку всіх варіантів union-типу. Якщо додати новий варіант і не обробити його, компілятор видасть помилку через never."
-      },
-      "en": {
-        "q": "What is exhaustive checking in TypeScript?",
-        "exp": "Exhaustive checking ensures all union type variants are handled. If you add a new variant without handling it, the compiler throws an error via never."
-      },
-      "pl": {
-        "q": "Czym jest exhaustive checking w TypeScript?",
-        "exp": "Exhaustive checking zapewnia obsługę wszystkich wariantów typu union. Jeśli dodasz nowy wariant bez obsługi, kompilator zgłosi błąd przez never."
-      },
-      "answers": [
-        {
-          "uk": "Перевірка продуктивності коду",
-          "en": "Code performance checking",
-          "pl": "Sprawdzanie wydajności kodu",
-          "correct": false
-        },
-        {
-          "uk": "Гарантія обробки всіх варіантів union-типу",
-          "en": "Guarantee that all union type variants are handled",
-          "pl": "Gwarancja obsługi wszystkich wariantów typu union",
-          "correct": true
-        },
-        {
-          "uk": "Перевірка на витоки пам'яті",
-          "en": "Memory leak checking",
-          "pl": "Sprawdzanie wycieków pamięci",
-          "correct": false
-        },
-        {
-          "uk": "Автоматичне тестування коду",
-          "en": "Automatic code testing",
-          "pl": "Automatyczne testowanie kodu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q39",
-      "order": 39,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що відбувається з типами TypeScript після компіляції?",
-        "exp": "Типи повністю видаляються при компіляції. Результат — звичайний JavaScript без жодної інформації про типи. Типи існують тільки на етапі розробки."
-      },
-      "en": {
-        "q": "What happens to TypeScript types after compilation?",
-        "exp": "Types are completely removed during compilation. The result is plain JavaScript without any type information. Types exist only at development time."
-      },
-      "pl": {
-        "q": "Co dzieje się z typami TypeScript po kompilacji?",
-        "exp": "Typy są całkowicie usuwane podczas kompilacji. Wynik to zwykły JavaScript bez żadnych informacji o typach. Typy istnieją tylko podczas programowania."
-      },
-      "answers": [
-        {
-          "uk": "Залишаються у вигляді коментарів",
-          "en": "Remain as comments",
-          "pl": "Pozostają jako komentarze",
-          "correct": false
-        },
-        {
-          "uk": "Перетворюються на перевірки в рантаймі",
-          "en": "Are converted to runtime checks",
-          "pl": "Są konwertowane na sprawdzenia w runtime",
-          "correct": false
-        },
-        {
-          "uk": "Повністю видаляються",
-          "en": "Are completely removed",
-          "pl": "Są całkowicie usuwane",
-          "correct": true
-        },
-        {
-          "uk": "Зберігаються в окремому файлі",
-          "en": "Are stored in a separate file",
-          "pl": "Są przechowywane w osobnym pliku",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "ts-q40",
-      "order": 40,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як встановити типи для сторонньої JavaScript-бібліотеки?",
-        "exp": "Типи встановлюються через пакети @types з DefinitelyTyped: npm install --save-dev @types/назва-бібліотеки. Наприклад: @types/express."
-      },
-      "en": {
-        "q": "How do you install types for a third-party JavaScript library?",
-        "exp": "Types are installed via @types packages from DefinitelyTyped: npm install --save-dev @types/library-name. For example: @types/express."
-      },
-      "pl": {
-        "q": "Jak zainstalować typy dla zewnętrznej biblioteki JavaScript?",
-        "exp": "Typy instaluje się przez pakiety @types z DefinitelyTyped: npm install --save-dev @types/nazwa-biblioteki. Na przykład: @types/express."
-      },
-      "answers": [
-        {
-          "uk": "Типи встановлюються автоматично",
-          "en": "Types are installed automatically",
-          "pl": "Typy instalują się automatycznie",
-          "correct": false
-        },
-        {
-          "uk": "Через пакети @types з npm",
-          "en": "Via @types packages from npm",
-          "pl": "Przez pakiety @types z npm",
-          "correct": true
-        },
-        {
-          "uk": "Потрібно написати типи вручну",
-          "en": "You need to write types manually",
-          "pl": "Trzeba napisać typy ręcznie",
-          "correct": false
-        },
-        {
-          "uk": "TypeScript автоматично виводить типи з JS",
-          "en": "TypeScript automatically infers types from JS",
-          "pl": "TypeScript automatycznie wnioskuje typy z JS",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/frontend/project-structure.txt b/frontend/project-structure.txt
deleted file mode 100644
index e396c2de..00000000
--- a/frontend/project-structure.txt
+++ /dev/null
@@ -1,649 +0,0 @@
-📄 .DS_Store
-📄 .env
-📄 .env.example
-📄 .gitignore
-📄 .prettierrc
-📄 README.md
-📁 actions
-  📄 quiz.ts
-📁 app
-  📄 .DS_Store
-  📁 [locale]
-    📁 about
-      📄 page.tsx
-    📁 blog
-      📁 [slug]
-        📄 PostDetails.tsx
-        📄 page.tsx
-      📁 category
-        📁 [category]
-          📄 page.tsx
-      📄 page.tsx
-    📁 dashboard
-      📄 page.tsx
-    📁 forgot-password
-      📄 page.tsx
-    📄 layout.tsx
-    📁 leaderboard
-      📄 page.tsx
-    📁 login
-      📄 page.tsx
-    📄 not-found.tsx
-    📄 page.tsx
-    📁 privacy-policy
-      📄 page.tsx
-    📁 q&a
-      📄 page.tsx
-    📁 quiz
-      📁 [slug]
-        📄 page.tsx
-    📁 quizzes
-      📄 page.tsx
-    📁 reset-password
-      📄 page.tsx
-    📁 shop
-      📁 admin
-        📁 orders
-          📁 [id]
-            📄 RefundButton.tsx
-            📄 page.tsx
-          📄 page.tsx
-        📄 page.tsx
-        📁 products
-          📁 [id]
-            📁 edit
-              📄 page.tsx
-          📁 _components
-            📄 product-form.tsx
-          📁 new
-            📄 page.tsx
-          📄 page.tsx
-      📁 cart
-        📄 page.tsx
-      📁 checkout
-        📁 error
-          📄 page.tsx
-        📁 payment
-          📄 StripePaymentClient.tsx
-          📁 [orderId]
-            📄 page.tsx
-        📁 success
-          📄 OrderStatusAutoRefresh.tsx
-          📄 page.tsx
-      📁 orders
-        📁 [id]
-          📄 page.tsx
-        📄 error.tsx
-        📄 page.tsx
-      📄 page.tsx
-      📁 products
-        📁 [slug]
-          📄 page.tsx
-        📄 page.tsx
-    📁 signup
-      📄 page.tsx
-    📁 terms-of-service
-      📄 page.tsx
-  📁 api
-    📁 ai
-      📁 explain
-        📄 route.ts
-    📁 auth
-      📁 github
-        📁 callback
-          📄 route.ts
-        📄 route.ts
-      📁 google
-        📁 callback
-          📄 route.ts
-        📄 route.ts
-      📁 login
-        📄 route.ts
-      📁 logout
-        📄 route.ts
-      📁 me
-        📄 route.ts
-      📁 password-reset
-        📁 confirm
-          📄 route.ts
-        📄 route.ts
-      📁 resend-verification
-        📄 route.ts
-      📁 signup
-        📄 route.ts
-      📁 verify-email
-        📄 route.ts
-    📁 blog-author
-      📄 route.ts
-    📁 blog-search
-      📄 route.ts
-    📁 questions
-      📁 [category]
-        📄 route.ts
-    📁 quiz
-      📁 [slug]
-        📄 route.ts
-      📁 guest-result
-        📄 route.ts
-      📁 verify-answer
-        📄 route.ts
-    📁 sessions
-      📁 activity
-        📄 route.ts
-    📁 shop
-      📁 admin
-        📁 orders
-          📁 [id]
-            📁 refund
-              📄 route.ts
-            📄 route.ts
-          📁 reconcile-stale
-            📄 route.ts
-          📄 route.ts
-        📁 products
-          📁 [id]
-            📄 route.ts
-            📁 status
-              📄 route.ts
-          📄 route.ts
-      📁 cart
-        📁 rehydrate
-          📄 route.ts
-      📁 catalog
-        📄 route.ts
-      📁 checkout
-        📄 route.ts
-      📁 internal
-        📁 orders
-          📁 restock-stale
-            📄 route.ts
-      📁 orders
-        📁 [id]
-          📄 route.ts
-      📁 webhooks
-        📁 stripe
-          📄 route.ts
-    📁 stats
-      📄 route.ts
-  📄 globals.css
-  📄 layout.tsx
-📄 checkout.json
-📄 client.ts
-📁 components
-  📄 .DS_Store
-  📁 about
-    📄 CommunitySection.tsx
-    📄 FeaturesSection.tsx
-    📄 HeroSection.tsx
-    📄 InteractiveGame.tsx
-    📄 PricingSection.tsx
-    📄 SponsorsWall.tsx
-    📄 TopicsSection.tsx
-  📁 auth
-    📄 AuthErrorBanner.tsx
-    📄 AuthProvidersBlock.tsx
-    📄 AuthShell.tsx
-    📄 AuthSuccessBanner.tsx
-    📄 ForgotPasswordForm.tsx
-    📄 LoginForm.tsx
-    📄 OAuthButtons.tsx
-    📄 PostAuthQuizSync.tsx
-    📄 ProviderButton.tsx
-    📄 ResetPasswordForm.tsx
-    📄 SignupForm.tsx
-    📁 fields
-      📄 EmailField.tsx
-      📄 NameField.tsx
-      📄 PasswordField.tsx
-    📁 icons
-      📄 GitHubIcon.tsx
-      📄 GoogleIcon.tsx
-    📄 logoutButton.tsx
-  📁 blog
-    📄 BlogCard.tsx
-    📄 BlogCategoryGrid.tsx
-    📄 BlogCategoryLinks.tsx
-    📄 BlogFilters.tsx
-    📄 BlogGrid.tsx
-    📄 BlogHeaderSearch.tsx
-    📄 BlogNavLinks.tsx
-  📁 dashboard
-    📄 ProfileCard.tsx
-    📄 QuizSavedBanner.tsx
-    📄 StatsCard.tsx
-  📁 header
-    📄 AppChrome.tsx
-    📄 AppMobileMenu.tsx
-    📄 DesktopActions.tsx
-    📄 DesktopNav.tsx
-    📄 MainSwitcher.tsx
-    📄 MobileActions.tsx
-    📄 NavLink.tsx
-    📄 UnifiedHeader.tsx
-  📁 leaderboard
-    📄 LeaderboardClient.tsx
-    📄 LeaderboardPodium.tsx
-    📄 LeaderboardTable.tsx
-    📄 types.ts
-  📁 legal
-    📄 LegalBlock.tsx
-    📄 LegalPageShell.tsx
-    📄 PrivacyPolicyContent.tsx
-    📄 TermsOfServiceContent.tsx
-  📁 q&a
-    📄 AIWordHelper.tsx
-    📄 AccordionList.tsx
-    📄 CodeBlock.tsx
-    📄 FloatingExplainButton.tsx
-    📄 HighlightCachedTerms.tsx
-    📄 Pagination.tsx
-    📄 QaSection.tsx
-    📄 SelectableText.tsx
-    📄 types.ts
-    📄 useQaTabs.ts
-  📁 quiz
-    📄 CountdownTimer.tsx
-    📄 ExplanationRenderer.tsx
-    📄 PendingResultHandler.tsx
-    📄 QuizCard.tsx
-    📄 QuizContainer.tsx
-    📄 QuizProgress.tsx
-    📄 QuizQuestion.tsx
-    📄 QuizResult.tsx
-    📄 QuizzesSection.tsx
-    📁 tests
-      📄 quiz-container-flow.test.tsx
-  📁 shared
-    📄 AnimatedNavLink.tsx
-    📄 CategoryTabButton.tsx
-    📄 CookieBanner.tsx
-    📄 DynamicGridBackground.tsx
-    📄 Footer.tsx
-    📄 GitHubStarButton.tsx
-    📄 HeaderButton.tsx
-    📄 HeroSection.tsx
-    📄 LanguageSwitcher.tsx
-    📄 Logo.tsx
-    📄 OnlineCounterPopup.tsx
-  📁 shop
-    📄 add-to-cart-button.tsx
-    📁 admin
-      📄 admin-pagination.tsx
-      📄 admin-product-delete-button.tsx
-      📄 admin-product-status-toggle.tsx
-      📄 shop-admin-topbar.tsx
-    📄 cart-provider.tsx
-    📄 catalog-load-more.tsx
-    📄 catalog-products-client.tsx
-    📄 category-tile.tsx
-    📄 clear-cart-on-mount.tsx
-    📁 header
-      📄 cart-button.tsx
-      📄 nav-links.tsx
-    📄 product-card.tsx
-    📄 product-filters.tsx
-    📄 product-sort.tsx
-    📄 products-toolbar.tsx
-    📄 shop-hero.tsx
-  📁 tests
-    📄 CookieBanner.test.tsx
-    📁 q&a
-      📄 accordion-list.test.tsx
-      📄 ai-word-helper.test.tsx
-      📄 code-block.test.tsx
-      📄 floating-explain-button.test.tsx
-      📄 highlight-cached-terms.test.tsx
-      📄 pagination.test.tsx
-      📄 qa-section.test.tsx
-      📄 selectable-text.test.tsx
-      📄 types.test.ts
-      📄 use-qa-tabs.test.tsx
-  📁 theme
-    📄 ThemeProvider.tsx
-    📄 ThemeToggle.tsx
-  📁 ui
-    📄 accordion.tsx
-    📄 badge.tsx
-    📄 button.tsx
-    📄 confirm-modal.tsx
-    📄 github-star-button.tsx
-    📄 radio-group.tsx
-    📄 tabs.tsx
-📄 components.json
-📁 data
-  📄 about.ts
-  📄 category.ts
-  📄 categoryStyles.ts
-📁 db
-  📄 index.ts
-  📁 legacy-migrations
-    📁 drizzle_legacy
-      📄 0000_rich_magus.sql
-      📄 0001_black_random.sql
-      📄 0002_yielding_purple_man.sql
-      📄 0003_handy_cammi.sql
-      📄 0004_tough_ultron.sql
-      📄 0005_furry_warstar.sql
-      📄 0006_minor_units_money.sql
-      📄 0007_add-payment-intent-id-to-orders.sql
-      📄 0008_dizzy_james_howlett.sql
-      📄 0009_p0_inventory_workflow_baseline.sql
-      📄 0009_unknown_nico_minoru.sql
-      📄 0010_parallel_princess_powerful.sql
-      📄 0011_add_orders_sweep_claim_index.sql
-      📄 0012_inventory_moves_product_fk_restrict.sql
-      📄 0013_add_internal_job_state.sql
-      📄 0013_brown_gamora.sql
-      📄 0013_low_roughhouse.sql
-      📄 0014_add-stripe-events-processed-at.sql
-      📄 0014_dapper_kang.sql
-      📄 0014_steep_kabuki.sql
-      📄 0015_dear_legion.sql
-      📄 0015_glamorous_eternity.sql
-      📄 0015_warm_dexter_bennett.sql
-      📁 meta
-        📄 0000_snapshot.json
-        📄 0001_snapshot.json
-        📄 0002_snapshot.json
-        📄 0003_snapshot.json
-        📄 0004_snapshot.json
-        📄 0005_snapshot.json
-        📄 0006_snapshot.json
-        📄 0007_snapshot.json
-        📄 0008_snapshot.json
-        📄 0009_snapshot.json
-        📄 0010_snapshot.json
-        📄 0012_snapshot.json
-        📄 0013_snapshot.json
-        📄 0014_snapshot.json
-        📄 0015_snapshot.json
-        📄 _journal.json
-      📄 relations.ts
-      📄 schema.ts
-  📁 queries
-    📄 leaderboard.ts
-    📄 points.ts
-    📄 quiz.ts
-    📁 shop
-      📄 admin-orders.ts
-      📄 orders.ts
-      📄 products.ts
-    📄 users.ts
-  📁 schema
-    📄 categories.ts
-    📄 emailVerificationTokens.ts
-    📄 index.ts
-    📄 passwordResetTokens.ts
-    📄 points.ts
-    📄 questions.ts
-    📄 quiz.ts
-    📄 sessions.ts
-    📄 shop.ts
-    📄 users.ts
-  📄 seed-categories.ts
-  📄 seed-demo-leaderboard.ts
-  📄 seed-questions.ts
-  📄 seed-quiz-angular-advanced.ts
-  📄 seed-quiz-angular.ts
-  📄 seed-quiz-css-advanced.ts
-  📄 seed-quiz-css.ts
-  📄 seed-quiz-from-json.ts
-  📄 seed-quiz-git.ts
-  📄 seed-quiz-html-advanced.ts
-  📄 seed-quiz-html.ts
-  📄 seed-quiz-javascript-advanced.ts
-  📄 seed-quiz-javascript.ts
-  📄 seed-quiz-nodejs-advanced.ts
-  📄 seed-quiz-nodejs.ts
-  📄 seed-quiz-react.ts
-  📄 seed-quiz-types.ts
-  📄 seed-quiz-typescript-advanced.ts
-  📄 seed-quiz-typescript.ts
-  📄 seed-quiz-verify.ts
-  📄 seed-quiz-vue.ts
-  📄 seed-users.ts
-📁 docs
-  📁 security
-    📄 origin-posture.md
-📁 drizzle
-  📄 0000_dry_young_avengers.sql
-  📄 0001_add_payment_attempts.sql
-  📄 0002_clean_martin_li.sql
-  📄 0003_add_stripe_events_claim_lock.sql
-  📄 0004_add_api_rate_limits.sql
-  📄 0005_modern_bromley.sql
-  📁 meta
-    📄 0000_snapshot.json
-    📄 0001_snapshot.json
-    📄 0002_snapshot.json
-    📄 0003_snapshot.json
-    📄 0004_snapshot.json
-    📄 0005_snapshot.json
-    📄 _journal.json
-📄 drizzle.config.ts
-📄 eslint.config.mjs
-📁 hooks
-  📄 use-mounted.ts
-  📄 useAntiCheat.ts
-  📄 useQuizGuards.ts
-  📄 useQuizSession.ts
-📁 i18n
-  📄 config.ts
-  📄 request.ts
-  📄 routing.ts
-📁 lib
-  📁 about
-    📄 github-sponsors.ts
-    📄 stats.ts
-  📁 admin
-    📄 parseAdminProductForm.ts
-  📁 ai
-    📄 explainCache.ts
-    📄 prompts.ts
-  📁 auth
-    📄 admin.ts
-    📄 email-verification.ts
-    📄 guard-shop-admin-page.ts
-    📄 internal-janitor.ts
-    📄 oauth-state.ts
-    📄 password-reset.ts
-    📄 safe-redirect.ts
-  📄 auth.ts
-  📁 blog
-    📄 date.ts
-  📄 cart.ts
-  📄 cloudinary.ts
-  📁 config
-    📄 catalog.ts
-  📁 email
-    📄 sendPasswordResetEmail.ts
-    📄 sendVerificationEmail.ts
-    📁 templates
-      📄 base-layout.ts
-      📄 reset-password.ts
-      📄 verify-email.ts
-    📄 transporter.ts
-  📁 env
-    📄 auth.ts
-    📄 cloudinary.ts
-    📄 index.ts
-    📄 stripe.ts
-  📁 errors
-    📄 products.ts
-  📁 http
-    📄 getBaseUrl.ts
-  📄 logging.ts
-  📄 logout.ts
-  📄 navigation.ts
-  📄 pagination.ts
-  📁 psp
-    📄 stripe.ts
-  📁 quiz
-    📄 guest-quiz.ts
-    📄 quiz-crypto.ts
-    📄 quiz-session.ts
-    📄 quiz-storage-keys.ts
-  📁 security
-    📄 admin-csrf.ts
-    📄 csrf.ts
-    📄 origin.ts
-    📄 rate-limit.ts
-    📄 stripe-webhook-rate-limit.ts
-  📁 services
-    📄 errors.ts
-    📄 inventory.ts
-    📁 orders
-      📄 _shared.ts
-      📄 checkout.ts
-      📄 payment-attempts.ts
-      📄 payment-intent.ts
-      📄 payment-state.ts
-      📁 psp-metadata
-        📄 refunds.ts
-      📄 refund.ts
-      📄 restock.ts
-      📄 summary.ts
-      📄 sweeps.ts
-    📄 orders.ts
-    📁 products
-      📁 admin
-        📄 queries.ts
-      📁 cart
-        📄 rehydrate.ts
-      📄 mapping.ts
-      📁 mutations
-        📄 create.ts
-        📄 delete.ts
-        📄 toggle.ts
-        📄 update.ts
-      📄 prices.ts
-      📄 slug.ts
-      📄 types.ts
-    📄 products.ts
-  📁 shop
-    📄 cart-item-key.ts
-    📄 currency.ts
-    📄 data.ts
-    📄 idempotency.ts
-    📄 money.ts
-    📄 payments.ts
-    📄 request-locale.ts
-    📄 slug.ts
-  📁 tests
-    📁 __mocks__
-      📄 server-only.ts
-    📄 admin-api-killswitch.test.ts
-    📄 admin-csrf-contract.test.ts
-    📄 admin-product-patch-price-config-error-contract.test.ts
-    📄 admin-product-sale-contract.test.ts
-    📄 cart-rehydrate-variant-sanitize.test.ts
-    📄 checkout-concurrency-stock1.test.ts
-    📄 checkout-currency-policy.test.ts
-    📄 checkout-no-payments.test.ts
-    📄 checkout-origin-posture-contract.test.ts
-    📄 checkout-set-payment-intent-reject-contract.test.ts
-    📄 checkout-stripe-error-contract.test.ts
-    📄 currency.test.ts
-    📁 factories
-      📁 quiz
-        📄 quiz.ts
-    📄 format-money.test.ts
-    📁 helpers
-      📄 ip.ts
-      📄 makeCheckoutReq.ts
-    📄 order-items-snapshot-immutable.test.ts
-    📄 order-items-variants.test.ts
-    📄 orders-access.test.ts
-    📄 origin-posture.test.ts
-    📄 payment-state-legacy-writers.test.ts
-    📄 payment-state-machine.helper.test.ts
-    📄 payment-status-tripwire.test.ts
-    📄 prices.test.ts
-    📄 product-admin-merged-prices-policy.test.ts
-    📄 product-admin-update-prices-patch-semantics.test.ts
-    📄 product-sale-invariant.test.ts
-    📄 public-product-visibility.test.ts
-    📁 q&a
-      📄 questions-route.test.ts
-    📁 quiz
-      📄 guest-quiz.test.ts
-      📄 guest-result-route.test.ts
-      📄 quiz-anticheat.test.ts
-      📄 quiz-crypto.test.ts
-      📄 quiz-session.test.ts
-      📄 quiz-setup.test.ts
-      📄 quiz-slug-route.test.ts
-      📄 setup.ts
-      📄 use-quiz-guards.test.ts
-      📄 use-quiz-session.test.ts
-      📄 verify-answer.test.ts
-    📄 rate-limit-subject-normalization.test.ts
-    📄 rate-limit-subject.test.ts
-    📄 restock-order-only-once.test.ts
-    📄 restock-release-failure-invariant.test.ts
-    📄 restock-stale-claim-gate.test.ts
-    📄 restock-stale-stripe-orphan.test.ts
-    📄 restock-stuck-reserving-sweep.test.ts
-    📄 restock-sweep-claim.test.ts
-    📄 stripe-webhook-contract.test.ts
-    📄 stripe-webhook-mismatch.test.ts
-    📄 stripe-webhook-paid-status-repair.test.ts
-    📄 stripe-webhook-psp-fields.test.ts
-    📄 stripe-webhook-rate-limit-env.test.ts
-    📄 stripe-webhook-refund-full.test.ts
-  📁 types
-    📄 shop.ts
-  📄 utils.ts
-  📁 validation
-    📄 checkout.ts
-    📄 shop.ts
-📁 messages
-  📄 en.json
-  📄 pl.json
-  📄 uk.json
-📄 next-env.d.ts
-📄 next.config.ts
-📄 package-lock.json
-📄 package.json
-📁 parse
-  📄 README.md
-  📄 parse.ts
-  📄 questions.json
-  📄 start.json
-  📁 typescript
-    📁 advanced
-      📄 typescript-advanced-quiz-part1.json
-      📄 typescript-advanced-quiz-part2.json
-      📄 typescript-advanced-quiz-part3.json
-      📄 typescript-advanced-quiz-part4.json
-    📁 fundamentals
-      📄 typescript-quiz-part1.json
-      📄 typescript-quiz-part2.json
-      📄 typescript-quiz-part3.json
-      📄 typescript-quiz-part4.json
-📄 postcss.config.mjs
-📄 project-structure.txt
-📄 proxy.ts
-📁 public
-  📄 apparel.jpg
-  📄 collectibles.jpg
-  📄 favicon-dark.svg
-  📄 favicon-light.svg
-  📁 icons
-    📄 angular.svg
-    📄 css3.svg
-    📄 git.svg
-    📄 html5.svg
-    📄 javascript.svg
-    📄 nextjs.svg
-    📄 nodejs.svg
-    📄 react.svg
-    📄 typescript.svg
-    📄 vuejs.svg
-  📄 lifestyle.jpg
-  📄 placeholder.svg
-📄 save-structure.cjs
-📁 scripts
-  📄 shop-janitor-restock-stale.mjs
-📄 tsconfig.json
-📄 vitest.config.ts
\ No newline at end of file
diff --git a/frontend/scripts/shop-janitor-restock-stale.mjs b/frontend/scripts/shop-janitor-restock-stale.mjs
index b4f8eb8a..911a4a66 100644
--- a/frontend/scripts/shop-janitor-restock-stale.mjs
+++ b/frontend/scripts/shop-janitor-restock-stale.mjs
@@ -1,7 +1,3 @@
-// scripts/shop-janitor-restock-stale.mjs
-// Calls internal janitor endpoint on a schedule (GitHub Actions).
-// Safe defaults: sends "{}" body to avoid NextRequest.json() throwing.
-
 const url = process.env.JANITOR_URL;
 const secret = process.env.INTERNAL_JANITOR_SECRET;
 
@@ -22,7 +18,6 @@ const rawTimeout = (process.env.JANITOR_TIMEOUT_MS ?? '').trim();
 let timeoutMs = DEFAULT_TIMEOUT_MS;
 
 if (rawTimeout) {
-  // strict: only digits, no "123abc", no floats, no underscores
   if (/^\d+$/.test(rawTimeout)) {
     const n = Number(rawTimeout);
     if (Number.isSafeInteger(n) && n > 0) {
@@ -54,7 +49,6 @@ try {
   const res = await fetch(url, {
     method: 'POST',
     headers: {
-      // Send both variants to match whatever your route expects.
       'content-type': 'application/json',
       'x-internal-janitor-secret': secret,
       authorization: `Bearer ${secret}`,
@@ -67,7 +61,6 @@ try {
   console.log(`[janitor] status=${res.status}`);
   if (text) console.log(text);
 
-  // Treat RATE_LIMITED as success for schedulers (no-op, expected sometimes).
   if (res.status === 429) process.exit(0);
   if (!res.ok) process.exit(1);
 } catch (err) {
diff --git a/json/00-git.json b/json/00-git.json
deleted file mode 100644
index 5ec4f0d4..00000000
--- a/json/00-git.json
+++ /dev/null
@@ -1,25516 +0,0 @@
-[
-  {
-    "category": "git",
-    "order": 1,
-    "translations": {
-      "uk": {
-        "question": "1. Що таке Git і яка його роль у розробці програмного забезпечення?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git", "bold": true },
-              {
-                "text": " - розподілена система контролю версій (VCS) для відстеження змін у коді."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Використання:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Зберігання історії змін у проєкті." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Паралельна розробка в гілках (branches)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Об’єднання змін через merge або rebase." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відновлення попередніх версій файлів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Спільна робота команд над кодом через сервіси (GitHub, GitLab, Bitbucket)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git дозволяє безпечно керувати кодом, відстежувати зміни та ефективно співпрацювати."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "1. What is Git and what role does it play in software development?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git", "bold": true },
-              {
-                "text": " is a distributed version control system (VCS) used to track changes in source code."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Usage:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Storing the history of changes in a project." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Parallel development using branches." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Merging changes via merge or rebase." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Restoring previous versions of files." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Team collaboration through services like GitHub, GitLab, and Bitbucket."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git enables safe code management, change tracking, and efficient collaboration."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "1. Czym jest Git i jaką rolę odgrywa w tworzeniu oprogramowania?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git", "bold": true },
-              {
-                "text": " to rozproszony system kontroli wersji (VCS) służący do śledzenia zmian w kodzie."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zastosowanie:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przechowywanie historii zmian w projekcie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Równoległa praca w gałęziach (branches)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Łączenie zmian za pomocą merge lub rebase." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przywracanie wcześniejszych wersji plików." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Praca zespołowa nad kodem przez serwisy (GitHub, GitLab, Bitbucket)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git umożliwia bezpieczne zarządzanie kodem, śledzenie zmian i efektywną współpracę."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 2,
-    "translations": {
-      "uk": {
-        "question": "2. Чим Git відрізняється від інших систем контролю версій, наприклад, SVN або Mercurial?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Розподіленість:", "bold": true },
-                  {
-                    "text": " у Git кожен клон репозиторію містить повну історію, на відміну від централізованих VCS (SVN)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Швидкість:", "bold": true },
-                  {
-                    "text": " локальні операції (commit, diff, log) виконуються дуже швидко."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Гнучке керування гілками:", "bold": true },
-                  {
-                    "text": " lightweight branches і швидке злиття (merge/rebase)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Зберігання змін:", "bold": true },
-                  {
-                    "text": " Git зберігає снімки (snapshots) файлів, а не лише дельти, як у SVN."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Широка інтеграція:", "bold": true },
-                  {
-                    "text": " популярність Git забезпечує підтримку в CI/CD, GitHub, GitLab та IDE."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Безпека:", "bold": true },
-                  {
-                    "text": " SHA-1 хешування гарантує цілісність історії."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git ідеально підходить для сучасних командних workflow та open-source проєктів завдяки швидкості, гнучкості та надійності."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "2. How does Git differ from other version control systems like SVN or Mercurial?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Distributed nature:", "bold": true },
-                  {
-                    "text": " each Git clone contains the full repository history, unlike centralized VCSs such as SVN."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Speed:", "bold": true },
-                  {
-                    "text": " local operations (commit, diff, log) are very fast."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Flexible branching:", "bold": true },
-                  {
-                    "text": " lightweight branches and fast merging (merge/rebase)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Data storage:", "bold": true },
-                  {
-                    "text": " Git stores snapshots of files instead of deltas like SVN."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wide integration:", "bold": true },
-                  {
-                    "text": " Git is widely supported by CI/CD tools, GitHub, GitLab, and IDEs."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Security:", "bold": true },
-                  {
-                    "text": " SHA-1 hashing ensures the integrity of the history."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git is ideal for modern team workflows and open-source projects due to its speed, flexibility, and reliability."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "2. Czym Git różni się od innych systemów kontroli wersji, takich jak SVN lub Mercurial?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rozproszona architektura:", "bold": true },
-                  {
-                    "text": " każdy klon repozytorium Git zawiera pełną historię, w przeciwieństwie do scentralizowanych VCS (SVN)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Szybkość:", "bold": true },
-                  {
-                    "text": " operacje lokalne (commit, diff, log) są bardzo szybkie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Elastyczne zarządzanie gałęziami:",
-                    "bold": true
-                  },
-                  {
-                    "text": " lekkie gałęzie (branches) i szybkie scalanie (merge/rebase)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przechowywanie danych:", "bold": true },
-                  {
-                    "text": " Git przechowuje migawki (snapshots) plików, a nie tylko różnice jak SVN."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Szeroka integracja:", "bold": true },
-                  {
-                    "text": " popularność Git zapewnia wsparcie w CI/CD, GitHub, GitLab oraz IDE."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Bezpieczeństwo:", "bold": true },
-                  {
-                    "text": " haszowanie SHA-1 gwarantuje integralność historii."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git doskonale sprawdza się w nowoczesnych workflow zespołowych i projektach open-source dzięki szybkości, elastyczności i niezawodności."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 3,
-    "translations": {
-      "uk": {
-        "question": "3. У чому відмінність між Git і GitHub?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git", "bold": true },
-                  {
-                    "text": " - система контролю версій (VCS) для відстеження змін у коді локально або на будь-якому сервері."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GitHub", "bold": true },
-                  {
-                    "text": " - онлайн-сервіс для хостингу Git-репозиторіїв із веб-інтерфейсом, командною роботою та додатковими можливостями: pull requests, issues, CI/CD інтеграції."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Коротко:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git - інструмент для роботи з версіями коду, GitHub - платформа для хостингу та командної співпраці."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git можна використовувати без GitHub, але GitHub без Git використати неможливо."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "3. What is the difference between Git and GitHub?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git", "bold": true },
-                  {
-                    "text": " is a version control system (VCS) used to track changes in code locally or on any server."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GitHub", "bold": true },
-                  {
-                    "text": " is an online platform for hosting Git repositories with a web interface, team collaboration, and additional features such as pull requests, issues, and CI/CD integrations."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "In short:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git is a tool for version control, while GitHub is a platform for hosting and collaborating on Git repositories."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "You can use Git without GitHub, but you cannot use GitHub without Git."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "3. Jaka jest różnica między Git a GitHub?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git", "bold": true },
-                  {
-                    "text": " to system kontroli wersji (VCS) służący do śledzenia zmian w kodzie lokalnie lub na dowolnym serwerze."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GitHub", "bold": true },
-                  {
-                    "text": " to internetowa platforma do hostowania repozytoriów Git z interfejsem webowym, pracą zespołową oraz dodatkowymi funkcjami: pull requests, issues, integracje CI/CD."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "W skrócie:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git to narzędzie do kontroli wersji, a GitHub to platforma do hostingu i współpracy zespołowej."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git można używać bez GitHub, ale GitHub nie działa bez Git."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 4,
-    "translations": {
-      "uk": {
-        "question": "4. Що таке репозиторій у Git і яка його роль?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Репозиторій (repository, repo)", "bold": true },
-              {
-                "text": " - це місце зберігання всього коду проєкту та повної історії змін."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Містить:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Файли проєкту (код, документацію, конфігурації)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Історію комітів із повідомленнями та авторами."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Гілки (branches) для паралельної розробки." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Репозиторій може бути локальним (на вашому комп’ютері) або віддаленим (GitHub, GitLab, Bitbucket)."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Він дозволяє відстежувати зміни, працювати командою та повертатися до попередніх версій коду."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "4. What is a repository in Git and what is its role?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "A repository (repo)", "bold": true },
-              {
-                "text": " is a storage location that contains the entire project code and its full change history."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Contains:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Project files (source code, documentation, configuration)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Commit history with messages and authors." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Branches for parallel development." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A repository can be local (on your computer) or remote (GitHub, GitLab, Bitbucket)."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "It allows you to track changes, collaborate with a team, and restore previous versions of the code."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "4. Czym jest repozytorium w Git i jaka jest jego rola?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Repozytorium (repository, repo)", "bold": true },
-              {
-                "text": " to miejsce przechowywania całego kodu projektu oraz pełnej historii zmian."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zawiera:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pliki projektu (kod źródłowy, dokumentację, konfigurację)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Historię commitów z autorami i opisami." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Gałęzie (branches) do równoległej pracy." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Repozytorium może być lokalne (na komputerze) lub zdalne (GitHub, GitLab, Bitbucket)."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Umożliwia śledzenie zmian, pracę zespołową oraz powrót do wcześniejszych wersji kodu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 5,
-    "translations": {
-      "uk": {
-        "question": "5. Що таке commit у Git і для чого він використовується?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Commit", "bold": true },
-              {
-                "text": " - це збереження знімка змін у репозиторії разом із повідомленням."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Містить:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Історію змін файлів (added, modified, deleted)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Авторство та дату зміни." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Унікальний SHA-1 хеш для ідентифікації." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Використовується для:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Відстеження прогресу проєкту." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Повернення до попередніх станів (git checkout, git revert)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Координації роботи в команді через pull/merge."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад коміту:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git add index.html\n\ngit commit -m \"feat(html): Додаю базову структуру сторінки\""
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Коміти формують історію проєкту, яку можна аналізувати, відновлювати і об’єднувати."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "5. What is a commit in Git and what is it used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "A commit", "bold": true },
-              {
-                "text": " is a snapshot of changes saved in the repository along with a message."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Contains:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A history of file changes (added, modified, deleted)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Author information and timestamp." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "A unique SHA-1 hash for identification." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Used for:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Tracking project progress." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Returning to previous states (git checkout, git revert)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Coordinating team work via pull/merge." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Commit example:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git add index.html\n\ngit commit -m \"feat(html): Add basic page structure\""
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Commits form the project history, which can be analyzed, restored, and merged."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "5. Czym jest commit w Git i do czego służy?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Commit", "bold": true },
-              {
-                "text": " to zapis migawki zmian w repozytorium wraz z komunikatem."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zawiera:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Historię zmian plików (added, modified, deleted)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Informacje o autorze i dacie." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Unikalny hash SHA-1 do identyfikacji." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Służy do:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Śledzenia postępu projektu." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Powrotu do wcześniejszych stanów (git checkout, git revert)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Koordynacji pracy zespołu poprzez pull/merge."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład commita:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git add index.html\n\ngit commit -m \"feat(html): Dodanie podstawowej struktury strony\""
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Commity tworzą historię projektu, którą można analizować, przywracać i scalać."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 6,
-    "translations": {
-      "uk": {
-        "question": "6. Яка різниця між working directory, staging area/index і repository у Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Робочий каталог (Working Directory)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Файли на диску, які ви безпосередньо редагуєте."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Містить останню версію з Git + незакомічені зміни."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Проміжна область (Staging Area / Index)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Тимчасова зона для підготовки змін до коміту."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Дозволяє обрати, які саме зміни потраплять у наступний коміт."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Команда: git add " },
-                          { "text": "<file>", "code": true },
-                          { "text": " додає зміни до стейджу." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Локальний репозиторій (Repository)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Збережена історія комітів у папці .git."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Містить коміти, гілки, теги та SHA-1 хеші."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Команда: git commit переносить зміни зі стейджу в репозиторій."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Схематично:" }]
-          },
-          {
-            "type": "code",
-            "language": "text",
-            "content": "Working Directory -> git add -> Staging Area -> git commit -> Repository"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ця модель дозволяє гнучко контролювати, які зміни зберігати, та підтримувати чисту історію комітів."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "6. What is the difference between the working directory, the staging area (index), and the repository in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Working Directory", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Files on disk that you actively edit."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Contains the latest version from Git plus uncommitted changes."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Staging Area (Index)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "A temporary area to prepare changes for a commit."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Allows you to select which changes will be included in the next commit."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Command: git add " },
-                          { "text": "<file>", "code": true },
-                          { "text": " adds changes to the staging area." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Repository", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stored commit history inside the .git directory."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Contains commits, branches, tags, and SHA-1 hashes."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Command: git commit moves changes from staging to the repository."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Diagram:" }]
-          },
-          {
-            "type": "code",
-            "language": "text",
-            "content": "Working Directory -> git add -> Staging Area -> git commit -> Repository"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This model provides fine-grained control over what gets committed and helps maintain a clean commit history."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "6. Jaka jest różnica między katalogiem roboczym (working directory), obszarem staging (index) a repozytorium w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Katalog roboczy (Working Directory)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Pliki na dysku, które aktualnie edytujesz."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zawiera ostatnią wersję z Git oraz niezacommitowane zmiany."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Obszar staging (Index)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Tymczasowe miejsce do przygotowania zmian do commita."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Pozwala wybrać, które zmiany trafią do następnego commita."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Polecenie: git add " },
-                          { "text": "<file>", "code": true },
-                          { "text": " dodaje zmiany do stagingu." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Repozytorium (Repository)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zapisana historia commitów w katalogu .git."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zawiera commity, gałęzie, tagi oraz hashe SHA-1."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Polecenie: git commit przenosi zmiany ze stagingu do repozytorium."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Schemat:" }]
-          },
-          {
-            "type": "code",
-            "language": "text",
-            "content": "Working Directory -> git add -> Staging Area -> git commit -> Repository"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ten model pozwala precyzyjnie kontrolować zapisywane zmiany i utrzymywać czystą historię commitów."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 7,
-    "translations": {
-      "uk": {
-        "question": "7. Що таке розгалуження (branching) у Git і чому воно важливе?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Розгалуження (branch)", "bold": true },
-              {
-                "text": " - це окрема лінія розробки в репозиторії, яка дозволяє працювати над новими функціями, виправленнями або експериментами, не впливаючи на основну гілку (main/master)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Важливість:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Паралельна робота кількох розробників." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Безпечне тестування нових функцій." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Проста інтеграція змін через merge або rebase."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Чистіша історія комітів і кращий контроль змін."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад створення та перемикання гілки:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git branch feature-login\n\ngit checkout feature-login"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Розгалуження є основою сучасних workflow (Git Flow, GitHub Flow) для командної розробки."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "7. What is branching in Git and why is it important?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Branching", "bold": true },
-              {
-                "text": " is a separate line of development in a repository that allows you to work on new features, fixes, or experiments without affecting the main branch (main/master)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Why it matters:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Parallel work by multiple developers." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Safe testing of new features." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Easy integration of changes via merge or rebase."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Cleaner commit history and better change control."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Example of creating and switching a branch:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git branch feature-login\n\ngit checkout feature-login"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Branching is the foundation of modern workflows such as Git Flow and GitHub Flow for team development."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "7. Czym jest branching (rozgałęzianie) w Git i dlaczego jest ważne?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Branching (gałąź)", "bold": true },
-              {
-                "text": " to oddzielna linia rozwoju w repozytorium, która pozwala pracować nad nowymi funkcjami, poprawkami lub eksperymentami bez wpływu na główną gałąź (main/master)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Dlaczego jest ważne:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Równoległa praca wielu programistów." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Bezpieczne testowanie nowych funkcji." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Łatwa integracja zmian przez merge lub rebase."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Czystsza historia commitów i lepsza kontrola zmian."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Przykład tworzenia i przełączania gałęzi:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git branch feature-login\n\ngit checkout feature-login"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Rozgałęzianie jest podstawą nowoczesnych workflow, takich jak Git Flow i GitHub Flow, w pracy zespołowej."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 8,
-    "translations": {
-      "uk": {
-        "question": "8. Що таке HEAD у Git і яка його роль?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "HEAD", "bold": true },
-              {
-                "text": " - це поточний вказівник на коміт, з яким ви зараз працюєте."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Зазвичай HEAD вказує на гілку, а гілка - на останній коміт."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Використовується для:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Визначення поточного місця в історії комітів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перемикання між гілками (git checkout " },
-                  { "text": "<branch>", "code": true },
-                  { "text": ") або комітами (git checkout " },
-                  { "text": "<commit>", "code": true },
-                  { "text": ")." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Можливі стани HEAD:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Normal", "bold": true },
-                  { "text": " - HEAD вказує на гілку." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Detached HEAD", "bold": true },
-                  {
-                    "text": " - HEAD тимчасово вказує на конкретний коміт, а не на гілку."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout feature-login\n\n# HEAD тепер вказує на гілку feature-login"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "HEAD - ключовий концепт для навігації історією Git та управління комітами."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "8. What is HEAD in Git and what is its role?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "HEAD", "bold": true },
-              {
-                "text": " is a pointer to the commit you are currently working on."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Usually, HEAD points to a branch, and the branch points to the latest commit."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Used for:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Identifying your current position in the commit history."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Switching branches (git checkout " },
-                  { "text": "<branch>", "code": true },
-                  { "text": ") or commits (git checkout " },
-                  { "text": "<commit>", "code": true },
-                  { "text": ")." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Possible HEAD states:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Normal", "bold": true },
-                  { "text": " - HEAD points to a branch." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Detached HEAD", "bold": true },
-                  {
-                    "text": " - HEAD temporarily points to a specific commit, not a branch."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout feature-login\n\n# HEAD now points to the feature-login branch"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "HEAD is a key concept for navigating Git history and managing commits."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "8. Czym jest HEAD w Git i jaka jest jego rola?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "HEAD", "bold": true },
-              {
-                "text": " to wskaźnik na commit, nad którym aktualnie pracujesz."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zazwyczaj HEAD wskazuje na gałąź, a gałąź na ostatni commit."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Służy do:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Określania bieżącej pozycji w historii commitów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przełączania gałęzi (git checkout " },
-                  { "text": "<branch>", "code": true },
-                  { "text": ") lub commitów (git checkout " },
-                  { "text": "<commit>", "code": true },
-                  { "text": ")." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Możliwe stany HEAD:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Normal", "bold": true },
-                  { "text": " - HEAD wskazuje na gałąź." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Detached HEAD", "bold": true },
-                  {
-                    "text": " - HEAD tymczasowo wskazuje na konkretny commit, a nie na gałąź."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout feature-login\n\n# HEAD wskazuje teraz na gałąź feature-login"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "HEAD to kluczowe pojęcie do nawigacji po historii Git i zarządzania commitami."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 9,
-    "translations": {
-      "uk": {
-        "question": "9. Що таке операція clone у Git і для чого вона використовується?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git clone", "code": true },
-              {
-                "text": " - створює повну копію віддаленого репозиторію на вашому локальному комп’ютері."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Копія містить:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Усі файли проєкту." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Повну історію комітів." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Усі гілки та теги." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Використовується для:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Початку роботи над існуючим проєктом." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Спільної роботи команди через GitHub, GitLab або інші сервери."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git clone https://github.com/user/repo.git"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Результат:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Локальний репозиторій, готовий до комітів, створення гілок і синхронізації з віддаленим сервером."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "9. What is the clone operation in Git and what is it used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git clone", "code": true },
-              {
-                "text": " creates a full copy of a remote repository on your local machine."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "The copy includes:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "All project files." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "The complete commit history." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "All branches and tags." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Used for:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Starting work on an existing project." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Team collaboration via GitHub, GitLab, or other servers."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git clone https://github.com/user/repo.git"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Result:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A local repository ready for commits, branching, and synchronization with the remote server."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "9. Czym jest operacja clone w Git i do czego służy?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git clone", "code": true },
-              {
-                "text": " tworzy pełną kopię zdalnego repozytorium na lokalnym komputerze."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kopia zawiera:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Wszystkie pliki projektu." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Pełną historię commitów." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Wszystkie gałęzie i tagi." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Służy do:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rozpoczęcia pracy nad istniejącym projektem." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Współpracy zespołowej przez GitHub, GitLab lub inne serwery."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git clone https://github.com/user/repo.git"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Rezultat:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Lokalne repozytorium gotowe do commitów, tworzenia gałęzi i synchronizacji ze zdalnym serwerem."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 10,
-    "translations": {
-      "uk": {
-        "question": "10. Як Git зберігає дані про проєкт і його історію змін?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git зберігає дані у вигляді знімків (snapshots), а не просто дельт файлів."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Кожен коміт містить:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Посилання на попередній коміт." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Знімок дерева файлів проєкту." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Інформацію про автора та повідомлення коміту."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні типи об’єктів Git:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Blob", "code": true },
-                  { "text": " - вміст файлів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tree", "code": true },
-                  { "text": " - структура каталогів і файлів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Commit", "code": true },
-                  { "text": " - вказує на tree та попередній коміт." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Папка " },
-              { "text": ".git", "code": true },
-              {
-                "text": " містить усі об’єкти та метадані, що дозволяє повністю відтворити історію проєкту."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Така модель робить Git швидким, надійним і ефективним для роботи з гілками та злиттями."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "10. How does Git store project data and its change history?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git stores data as snapshots rather than simple file deltas."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Each commit contains:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "A reference to the previous commit." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "A snapshot of the project file tree." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Author information and commit message." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Core Git object types:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Blob", "code": true },
-                  { "text": " - file contents." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tree", "code": true },
-                  { "text": " - directory and file structure." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Commit", "code": true },
-                  { "text": " - points to a tree and the previous commit." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The " },
-              { "text": ".git", "code": true },
-              {
-                "text": " directory contains all objects and metadata needed to fully reconstruct the project history."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This model makes Git fast, reliable, and efficient for branching and merging."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "10. W jaki sposób Git przechowuje dane projektu i historię zmian?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git przechowuje dane w postaci migawek (snapshots), a nie tylko różnic plików."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Każdy commit zawiera:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Odniesienie do poprzedniego commita." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Migawkę drzewa plików projektu." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Informacje o autorze i komunikat commita." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Podstawowe typy obiektów Git:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Blob", "code": true },
-                  { "text": " - zawartość plików." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tree", "code": true },
-                  { "text": " - struktura katalogów i plików." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Commit", "code": true },
-                  { "text": " - wskazuje na tree i poprzedni commit." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Katalog " },
-              { "text": ".git", "code": true },
-              {
-                "text": " zawiera wszystkie obiekty i metadane, umożliwiając pełne odtworzenie historii projektu."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Taki model sprawia, że Git jest szybki, niezawodny i wydajny przy pracy z gałęziami i scalaniem."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 11,
-    "translations": {
-      "uk": {
-        "question": "11. Як ініціалізувати новий репозиторій Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Використати команду:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git init"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ця команда створює приховану папку .git у поточному каталозі, де зберігається історія комітів, гілки та конфігурація репозиторію."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Далі потрібно додати файли та створити перший коміт:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git add .\n\ngit commit -m \"Initial commit\""
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Після виконання git init каталог стає повноцінним Git-репозиторієм."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "11. How do you initialize a new Git repository?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Use the command:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git init"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This command creates a hidden .git directory in the current folder, which stores the commit history, branches, and repository configuration."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Next, add files and create the first commit:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git add .\n\ngit commit -m \"Initial commit\""
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "After running git init, the directory becomes a fully functional Git repository."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "11. Jak zainicjalizować nowe repozytorium Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Użyj polecenia:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git init"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Polecenie to tworzy ukryty katalog .git w bieżącym folderze, w którym przechowywana jest historia commitów, gałęzie oraz konfiguracja repozytorium."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Następnie należy dodać pliki i utworzyć pierwszy commit:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git add .\n\ngit commit -m \"Initial commit\""
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Po wykonaniu git init katalog staje się pełnoprawnym repozytorium Git."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 12,
-    "translations": {
-      "uk": {
-        "question": "12. Для чого використовується команда git status?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Показує поточний стан робочого каталогу та індексу (staging area)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Інформує про:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Які файли змінені, але ще не додані." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Які файли вже в індексі та підуть у наступний коміт."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Які файли не відслідковуються." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Поточну гілку та її відставання або випередження відносно віддаленого репозиторію."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git status"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Команда допомагає зрозуміти, що саме буде закомічено, а які зміни ще потребують виконання git add."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "12. What is the git status command used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Displays the current state of the working directory and the staging area (index)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "It informs you about:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Files that have been modified but not yet staged."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Files that are staged and will be included in the next commit."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Files that are untracked." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The current branch and whether it is ahead of or behind the remote branch."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git status"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "It helps you understand what will be committed and which changes still need to be added using git add."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "12. Do czego służy polecenie git status?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wyświetla aktualny stan katalogu roboczego oraz obszaru staging (index)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Informuje o:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Plikach zmodyfikowanych, ale jeszcze nie dodanych do stagingu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Plikach znajdujących się w stagingu, które trafią do następnego commita."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Plikach nieśledzonych (untracked)." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Aktualnej gałęzi oraz jej wyprzedzeniu lub opóźnieniu względem repozytorium zdalnego."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git status"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Polecenie pozwala zrozumieć, co zostanie zapisane w commicie, a które zmiany wymagają jeszcze użycia git add."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 13,
-    "translations": {
-      "uk": {
-        "question": "13. Яке призначення команди git add?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git add", "code": true },
-                  {
-                    "text": " додає зміни з робочого каталогу у staging area (індекс)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Це підготовчий етап перед комітом." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Можна додавати окремі файли або всі зміни." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклади:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git add file.txt     # додає конкретний файл\ngit add .            # додає всі зміни в поточному каталозі\ngit add -p           # додає зміни частинами (interactive)"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Команда " },
-              { "text": "git add", "code": true },
-              {
-                "text": " не зберігає зміни в історії - вона лише позначає їх для наступного "
-              },
-              { "text": "git commit", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "13. What is the purpose of the git add command?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git add", "code": true },
-                  {
-                    "text": " adds changes from the working directory to the staging area (index)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "It is a preparation step before committing." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "You can add individual files or all changes at once."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Examples:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git add file.txt     # adds a specific file\ngit add .            # adds all changes in the current directory\ngit add -p           # adds changes interactively"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The " },
-              { "text": "git add", "code": true },
-              {
-                "text": " command does not save changes to history - it only marks them for the next "
-              },
-              { "text": "git commit", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "13. Jakie jest przeznaczenie polecenia git add?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git add", "code": true },
-                  {
-                    "text": " dodaje zmiany z katalogu roboczego do obszaru staging (index)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jest to etap przygotowawczy przed wykonaniem commita."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Można dodawać pojedyncze pliki lub wszystkie zmiany naraz."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykłady:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git add file.txt     # dodaje konkretny plik\ngit add .            # dodaje wszystkie zmiany w bieżącym katalogu\ngit add -p           # dodaje zmiany interaktywnie"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Polecenie " },
-              { "text": "git add", "code": true },
-              {
-                "text": " nie zapisuje zmian w historii - jedynie oznacza je do następnego "
-              },
-              { "text": "git commit", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 14,
-    "translations": {
-      "uk": {
-        "question": "14. Яким чином створюється новий коміт у Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Спочатку додати зміни у staging area:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add ."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Потім створити коміт:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit -m \"Опис змін\""
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ключ ", "children": [] },
-                  { "text": "-m", "code": true },
-                  { "text": " додає повідомлення коміту." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Якщо параметр не вказати, відкриється текстовий редактор для введення повідомлення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Коміт зберігає знімок (snapshot) поточного стану індексу в історії репозиторію."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Рекомендується писати короткі та зрозумілі повідомлення комітів, щоб легко відстежувати зміни."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "14. How is a new commit created in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "First, add changes to the staging area:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add ."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Then create the commit:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit -m \"Describe changes\""
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "The ", "children": [] },
-                  { "text": "-m", "code": true },
-                  { "text": " flag adds a commit message." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "If it is not provided, a text editor will open to enter the message."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A commit saves a snapshot of the current staging area state into the repository history."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "It is recommended to write short and clear commit messages to easily track changes."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "14. W jaki sposób tworzy się nowy commit w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Najpierw dodaj zmiany do obszaru staging:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add ."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Następnie utwórz commit:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit -m \"Opis zmian\""
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Opcja ", "children": [] },
-                  { "text": "-m", "code": true },
-                  { "text": " dodaje komunikat commita." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jeśli nie zostanie podana, otworzy się edytor tekstu do wpisania komunikatu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Commit zapisuje migawkę (snapshot) aktualnego stanu stagingu w historii repozytorium."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zaleca się pisanie krótkich i zrozumiałych komunikatów commitów, aby łatwo śledzić zmiany."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 15,
-    "translations": {
-      "uk": {
-        "question": "15. Які дані зберігає об’єкт коміту в Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Об’єкт коміту містить:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Хеш (SHA-1/SHA-256) - унікальний ідентифікатор."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Посилання на tree-об’єкт (структура файлів і папок на момент коміту)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Посилання на parent-коміти (зв’язок в історії; у merge їх може бути кілька)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Автор (ім’я, email, час створення)." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Комітер (той, хто зафіксував зміни; може відрізнятися від автора)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Commit message (опис змін)." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Таким чином Git зберігає не окремі файли, а знімки стану разом із метаданими, що дозволяє легко відновлювати та порівнювати історію."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "15. What data does a commit object store in Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "A commit object contains:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A hash (SHA-1/SHA-256) - a unique identifier."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A reference to a tree object (the file and directory structure at the time of the commit)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "References to parent commits (history linkage; there can be multiple parents in a merge)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Author information (name, email, creation time)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Committer information (the person who recorded the commit; may differ from the author)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Commit message (description of changes)." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "As a result, Git stores snapshots of the project state along with metadata, which makes it easy to restore and compare history."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "15. Jakie dane przechowuje obiekt commita w Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Obiekt commita zawiera:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Hash (SHA-1/SHA-256) - unikalny identyfikator."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Odwołanie do obiektu tree (struktura plików i katalogów w momencie commita)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Odwołania do commitów nadrzędnych (powiązania w historii; przy merge może być ich kilka)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Autor (imię, email, czas utworzenia)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Committer (osoba zapisująca commit; może różnić się od autora)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Commit message (opis zmian)." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Dzięki temu Git przechowuje migawki stanu projektu wraz z metadanymi, co ułatwia odtwarzanie i porównywanie historii."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 16,
-    "translations": {
-      "uk": {
-        "question": "16. Яка різниця між командами git push і git fetch?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git push", "code": true },
-                  {
-                    "text": " - відправляє локальні коміти у віддалений репозиторій (оновлює remote-гілку)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git fetch", "code": true },
-                  {
-                    "text": " - отримує нові дані з віддаленого репозиторію, але не зливає їх у локальну гілку (оновлює лише refs/remotes)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Тобто:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "push", "code": true },
-                  { "text": " - викласти свої зміни." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "fetch", "code": true },
-                  {
-                    "text": " - завантажити чужі зміни для перегляду або подальшого злиття."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "16. What is the difference between git push and git fetch?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git push", "code": true },
-                  {
-                    "text": " sends local commits to the remote repository (updates the remote branch)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git fetch", "code": true },
-                  {
-                    "text": " retrieves new data from the remote repository but does not merge it into the local branch (updates refs/remotes only)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "In short:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "push", "code": true },
-                  { "text": " = publish your changes." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "fetch", "code": true },
-                  {
-                    "text": " = download others’ changes for review or later merging."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "16. Jaka jest różnica między poleceniami git push i git fetch?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git push", "code": true },
-                  {
-                    "text": " wysyła lokalne commity do zdalnego repozytorium (aktualizuje gałąź zdalną)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git fetch", "code": true },
-                  {
-                    "text": " pobiera nowe dane ze zdalnego repozytorium, ale nie scala ich z lokalną gałęzią (aktualizuje tylko refs/remotes)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Czyli:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "push", "code": true },
-                  { "text": " = publikacja własnych zmian." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "fetch", "code": true },
-                  {
-                    "text": " = pobranie cudzych zmian do wglądu lub późniejszego scalenia."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 17,
-    "translations": {
-      "uk": {
-        "question": "17. Яке призначення команди git pull?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git pull", "code": true },
-                  { "text": " = " },
-                  { "text": "git fetch", "code": true },
-                  { "text": " + " },
-                  { "text": "git merge", "code": true },
-                  { "text": " (або " },
-                  { "text": "rebase", "code": true },
-                  { "text": ", якщо вказано відповідну опцію)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Команда завантажує останні зміни з віддаленого репозиторію та одразу інтегрує їх у поточну гілку."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовується для синхронізації локальної гілки з віддаленою (remote)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git pull origin main"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Команда отримає оновлення з origin/main і зіллє їх у вашу локальну гілку main."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Якщо потрібен лише перегляд змін без злиття, краще використовувати git fetch."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "17. What is the purpose of the git pull command?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git pull", "code": true },
-                  { "text": " = " },
-                  { "text": "git fetch", "code": true },
-                  { "text": " + " },
-                  { "text": "git merge", "code": true },
-                  { "text": " (or " },
-                  { "text": "rebase", "code": true },
-                  { "text": " if the option is specified)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "It downloads the latest changes from the remote repository and immediately integrates them into the current branch."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Used to synchronize the local branch with the remote one."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git pull origin main"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This command fetches updates from origin/main and merges them into your local main branch."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "If you only want to review changes without merging, it is better to use git fetch."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "17. Jakie jest przeznaczenie polecenia git pull?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git pull", "code": true },
-                  { "text": " = " },
-                  { "text": "git fetch", "code": true },
-                  { "text": " + " },
-                  { "text": "git merge", "code": true },
-                  { "text": " (lub " },
-                  { "text": "rebase", "code": true },
-                  { "text": ", jeśli użyto odpowiedniej opcji)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Polecenie pobiera najnowsze zmiany ze zdalnego repozytorium i od razu scala je z bieżącą gałęzią."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Służy do synchronizacji lokalnej gałęzi ze zdalną (remote)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git pull origin main"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Polecenie pobierze aktualizacje z origin/main i scali je z lokalną gałęzią main."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Jeśli chcesz jedynie przejrzeć zmiany bez scalania, lepiej użyć git fetch."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 18,
-    "translations": {
-      "uk": {
-        "question": "18. Яке призначення та варіанти використання команди git branch?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git branch", "code": true },
-              {
-                "text": " керує гілками в репозиторії. Основні сценарії:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перегляд усіх гілок:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Створення нової гілки:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch feature/login"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Видалення гілки (локально):" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch -d feature/login   # безпечне (якщо змерджено)\ngit branch -D feature/login   # примусове"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перейменування гілки:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch -m old-name new-name"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перегляд віддалених гілок:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch -r"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Важливо:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git branch", "code": true },
-              {
-                "text": " не перемикає гілки, а лише створює та керує ними. Для перемикання використовується "
-              },
-              { "text": "git checkout", "code": true },
-              { "text": " або " },
-              { "text": "git switch", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "18. What is the purpose and usage of the git branch command?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git branch", "code": true },
-              {
-                "text": " is used to manage branches in a repository. Common use cases:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "List all branches:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Create a new branch:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch feature/login"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Delete a branch (locally):" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch -d feature/login   # safe (if merged)\ngit branch -D feature/login   # force delete"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rename a branch:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch -m old-name new-name"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "View remote branches:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch -r"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Important:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git branch", "code": true },
-              {
-                "text": " does not switch branches - it only creates and manages them. To switch branches, use "
-              },
-              { "text": "git checkout", "code": true },
-              { "text": " or " },
-              { "text": "git switch", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "18. Jakie jest przeznaczenie i sposoby użycia polecenia git branch?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git branch", "code": true },
-              {
-                "text": " służy do zarządzania gałęziami w repozytorium. Główne scenariusze:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wyświetlenie wszystkich gałęzi:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Utworzenie nowej gałęzi:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch feature/login"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Usunięcie gałęzi (lokalnie):" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch -d feature/login   # bezpieczne (jeśli scalona)\ngit branch -D feature/login   # wymuszone"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zmiana nazwy gałęzi:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch -m old-name new-name"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wyświetlenie gałęzi zdalnych:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git branch -r"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ważne:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git branch", "code": true },
-              {
-                "text": " nie przełącza gałęzi - jedynie je tworzy i nimi zarządza. Do przełączania używa się "
-              },
-              { "text": "git checkout", "code": true },
-              { "text": " lub " },
-              { "text": "git switch", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 19,
-    "translations": {
-      "uk": {
-        "question": "19. Як використовувати git checkout для перемикання між гілками?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Команда " },
-              { "text": "git checkout <branch>", "code": true },
-              {
-                "text": " змінює поточну гілку на вказану, оновлюючи робочий каталог до стану цієї гілки."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout feature/login"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "HEAD тепер вказує на feature/login, і всі файли відображають її стан."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Створення нової гілки та одночасне перемикання:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout -b feature/signup"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Це дозволяє швидко почати роботу в новій гілці без втрати змін (якщо вони закомічені або в staging area)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У сучасних workflow рекомендують використовувати "
-              },
-              { "text": "git switch", "code": true },
-              { "text": " для перемикання гілок (" },
-              { "text": "git switch feature/login", "code": true },
-              { "text": "), оскільки це більш інтуїтивно." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "19. How do you use git checkout to switch between branches?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The " },
-              { "text": "git checkout <branch>", "code": true },
-              {
-                "text": " command switches the current branch to the specified one, updating the working directory to match that branch."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout feature/login"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "HEAD now points to feature/login, and all files reflect the state of that branch."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Create a new branch and switch to it:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout -b feature/signup"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "This allows you to quickly start working on a new branch without losing changes (if they are committed or staged)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "In modern workflows, it is recommended to use " },
-              { "text": "git switch", "code": true },
-              { "text": " for switching branches (" },
-              { "text": "git switch feature/login", "code": true },
-              { "text": "), as it is more intuitive." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "19. Jak używać git checkout do przełączania się między gałęziami?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Polecenie " },
-              { "text": "git checkout <branch>", "code": true },
-              {
-                "text": " przełącza bieżącą gałąź na wskazaną, aktualizując katalog roboczy do jej stanu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout feature/login"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "HEAD wskazuje teraz na feature/login, a wszystkie pliki odzwierciedlają stan tej gałęzi."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Utworzenie nowej gałęzi i jednoczesne przełączenie:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout -b feature/signup"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Umożliwia to szybkie rozpoczęcie pracy w nowej gałęzi bez utraty zmian (jeśli są zapisane lub w stagingu)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "W nowoczesnych workflow zaleca się używanie " },
-              { "text": "git switch", "code": true },
-              { "text": " do przełączania gałęzi (" },
-              { "text": "git switch feature/login", "code": true },
-              { "text": "), ponieważ jest to bardziej intuicyjne." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 20,
-    "translations": {
-      "uk": {
-        "question": "20. Для чого використовується команда git merge?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git merge <branch>", "code": true },
-                  { "text": " об’єднує зміни з іншої гілки у поточну." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Застосовується для інтеграції роботи над фічами або виправленнями в основну гілку (main/develop)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Типи злиття:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Fast-forward", "code": true },
-                  {
-                    "text": " - просто переміщує вказівник гілки, якщо історія лінійна."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Three-way merge", "code": true },
-                  {
-                    "text": " - створює новий коміт злиття, якщо гілки розійшлися."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout main\n\ngit merge feature/login"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Після цього всі зміни з feature/login будуть інтегровані в main."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Merge дозволяє безпечно інтегрувати паралельні гілки без втрати історії змін."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "20. What is the git merge command used for?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git merge <branch>", "code": true },
-                  {
-                    "text": " merges changes from another branch into the current one."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "It is used to integrate feature or bugfix work into the main branch (main/develop)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Merge types:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Fast-forward", "code": true },
-                  {
-                    "text": " - simply moves the branch pointer forward if the history is linear."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Three-way merge", "code": true },
-                  {
-                    "text": " - creates a new merge commit when branches have diverged."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout main\n\ngit merge feature/login"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "After this, all changes from feature/login will be integrated into main."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Merge allows safe integration of parallel branches without losing history."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "20. Do czego służy polecenie git merge?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git merge <branch>", "code": true },
-                  { "text": " scala zmiany z innej gałęzi z bieżącą." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Służy do integracji pracy nad funkcjami lub poprawkami z główną gałęzią (main/develop)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Typy scalania:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Fast-forward", "code": true },
-                  {
-                    "text": " - przesuwa wskaźnik gałęzi, jeśli historia jest liniowa."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Three-way merge", "code": true },
-                  {
-                    "text": " - tworzy nowy commit scalający, gdy gałęzie się rozeszły."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout main\n\ngit merge feature/login"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Po tym wszystkie zmiany z feature/login zostaną scalone z main."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Merge umożliwia bezpieczną integrację równoległych gałęzi bez utraty historii."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 21,
-    "translations": {
-      "uk": {
-        "question": "21. Який Git workflow ви зазвичай використовуєте в роботі?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Найчастіше використовую Git Flow / Feature Branch Workflow:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "main", "code": true },
-                  { "text": " - завжди стабільна продакшн-версія." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "develop", "code": true },
-                  { "text": " - інтеграційна гілка для нових фіч." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Для кожної задачі створюється окрема " },
-                  { "text": "feature", "code": true },
-                  { "text": "-гілка." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Після завершення - " },
-                  { "text": "pull request", "code": true },
-                  { "text": " → " },
-                  { "text": "code review", "code": true },
-                  { "text": " → " },
-                  { "text": "merge у develop", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перед релізом створюється " },
-                  { "text": "release", "code": true },
-                  { "text": "-гілка, після тестування - " },
-                  { "text": "merge у main", "code": true },
-                  { "text": " та створення тега." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Термінові виправлення виконуються у " },
-                  { "text": "hotfix", "code": true },
-                  { "text": "-гілках від main." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Такий workflow забезпечує дисципліну, прозорість процесу та повний контроль над релізами."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "21. Which Git workflow do you usually use in your work?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "I usually use Git Flow / Feature Branch Workflow:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "main", "code": true },
-                  {
-                    "text": " - always contains the stable production version."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "develop", "code": true },
-                  { "text": " - an integration branch for new features." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Each task is developed in a separate " },
-                  { "text": "feature", "code": true },
-                  { "text": " branch." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "After completion - " },
-                  { "text": "pull request", "code": true },
-                  { "text": " → " },
-                  { "text": "code review", "code": true },
-                  { "text": " → " },
-                  { "text": "merge into develop", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Before a release, a " },
-                  { "text": "release", "code": true },
-                  { "text": " branch is created; after testing - " },
-                  { "text": "merge into main", "code": true },
-                  { "text": " and tagging." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Critical fixes are handled in " },
-                  { "text": "hotfix", "code": true },
-                  { "text": " branches from main." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This workflow provides structure, transparency, and strong control over releases."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "21. Jaki workflow Git najczęściej stosujesz w pracy?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Najczęściej korzystam z Git Flow / Feature Branch Workflow:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "main", "code": true },
-                  {
-                    "text": " - zawsze zawiera stabilną wersję produkcyjną."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "develop", "code": true },
-                  { "text": " - gałąź integracyjna dla nowych funkcji." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Każde zadanie realizowane jest w osobnej gałęzi "
-                  },
-                  { "text": "feature", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Po zakończeniu - " },
-                  { "text": "pull request", "code": true },
-                  { "text": " → " },
-                  { "text": "code review", "code": true },
-                  { "text": " → " },
-                  { "text": "merge do develop", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przed wydaniem tworzona jest gałąź " },
-                  { "text": "release", "code": true },
-                  { "text": ", po testach - " },
-                  { "text": "merge do main", "code": true },
-                  { "text": " oraz tag." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pilne poprawki realizowane są w gałęziach " },
-                  { "text": "hotfix", "code": true },
-                  { "text": " od main." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Taki workflow zapewnia dyscyplinę, przejrzystość procesu oraz pełną kontrolę nad wydaniami."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 22,
-    "translations": {
-      "uk": {
-        "question": "22. Опишіть кроки створення нової гілки та її злиття в main.",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Переконуюсь, що локальна гілка main оновлена:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout main\n\ngit pull origin main"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Створюю нову гілку від main:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout -b feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Працюю над задачею та комічу зміни:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add .\n\ngit commit -m \"Implement feature X\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Пушу гілку на віддалений репозиторій:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відкриваю Pull Request → проходить code review → перевіряється CI."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Мерджу гілку в main (зазвичай через squash або rebase для чистої історії)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Видаляю feature-гілку локально та на remote."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "22. Describe the steps to create a new branch and merge it into main.",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Make sure the local main branch is up to date:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout main\n\ngit pull origin main"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Create a new branch from main:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout -b feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Work on the task and commit changes:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add .\n\ngit commit -m \"Implement feature X\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Push the branch to the remote repository:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Open a Pull Request → go through code review → run CI checks."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Merge the branch into main (usually using squash or rebase to keep history clean)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Delete the feature branch locally and on the remote."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "22. Opisz kroki tworzenia nowej gałęzi i jej scalenia z main.",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Upewniam się, że lokalna gałąź main jest aktualna:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout main\n\ngit pull origin main"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tworzę nową gałąź na podstawie main:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout -b feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pracuję nad zadaniem i wykonuję commity:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add .\n\ngit commit -m \"Implement feature X\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wysyłam gałąź do repozytorium zdalnego:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Otwieram Pull Request → przeprowadzany jest code review → uruchamiane są testy CI."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Scalam gałąź z main (zwykle przez squash lub rebase, aby zachować czystą historię)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Usuwam gałąź feature lokalnie oraz na remote."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 23,
-    "translations": {
-      "uk": {
-        "question": "23. Що таке merge conflict у Git і як його вирішують?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Merge conflict виникає, коли дві гілки змінюють один і той самий рядок коду або файл у несумісний спосіб, і Git не може автоматично об’єднати ці зміни."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Рішення:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Виконати merge або rebase - Git повідомить про конфліктні файли."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відкрити конфліктний файл і знайти маркери " },
-                  { "text": "<<<<<<<", "code": true },
-                  { "text": ", " },
-                  { "text": "=======", "code": true },
-                  { "text": ", " },
-                  { "text": ">>>>>>>", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вручну вибрати або об’єднати потрібні зміни." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Позначити файл як вирішений:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Завершити merge або rebase комітом:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "23. What is a merge conflict in Git and how is it resolved?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A merge conflict occurs when two branches modify the same line of code or file in incompatible ways, and Git cannot automatically merge the changes."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Resolution steps:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Run merge or rebase - Git will report the conflicting files."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Open the conflicted file and locate the markers "
-                  },
-                  { "text": "<<<<<<<", "code": true },
-                  { "text": ", " },
-                  { "text": "=======", "code": true },
-                  { "text": ", " },
-                  { "text": ">>>>>>>", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Manually choose or combine the correct changes."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mark the file as resolved:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Finish the merge or rebase with a commit:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "23. Czym jest konflikt scalania (merge conflict) w Git i jak się go rozwiązuje?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Merge conflict występuje, gdy dwie gałęzie modyfikują ten sam fragment kodu lub plik w niekompatybilny sposób, a Git nie jest w stanie automatycznie scalić zmian."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Rozwiązanie:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wykonać merge lub rebase - Git wskaże pliki z konfliktami."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Otworzyć plik i znaleźć znaczniki " },
-                  { "text": "<<<<<<<", "code": true },
-                  { "text": ", " },
-                  { "text": "=======", "code": true },
-                  { "text": ", " },
-                  { "text": ">>>>>>>", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ręcznie wybrać lub połączyć właściwe zmiany." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Oznaczyć plik jako rozwiązany:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zakończyć scalanie lub rebase commitem:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 24,
-    "translations": {
-      "uk": {
-        "question": "24. Що таке fast-forward merge у Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Fast-forward merge - це злиття, коли гілка-ціль (наприклад main) не має нових комітів після відгалуження feature-гілки. У такому випадку Git просто пересуває вказівник main на останній коміт feature-гілки без створення merge-коміту."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout main\n\ngit merge feature/my-task --ff"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Це «чисте» злиття без створення додаткових комітів в історії."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "24. What is a fast-forward merge in Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A fast-forward merge occurs when the target branch (for example, main) has no new commits since the feature branch was created. In this case, Git simply moves the main pointer forward to the latest commit of the feature branch without creating a merge commit."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout main\n\ngit merge feature/my-task --ff"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This results in a clean history without additional merge commits."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "24. Czym jest fast-forward merge w Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Fast-forward merge to scalanie, w którym gałąź docelowa (np. main) nie ma nowych commitów od momentu utworzenia gałęzi feature. Git przesuwa wtedy wskaźnik main do ostatniego commita gałęzi feature bez tworzenia commita scalającego."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout main\n\ngit merge feature/my-task --ff"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Jest to „czyste” scalanie bez dodatkowych commitów w historii."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 25,
-    "translations": {
-      "uk": {
-        "question": "25. Що таке three-way merge у Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Three-way merge - це тип злиття, під час якого Git використовує три точки для об’єднання змін:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "common ancestor", "code": true },
-                  {
-                    "text": " - спільний базовий коміт, від якого розійшлися гілки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HEAD", "code": true },
-                  {
-                    "text": " - останній коміт у цільовій гілці (наприклад, main)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "branch tip", "code": true },
-                  {
-                    "text": " - останній коміт у гілці, яка зливається (наприклад, feature)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git порівнює зміни відносно спільного предка та створює новий merge-коміт, який має двох батьківських коміти."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Такий тип злиття використовується, коли fast-forward merge неможливий, тобто в обох гілках з’явилися нові коміти."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "25. What is a three-way merge in Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A three-way merge is a merge strategy where Git uses three reference points to combine changes:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "common ancestor", "code": true },
-                  {
-                    "text": " - the base commit from which the branches diverged."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HEAD", "code": true },
-                  {
-                    "text": " - the latest commit in the target branch (for example, main)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "branch tip", "code": true },
-                  {
-                    "text": " - the latest commit in the branch being merged (for example, feature)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git compares changes relative to the common ancestor and creates a new merge commit that has two parent commits."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This approach is used when a fast-forward merge is not possible, meaning both branches contain new commits."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "25. Czym jest three-way merge w Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Three-way merge to strategia scalania, w której Git wykorzystuje trzy punkty odniesienia do połączenia zmian:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "common ancestor", "code": true },
-                  {
-                    "text": " - wspólny commit bazowy, od którego rozeszły się gałęzie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HEAD", "code": true },
-                  {
-                    "text": " - ostatni commit w gałęzi docelowej (np. main)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "branch tip", "code": true },
-                  {
-                    "text": " - ostatni commit w scalanej gałęzi (np. feature)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git porównuje zmiany względem wspólnego przodka i tworzy nowy commit scalający z dwoma commitami nadrzędnymi."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ten typ scalania jest stosowany, gdy fast-forward merge nie jest możliwy, czyli gdy obie gałęzie zawierają nowe commity."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 26,
-    "translations": {
-      "uk": {
-        "question": "26. Які кроки виконати, щоб перебазувати (rebase) гілку в Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перейти у свою гілку:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Виконати rebase на актуальну main:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git fetch origin\n\ngit rebase origin/main"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Якщо виникають конфлікти - вирішити їх і додати файли:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>\n\ngit rebase --continue"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Після завершення оновити remote (з форсом, оскільки історія була переписана):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature/my-task --force"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Rebase робить історію комітів лінійною, на відміну від merge."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "26. What steps are required to rebase a branch in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Switch to your feature branch:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rebase it onto the latest main branch:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git fetch origin\n\ngit rebase origin/main"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "If conflicts occur, resolve them and stage the files:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>\n\ngit rebase --continue"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "After completion, update the remote branch (force push is required because history was rewritten):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature/my-task --force"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Rebase creates a linear commit history, unlike merge."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "26. Jakie kroki należy wykonać, aby wykonać rebase gałęzi w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przełączyć się na swoją gałąź:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wykonać rebase na aktualną gałąź main:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git fetch origin\n\ngit rebase origin/main"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jeśli pojawią się konflikty - rozwiązać je i dodać pliki:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>\n\ngit rebase --continue"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Po zakończeniu zaktualizować gałąź zdalną (wymagany force push, ponieważ historia została zmieniona):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature/my-task --force"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Rebase tworzy liniową historię commitów, w przeciwieństwie do merge."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 27,
-    "translations": {
-      "uk": {
-        "question": "27. Які плюси й мінуси rebase у порівнянні з merge?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги rebase" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Лінійна, чиста історія без merge-комітів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Зручніше читати git log, легше дебажити." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Кожен коміт виглядає так, ніби зроблений поверх останнього main."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Недоліки rebase" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Переписує історію (особливо небезпечно для спільних гілок)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Потребує force push, що може створити проблеми іншим розробникам."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вимагає більшої дисципліни в команді." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги merge" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зберігає повну історію розробки без переписування."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Безпечний для командної роботи." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Простий і зрозумілий у використанні." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Недоліки merge" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Менш чистий git log з великою кількістю merge-комітів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Історію складніше аналізувати та відстежувати."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Загалом:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Merge безпечніший для командної роботи, тоді як rebase краще підходить для підтримки чистої історії."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "27. What are the pros and cons of rebase compared to merge?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Advantages of rebase" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Clean, linear history without merge commits." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Easier to read git log and debug changes." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Each commit appears as if it was created on top of the latest main branch."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Disadvantages of rebase" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Rewrites history (dangerous for shared branches)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Requires force push, which may disrupt others."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Requires more discipline within the team." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Advantages of merge" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Preserves the complete development history." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Safe for collaborative team workflows." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Simple and straightforward to use." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Disadvantages of merge" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Messier git log with many merge commits." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "History can be harder to analyze." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Overall:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Merge is safer for teams, while rebase is better for maintaining a clean history."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "27. Jakie są zalety i wady rebase w porównaniu do merge?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety rebase" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Czysta, liniowa historia bez commitów scalających."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Łatwiejsze czytanie git log i debugowanie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Każdy commit wygląda, jakby został wykonany na aktualnej gałęzi main."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wady rebase" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przepisuje historię (niebezpieczne dla współdzielonych gałęzi)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wymaga force push, co może powodować problemy innym."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wymaga większej dyscypliny zespołowej." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety merge" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zachowuje pełną historię rozwoju projektu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Bezpieczne dla pracy zespołowej." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Proste i intuicyjne w użyciu." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wady merge" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mniej czytelna historia z wieloma commitami scalającymi."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Trudniejsza analiza historii zmian." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Podsumowanie:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Merge jest bezpieczniejszy dla zespołów, natomiast rebase lepiej sprawdza się przy utrzymaniu czystej historii."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 28,
-    "translations": {
-      "uk": {
-        "question": "28. Для чого використовуються теги в Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Теги в Git - це фіксовані маркери, що вказують на конкретні коміти, зазвичай для позначення релізів (v1.0, v2.1)."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lightweight tag", "code": true },
-                  {
-                    "text": " - проста вказівка на коміт без додаткових метаданих."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Annotated tag", "code": true },
-                  {
-                    "text": " - містить автора, дату, повідомлення та може бути підписаний GPG."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Теги зручні для:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Відстеження версій у продакшені." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Швидкого переходу до конкретного релізу:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout v1.0"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Також теги часто використовуються в CI/CD для автоматичного деплою."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "28. What are Git tags used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git tags are fixed references to specific commits, commonly used to mark releases (v1.0, v2.1)."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lightweight tag", "code": true },
-                  {
-                    "text": " - a simple pointer to a commit without additional metadata."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Annotated tag", "code": true },
-                  {
-                    "text": " - stores author, date, message and can be GPG-signed."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Tags are useful for:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Tracking production versions." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Quickly checking out a specific release:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout v1.0"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Tags are also widely used in CI/CD pipelines for automated deployments."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "28. Do czego służą tagi w Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Tagi w Git to stałe wskaźniki na konkretne commity, najczęściej używane do oznaczania wydań (v1.0, v2.1)."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lightweight tag", "code": true },
-                  {
-                    "text": " - proste wskazanie na commit bez dodatkowych informacji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Annotated tag", "code": true },
-                  {
-                    "text": " - zawiera autora, datę, opis i może być podpisany GPG."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Tagi są przydatne do:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Śledzenia wersji na produkcji." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Szybkiego przejścia do konkretnego wydania:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout v1.0"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Tagi są również często wykorzystywane w CI/CD do automatycznych wdrożeń."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 29,
-    "translations": {
-      "uk": {
-        "question": "29. Як скасувати коміт, який вже запушено на remote?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Якщо потрібно повністю видалити коміт (історія переписується, небезпечно для інших):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git reset --hard <commit_before>\n\ngit push origin <branch> --force"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Якщо потрібно зберегти історію, створивши «відкат» без переписування:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git revert <commit_hash>\n\ngit push origin <branch>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "reset --hard", "code": true },
-                  { "text": " + " },
-                  { "text": "force push", "code": true },
-                  {
-                    "text": " - змінює історію комітів (небезпечно для спільних гілок)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "revert", "code": true },
-                  {
-                    "text": " - створює новий коміт, який відміняє зміни, без переписування історії (безпечніше для команди)."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "29. How can you undo a commit that has already been pushed to a remote repository?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "If you need to completely remove the commit (history is rewritten, dangerous for others):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git reset --hard <commit_before>\n\ngit push origin <branch> --force"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "If you want to keep the history and safely undo the changes:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git revert <commit_hash>\n\ngit push origin <branch>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "reset --hard", "code": true },
-                  { "text": " + " },
-                  { "text": "force push", "code": true },
-                  {
-                    "text": " rewrites commit history (unsafe for shared branches)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "revert", "code": true },
-                  {
-                    "text": " creates a new commit that undoes the changes without rewriting history (safer for teams)."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "29. Jak cofnąć commit, który został już wypchnięty (push) do repozytorium zdalnego?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jeśli trzeba całkowicie usunąć commit (historia zostaje przepisana, niebezpieczne dla innych):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git reset --hard <commit_before>\n\ngit push origin <branch> --force"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jeśli chcesz zachować historię i bezpiecznie cofnąć zmiany:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git revert <commit_hash>\n\ngit push origin <branch>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "reset --hard", "code": true },
-                  { "text": " + " },
-                  { "text": "force push", "code": true },
-                  {
-                    "text": " przepisuje historię commitów (niebezpieczne dla wspólnych gałęzi)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "revert", "code": true },
-                  {
-                    "text": " tworzy nowy commit cofający zmiany bez przepisywania historii (bezpieczniejsze dla zespołów)."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 30,
-    "translations": {
-      "uk": {
-        "question": "30. Яке призначення головної гілки (main/master) у Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Головна гілка (main або раніше master) - це стабільна, завжди робоча версія проєкту, на яку орієнтуються всі інші гілки."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Від неї створюють feature-, release- та hotfix-гілки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вона слугує базою для формування релізів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зазвичай саме з неї запускається CI/CD та деплой у продакшн."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "30. What is the purpose of the main (master) branch in Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The main branch (formerly master) represents the stable, production-ready version of the project that all other branches are based on."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Feature, release, and hotfix branches are created from it."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "It serves as the foundation for releases." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "CI/CD pipelines and production deployments usually run from this branch."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "30. Jakie jest przeznaczenie głównej gałęzi (main/master) w Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Główna gałąź (main lub dawniej master) to stabilna, zawsze działająca wersja projektu, na której opierają się pozostałe gałęzie."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Na jej podstawie tworzy się gałęzie feature, release i hotfix."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Służy jako baza do przygotowywania wydań." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zazwyczaj z tej gałęzi uruchamiane są procesy CI/CD oraz wdrożenia na produkcję."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 31,
-    "translations": {
-      "uk": {
-        "question": "31. Що таке розподілена система контролю версій і як Git реалізує цей підхід?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Розподілена система контролю версій (DVCS) - це система, у якій кожен розробник має повну копію репозиторію разом з усією історією комітів, а не лише робочі файли."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Git реалізує підхід DVCS таким чином:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Під час клонування репозиторію розробник отримує всю історію змін локально."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Коміти, гілки та теги створюються локально й не потребують постійного підключення до сервера."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Синхронізація між розробниками відбувається через push і pull у віддалений репозиторій (наприклад, GitHub)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Такий підхід забезпечує високу швидкість, автономність і можливість працювати офлайн."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "31. What is a distributed version control system and how does Git implement this approach?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A distributed version control system (DVCS) is a system in which every developer has a full copy of the repository, including the complete commit history, not just the working files."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Git implements the DVCS approach as follows:" }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "When cloning a repository, the entire history is downloaded locally."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Commits, branches, and tags are created locally and do not require a constant server connection."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Synchronization between developers happens via push and pull operations to a remote repository (for example, GitHub)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "This provides high performance, autonomy, and the ability to work offline."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "31. Czym jest rozproszony system kontroli wersji i jak Git realizuje to podejście?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Rozproszony system kontroli wersji (DVCS) to system, w którym każdy programista posiada pełną kopię repozytorium wraz z całą historią commitów, a nie tylko pliki robocze."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Git realizuje podejście DVCS w następujący sposób:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Podczas klonowania repozytorium pobierana jest cała historia zmian lokalnie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Commity, gałęzie i tagi są tworzone lokalnie i nie wymagają stałego połączenia z serwerem."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Synchronizacja między programistami odbywa się poprzez operacje push i pull do zdalnego repozytorium (np. GitHub)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Takie podejście zapewnia szybkość, autonomię oraz możliwość pracy offline."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 32,
-    "translations": {
-      "uk": {
-        "question": "32. Що таке Git Feature Branch Workflow і як він працює?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Feature Branch Workflow", "bold": true },
-              {
-                "text": " - це підхід до розробки, за якого для кожної нової задачі або фічі створюється окрема гілка."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Від main або develop відгалужується гілка " },
-                  { "text": "feature/", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Розробка та всі коміти виконуються лише в цій гілці."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Після завершення роботи відкривається Pull Request."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Після code review та проходження CI зміни зливаються назад у develop або main."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Feature-гілка видаляється." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ізоляція змін, можливість паралельної роботи без конфліктів та чиста, контрольована історія."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "32. What is the Git Feature Branch Workflow and how does it work?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Feature Branch Workflow", "bold": true },
-              {
-                "text": " is a development approach where a separate branch is created for each new task or feature."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "A " },
-                  { "text": "feature/", "code": true },
-                  { "text": " branch is created from main or develop." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "All development and commits happen only in this branch."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Once the feature is complete, a Pull Request is opened."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "After code review and successful CI checks, changes are merged back into develop or main."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "The feature branch is deleted." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Advantages:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Isolation of changes, parallel development without conflicts, and a clean, controlled history."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "32. Czym jest Git Feature Branch Workflow i jak działa?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Feature Branch Workflow", "bold": true },
-              {
-                "text": " to podejście, w którym dla każdego nowego zadania lub funkcji tworzona jest osobna gałąź."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Od gałęzi main lub develop tworzona jest gałąź "
-                  },
-                  { "text": "feature/", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Cała praca i commity odbywają się wyłącznie w tej gałęzi."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Po zakończeniu pracy otwierany jest Pull Request."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Po code review i przejściu CI zmiany są scalane z powrotem do develop lub main."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Gałąź feature jest usuwana." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Izolacja zmian, równoległa praca bez konfliktów oraz czysta i kontrolowana historia."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 33,
-    "translations": {
-      "uk": {
-        "question": "33. Що таке Gitflow Workflow і як він працює?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Gitflow", "bold": true },
-              {
-                "text": " - це модель роботи з Git із чіткими правилами для різних типів гілок."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "main", "code": true },
-                  { "text": " - завжди стабільна продакшн-версія." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "develop", "code": true },
-                  { "text": " - інтеграційна гілка для активної розробки." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "feature/", "code": true },
-                  {
-                    "text": " - створюються від develop і після завершення зливаються назад у develop."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "release/", "code": true },
-                  {
-                    "text": " - відгалужуються від develop для підготовки релізу, після тестування зливаються в main і develop."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "hotfix/", "code": true },
-                  {
-                    "text": " - створюються від main для термінових виправлень і потім зливаються як у main, так і в develop."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Плюси:", "bold": true },
-              {
-                "text": " чітка структура, контрольована розробка та керовані релізи."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Мінуси:", "bold": true },
-              {
-                "text": " громіздкий процес для маленьких команд або підходів з continuous delivery."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "33. What is the Gitflow Workflow and how does it work?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Gitflow", "bold": true },
-              {
-                "text": " is a Git workflow model with clearly defined rules for different branch types."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "main", "code": true },
-                  {
-                    "text": " - always represents the stable production version."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "develop", "code": true },
-                  {
-                    "text": " - the integration branch for active development."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "feature/", "code": true },
-                  {
-                    "text": " - created from develop and merged back into develop after completion."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "release/", "code": true },
-                  {
-                    "text": " - branched from develop to prepare a release, then merged into both main and develop."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "hotfix/", "code": true },
-                  {
-                    "text": " - branched from main for urgent fixes and merged back into both main and develop."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pros:", "bold": true },
-              {
-                "text": " clear structure, controlled development, and predictable releases."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Cons:", "bold": true },
-              {
-                "text": " can be overly complex for small teams or continuous delivery workflows."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "33. Czym jest Gitflow Workflow i jak działa?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Gitflow", "bold": true },
-              {
-                "text": " to model pracy z Git z jasno określonymi zasadami dla różnych typów gałęzi."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "main", "code": true },
-                  {
-                    "text": " - zawsze reprezentuje stabilną wersję produkcyjną."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "develop", "code": true },
-                  { "text": " - gałąź integracyjna dla aktywnego rozwoju." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "feature/", "code": true },
-                  {
-                    "text": " - tworzone z develop i po zakończeniu scalane z powrotem do develop."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "release/", "code": true },
-                  {
-                    "text": " - odgałęziane z develop w celu przygotowania wydania, następnie scalane do main i develop."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "hotfix/", "code": true },
-                  {
-                    "text": " - tworzone z main dla pilnych poprawek i scalane do main oraz develop."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Zalety:", "bold": true },
-              {
-                "text": " jasno określona struktura, kontrolowany rozwój i przewidywalne wydania."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Wady:", "bold": true },
-              {
-                "text": " zbyt rozbudowany proces dla małych zespołów lub podejścia continuous delivery."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 34,
-    "translations": {
-      "uk": {
-        "question": "34. Що таке Forking Workflow у Git і як він працює?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Forking Workflow", "bold": true },
-              {
-                "text": " - це підхід, за якого кожен розробник працює не напряму з основним репозиторієм, а зі своєю власною копією (fork)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Процес:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Розробник створює fork головного репозиторію у своєму GitHub або GitLab."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Клонує свій fork локально та створює окрему гілку для змін."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Після завершення роботи пушить зміни у власний fork."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відкриває Pull Request зі свого fork у головний (upstream) репозиторій."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Після code review та схвалення зміни зливаються в upstream."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Цей workflow зазвичай використовується у великих open-source проєктах, де стороннім контриб’юторам не надається прямий доступ до основного репозиторію."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "34. What is the Forking Workflow in Git and how does it work?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Forking Workflow", "bold": true },
-              {
-                "text": " is an approach where each developer works with their own copy (fork) of the repository instead of pushing directly to the main repository."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Process:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The developer creates a fork of the main repository on GitHub or GitLab."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "They clone their fork locally and create a separate branch for changes."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "After completing the work, they push changes to their fork."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "They open a Pull Request from their fork to the main (upstream) repository."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "After review and approval, the changes are merged into the upstream repository."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This workflow is commonly used in large open-source projects where external contributors do not have direct write access to the main repository."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "34. Czym jest Forking Workflow w Git i jak działa?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Forking Workflow", "bold": true },
-              {
-                "text": " to podejście, w którym każdy programista pracuje na własnej kopii repozytorium (fork), zamiast bezpośrednio na repozytorium głównym."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Proces:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Programista tworzy fork głównego repozytorium na GitHubie lub GitLabie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Klonuje swój fork lokalnie i tworzy osobną gałąź na zmiany."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Po zakończeniu pracy wysyła zmiany (push) do własnego fork’a."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Otwiera Pull Request z własnego fork’a do głównego repozytorium (upstream)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Po review i akceptacji zmiany są scalane z repozytorium upstream."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ten workflow jest powszechnie stosowany w dużych projektach open-source, gdzie zewnętrzni kontrybutorzy nie mają bezpośredniego dostępu do głównego repozytorium."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 35,
-    "translations": {
-      "uk": {
-        "question": "35. Що таке Centralized Workflow у Git і як він працює?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Centralized Workflow", "bold": true },
-              {
-                "text": " - це модель роботи, у якій є одна головна гілка (зазвичай main), і всі розробники працюють безпосередньо з нею або створюють короткоживучі гілки для невеликих задач."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Процес:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Усі розробники клонують один спільний remote-репозиторій."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Роблять зміни локально та одразу пушать їх у гілку main."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "У разі конфліктів їх потрібно вирішити перед пушем."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Нагадує класичні централізовані системи (SVN), але з перевагами Git: локальна історія та робота офлайн."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Простий процес і мінімальна кількість гілок." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Погано масштабується для великих команд: часті конфлікти та відсутність ізоляції фіч."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "35. What is the Centralized Workflow in Git and how does it work?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Centralized Workflow", "bold": true },
-              {
-                "text": " is a model where there is a single main branch (usually main), and all developers work directly on it or create very short-lived branches for small tasks."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Process:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "All developers clone the same shared remote repository."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "They make changes locally and push them directly to the main branch."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Any conflicts must be resolved before pushing."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Similar to traditional centralized systems (SVN), but with Git advantages such as local history and offline work."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Simple process with minimal branching." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Hard to scale for larger teams due to frequent conflicts and lack of feature isolation."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "35. Czym jest Centralized Workflow w Git i jak działa?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Centralized Workflow", "bold": true },
-              {
-                "text": " to model pracy, w którym istnieje jedna główna gałąź (zwykle main), a wszyscy programiści pracują bezpośrednio na niej lub tworzą bardzo krótkotrwałe gałęzie dla małych zadań."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Proces:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wszyscy programiści klonują jedno wspólne repozytorium zdalne."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wprowadzają zmiany lokalnie i wysyłają je bezpośrednio do gałęzi main."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wszelkie konflikty muszą zostać rozwiązane przed wykonaniem push."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przypomina klasyczne systemy scentralizowane (SVN), ale z zaletami Git, takimi jak lokalna historia i praca offline."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Prosty proces i minimalna liczba gałęzi." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Słabo skaluje się w większych zespołach z powodu częstych konfliktów i braku izolacji funkcji."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 36,
-    "translations": {
-      "uk": {
-        "question": "36. Що таке remote repository у Git і для чого він потрібен?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Віддалений репозиторій (remote) - це версія Git-репозиторію, що зберігається на сервері (наприклад, GitHub, GitLab, Bitbucket)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Призначення:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Спільна робота команди через push і pull змін."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Централізоване зберігання коду та повної історії комітів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Інтеграція з CI/CD пайплайнами та інструментами перевірки коду."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклади команд:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git remote -v              # переглянути підключені remote\n\ngit remote add origin URL  # додати віддалений репозиторій\n\ngit push origin main       # відправити зміни\n\ngit pull origin main       # отримати зміни"
-          }
-        ]
-      },
-      "en": {
-        "question": "36. What is a remote repository in Git and what is it used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A remote repository is a version of a Git repository hosted on a server (for example, GitHub, GitLab, or Bitbucket)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Purpose:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Enables team collaboration via push and pull operations."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Provides centralized storage of code and full commit history."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Integrates with CI/CD pipelines and code review tools."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example commands:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git remote -v              # list configured remotes\n\ngit remote add origin URL  # add a remote repository\n\ngit push origin main       # push changes\n\ngit pull origin main       # fetch and merge changes"
-          }
-        ]
-      },
-      "pl": {
-        "question": "36. Czym jest zdalne repozytorium (remote repository) w Git i do czego służy?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zdalne repozytorium (remote) to wersja repozytorium Git przechowywana na serwerze (np. GitHub, GitLab, Bitbucket)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przeznaczenie:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Umożliwia współpracę zespołową poprzez operacje push i pull."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zapewnia centralne przechowywanie kodu i pełnej historii commitów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Integruje się z pipeline’ami CI/CD oraz narzędziami do code review."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykładowe polecenia:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git remote -v              # wyświetl skonfigurowane remote\n\ngit remote add origin URL  # dodaj zdalne repozytorium\n\ngit push origin main       # wyślij zmiany\n\ngit pull origin main       # pobierz i scal zmiany"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 37,
-    "translations": {
-      "uk": {
-        "question": "37. Як змінити URL remote-репозиторію в Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для оновлення URL використовують команду:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git remote set-url origin <новий_URL>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перевірити зміни можна так:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git remote -v"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Або замінити remote повністю:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git remote remove origin\ngit remote add origin <новий_URL>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Використовується, наприклад, при переході з HTTPS на SSH чи зміні репозиторію на GitHub/GitLab."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "37. How do you change the URL of a remote repository in Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "To update the URL, use:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git remote set-url origin <new_URL>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "You can check the changes with:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git remote -v"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Or replace the remote entirely:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git remote remove origin\ngit remote add origin <new_URL>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Useful, for example, when switching from HTTPS to SSH or changing the repository on GitHub/GitLab."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "37. Jak zmienić URL zdalnego repozytorium w Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Aby zaktualizować URL, użyj polecenia:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git remote set-url origin <new_URL>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zmiany możesz sprawdzić tak:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git remote -v"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Albo całkowicie podmień remote:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git remote remove origin\ngit remote add origin <new_URL>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Przydatne np. przy przejściu z HTTPS na SSH lub przy zmianie repozytorium na GitHub/GitLab."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 38,
-    "translations": {
-      "uk": {
-        "question": "38. Які команди використовуються, щоб синхронізувати локальний репозиторій з remote у Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Отримати останні зміни з remote:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git fetch origin"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Об’єднати з локальною гілкою:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git pull origin main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "(еквівалент fetch + merge)." }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відправити свої зміни на remote:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Коротко:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "pull → підтягнути зміни, push → відправити свої." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "38. Which commands are used to synchronize a local repository with a remote in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Fetch the latest changes from the remote repository:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git fetch origin"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Merge changes into the local branch:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git pull origin main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "(equivalent to fetch + merge)." }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Push your local changes to the remote repository:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "In short:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "pull → fetch and integrate changes, push → send your changes."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "38. Jakie polecenia służą do synchronizacji lokalnego repozytorium z repozytorium zdalnym w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pobranie najnowszych zmian z repozytorium zdalnego:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git fetch origin"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Scalenie zmian z lokalną gałęzią:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git pull origin main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "(odpowiednik fetch + merge)." }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wysłanie własnych zmian do repozytorium zdalnego:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "W skrócie:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "pull → pobrać i scalić zmiany, push → wysłać własne zmiany."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 39,
-    "translations": {
-      "uk": {
-        "question": "39. Як видалити невикористані (застарілі) гілки локально й на remote у Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Локально:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git branch -d branch_name      # видалити вже злиту гілку\n\ngit branch -D branch_name      # примусово видалити"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Віддалено:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git push origin --delete branch_name"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Очистити локальний список remote-гілок (які вже видалені на сервері):"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git fetch --prune"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Практика:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Після merge у main видаляють feature-гілки, щоб не захаращувати репозиторій."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "39. How can you delete unused (obsolete) branches locally and on a remote in Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Locally:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git branch -d branch_name      # delete a branch that has already been merged\n\ngit branch -D branch_name      # force delete"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Remotely:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git push origin --delete branch_name"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Clean up the local list of remote branches (already deleted on the server):"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git fetch --prune"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Best practice:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "After merging into main, feature branches should be deleted to keep the repository clean."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "39. Jak usunąć nieużywane (przestarzałe) gałęzie lokalnie i na zdalnym repozytorium w Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Lokalnie:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git branch -d branch_name      # usuń gałąź, która została już scalona\n\ngit branch -D branch_name      # wymuś usunięcie"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zdalnie:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git push origin --delete branch_name"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Wyczyścić lokalną listę gałęzi zdalnych (usuniętych już na serwerze):"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git fetch --prune"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Praktyka:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Po scaleniu z main usuwa się gałęzie feature, aby nie zaśmiecać repozytorium."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 40,
-    "translations": {
-      "uk": {
-        "question": "40. Які кроки потрібно виконати для вирішення merge conflict у Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Спробувати злиття або rebase:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git merge feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git повідомляє про конфлікти. Перевірити файли:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git status"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відкрити конфліктні файли, знайти маркери:" },
-                  {
-                    "type": "code",
-                    "language": "text",
-                    "content": "<<<<<<< HEAD\n...\n=======\n...\n>>>>>>> feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Вирішити конфлікт вручну (залишити або об’єднати потрібні зміни)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Позначити файли як вирішені:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Продовжити merge або rebase:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit            # якщо merge\n\ngit rebase --continue # якщо rebase"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перевірити, що все працює, і запушити зміни:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin main"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "40. What steps are required to resolve a merge conflict in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Attempt a merge or rebase:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git merge feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git reports conflicts. Check the affected files:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git status"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Open the conflicted files and locate conflict markers:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "text",
-                    "content": "<<<<<<< HEAD\n...\n=======\n...\n>>>>>>> feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Resolve the conflict manually by keeping or combining the correct changes."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mark the files as resolved:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Continue the merge or rebase:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit            # for merge\n\ngit rebase --continue # for rebase"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Verify everything works and push the changes:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin main"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "40. Jakie kroki należy wykonać, aby rozwiązać konflikt scalania (merge conflict) w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Spróbować wykonać merge lub rebase:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git merge feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git zgłasza konflikty. Sprawdzić pliki:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git status"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Otworzyć pliki konfliktowe i znaleźć znaczniki:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "text",
-                    "content": "<<<<<<< HEAD\n...\n=======\n...\n>>>>>>> feature/my-task"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Rozwiązać konflikt ręcznie, zachowując lub łącząc właściwe zmiany."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Oznaczyć pliki jako rozwiązane:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kontynuować merge lub rebase:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit            # dla merge\n\ngit rebase --continue # dla rebase"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sprawdzić działanie i wypchnąć zmiany:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin main"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 41,
-    "translations": {
-      "uk": {
-        "question": "41. Для чого призначена команда git stash?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git stash", "code": true },
-              {
-                "text": " дозволяє тимчасово сховати незавершені зміни (modified / staged файли) у локальному репозиторії, щоб переключитися на іншу гілку або виконати інші операції без створення коміту."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклади:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash           # сховати зміни\n\ngit stash pop       # повернути сховані зміни\n\ngit stash list      # переглянути список схованих змін"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Використовується, коли потрібно швидко переключитися на main для виправлення багу або підтягнути останні зміни."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "41. What is the purpose of the git stash command?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git stash", "code": true },
-              {
-                "text": " temporarily saves unfinished changes (modified / staged files) in the local repository, allowing you to switch branches or perform other operations without committing them."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Examples:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash           # save changes\n\ngit stash pop       # restore saved changes\n\ngit stash list      # list saved stashes"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "It is commonly used when you need to quickly switch to main to fix a bug or pull the latest changes."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "41. Do czego służy polecenie git stash?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git stash", "code": true },
-              {
-                "text": " pozwala tymczasowo ukryć niezakończone zmiany (pliki modified / staged) w lokalnym repozytorium, aby przełączyć się na inną gałąź lub wykonać inne operacje bez tworzenia commita."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykłady:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash           # ukryj zmiany\n\ngit stash pop       # przywróć zapisane zmiany\n\ngit stash list      # lista zapisanych zmian"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Używane, gdy trzeba szybko przełączyć się na main, aby naprawić błąd lub pobrać najnowsze zmiany."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 42,
-    "translations": {
-      "uk": {
-        "question": "42. Як переглянути зміни у файлах, які ще не закомічені, або історію комітів у Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Зміни в робочому каталозі (не staged):" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git diff"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Зміни, які вже додані до staging area:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git diff --staged"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Історія комітів:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Коротка та наочна історія:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --oneline --graph --decorate --all"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перегляд змін конкретного файлу:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git diff <file>\n\ngit log -p <file>"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "42. How can you view uncommitted file changes or the commit history in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Changes in the working directory (not staged):" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git diff"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Changes already added to the staging area:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git diff --staged"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Commit history:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Compact and visual history:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --oneline --graph --decorate --all"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "View changes of a specific file:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git diff <file>\n\ngit log -p <file>"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "42. Jak sprawdzić niezacommitowane zmiany w plikach lub historię commitów w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zmiany w katalogu roboczym (nie dodane do stage):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git diff"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zmiany dodane do staging area:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git diff --staged"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Historia commitów:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Krótka i czytelna historia:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --oneline --graph --decorate --all"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podgląd zmian w konkretnym pliku:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git diff <file>\n\ngit log -p <file>"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 43,
-    "translations": {
-      "uk": {
-        "question": "43. Чи можна застосувати зміни з Git stash, не видаляючи їх зі списку?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Так, для цього використовують команду:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash apply"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Застосовує вибрану сховану зміну до поточної робочої гілки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Не видаляє її зі списку stash." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Якщо потрібно одночасно застосувати зміни і видалити їх зі списку, використовують:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash pop"
-          }
-        ]
-      },
-      "en": {
-        "question": "43. Can you apply changes from Git stash without removing them from the list?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Yes, this can be done using the following command:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash apply"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Applies the selected stashed changes to the current working branch."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Does not remove the stash entry from the stash list."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "If you want to apply the changes and remove them from the list at the same time, use:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash pop"
-          }
-        ]
-      },
-      "pl": {
-        "question": "43. Czy można zastosować zmiany z Git stash bez usuwania ich z listy?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Tak, w tym celu używa się polecenia:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash apply"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Stosuje wybrane zapisane zmiany do bieżącej gałęzi roboczej."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Nie usuwa ich z listy stash." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Jeśli chcesz jednocześnie zastosować zmiany i usunąć je z listy, użyj:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash pop"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 44,
-    "translations": {
-      "uk": {
-        "question": "44. Що робить команда git clean?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git clean", "code": true },
-              {
-                "text": " видаляє незатрековані файли та каталоги з робочого каталогу, тобто ті, що не відслідковуються Git."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклади:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git clean -n       # показати, що буде видалено (dry-run)\n\ngit clean -f       # видалити незатрековані файли\n\ngit clean -fd      # видалити файли та каталоги\n\ngit clean -fx      # видалити файли, включаючи ті, що в .gitignore"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Використовується для очищення робочого каталогу перед збіркою або тестуванням, коли потрібен повністю чистий стан."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "44. What does the git clean command do?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git clean", "code": true },
-              {
-                "text": " removes untracked files and directories from the working directory, meaning files that are not tracked by Git."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Examples:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git clean -n       # show what would be removed (dry-run)\n\ngit clean -f       # remove untracked files\n\ngit clean -fd      # remove files and directories\n\ngit clean -fx      # remove files including those in .gitignore"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "It is used to clean the working directory before builds or tests when a completely clean state is required."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "44. Co robi polecenie git clean?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git clean", "code": true },
-              {
-                "text": " usuwa nieśledzone pliki i katalogi z katalogu roboczego, czyli te, które nie są śledzone przez Git."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykłady:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git clean -n       # pokaż, co zostanie usunięte (dry-run)\n\ngit clean -f       # usuń nieśledzone pliki\n\ngit clean -fd      # usuń pliki i katalogi\n\ngit clean -fx      # usuń pliki, w tym te z .gitignore"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Polecenie jest używane do czyszczenia katalogu roboczego przed budowaniem lub testami, gdy wymagany jest całkowicie czysty stan."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 45,
-    "translations": {
-      "uk": {
-        "question": "45. Як видалити файл з відслідковування Git, але залишити його в локальному робочому каталозі?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Для цього використовують команду:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git rm --cached <file>"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Файл видаляється з індексу (staging area), але залишається у робочому каталозі."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Після коміту і пушу Git більше не буде відслідковувати цей файл."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Типовий сценарій - прибрати конфіг або секрети з репозиторію, залишивши файл локально."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git rm --cached <file>\n\ngit commit -m \"Stop tracking file\""
-          }
-        ]
-      },
-      "en": {
-        "question": "45. How can you stop tracking a file in Git while keeping it in the local working directory?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Use the following command:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git rm --cached <file>"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The file is removed from the index (staging area) but remains in the working directory."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "After committing and pushing, Git will no longer track this file."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This is commonly used to remove configuration or secret files from version control while keeping them locally."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git rm --cached <file>\n\ngit commit -m \"Stop tracking file\""
-          }
-        ]
-      },
-      "pl": {
-        "question": "45. Jak przestać śledzić plik w Git, pozostawiając go w lokalnym katalogu roboczym?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "W tym celu używa się polecenia:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git rm --cached <file>"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Plik zostaje usunięty z indeksu (staging area), ale pozostaje w katalogu roboczym."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Po wykonaniu commita i pusha Git przestaje śledzić ten plik."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Często stosowane do usuwania plików konfiguracyjnych lub sekretów z repozytorium."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git rm --cached <file>\n\ngit commit -m \"Stop tracking file\""
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 46,
-    "translations": {
-      "uk": {
-        "question": "46. Як переглянути історію комітів у Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Базовий перегляд:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Коротка форма:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --oneline"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Графічне відображення гілок:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --graph --oneline --decorate --all"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перегляд змін у конкретному коміті:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log -p\n\ngit show <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Фільтрація історії по файлу:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log -- <file>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ці команди використовуються для аналізу історії, пошуку змін і розуміння того, хто та коли зробив певний коміт."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "46. How can you view the commit history in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Basic view:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Short format:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --oneline"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Graphical view of branches:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --graph --oneline --decorate --all"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "View changes inside commits:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log -p\n\ngit show <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Filter history by file:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log -- <file>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "These commands are used to analyze history, track changes, and see who made specific commits and when."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "46. Jak wyświetlić historię commitów w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podstawowy widok:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Krótka forma:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --oneline"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Graficzne przedstawienie gałęzi:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --graph --oneline --decorate --all"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podgląd zmian w commitach:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log -p\n\ngit show <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Filtrowanie historii według pliku:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log -- <file>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Polecenia te służą do analizy historii, wyszukiwania zmian oraz sprawdzania, kto i kiedy wykonał dany commit."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 47,
-    "translations": {
-      "uk": {
-        "question": "47. Як знайти всі коміти певного автора у Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Використовують команду git log з опцією " },
-                  { "text": "--author", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --author=\"Ім'я або email автора\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Додатково можна скоротити вивід до одного рядка:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --author=\"Ім'я\" --oneline"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Це дозволяє переглянути всі коміти конкретного розробника в межах проєкту."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "47. How can you find all commits made by a specific author in Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Use the git log command with the " },
-                  { "text": "--author", "code": true },
-                  { "text": " option:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --author=\"Author name or email\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "You can also shorten the output to a single line per commit:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --author=\"Name\" --oneline"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This makes it easy to review all commits created by a specific developer in the project."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "47. Jak znaleźć wszystkie commity wykonane przez konkretnego autora w Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Używa się polecenia git log z opcją " },
-                  { "text": "--author", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --author=\"Imię lub email autora\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Można również skrócić wynik do jednej linii na commit:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git log --author=\"Imię\" --oneline"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Dzięki temu można łatwo przejrzeć wszystkie commity wykonane przez danego programistę w projekcie."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 48,
-    "translations": {
-      "uk": {
-        "question": "48. Як переглянути зміни, внесені конкретним комітом у Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перегляд повних змін коміту:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Короткий варіант:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show --stat <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перегляд змін конкретного файлу в коміті:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show <commit_hash> -- <file>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Використовується для аналізу змін, перевірки перед злиттям або дебагу проблем."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "48. How can you view the changes introduced by a specific commit in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "View full commit changes:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Short summary view:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show --stat <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "View changes of a specific file in a commit:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show <commit_hash> -- <file>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This is used for analysis, reviewing changes before merging, or debugging issues."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "48. Jak sprawdzić zmiany wprowadzone przez konkretny commit w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wyświetlenie pełnych zmian commita:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wersja skrócona:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show --stat <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podgląd zmian konkretnego pliku w commicie:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show <commit_hash> -- <file>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Polecenia te służą do analizy zmian, przeglądu przed scaleniem oraz debugowania."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 49,
-    "translations": {
-      "uk": {
-        "question": "49. Як переглянути список файлів, змінених у конкретному коміті Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Використовують команду git show з параметром " },
-                  { "text": "--name-only", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show --name-only <commit_hash>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Показує лише імена файлів без відображення diff." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Або використати " },
-                  { "text": "--name-status", "code": true },
-                  {
-                    "text": " для перегляду статусу змін (додано, змінено, видалено):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show --name-status <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Для перегляду diff разом зі списком файлів:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show <commit_hash>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Корисно для швидкого огляду змін у коміті без детального аналізу коду."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "49. How can you view the list of files changed in a specific Git commit?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Use the git show command with the " },
-                  { "text": "--name-only", "code": true },
-                  { "text": " option:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show --name-only <commit_hash>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This displays only the file names without showing the diff."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Or use " },
-                  { "text": "--name-status", "code": true },
-                  {
-                    "text": " to see file change statuses (added, modified, deleted):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show --name-status <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "To view both file list and diff:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show <commit_hash>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This is useful for quickly reviewing what changed in a commit without analyzing the full diff."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "49. Jak wyświetlić listę plików zmienionych w konkretnym commicie Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Użyj polecenia git show z opcją " },
-                  { "text": "--name-only", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show --name-only <commit_hash>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Wyświetla tylko nazwy plików bez diffów." }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Można też użyć " },
-                  { "text": "--name-status", "code": true },
-                  {
-                    "text": ", aby zobaczyć status zmian (dodany, zmodyfikowany, usunięty):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show --name-status <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Aby zobaczyć listę plików razem z diffem:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git show <commit_hash>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Przydatne do szybkiego sprawdzenia, co zostało zmienione w danym commicie."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 50,
-    "translations": {
-      "uk": {
-        "question": "50. Що робить команда git blame у Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Команда " },
-              { "text": "git blame <file>", "code": true },
-              {
-                "text": " показує, хто і коли вніс кожен рядок у вказаному файлі."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для кожного рядка відображається коміт, автор і дата змін."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Допомагає швидко знайти відповідального за зміну або зрозуміти історію конкретного рядка коду."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклади:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git blame app.js\ngit blame -L 10,20 app.js   # лише рядки з 10 по 20"
-          }
-        ]
-      },
-      "en": {
-        "question": "50. What does the git blame command do in Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The " },
-              { "text": "git blame <file>", "code": true },
-              {
-                "text": " command shows who and when modified each line in a file."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "For each line, it displays the commit hash, author, and date."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Helps quickly identify who introduced a change or understand the history of a specific line of code."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Examples:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git blame app.js\ngit blame -L 10,20 app.js   # show only lines 10 to 20"
-          }
-        ]
-      },
-      "pl": {
-        "question": "50. Co robi polecenie git blame w Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Polecenie " },
-              { "text": "git blame <file>", "code": true },
-              {
-                "text": " pokazuje, kto i kiedy zmodyfikował każdą linię w pliku."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dla każdej linii wyświetlany jest commit, autor i data."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pomaga szybko znaleźć osobę odpowiedzialną za zmianę lub zrozumieć historię konkretnej linii kodu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykłady:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git blame app.js\ngit blame -L 10,20 app.js   # tylko linie od 10 do 20"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 51,
-    "translations": {
-      "uk": {
-        "question": "51. Що таке теги в Git і чим вони відрізняються від гілок?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Тег", "bold": true },
-              {
-                "text": " - це фіксована позначка на конкретному коміті, зазвичай для позначення релізів (v1.0, v2.1)."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Гілка", "bold": true },
-              {
-                "text": " - це рухомий вказівник на останній коміт у лінії розробки, куди постійно додаються нові коміти."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні відмінності:" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Характеристика" }],
-              [{ "text": "Тег" }],
-              [{ "text": "Гілка" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Рухливість" }],
-                [{ "text": "Нерухомий" }],
-                [{ "text": "Рухливий" }]
-              ],
-              [
-                [{ "text": "Призначення" }],
-                [{ "text": "Позначення релізів" }],
-                [{ "text": "Активна розробка" }]
-              ],
-              [
-                [{ "text": "Нові коміти" }],
-                [{ "text": "Не додаються" }],
-                [{ "text": "Додаються постійно" }]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад створення тега:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git tag v1.0\ngit push origin v1.0"
-          }
-        ]
-      },
-      "en": {
-        "question": "51. What are tags in Git and how do they differ from branches?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "A tag", "bold": true },
-              {
-                "text": " is a fixed reference to a specific commit, commonly used to mark releases (v1.0, v2.1)."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "A branch", "bold": true },
-              {
-                "text": " is a movable pointer to the latest commit in a line of development, where new commits are continuously added."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key differences:" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Characteristic" }],
-              [{ "text": "Tag" }],
-              [{ "text": "Branch" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Movability" }],
-                [{ "text": "Immutable" }],
-                [{ "text": "Movable" }]
-              ],
-              [
-                [{ "text": "Purpose" }],
-                [{ "text": "Release marking" }],
-                [{ "text": "Active development" }]
-              ],
-              [
-                [{ "text": "New commits" }],
-                [{ "text": "Not added" }],
-                [{ "text": "Added continuously" }]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example of creating a tag:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git tag v1.0\ngit push origin v1.0"
-          }
-        ]
-      },
-      "pl": {
-        "question": "51. Czym są tagi w Git i czym różnią się od gałęzi?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Tag", "bold": true },
-              {
-                "text": " to stałe oznaczenie konkretnego commita, zwykle używane do oznaczania wydań (v1.0, v2.1)."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Gałąź", "bold": true },
-              {
-                "text": " to ruchomy wskaźnik na ostatni commit w linii rozwoju, do którego stale dodawane są nowe commity."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne różnice:" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Cecha" }],
-              [{ "text": "Tag" }],
-              [{ "text": "Gałąź" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Ruchomość" }],
-                [{ "text": "Nieruchomy" }],
-                [{ "text": "Ruchomy" }]
-              ],
-              [
-                [{ "text": "Zastosowanie" }],
-                [{ "text": "Oznaczanie wydań" }],
-                [{ "text": "Aktywny rozwój" }]
-              ],
-              [
-                [{ "text": "Nowe commity" }],
-                [{ "text": "Nie są dodawane" }],
-                [{ "text": "Są dodawane" }]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład tworzenia taga:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git tag v1.0\ngit push origin v1.0"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 52,
-    "translations": {
-      "uk": {
-        "question": "52. Як у Git створювати, видаляти та пушити теги?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Створення тегів:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lightweight тег:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag v1.0"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Annotated тег (з повідомленням):" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag -a v1.0 -m \"Release version 1.0\""
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Видалення тегів:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Локально:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag -d v1.0"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Віддалено:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin --delete v1.0"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Надсилання тегів на remote:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Один тег:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin v1.0"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Всі теги:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin --tags"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "52. How do you create, delete, and push tags in Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Creating tags:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lightweight tag:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag v1.0"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Annotated tag (with message):" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag -a v1.0 -m \"Release version 1.0\""
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Deleting tags:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Locally:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag -d v1.0"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Remotely:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin --delete v1.0"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Pushing tags to remote:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Single tag:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin v1.0"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "All tags:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin --tags"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "52. Jak w Git tworzyć, usuwać i wysyłać tagi?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Tworzenie tagów:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lekki tag (lightweight):" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag v1.0"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tag opisowy (annotated):" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag -a v1.0 -m \"Release version 1.0\""
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Usuwanie tagów:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lokalnie:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag -d v1.0"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zdalnie:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin --delete v1.0"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wysyłanie tagów na remote:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pojedynczy tag:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin v1.0"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wszystkie tagi:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin --tags"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 53,
-    "translations": {
-      "uk": {
-        "question": "53. Що таке семантичне версіонування і як його використовують у Git-тегах?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Семантичне версіонування (SemVer) - це система нумерації версій у форматі "
-              },
-              {
-                "text": "MAJOR.MINOR.PATCH",
-                "code": true
-              },
-              {
-                "text": ", яка відображає характер змін у релізі:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "MAJOR", "code": true },
-                  { "text": " - несумісні зміни API." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "MINOR", "code": true },
-                  { "text": " - новий функціонал без порушення сумісності." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "PATCH", "code": true },
-                  { "text": " - виправлення багів без зміни функціоналу." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "У Git-тегах SemVer використовують для:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Позначення релізів (наприклад v1.2.3)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Розуміння стабільності та сумісності версій." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Автоматизації CI/CD деплою за тегами." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "53. What is semantic versioning and how is it used in Git tags?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Semantic Versioning (SemVer) is a versioning scheme using the format "
-              },
-              {
-                "text": "MAJOR.MINOR.PATCH",
-                "code": true
-              },
-              {
-                "text": " to communicate the type of changes in a release:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "MAJOR", "code": true },
-                  { "text": " - incompatible API changes." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "MINOR", "code": true },
-                  { "text": " - backward-compatible new features." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "PATCH", "code": true },
-                  { "text": " - backward-compatible bug fixes." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "In Git tags, SemVer is used to:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Mark releases (e.g. v1.2.3)." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Clearly indicate compatibility and stability." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Trigger CI/CD pipelines based on version tags." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "53. Czym jest wersjonowanie semantyczne i jak jest używane w tagach Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wersjonowanie semantyczne (SemVer) to system numerowania wersji w formacie "
-              },
-              {
-                "text": "MAJOR.MINOR.PATCH",
-                "code": true
-              },
-              {
-                "text": ", który opisuje charakter zmian w wydaniu:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "MAJOR", "code": true },
-                  { "text": " - niekompatybilne zmiany API." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "MINOR", "code": true },
-                  { "text": " - nowe funkcje zachowujące kompatybilność." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "PATCH", "code": true },
-                  { "text": " - poprawki błędów bez zmiany funkcjonalności." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "W tagach Git SemVer służy do:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Oznaczania wydań (np. v1.2.3)." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Łatwego określenia stabilności i kompatybilności."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Integracji z CI/CD do automatycznych wdrożeń." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 54,
-    "translations": {
-      "uk": {
-        "question": "54. Як у Git перейти на конкретний тег?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Теги не є гілками, тому перехід на тег переводить репозиторій у стан "
-              },
-              {
-                "text": "detached HEAD",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout v1.0"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Або з використанням сучасного синтаксису:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git switch --detach v1.0"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У цьому режимі можна переглядати, збирати або тестувати код, але нові коміти не будуть прив’язані до жодної гілки."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Щоб продовжити роботу з тегу як із гілки:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout -b release-1.0 v1.0"
-          }
-        ]
-      },
-
-      "en": {
-        "question": "54. How can you switch to a specific tag in Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Tags are not branches, so checking out a tag puts the repository into a "
-              },
-              {
-                "text": "detached HEAD",
-                "code": true
-              },
-              {
-                "text": " state."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout v1.0"
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Or using the newer syntax:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git switch --detach v1.0"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In this mode you can inspect, build, or test the code, but new commits will not belong to any branch."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "To continue working from a tag as a branch:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout -b release-1.0 v1.0"
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "54. Jak przełączyć się na konkretny tag w Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Tagi nie są gałęziami, dlatego przejście na tag powoduje stan "
-              },
-              {
-                "text": "detached HEAD",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout v1.0"
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Lub z użyciem nowszej składni:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git switch --detach v1.0"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W tym trybie można przeglądać, budować lub testować kod, ale nowe commity nie będą przypisane do żadnej gałęzi."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Aby kontynuować pracę z tagu jako z gałęzi:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout -b release-1.0 v1.0"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 55,
-    "translations": {
-      "uk": {
-        "question": "55. Як у Git створити реліз на основі тегу?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Створити тег на потрібному коміті:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag -a v1.0.0 -m \"Release 1.0.0\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Надіслати тег у віддалений репозиторій:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin v1.0.0"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Або надіслати всі теги одразу:"
-              },
-              {
-                "type": "code",
-                "language": "bash",
-                "content": "git push origin --tags"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "У системі керування кодом (GitHub / GitLab / Bitbucket) створити реліз на основі тега:"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "GitHub: вкладка " },
-                          { "text": "Releases", "code": true },
-                          { "text": " → Draft a new release → вибрати тег." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Додати опис змін (changelog)." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Опублікувати реліз." }]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Релізи на основі тегів зручні для CI/CD - можна автоматично запускати збірку та деплой при появі нового тега."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "55. How can you create a release from a tag in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Create a tag on the desired commit:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag -a v1.0.0 -m \"Release 1.0.0\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Push the tag to the remote repository:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin v1.0.0"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Or push all tags at once:" },
-              {
-                "type": "code",
-                "language": "bash",
-                "content": "git push origin --tags"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "In a code hosting platform (GitHub / GitLab / Bitbucket), create a release based on the tag:"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "GitHub: go to " },
-                          { "text": "Releases", "code": true },
-                          { "text": " → Draft a new release → select the tag." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Add release notes or a changelog." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Publish the release." }]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Tag-based releases work well with CI/CD pipelines, enabling automated builds and deployments triggered by version tags."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "55. Jak utworzyć release na podstawie taga w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Utworzyć tag na odpowiednim commicie:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git tag -a v1.0.0 -m \"Release 1.0.0\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wysłać tag do zdalnego repozytorium:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin v1.0.0"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Lub wysłać wszystkie tagi jednocześnie:" },
-              {
-                "type": "code",
-                "language": "bash",
-                "content": "git push origin --tags"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "W systemie hostującym kod (GitHub / GitLab / Bitbucket) utworzyć release na podstawie taga:"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "GitHub: zakładka " },
-                          { "text": "Releases", "code": true },
-                          { "text": " → Draft a new release → wybrać tag." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Dodać opis zmian (changelog)." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Opublikować release." }]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Release’y oparte na tagach są wygodne w CI/CD - pozwalają automatycznie uruchamiać buildy i wdrożenia."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 56,
-    "translations": {
-      "uk": {
-        "question": "56. Що таке Git submodule і в яких випадках його доцільно використовувати?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git submodule", "bold": true },
-              {
-                "text": " - це механізм, що дозволяє вбудовувати один Git-репозиторій в інший як залежність. Основний репозиторій зберігає посилання на конкретний коміт підмодуля."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Використовується, коли:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Є спільна бібліотека або модуль, що використовується в кількох проєктах."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Потрібно зафіксувати залежність на конкретному коміті, а не на останній версії."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Потрібно уникнути дублювання коду між репозиторіями."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад додавання підмодуля:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git submodule add https://github.com/example/lib.git libs/lib\ngit submodule update --init --recursive"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Недоліки:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Складніший workflow: підмодулі потрібно оновлювати вручну, а при клонуванні репозиторію слід використовувати прапорець --recursive."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "56. What is a Git submodule and when should it be used?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git submodule", "bold": true },
-              {
-                "text": " is a mechanism that allows you to embed one Git repository inside another as a dependency. The parent repository stores a reference to a specific commit of the submodule."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "It is useful when:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "You have a shared library or module used across multiple projects."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "You need to lock a dependency to a specific commit rather than the latest version."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "You want to avoid copying code between repositories."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example of adding a submodule:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git submodule add https://github.com/example/lib.git libs/lib\ngit submodule update --init --recursive"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Drawbacks:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Submodules introduce a more complex workflow: updates must be done manually, and repositories should be cloned using the --recursive flag."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "56. Czym jest Git submodule i kiedy warto go używać?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git submodule", "bold": true },
-              {
-                "text": " to mechanizm pozwalający osadzić jedno repozytorium Git w innym jako zależność. Repozytorium nadrzędne przechowuje odwołanie do konkretnego commita podmodułu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Stosuje się, gdy:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Istnieje wspólna biblioteka lub moduł używany w wielu projektach."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Trzeba przypiąć zależność do konkretnego commita, a nie do najnowszej wersji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Chce się uniknąć kopiowania kodu między repozytoriami."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład dodania podmodułu:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git submodule add https://github.com/example/lib.git libs/lib\ngit submodule update --init --recursive"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wady:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Bardziej złożony workflow - podmoduły trzeba aktualizować ręcznie, a klonowanie repozytorium wymaga użycia opcji --recursive."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 57,
-    "translations": {
-      "uk": {
-        "question": "57. Що таке Git hooks і для чого вони потрібні?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git hooks", "bold": true },
-              {
-                "text": " - це скрипти, які автоматично виконуються при певних подіях у Git-репозиторії (наприклад, перед комітом, перед пушем або після злиття). Вони зберігаються в каталозі "
-              },
-              { "text": ".git/hooks", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Використовуються для:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перевірки стилю коду або запуску лінтерів перед комітом ("
-                  },
-                  { "text": "pre-commit", "code": true },
-                  { "text": ")." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Заборони прямого пушу в " },
-                  { "text": "main", "code": true },
-                  { "text": " (" },
-                  { "text": "pre-push", "code": true },
-                  { "text": ")." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Автоматичного оновлення залежностей або документації після злиття ("
-                  },
-                  { "text": "post-merge", "code": true },
-                  { "text": ")." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Генерації changelog або перевірки повідомлень комітів."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Приклад pre-commit hook для перевірки ESLint:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "#!/bin/sh\nnpm run lint\nif [ $? -ne 0 ]; then\n  echo \"Lint errors found. Commit aborted.\"\n  exit 1\nfi"
-          }
-        ]
-      },
-
-      "en": {
-        "question": "57. What are Git hooks and what are they used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git hooks", "bold": true },
-              {
-                "text": " are scripts that automatically run on specific Git events (such as before a commit, before a push, or after a merge). They are stored in the "
-              },
-              { "text": ".git/hooks", "code": true },
-              { "text": " directory." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "They are commonly used to:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Run linters or code style checks before committing ("
-                  },
-                  { "text": "pre-commit", "code": true },
-                  { "text": ")." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Prevent direct pushes to " },
-                  { "text": "main", "code": true },
-                  { "text": " (" },
-                  { "text": "pre-push", "code": true },
-                  { "text": ")." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Automatically update dependencies or documentation after merges ("
-                  },
-                  { "text": "post-merge", "code": true },
-                  { "text": ")." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Generate changelogs or validate commit messages." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example of a pre-commit hook for ESLint:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "#!/bin/sh\nnpm run lint\nif [ $? -ne 0 ]; then\n  echo \"Lint errors found. Commit aborted.\"\n  exit 1\nfi"
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "57. Czym są Git hooks i do czego służą?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git hooks", "bold": true },
-              {
-                "text": " to skrypty uruchamiane automatycznie przy określonych zdarzeniach w repozytorium Git (np. przed commitem, przed pushem lub po merge). Znajdują się w katalogu "
-              },
-              { "text": ".git/hooks", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Są wykorzystywane do:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Uruchamiania linterów lub sprawdzania stylu kodu przed commitem ("
-                  },
-                  { "text": "pre-commit", "code": true },
-                  { "text": ")." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Blokowania bezpośredniego pusha do " },
-                  { "text": "main", "code": true },
-                  { "text": " (" },
-                  { "text": "pre-push", "code": true },
-                  { "text": ")." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Automatycznego aktualizowania zależności lub dokumentacji po merge ("
-                  },
-                  { "text": "post-merge", "code": true },
-                  { "text": ")." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Generowania changelogów lub walidacji wiadomości commitów."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład hooka pre-commit dla ESLint:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "#!/bin/sh\nnpm run lint\nif [ $? -ne 0 ]; then\n  echo \"Lint errors found. Commit aborted.\"\n  exit 1\nfi"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 58,
-    "translations": {
-      "uk": {
-        "question": "58. Як у Git об’єднати кілька комітів у один (squash)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Squash", "bold": true },
-              {
-                "text": " - це об’єднання кількох комітів у один. Найчастіше використовується перед злиттям гілки в "
-              },
-              { "text": "main", "code": true },
-              { "text": " або " },
-              { "text": "develop", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основний спосіб - interactive rebase:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git rebase -i HEAD~N"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "де " },
-              { "text": "N", "code": true },
-              {
-                "text": " - кількість останніх комітів, які потрібно об’єднати."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "У відкритому редакторі:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перший коміт залишаєш як " },
-                  { "text": "pick", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Для наступних змінюєш " },
-                  { "text": "pick", "code": true },
-                  { "text": " на " },
-                  { "text": "squash (s)", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Після збереження Git об’єднає коміти та запропонує відредагувати фінальне повідомлення."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Коли використовують squash:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Очищення історії перед merge." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Формування зрозумілого changelog." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Приховування дрібних або проміжних комітів." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "58. How can you squash multiple commits into one in Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Squash", "bold": true },
-              {
-                "text": " means combining several commits into a single one. It is commonly used before merging a branch into "
-              },
-              { "text": "main", "code": true },
-              { "text": " or " },
-              { "text": "develop", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "The main approach is interactive rebase:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git rebase -i HEAD~N"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "where " },
-              { "text": "N", "code": true },
-              {
-                "text": " is the number of recent commits you want to combine."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "In the editor:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Keep the first commit as " },
-                  { "text": "pick", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Change the following commits from " },
-                  { "text": "pick", "code": true },
-                  { "text": " to " },
-                  { "text": "squash (s)", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "After saving, Git will combine the commits and prompt you to edit the final commit message."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "When squash is used:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Cleaning up history before merging." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Creating a clear and readable changelog." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hiding noisy or intermediate commits." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "58. Jak w Git połączyć kilka commitów w jeden (squash)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Squash", "bold": true },
-              {
-                "text": " to połączenie kilku commitów w jeden. Najczęściej stosowane przed scaleniem gałęzi do "
-              },
-              { "text": "main", "code": true },
-              { "text": " lub " },
-              { "text": "develop", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Podstawowa metoda - interactive rebase:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git rebase -i HEAD~N"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "gdzie " },
-              { "text": "N", "code": true },
-              { "text": " oznacza liczbę ostatnich commitów do połączenia." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "W edytorze:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pierwszy commit zostawiasz jako " },
-                  { "text": "pick", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dla kolejnych zmieniasz " },
-                  { "text": "pick", "code": true },
-                  { "text": " na " },
-                  { "text": "squash (s)", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Po zapisaniu Git połączy commity i pozwoli edytować końcową wiadomość."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kiedy stosować squash:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Czyszczenie historii przed merge." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Tworzenie czytelnego changelogu." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ukrywanie drobnych commitów technicznych." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 59,
-    "translations": {
-      "uk": {
-        "question": "59. Що таке git bisect і як із ним працювати?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git bisect", "code": true },
-              {
-                "text": " - це інструмент Git для бінарного пошуку коміту, який ввів баг. Він автоматично звужує діапазон між "
-              },
-              { "text": "good", "code": true },
-              { "text": " і " },
-              { "text": "bad", "code": true },
-              { "text": " комітами." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основний workflow:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Запустити bisect:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect start"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Позначити поточний стан як " },
-                  { "text": "bad", "code": true },
-                  { "text": " (баг присутній):" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect bad"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вказати коміт, де все працювало:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect good <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git автоматично переключається на середній коміт. Ви тестуєте код і повідомляєте результат:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect good   # якщо багу немає\ngit bisect bad    # якщо баг присутній"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Процес повторюється, доки Git не знайде проблемний коміт."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Завершити та повернутись у початковий стан:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect reset"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "git bisect особливо корисний у великих проєктах з довгою історією комітів, коли вручну знайти джерело багу складно."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "59. What is git bisect and how does it work?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git bisect", "code": true },
-              {
-                "text": " is a Git tool for performing a binary search to find the commit that introduced a bug. It automatically narrows the range between "
-              },
-              { "text": "good", "code": true },
-              { "text": " and " },
-              { "text": "bad", "code": true },
-              { "text": " commits." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Typical workflow:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Start bisect mode:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect start"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mark the current commit as " },
-                  { "text": "bad", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect bad"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Specify a known good commit:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect good <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git checks out a midpoint commit. You test it and report the result:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect good   # bug not present\ngit bisect bad    # bug present"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The process repeats until the faulty commit is identified."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Exit bisect mode and return to the original state:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect reset"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "git bisect is especially useful in large projects with long histories where manual debugging would be too slow."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "59. Czym jest git bisect i jak z niego korzystać?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git bisect", "code": true },
-              {
-                "text": " to narzędzie Git do wyszukiwania commitów metodą binarną w celu znalezienia tego, który wprowadził błąd. Automatycznie zawęża zakres między "
-              },
-              { "text": "good", "code": true },
-              { "text": " a " },
-              { "text": "bad", "code": true },
-              { "text": " commitami." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Typowy workflow:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Uruchomić tryb bisect:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect start"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Oznaczyć bieżący commit jako " },
-                  { "text": "bad", "code": true },
-                  { "text": ":" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect bad"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wskazać commit, w którym wszystko działało poprawnie:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect good <commit_hash>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git przełącza się na commit pośredni. Testujesz i zgłaszasz wynik:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect good   # błąd nie występuje\ngit bisect bad    # błąd występuje"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Proces trwa do momentu znalezienia problematycznego commita."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakończyć bisect i wrócić do poprzedniego stanu:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git bisect reset"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "git bisect jest bardzo przydatny w dużych projektach z długą historią commitów."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 60,
-    "translations": {
-      "uk": {
-        "question": "60. Як вручну вирішити конфлікт при злитті в Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Merge conflict виникає, коли Git не може автоматично об’єднати зміни з двох гілок. У такому випадку конфлікт потрібно вирішити вручну."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Кроки вирішення:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Запустити злиття гілок:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git merge feature-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git зупиниться та повідомить про файли з конфліктами."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відкрити конфліктні файли - вони міститимуть маркери:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "<<<<<<< HEAD\nкод з поточної гілки\n=======\nкод з feature-branch\n>>>>>>> feature-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Вибрати або об’єднати потрібні зміни вручну та видалити маркери конфлікту."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Позначити файл як вирішений:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Завершити злиття:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Якщо merge-коміт не створився автоматично, його потрібно зробити вручну."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для зручності можна використовувати графічні інструменти злиття (VS Code, IntelliJ, Meld)."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "60. How can you manually resolve a merge conflict in Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A merge conflict occurs when Git cannot automatically combine changes from two branches. In this case, the conflict must be resolved manually."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Resolution steps:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Start the merge:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git merge feature-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git stops and reports files with conflicts." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Open the conflicted files - they will contain conflict markers:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "<<<<<<< HEAD\ncode from current branch\n=======\ncode from feature-branch\n>>>>>>> feature-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Manually choose or merge the correct changes and remove the conflict markers."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mark the conflict as resolved:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Finish the merge:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "If Git does not create the merge commit automatically, you need to commit it manually."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Graphical merge tools such as VS Code, IntelliJ, or Meld can simplify conflict resolution."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "60. Jak ręcznie rozwiązać konflikt scalania w Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Konflikt scalania występuje, gdy Git nie może automatycznie połączyć zmian z dwóch gałęzi. Wtedy konflikt trzeba rozwiązać ręcznie."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kroki rozwiązania:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rozpocząć scalanie:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git merge feature-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git zatrzyma się i wskaże pliki z konfliktami." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Otworzyć pliki z konfliktami - zawierają znaczniki:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "<<<<<<< HEAD\nkod z bieżącej gałęzi\n=======\nkod z feature-branch\n>>>>>>> feature-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ręcznie wybrać lub połączyć poprawne zmiany i usunąć znaczniki konfliktu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Oznaczyć konflikt jako rozwiązany:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zakończyć scalanie:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Jeśli commit scalania nie został utworzony automatycznie, należy go wykonać ręcznie."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Graficzne narzędzia do scalania (VS Code, IntelliJ, Meld) znacznie ułatwiają pracę."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 61,
-    "translations": {
-      "uk": {
-        "question": "61. Як налаштувати ім’я користувача та email у Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Для глобальних налаштувань (усі репозиторії):" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config --global user.name \"Ваше Ім’я\"\ngit config --global user.email \"ваш@email.com\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Для конкретного репозиторію (тільки в поточному):" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config user.name \"Ваше Ім’я\"\ngit config user.email \"ваш@email.com\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Перевірка налаштувань:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config --list"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Email використовується для зв’язку комітів із профілем GitHub/GitLab."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "61. How do you configure user name and email in Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Global configuration (for all repositories):" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config --global user.name \"Your Name\"\ngit config --global user.email \"your@email.com\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Repository-specific configuration (current repo only):"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config user.name \"Your Name\"\ngit config user.email \"your@email.com\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Check configuration:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config --list"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The email is used to associate commits with your GitHub or GitLab account."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "61. Jak skonfigurować nazwę użytkownika i email w Git?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Konfiguracja globalna (dla wszystkich repozytoriów):" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config --global user.name \"Twoje Imię\"\ngit config --global user.email \"twoj@email.com\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Konfiguracja tylko dla bieżącego repozytorium:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config user.name \"Twoje Imię\"\ngit config user.email \"twoj@email.com\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Sprawdzenie ustawień:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config --list"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Adres email służy do powiązania commitów z kontem GitHub lub GitLab."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 62,
-    "translations": {
-      "uk": {
-        "question": "62. Які рівні конфігурації Git існують і яка їхня область дії?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Git має три рівні конфігурації:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "System", "bold": true },
-                  {
-                    "text": " (/etc/gitconfig) - застосовується для всіх користувачів і всіх репозиторіїв на машині."
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --system ..."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Global", "bold": true },
-                  {
-                    "text": " (~/.gitconfig або ~/.config/git/config) - застосовується для поточного користувача у всіх його репозиторіях."
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global ..."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Local", "bold": true },
-                  {
-                    "text": " (.git/config у репозиторії) - застосовується лише для конкретного репозиторію та має найвищий пріоритет."
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config ..."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Пріоритет застосування:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "local > global > system" }]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "62. What Git configuration levels exist and what is their scope?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Git has three configuration levels:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "System", "bold": true },
-                  {
-                    "text": " (/etc/gitconfig) - applies to all users and all repositories on the machine."
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --system ..."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Global", "bold": true },
-                  {
-                    "text": " (~/.gitconfig or ~/.config/git/config) - applies to the current user across all repositories."
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global ..."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Local", "bold": true },
-                  {
-                    "text": " (.git/config in a repository) - applies only to that repository and has the highest priority."
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config ..."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Priority order:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "local > global > system" }]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "62. Jakie poziomy konfiguracji Git istnieją i jaki jest ich zakres?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Git posiada trzy poziomy konfiguracji:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "System", "bold": true },
-                  {
-                    "text": " (/etc/gitconfig) - obowiązuje wszystkich użytkowników i wszystkie repozytoria na danej maszynie."
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --system ..."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Global", "bold": true },
-                  {
-                    "text": " (~/.gitconfig lub ~/.config/git/config) - dotyczy bieżącego użytkownika we wszystkich jego repozytoriach."
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global ..."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Local", "bold": true },
-                  {
-                    "text": " (.git/config w repozytorium) - dotyczy tylko jednego repozytorium i ma najwyższy priorytet."
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config ..."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kolejność priorytetów:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "local > global > system" }]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 63,
-    "translations": {
-      "uk": {
-        "question": "63. Як у Git створити alias (псевдонім) для команди?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Псевдоніми в Git дозволяють створювати короткі імена для часто використовуваних команд. Вони налаштовуються через "
-              },
-              { "text": "git config", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Приклади (глобально, для всіх репозиторіїв):" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config --global alias.st status\ngit config --global alias.co checkout\ngit config --global alias.br branch\ngit config --global alias.cm \"commit -m\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Для конкретного репозиторію:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config alias.lg \"log --oneline --graph --all --decorate\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Використання:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git st\ngit co main\ngit lg"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Псевдоніми зберігаються у файлах " },
-              { "text": "~/.gitconfig", "code": true },
-              { "text": " або " },
-              { "text": ".git/config", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "63. How can you create an alias for a Git command?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git aliases allow you to create short names for frequently used commands. They are configured using "
-              },
-              { "text": "git config", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Examples (global, for all repositories):" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config --global alias.st status\ngit config --global alias.co checkout\ngit config --global alias.br branch\ngit config --global alias.cm \"commit -m\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "For a specific repository:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config alias.lg \"log --oneline --graph --all --decorate\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Usage:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git st\ngit co main\ngit lg"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Aliases are stored in " },
-              { "text": "~/.gitconfig", "code": true },
-              { "text": " or " },
-              { "text": ".git/config", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "63. Jak utworzyć alias (skrót) dla polecenia w Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Aliasy w Git pozwalają tworzyć krótkie nazwy dla często używanych poleceń. Konfiguruje się je za pomocą "
-              },
-              { "text": "git config", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Przykłady (globalnie, dla wszystkich repozytoriów):" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config --global alias.st status\ngit config --global alias.co checkout\ngit config --global alias.br branch\ngit config --global alias.cm \"commit -m\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Dla konkretnego repozytorium:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git config alias.lg \"log --oneline --graph --all --decorate\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Użycie:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git st\ngit co main\ngit lg"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Aliasy są zapisywane w plikach " },
-              { "text": "~/.gitconfig", "code": true },
-              { "text": " lub " },
-              { "text": ".git/config", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 64,
-    "translations": {
-      "uk": {
-        "question": "64. Для чого використовується файл .gitignore у Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ".gitignore", "code": true },
-                  {
-                    "text": " визначає, які файли й папки Git має ігнорувати - тобто не відстежувати і не додавати у коміти."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Використовується для:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "тимчасових файлів (логи, кеші, .DS_Store, thumbs.db);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "залежностей (node_modules/, vendor/);" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "згенерованих артефактів (build/, coverage-звіти);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "локальних конфігураційних файлів (наприклад, .env)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Важливо:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": ".gitignore не видаляє файли, які вже відстежуються Git. Він лише запобігає додаванню нових."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "64. What is the purpose of the .gitignore file in Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ".gitignore", "code": true },
-                  {
-                    "text": " specifies which files and directories Git should ignore, meaning they are not tracked or committed."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Commonly used for:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "temporary files (logs, caches, .DS_Store, thumbs.db);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "dependencies (node_modules/, vendor/);" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "generated artifacts (build/, coverage reports);" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "local configuration files (e.g. .env)." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Important:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": ".gitignore does not remove files that are already tracked by Git. It only prevents new or untracked files from being added."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "64. Do czego służy plik .gitignore w Git?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ".gitignore", "code": true },
-                  {
-                    "text": " określa, które pliki i katalogi Git ma ignorować - czyli nie śledzić i nie dodawać do commitów."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Najczęściej używany do:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "plików tymczasowych (logi, cache, .DS_Store, thumbs.db);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "zależności (node_modules/, vendor/);" }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "wygenerowanych artefaktów (build/, raporty coverage);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "lokalnych plików konfiguracyjnych (np. .env)." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ważne:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": ".gitignore nie usuwa plików już śledzonych przez Git. Zapobiega jedynie dodawaniu nowych lub nieśledzonych plików."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 65,
-    "translations": {
-      "uk": {
-        "question": "65. Як налаштувати глобальний .gitignore, щоб ігнорувати файли у всіх репозиторіях?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Створити глобальний файл, наприклад:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "touch ~/.gitignore_global"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Додати в нього правила (наприклад, IDE або системні файли):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": ".DS_Store\nThumbs.db\nnode_modules/\n*.log"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Налаштувати Git використовувати цей файл:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global core.excludesfile ~/.gitignore_global"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перевірити налаштування:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --list | grep excludesfile"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Після цього всі нові та існуючі репозиторії автоматично ігноруватимуть зазначені файли."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "65. How can you configure a global .gitignore to ignore files across all repositories?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Create a global ignore file, for example:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "touch ~/.gitignore_global"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Add ignore rules (e.g. IDE or system files):" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": ".DS_Store\nThumbs.db\nnode_modules/\n*.log"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Configure Git to use this file:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global core.excludesfile ~/.gitignore_global"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Verify the configuration:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --list | grep excludesfile"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "After this, all repositories will automatically ignore the specified files."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "65. Jak skonfigurować globalny .gitignore, aby ignorować pliki we wszystkich repozytoriach?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Utworzyć globalny plik, na przykład:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "touch ~/.gitignore_global"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dodać do niego reguły ignorowania (np. pliki IDE lub systemowe):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": ".DS_Store\nThumbs.db\nnode_modules/\n*.log"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Skonfigurować Git, aby używał tego pliku:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global core.excludesfile ~/.gitignore_global"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sprawdzić konfigurację:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --list | grep excludesfile"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Od tej pory wszystkie repozytoria będą automatycznie ignorować wskazane pliki."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 66,
-    "translations": {
-      "uk": {
-        "question": "66. Як налаштувати Git для підпису комітів GPG-ключем?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Створити або переглянути GPG-ключі:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "gpg --full-generate-key\ngpg --list-secret-keys --keyid-format=long"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Скопіювати ідентифікатор ключа (GPG_KEY_ID) та вказати його Git:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global user.signingkey GPG_KEY_ID"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Увімкнути підпис усіх комітів за замовчуванням:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global commit.gpgsign true"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Або підписувати окремі коміти вручну:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit -S -m \"Signed commit\""
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для GitHub або GitLab потрібно додати публічний ключ у налаштування акаунта."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "gpg --armor --export GPG_KEY_ID"
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Перевірка підписів комітів:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git log --show-signature"
-          }
-        ]
-      },
-
-      "en": {
-        "question": "66. How can you configure Git to sign commits with a GPG key?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Create or list your GPG keys:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "gpg --full-generate-key\ngpg --list-secret-keys --keyid-format=long"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Copy the key ID (GPG_KEY_ID) and configure Git to use it:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global user.signingkey GPG_KEY_ID"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Enable commit signing by default:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global commit.gpgsign true"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Or sign individual commits manually:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit -S -m \"Signed commit\""
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "For GitHub or GitLab, add the public key to your account settings."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "gpg --armor --export GPG_KEY_ID"
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Verify signed commits:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git log --show-signature"
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "66. Jak skonfigurować Git do podpisywania commitów kluczem GPG?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Utworzyć lub wyświetlić klucze GPG:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "gpg --full-generate-key\ngpg --list-secret-keys --keyid-format=long"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Skopiować identyfikator klucza (GPG_KEY_ID) i ustawić go w Git:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global user.signingkey GPG_KEY_ID"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Włączyć podpisywanie wszystkich commitów domyślnie:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config --global commit.gpgsign true"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lub podpisywać pojedyncze commity ręcznie:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit -S -m \"Signed commit\""
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W GitHub lub GitLab należy dodać klucz publiczny do ustawień konta."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "gpg --armor --export GPG_KEY_ID"
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Sprawdzenie podpisów commitów:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git log --show-signature"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 67,
-    "translations": {
-      "uk": {
-        "question": "67. Які найпоширеніші практики безпеки при роботі з Git-репозиторіями?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SSH-ключі замість паролів", "bold": true },
-                  {
-                    "text": " – для безпечної автентифікації з віддаленими репозиторіями."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GPG-підпис комітів", "bold": true },
-                  { "text": " – підтвердження авторства і цілісності змін." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ".gitignore для секретів", "bold": true },
-                  {
-                    "text": " – не зберігати .env, API-ключі, токени та паролі в репозиторії."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Сканування на секрети", "bold": true },
-                  {
-                    "text": " – використання інструментів на кшталт GitGuardian або TruffleHog перед пушем."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Обмеження доступу", "bold": true },
-                  {
-                    "text": " – мінімальні права доступу та захищені гілки (protected branches)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pull Request review", "bold": true },
-                  {
-                    "text": " – зміни потрапляють у main лише після код-ревʼю."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Безпечне зберігання секретів у CI/CD",
-                    "bold": true
-                  },
-                  {
-                    "text": " – використання GitHub Actions Secrets, Vault тощо замість hardcode."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Регулярне оновлення залежностей", "bold": true },
-                  { "text": " – зменшення ризику відомих вразливостей." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Головне правило безпеки: ніколи не зберігати секретні дані у відкритому вигляді в Git-репозиторії."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "67. What are the most common security best practices when working with Git repositories?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SSH keys instead of passwords", "bold": true },
-                  {
-                    "text": " – for secure authentication with remote repositories."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GPG commit signing", "bold": true },
-                  { "text": " – ensures commit authenticity and integrity." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ".gitignore for secrets", "bold": true },
-                  {
-                    "text": " – never commit .env files, API keys, tokens, or passwords."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Secret scanning", "bold": true },
-                  {
-                    "text": " – using tools like GitGuardian or TruffleHog before pushing code."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Access control", "bold": true },
-                  {
-                    "text": " – least-privilege access and protected branches."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pull request reviews", "bold": true },
-                  { "text": " – code reaches main only after review." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Secure secrets management in CI/CD",
-                    "bold": true
-                  },
-                  {
-                    "text": " – use GitHub Actions Secrets, Vault, etc., instead of hardcoding."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Regular dependency updates", "bold": true },
-                  { "text": " – to reduce known security vulnerabilities." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The golden rule: never store sensitive information in plain text inside a Git repository."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "67. Jakie są najczęstsze praktyki bezpieczeństwa podczas pracy z repozytoriami Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Klucze SSH zamiast haseł", "bold": true },
-                  {
-                    "text": " – bezpieczna autoryzacja z repozytoriami zdalnymi."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podpisywanie commitów GPG", "bold": true },
-                  {
-                    "text": " – potwierdzenie autorstwa i integralności zmian."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ".gitignore dla sekretów", "bold": true },
-                  {
-                    "text": " – brak commitów z .env, kluczami API czy hasłami."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Skanowanie sekretów", "bold": true },
-                  {
-                    "text": " – użycie narzędzi takich jak GitGuardian lub TruffleHog."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kontrola dostępu", "bold": true },
-                  { "text": " – minimalne uprawnienia i chronione gałęzie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Code review przez Pull Requesty", "bold": true },
-                  {
-                    "text": " – zmiany trafiają do main dopiero po zatwierdzeniu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Bezpieczne przechowywanie sekretów w CI/CD",
-                    "bold": true
-                  },
-                  {
-                    "text": " – używanie GitHub Secrets lub Vault zamiast hardcode."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Regularne aktualizacje zależności", "bold": true },
-                  { "text": " – ograniczenie znanych podatności." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Złota zasada: nigdy nie przechowuj wrażliwych danych w jawnym tekście w repozytorium Git."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 68,
-    "translations": {
-      "uk": {
-        "question": "68. Які способи існують для зберігання конфіденційних даних у Git-репозиторії у зашифрованому вигляді?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git-crypt", "code": true },
-                  {
-                    "text": " – прозоре шифрування вибраних файлів у репозиторії. Дані розшифровуються лише для користувачів із відповідними ключами."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git-secret", "code": true },
-                  {
-                    "text": " – інструмент на базі GPG для шифрування файлів (.env, API-ключів, токенів) перед комітом."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SOPS (Mozilla)", "code": true },
-                  {
-                    "text": " – інструмент керування секретами з AES-шифруванням та інтеграцією з AWS KMS, GCP KMS, Azure Key Vault, HashiCorp Vault."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "BlackBox (StackExchange)", "code": true },
-                  {
-                    "text": " – система керування зашифрованими файлами в Git-репозиторіях на базі GPG."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Зберігання секретів поза Git", "bold": true },
-                  {
-                    "text": " – використання менеджерів секретів (Vault, AWS Secrets Manager, Doppler, GitHub Actions Secrets), а в репозиторії зберігаються лише шаблони типу .env.example."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "68. What methods exist for storing sensitive data in a Git repository in an encrypted form?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git-crypt", "code": true },
-                  {
-                    "text": " – transparent encryption of selected files in a repository, decrypted only for users with access keys."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git-secret", "code": true },
-                  {
-                    "text": " – a GPG-based tool for encrypting sensitive files such as .env files and API keys."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SOPS (Mozilla)", "code": true },
-                  {
-                    "text": " – a secrets management tool using AES encryption with integrations for AWS KMS, GCP KMS, Azure Key Vault, and HashiCorp Vault."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "BlackBox (StackExchange)", "code": true },
-                  {
-                    "text": " – a system for managing encrypted files inside Git repositories using GPG."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Keeping secrets outside Git", "bold": true },
-                  {
-                    "text": " – using secret managers and keeping only templates like .env.example in the repository."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "68. Jakie sposoby istnieją do przechowywania poufnych danych w repozytorium Git w formie zaszyfrowanej?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git-crypt", "code": true },
-                  {
-                    "text": " – umożliwia przejrzyste szyfrowanie wybranych plików w repozytorium, odszyfrowywanych tylko dla użytkowników posiadających klucze."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git-secret", "code": true },
-                  {
-                    "text": " – narzędzie oparte na GPG do szyfrowania plików takich jak .env, klucze API i tokeny."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SOPS (Mozilla)", "code": true },
-                  {
-                    "text": " – narzędzie do zarządzania sekretami z szyfrowaniem AES oraz integracją z AWS KMS, GCP KMS, Azure Key Vault i HashiCorp Vault."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "BlackBox (StackExchange)", "code": true },
-                  {
-                    "text": " – system zarządzania zaszyfrowanymi plikami w repozytoriach Git, oparty na GPG."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przechowywanie sekretów poza Git", "bold": true },
-                  {
-                    "text": " – używanie menedżerów sekretów (Vault, AWS Secrets Manager, Doppler, GitHub Actions Secrets) i trzymanie w repozytorium jedynie szablonów typu .env.example."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 69,
-    "translations": {
-      "uk": {
-        "question": "69. Які існують стратегії зберігання та керування обліковими даними (credentials) у Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Credential helpers Git", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "cache", "code": true },
-                          {
-                            "text": " – тимчасове збереження облікових даних у пам’яті."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "store", "code": true },
-                          {
-                            "text": " – збереження у відкритому вигляді у файлі (небезпечний варіант)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "manager", "code": true },
-                          { "text": " (Windows) або " },
-                          { "text": "osxkeychain", "code": true },
-                          {
-                            "text": " (macOS) – інтеграція з системним менеджером паролів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SSH-ключі", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Основний і найбезпечніший метод доступу до GitHub/GitLab."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Використання " },
-                          { "text": "ssh-agent", "code": true },
-                          { "text": " для зручності." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Персональні токени доступу (PAT)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Альтернатива паролям (наприклад, у GitHub)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Рекомендується зберігати через Credential Manager."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GPG-підпис комітів", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Використовується для підтвердження авторства, а не для автентифікації."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Secrets Manager", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "AWS Secrets Manager, Vault, Doppler – для CI/CD і автоматизації без хардкоду."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Найкраща практика: SSH-ключі для доступу + Credential Manager для зручності + Secrets Manager для CI/CD."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "69. What strategies exist for storing and managing credentials in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git credential helpers", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "cache", "code": true },
-                          {
-                            "text": " – temporarily stores credentials in memory."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "store", "code": true },
-                          {
-                            "text": " – stores credentials in plain text (not recommended)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "manager", "code": true },
-                          { "text": " (Windows) or " },
-                          { "text": "osxkeychain", "code": true },
-                          {
-                            "text": " (macOS) – integration with the OS keychain."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SSH keys", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The most secure and recommended authentication method."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Using " },
-                          { "text": "ssh-agent", "code": true },
-                          { "text": " for convenience." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Personal Access Tokens (PAT)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "A secure alternative to passwords (e.g. on GitHub)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Should be stored via a credential manager."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GPG commit signing", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Used to verify authorship, not for authentication."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Secrets Managers", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "AWS Secrets Manager, Vault, Doppler – recommended for CI/CD pipelines."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Best practice: SSH keys for access, Credential Manager for usability, and Secrets Manager for CI/CD."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "69. Jakie strategie istnieją do przechowywania i zarządzania danymi uwierzytelniającymi (credentials) w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Credential helpers Git", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "cache", "code": true },
-                          {
-                            "text": " – tymczasowe przechowywanie danych w pamięci."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "store", "code": true },
-                          {
-                            "text": " – zapisywanie danych w postaci jawnej (niezalecane)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "manager", "code": true },
-                          { "text": " (Windows) lub " },
-                          { "text": "osxkeychain", "code": true },
-                          {
-                            "text": " (macOS) – integracja z systemowym menedżerem haseł."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Klucze SSH", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Najbezpieczniejsza i zalecana metoda dostępu do GitHub/GitLab."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Użycie " },
-                          { "text": "ssh-agent", "code": true },
-                          { "text": " dla wygody." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Personal Access Tokens (PAT)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Bezpieczna alternatywa dla haseł (np. w GitHub)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zaleca się przechowywanie ich w menedżerze poświadczeń."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podpisywanie commitów GPG", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Służy do potwierdzania autorstwa, a nie do logowania."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Menedżery sekretów", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "AWS Secrets Manager, Vault, Doppler – rekomendowane dla CI/CD."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Najlepsza praktyka: klucze SSH do dostępu, Credential Manager dla wygody oraz Secrets Manager dla CI/CD."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 70,
-    "translations": {
-      "uk": {
-        "question": "70. Які способи є для скасування доступу користувачу до Git-репозиторію?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GitHub / GitLab / Bitbucket", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Власник або адміністратор видаляє користувача зі списку collaborators або з команди/групи."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Можна знизити або повністю забрати права доступу (read/write → none)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SSH-ключі", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Видалити або відкликати публічний SSH-ключ користувача з налаштувань акаунта або сервера."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Персональні токени доступу (PAT)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Відкликати або видалити токени у налаштуваннях акаунта користувача."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CI/CD секрети", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Якщо користувач мав доступ до секретів (GitHub Actions, GitLab CI), їх потрібно оновити або перевипустити."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Загальний принцип: відкликати доступ на рівні платформи + знеактивувати всі ключі та токени."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "70. What are the ways to revoke a user's access to a Git repository?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GitHub / GitLab / Bitbucket", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The owner or administrator removes the user from collaborators or from a team/group."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Access permissions can be downgraded or fully revoked (read/write → none)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SSH keys", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Remove or revoke the user's public SSH key from the account or server settings."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Personal Access Tokens (PAT)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Revoke or delete access tokens in the user's account settings."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CI/CD secrets", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "If the user had access to secrets (GitHub Actions, GitLab CI), they should be rotated or revoked."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "General rule: revoke platform access and invalidate all related keys and tokens."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "70. Jakie są sposoby odebrania użytkownikowi dostępu do repozytorium Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GitHub / GitLab / Bitbucket", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Właściciel lub administrator usuwa użytkownika z collaborators lub z zespołu/grupy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Można obniżyć lub całkowicie odebrać uprawnienia (read/write → none)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Klucze SSH", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Usunąć lub unieważnić publiczny klucz SSH użytkownika w ustawieniach konta lub serwera."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Personal Access Tokens (PAT)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Cofnąć lub usunąć tokeny dostępu w ustawieniach konta użytkownika."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sekrety CI/CD", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Jeśli użytkownik miał dostęp do sekretów (GitHub Actions, GitLab CI), należy je zmienić lub unieważnić."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zasada ogólna: odebrać dostęp na poziomie platformy oraz unieważnić wszystkie klucze i tokeny."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 71,
-    "translations": {
-      "uk": {
-        "question": "71. Як у Git знайти та відновити файл, який був видалений?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Якщо файл видалено лише локально (ще не закомічено):"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout -- <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Якщо файл був видалений і вже закомічений:" }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Знайти коміт, у якому файл ще існував:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git log -- <file>"
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Відновити файл з конкретного коміту:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout <commit_hash> -- <file>"
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відновлення файлу з останнього коміту в поточній гілці:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git restore <file>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Порада:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Перед використанням checkout або restore переконайтесь, що у файлі немає незбережених змін, щоб уникнути їх втрати."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "71. How can you find and restore a file that was deleted in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "If the file was deleted locally but not committed:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout -- <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "If the file was deleted and committed:" }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Find the commit where the file still existed:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git log -- <file>"
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Restore the file from that commit:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout <commit_hash> -- <file>"
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Restore the file from the latest commit on the current branch:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git restore <file>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Tip:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Before using checkout or restore, make sure there are no uncommitted changes to avoid overwriting them."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "71. Jak w Git odnaleźć i przywrócić plik, który został usunięty?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jeśli plik został usunięty lokalnie, ale nie został jeszcze zatwierdzony:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout -- <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jeśli plik został usunięty i zapisany w commitcie:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Znajdź commit, w którym plik jeszcze istniał:" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git log -- <file>"
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Przywróć plik z wybranego commita:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git checkout <commit_hash> -- <file>"
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przywrócenie pliku z ostatniego commita w bieżącej gałęzi:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git restore <file>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wskazówka:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Przed użyciem checkout lub restore upewnij się, że nie ma niezapisanych zmian, aby ich nie nadpisać."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 72,
-    "translations": {
-      "uk": {
-        "question": "72. Що робити, якщо випадково закомітити секретні дані у Git-репозиторій?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Негайно прибрати файл з індексу та заборонити подальше відстеження:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git rm --cached <file>\necho \"<file>\" >> .gitignore\ngit commit -m \"Remove sensitive file\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Якщо секретні дані вже були запушені на remote:" }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Повністю видалити файл з історії репозиторію за допомогою "
-              },
-              { "text": "git filter-repo", "code": true },
-              { "text": " (або застарілого " },
-              { "text": "git filter-branch", "code": true },
-              { "text": "):" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git filter-repo --path <file> --invert-paths"
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Переписати історію у віддаленому репозиторії:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin --force"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Негайно оновити всі скомпрометовані дані:" }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Змінити паролі, API-ключі, токени доступу та інші секрети, оскільки вони вже могли бути скомпрометовані."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Порада:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Повідомити команду та перевірити форки або клони репозиторію, якщо секрети були публічно доступні."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "72. What should you do if you accidentally commit sensitive data to a Git repository?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Immediately remove the file from the index and prevent future tracking:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git rm --cached <file>\necho \"<file>\" >> .gitignore\ngit commit -m \"Remove sensitive file\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "If the sensitive data was already pushed to a remote repository:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Completely remove the file from Git history using " },
-              { "text": "git filter-repo", "code": true },
-              { "text": " (or the legacy " },
-              { "text": "git filter-branch", "code": true },
-              { "text": "):" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git filter-repo --path <file> --invert-paths"
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Force-push the rewritten history to the remote repository:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin --force"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Rotate all compromised credentials:" }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Change passwords, API keys, access tokens, and any other exposed secrets immediately."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Tip:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Notify your team and check forks or clones if the secrets were publicly exposed."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "72. Co zrobić, jeśli przypadkowo zapiszesz poufne dane w repozytorium Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Natychmiast usuń plik z indeksu i zablokuj jego dalsze śledzenie:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git rm --cached <file>\necho \"<file>\" >> .gitignore\ngit commit -m \"Remove sensitive file\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jeśli poufne dane zostały już wypchnięte do repozytorium zdalnego:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Całkowicie usuń plik z historii repozytorium za pomocą "
-              },
-              { "text": "git filter-repo", "code": true },
-              { "text": " (lub starszego " },
-              { "text": "git filter-branch", "code": true },
-              { "text": "):" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git filter-repo --path <file> --invert-paths"
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wypchnij wymuszoną, przepisana historię do repozytorium zdalnego:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin --force"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zmień wszystkie skompromitowane dane uwierzytelniające:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Natychmiast zmień hasła, klucze API, tokeny dostępu i inne poufne dane."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wskazówka:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Poinformuj zespół i sprawdź forki oraz klony repozytorium, jeśli dane były publicznie dostępne."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 73,
-    "translations": {
-      "uk": {
-        "question": "73. Що таке detached HEAD у Git і як з ним працювати?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Що це таке:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "detached HEAD", "code": true },
-                          {
-                            "text": " - це стан, коли Git вказує безпосередньо на конкретний коміт або тег, а не на гілку."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Коміти, створені в цьому стані, не прив’язані до жодної гілки і можуть бути втрачені."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Як перейти в detached HEAD:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout <commit_hash>\ngit switch --detach <tag_name>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Робота у detached HEAD:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Можна змінювати код і створювати коміти." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Щоб зберегти коміти, потрібно створити нову гілку:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git checkout -b new-branch"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вихід без збереження комітів:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Detached HEAD зазвичай використовується для тестування старих комітів, перегляду тегів або експериментів без впливу на основну гілку."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "73. What is detached HEAD in Git and how do you work with it?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "What it is:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "detached HEAD", "code": true },
-                          {
-                            "text": " is a state where Git points directly to a specific commit or tag instead of a branch."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Commits created in this state are not attached to any branch and may be lost."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "How to enter detached HEAD:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout <commit_hash>\ngit switch --detach <tag_name>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Working in detached HEAD:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "You can modify code and create commits." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "To keep those commits, create a new branch:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git checkout -b new-branch"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Exit without keeping commits:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Detached HEAD is commonly used for testing old commits, inspecting tags, or experimenting without affecting the main branch."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "73. Czym jest detached HEAD w Git i jak z nim pracować?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Czym jest:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "detached HEAD", "code": true },
-                          {
-                            "text": " to stan, w którym Git wskazuje bezpośrednio na konkretny commit lub tag, a nie na gałąź."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Commity utworzone w tym stanie nie są przypisane do żadnej gałęzi i mogą zostać utracone."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jak przejść do detached HEAD:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout <commit_hash>\ngit switch --detach <tag_name>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Praca w detached HEAD:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Można modyfikować kod i tworzyć commity." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Aby zachować commity, należy utworzyć nową gałąź:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git checkout -b new-branch"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wyjście bez zachowania commitów:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Detached HEAD jest często używany do testowania starszych commitów, przeglądania tagów lub eksperymentów bez wpływu na główną gałąź."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 74,
-    "translations": {
-      "uk": {
-        "question": "74. Як у Git відновити втрачений або випадково видалений stash?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Перевірити наявні stash:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git stash list"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відновити конкретний stash:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git stash apply stash@{n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Команда застосовує зміни, не видаляючи їх зі списку stash."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Якщо stash було випадково видалено (git stash drop або pop):"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Знайти commit, який зберіг stash:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git fsck --no-reflogs | grep commit"
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Застосувати його вручну:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash apply <commit_hash>"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Порада:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Видалений stash не зникає одразу - Git зберігає об’єкти до запуску garbage collector."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "74. How can you recover a lost or accidentally deleted stash in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Check existing stashes:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git stash list"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Restore a specific stash:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git stash apply stash@{n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This applies the changes without removing them from the stash list."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "If the stash was accidentally dropped (git stash drop or pop):"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Find the commit that stored the stash:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git fsck --no-reflogs | grep commit"
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Apply it manually:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash apply <commit_hash>"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Tip:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A deleted stash is not immediately lost - Git keeps objects until garbage collection runs."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "74. Jak w Git odzyskać utracony lub przypadkowo usunięty stash?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sprawdzić istniejące stash’e:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git stash list"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przywrócić konkretny stash:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git stash apply stash@{n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Polecenie stosuje zmiany bez usuwania ich z listy stash."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jeśli stash został przypadkowo usunięty (git stash drop lub pop):"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Odnaleźć commit przechowujący stash:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git fsck --no-reflogs | grep commit"
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Zastosować go ręcznie:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git stash apply <commit_hash>"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wskazówka:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Usunięty stash nie znika od razu - Git przechowuje obiekty do momentu uruchomienia garbage collector."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 75,
-    "translations": {
-      "uk": {
-        "question": "75. Як змінити повідомлення останнього коміту у Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Якщо коміт ще не запушений на remote:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit --amend -m \"Нове повідомлення коміту\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Якщо коміт вже запушений:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Змінити повідомлення локально:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git commit --amend -m \"Нове повідомлення коміту\""
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Примусово оновити remote:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git push --force"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Порада:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Не використовуйте --force у спільних або захищених гілках (main, develop), щоб не порушити історію інших розробників."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "75. How can you change the message of the last commit in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "If the commit has not been pushed yet:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit --amend -m \"New commit message\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "If the commit has already been pushed:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Amend the commit locally:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git commit --amend -m \"New commit message\""
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Force-push the updated commit:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git push --force"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Tip:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Avoid using --force on shared or protected branches (such as main or develop), as it can break history for other developers."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "75. Jak zmienić wiadomość ostatniego commita w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jeśli commit nie został jeszcze wypchnięty na remote:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit --amend -m \"Nowa wiadomość commita\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jeśli commit został już wypchnięty:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Zmienić commit lokalnie:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git commit --amend -m \"Nowa wiadomość commita\""
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Wymusić aktualizację remote:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git push --force"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wskazówka:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Nie używaj --force na wspólnych lub chronionych gałęziach (main, develop), aby nie uszkodzić historii innych programistów."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 76,
-    "translations": {
-      "uk": {
-        "question": "76. Що таке Pull Request (PR) і як він працює у Git-платформах?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pull Request", "bold": true },
-              {
-                "text": " - це запит на внесення змін з однієї гілки в іншу (зазвичай з feature-гілки у main або develop) через Git-платформи: GitHub, GitLab, Bitbucket."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Розробник створює окрему гілку та робить коміти." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Пушить гілку у віддалений репозиторій." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Створює Pull Request у веб-інтерфейсі, додає опис змін та рев’юверів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Команда проводить code review, залишає коментарі, запускається CI/CD."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Після схвалення PR зливається (merge) у цільову гілку."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги PR:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Контроль якості коду через code review." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Прозора історія обговорень та змін." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Автоматичні перевірки (тести, лінт, білд) через CI/CD."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "76. What is a Pull Request (PR) and how does it work on Git platforms?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pull Request", "bold": true },
-              {
-                "text": " is a request to merge changes from one branch into another (usually from a feature branch into main or develop) using Git platforms such as GitHub, GitLab, or Bitbucket."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A developer creates a separate branch and makes commits."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "The branch is pushed to the remote repository." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A Pull Request is created in the web interface with a description and reviewers."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The team reviews the code, leaves comments, and CI/CD checks are triggered."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "After approval, the PR is merged into the target branch."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Benefits of PRs:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Improved code quality through code reviews." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Clear history of discussions and changes." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automated checks via CI/CD pipelines." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "76. Czym jest Pull Request (PR) i jak działa na platformach Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pull Request", "bold": true },
-              {
-                "text": " to prośba o połączenie zmian z jednej gałęzi do innej (najczęściej z gałęzi feature do main lub develop) za pomocą platform Git, takich jak GitHub, GitLab czy Bitbucket."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Programista tworzy osobną gałąź i wykonuje commity."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wypycha gałąź do zdalnego repozytorium." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tworzy Pull Request w interfejsie webowym, dodając opis i recenzentów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zespół przeprowadza code review, dodaje komentarze i uruchamia się CI/CD."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Po zatwierdzeniu PR jest scalany z gałęzią docelową."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety Pull Requestów:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kontrola jakości kodu poprzez code review." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przejrzysta historia dyskusji i zmian." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automatyczne testy i sprawdzenia dzięki CI/CD." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 77,
-    "translations": {
-      "uk": {
-        "question": "77. Як внести зміни в уже відкритий Pull Request?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перейти у гілку, на основі якої створено Pull Request:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout feature-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Внести необхідні зміни та створити новий коміт:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add .\ngit commit -m \"Update changes for PR\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Запушити зміни у віддалений репозиторій:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature-branch"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pull Request автоматично оновиться на платформі (GitHub, GitLab, Bitbucket) після пушу в ту саму гілку."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "77. How can you update an already opened Pull Request?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Switch to the branch used for the Pull Request:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout feature-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Make the required changes and create a new commit:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add .\ngit commit -m \"Update changes for PR\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Push the changes to the remote repository:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature-branch"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The Pull Request will be automatically updated on the platform (GitHub, GitLab, Bitbucket) after pushing to the same branch."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "77. Jak wprowadzić zmiany do już otwartego Pull Requesta?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przejść do gałęzi, na podstawie której utworzono Pull Request:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout feature-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wprowadzić wymagane zmiany i utworzyć nowy commit:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add .\ngit commit -m \"Update changes for PR\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wypchnąć zmiany do zdalnego repozytorium:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature-branch"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pull Request zostanie automatycznie zaktualizowany na platformie (GitHub, GitLab, Bitbucket) po wypchnięciu zmian do tej samej gałęzi."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 78,
-    "translations": {
-      "uk": {
-        "question": "78. Що таке code review (перевірка коду) у контексті Git і як він працює?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Code review", "bold": true },
-              {
-                "text": " - це процес перевірки змін у коді іншими розробниками перед їх злиттям у основну гілку."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Зазвичай відбувається через " },
-              { "text": "Pull Request", "bold": true },
-              { "text": " (PR) у Git-платформах: GitHub, GitLab, Bitbucket." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Розробник створює гілку та робить коміти." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відкриває Pull Request із описом змін." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Рев’ювери перевіряють код (логіка, стиль, тести, безпека)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Залишають коментарі або запитують правки." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Після схвалення PR зливається в цільову гілку." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Покращення якості коду." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Раннє виявлення багів." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Обмін знаннями в команді." }]
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "78. What is code review in the context of Git and how does it work?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Code review", "bold": true },
-              {
-                "text": " is the process of reviewing code changes by other developers before merging them into the main branch."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "It is usually done via a " },
-              { "text": "Pull Request", "bold": true },
-              {
-                "text": " (PR) on Git platforms such as GitHub, GitLab, or Bitbucket."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "A developer creates a branch and makes commits." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Opens a Pull Request with a description of the changes."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reviewers check the code (logic, style, tests, security)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "They leave comments or request changes." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "After approval, the PR is merged into the target branch."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Benefits:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Improves code quality." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Catches bugs early." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Encourages knowledge sharing within the team." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "78. Czym jest code review w kontekście Git i jak działa?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Code review", "bold": true },
-              {
-                "text": " to proces sprawdzania zmian w kodzie przez innych programistów przed scaleniem ich z główną gałęzią."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Zwykle odbywa się za pomocą " },
-              { "text": "Pull Requesta", "bold": true },
-              {
-                "text": " (PR) na platformach Git takich jak GitHub, GitLab czy Bitbucket."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Programista tworzy gałąź i wykonuje commity." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Otwiera Pull Request z opisem zmian." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Recenzenci sprawdzają kod (logika, styl, testy, bezpieczeństwo)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dodają komentarze lub proszą o poprawki." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Po zatwierdzeniu PR jest scalany z gałęzią docelową."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Poprawa jakości kodu." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Wczesne wykrywanie błędów." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lepsze dzielenie się wiedzą w zespole." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 79,
-    "translations": {
-      "uk": {
-        "question": "79. Як вирішувати конфлікти в Pull Request перед злиттям у Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Виявити конфлікти:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "GitHub/GitLab позначає PR повідомленням "
-                          },
-                          {
-                            "text": "“This branch has conflicts that must be resolved”",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оновити локальну feature-гілку від цільової:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout feature-branch\ngit fetch origin\ngit merge origin/main   # або target-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вирішити конфлікти вручну:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Відкрити файли з конфліктами та маркерами:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "<<<<<<< HEAD\nкод main\n=======\nкод feature-branch\n>>>>>>> feature-branch"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Об’єднати або вибрати потрібні зміни та видалити маркери."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Позначити файли як вирішені:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Завершити merge:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оновити Pull Request:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature-branch"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Порада: для зручності використовуйте візуальні merge-інструменти (VS Code, IntelliJ, Sourcetree)."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "79. How do you resolve conflicts in a Pull Request before merging in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Detect conflicts:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "GitHub/GitLab marks the PR with " },
-                          {
-                            "text": "\"This branch has conflicts that must be resolved\"",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Update the local feature branch from the target branch:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout feature-branch\ngit fetch origin\ngit merge origin/main   # or target-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Resolve conflicts manually:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Open files with conflict markers:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "<<<<<<< HEAD\ncode from main\n=======\ncode from feature-branch\n>>>>>>> feature-branch"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Choose or combine the correct changes and remove the markers."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mark conflicts as resolved:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Complete the merge:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Push updates to refresh the Pull Request:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature-branch"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Tip: visual merge tools (VS Code, IntelliJ, Sourcetree) make conflict resolution easier."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "79. Jak rozwiązywać konflikty w Pull Requeście przed scaleniem w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wykryć konflikty:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "GitHub/GitLab oznacza PR komunikatem " },
-                          {
-                            "text": "\"This branch has conflicts that must be resolved\"",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zaktualizować lokalną gałąź feature względem docelowej:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git checkout feature-branch\ngit fetch origin\ngit merge origin/main   # lub target-branch"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rozwiązać konflikty ręcznie:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Otworzyć pliki z markerami konfliktów:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "<<<<<<< HEAD\nkod z main\n=======\nkod z feature-branch\n>>>>>>> feature-branch"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wybrać lub połączyć poprawne zmiany i usunąć markery."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Oznaczyć pliki jako rozwiązane:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <file>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zakończyć scalanie:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git commit"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wypchnąć zmiany, aby zaktualizować Pull Request:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git push origin feature-branch"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wskazówka: narzędzia wizualne (VS Code, IntelliJ, Sourcetree) znacznie ułatwiają rozwiązywanie konfliktów."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 80,
-    "translations": {
-      "uk": {
-        "question": "80. У чому різниця між git pull і комбінацією git fetch + git merge?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git fetch", "code": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Завантажує зміни з віддаленого репозиторію в локальні remote-гілки, не змінюючи поточну гілку."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Дозволяє переглянути зміни перед їх інтеграцією."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git merge", "code": true },
-                  { "text": " після fetch" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Локально об’єднує зміни з remote-гілки у поточну гілку."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Дає повний контроль над процесом злиття та вирішенням конфліктів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git pull", "code": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Комбінує git fetch + git merge в одну команду."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Менш контрольований, оскільки злиття відбувається автоматично."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Висновок:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git fetch", "code": true },
-                  { "text": " + " },
-                  { "text": "git merge", "code": true },
-                  { "text": " - безпечніше та контрольованіше." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git pull", "code": true },
-                  { "text": " - швидко і зручно для простої синхронізації." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "80. What is the difference between git pull and the combination of git fetch + git merge?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git fetch", "code": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Downloads changes from the remote repository into local remote branches without modifying the current branch."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Allows you to review changes before integrating them."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git merge", "code": true },
-                  { "text": " after fetch" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Merges the fetched changes into the current local branch."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Provides full control over the merge process and conflict resolution."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git pull", "code": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "A shortcut that performs git fetch followed by git merge."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Less controlled since the merge happens automatically."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Conclusion:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git fetch", "code": true },
-                  { "text": " + " },
-                  { "text": "git merge", "code": true },
-                  { "text": " - safer and more controlled." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git pull", "code": true },
-                  {
-                    "text": " - faster and convenient for quick synchronization."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "80. Jaka jest różnica między git pull a kombinacją git fetch + git merge?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git fetch", "code": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Pobiera zmiany z repozytorium zdalnego do lokalnych gałęzi remote bez modyfikowania bieżącej gałęzi."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Umożliwia przegląd zmian przed ich integracją."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git merge", "code": true },
-                  { "text": " po fetch" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Scala pobrane zmiany z bieżącą gałęzią lokalną."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Daje pełną kontrolę nad procesem scalania i rozwiązywaniem konfliktów."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git pull", "code": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Skrót wykonujący git fetch oraz git merge w jednym kroku."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Mniej kontrolowany, ponieważ scalanie odbywa się automatycznie."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wniosek:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git fetch", "code": true },
-                  { "text": " + " },
-                  { "text": "git merge", "code": true },
-                  { "text": " - bezpieczniejsze i bardziej kontrolowane." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git pull", "code": true },
-                  { "text": " - szybkie i wygodne do prostej synchronizacji." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 81,
-    "translations": {
-      "uk": {
-        "question": "81. Які підходи використовують для роботи з великими файлами в Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git LFS (Large File Storage)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Зберігає великі файли (зображення, відео, бінарники) поза основним Git-репозиторієм."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "У Git зберігаються лише посилання, а самі файли - у спеціальному сховищі."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ".gitignore", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Ігнорування великих тимчасових або згенерованих файлів (node_modules, build-артефакти)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CI/CD артефакти", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Зберігання бінарних файлів у S3, Nexus, Artifactory замість Git."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Розділення репозиторіїв", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Винос великих ресурсів в окремі репозиторії або підмодулі."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для frontend-проєктів найчастіше використовують Git LFS для медіа або зовнішні сховища для build-артефактів."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "81. What approaches are used to work with large files in Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git LFS (Large File Storage)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stores large files (images, videos, binaries) outside the main Git repository."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Only file references are kept in Git, while actual content is stored separately."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ".gitignore", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Ignore large generated or temporary files (node_modules, build artifacts)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CI/CD artifacts", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Store binaries in S3, Nexus, or Artifactory instead of Git."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Repository splitting", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Move large assets into separate repositories or submodules."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "For frontend projects, Git LFS is commonly used for media files, while build artifacts are stored externally."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "81. Jakie podejścia stosuje się do pracy z dużymi plikami w Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git LFS (Large File Storage)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przechowuje duże pliki (obrazy, wideo, pliki binarne) poza głównym repozytorium Git."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "W Git zapisywane są tylko referencje do plików."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": ".gitignore", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Ignorowanie dużych plików tymczasowych i generowanych (node_modules, artefakty builda)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Artefakty CI/CD", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przechowywanie plików binarnych w S3, Nexus lub Artifactory zamiast w Git."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podział repozytorium", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wydzielanie dużych zasobów do osobnych repozytoriów lub submodułów."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W projektach frontendowych najczęściej stosuje się Git LFS dla multimediów oraz zewnętrzne storage dla artefaktów builda."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 82,
-    "translations": {
-      "uk": {
-        "question": "82. Які техніки можна застосувати для підвищення продуктивності при роботі з великим репозиторієм Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Shallow clone", "bold": true },
-                  { "text": " (--depth)" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Завантаження лише останніх комітів для зменшення обсягу історії."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sparse checkout / Partial clone", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Клонування тільки потрібних директорій або файлів за допомогою git sparse-checkout."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git garbage collection (git gc)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Оптимізація та очищення Git-обʼєктів:" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git gc --aggressive --prune=now"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Розбиття монорепозиторію", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Використання submodules або subtree для ізоляції великих компонентів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оптимальний .gitignore", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Зменшення кількості відстежуваних файлів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git LFS", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Винесення великих медіа- та бінарних файлів з основної історії Git."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CI/CD кешування", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Використання кешів залежностей та Docker layer cache замість зберігання артефактів у Git."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "На практиці у CI часто комбінують shallow clone + sparse checkout для швидких білдів."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "82. What techniques can be used to improve performance when working with a large Git repository?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Shallow clone", "bold": true },
-                  { "text": " (--depth)" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Fetch only recent commits to reduce repository history size."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sparse checkout / Partial clone", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Clone only required directories or files using git sparse-checkout."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git garbage collection (git gc)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Optimize and clean Git objects:" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git gc --aggressive --prune=now"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Monorepo splitting", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Use submodules or subtree to isolate large components."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optimized .gitignore", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Reduce the number of tracked files."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git LFS", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Move large media and binary files out of the main Git history."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CI/CD caching", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Use dependency caches and Docker layer caching instead of storing artifacts in Git."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In CI pipelines, shallow clone combined with sparse checkout is commonly used for faster builds."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "82. Jakie techniki można zastosować, aby poprawić wydajność pracy z dużym repozytorium Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Shallow clone", "bold": true },
-                  { "text": " (--depth)" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Pobieranie tylko ostatnich commitów w celu zmniejszenia historii repozytorium."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sparse checkout / Partial clone", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Klonowanie tylko wybranych katalogów lub plików przy użyciu git sparse-checkout."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git garbage collection (git gc)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Optymalizacja i czyszczenie obiektów Git:"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git gc --aggressive --prune=now"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podział monorepo", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Użycie submodules lub subtree do izolowania dużych komponentów."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dobrze skonfigurowany .gitignore", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zmniejszenie liczby śledzonych plików."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git LFS", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przeniesienie dużych plików multimedialnych i binarnych poza główną historię Git."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Cache w CI/CD", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wykorzystywanie cache zależności i warstw Dockera zamiast przechowywania artefaktów w Git."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W praktyce w CI często łączy się shallow clone oraz sparse checkout w celu przyspieszenia buildów."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 83,
-    "translations": {
-      "uk": {
-        "question": "83. Що таке shallow clone у Git і коли доцільно його застосовувати?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Shallow clone", "bold": true },
-              {
-                "text": " - це клонування Git-репозиторію з обмеженою історією комітів. Замість повної історії завантажується лише задана кількість останніх комітів."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git clone --depth <N> <repo-url>"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "де " },
-              { "text": "<N>", "code": true },
-              {
-                "text": " - кількість останніх комітів, які потрібно завантажити."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "значно швидше клонування репозиторію;" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "менший розмір локального репозиторію;" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ідеально підходить для CI/CD, коли потрібен лише актуальний стан коду."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Недоліки:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "обмежена історія комітів - неможливо аналізувати старі зміни;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ускладнена робота з rebase, bisect та пошуком у глибокій історії."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Shallow clone застосовують, коли потрібен лише поточний стан проєкту без повної історії - наприклад, для білдів і тестів у CI."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "83. What is a shallow clone in Git and when should it be used?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Shallow clone", "bold": true },
-              {
-                "text": " is a Git repository clone with a limited commit history. Instead of fetching the entire history, only the most recent commits are downloaded."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git clone --depth <N> <repo-url>"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "where " },
-              { "text": "<N>", "code": true },
-              {
-                "text": " is the number of most recent commits to fetch."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Advantages:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "significantly faster cloning;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "smaller repository size;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ideal for CI/CD pipelines where only the latest code state is required."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Limitations:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "limited commit history - older changes cannot be fully analyzed;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "more difficult to use rebase, bisect, or deep history search."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Shallow clone is commonly used when only the current state of the project is needed, such as in CI builds or automated testing."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "83. Czym jest shallow clone w Git i kiedy warto go używać?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Shallow clone", "bold": true },
-              {
-                "text": " to klonowanie repozytorium Git z ograniczoną historią commitów. Zamiast pełnej historii pobierana jest tylko określona liczba ostatnich commitów."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git clone --depth <N> <repo-url>"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "gdzie " },
-              { "text": "<N>", "code": true },
-              {
-                "text": " oznacza liczbę ostatnich commitów do pobrania."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "znacznie szybsze klonowanie repozytorium;" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "mniejszy rozmiar lokalnego repozytorium;" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "idealne rozwiązanie dla CI/CD, gdy potrzebny jest tylko aktualny stan kodu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wady:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ograniczona historia commitów - brak pełnego wglądu w stare zmiany;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "utrudniona praca z rebase, bisect oraz analizą głębokiej historii."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Shallow clone stosuje się, gdy potrzebny jest jedynie aktualny stan projektu - np. podczas buildów i testów w CI."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 84,
-    "translations": {
-      "uk": {
-        "question": "84. Які підходи можна застосувати для зменшення розміру репозиторію Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Прибрати непотрібні файли з історії",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Використати git filter-repo (сучасна заміна git filter-branch):"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git filter-repo --path <file> --invert-paths"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Команда повністю видаляє файл з усієї історії репозиторію."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Винести великі файли з репозиторію",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Використовувати Git LFS для зберігання бінарників, зображень та відео."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Запустити очищення та оптимізацію Git",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git gc --aggressive --prune=now"
-                  },
-                  {
-                    "type": "paragraph",
-                    "children": [
-                      {
-                        "text": "Стискає об’єкти та видаляє непотрібні дані."
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Видалити застарілі гілки та теги", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Локально:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git branch -D <branch>"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Віддалено:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git push origin --delete <branch>"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оптимізувати роботу в CI/CD", "bold": true },
-                  {
-                    "type": "paragraph",
-                    "children": [
-                      {
-                        "text": "Використовувати shallow clone (--depth 1) для білдів замість повного репозиторію."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "На практиці найефективніша стратегія - винесення великих файлів у Git LFS та очищення історії через git filter-repo."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "84. What approaches can be used to reduce the size of a Git repository?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Remove unnecessary files from history",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Use git filter-repo (modern replacement for git filter-branch):"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git filter-repo --path <file> --invert-paths"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "This removes the file from the entire repository history."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Move large files out of the repository",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Use Git LFS to store binaries, images, and media files."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Run Git garbage collection", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git gc --aggressive --prune=now"
-                  },
-                  {
-                    "type": "paragraph",
-                    "children": [
-                      {
-                        "text": "Compresses objects and removes unreachable data."
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Delete obsolete branches and tags", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Locally:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git branch -D <branch>"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Remotely:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git push origin --delete <branch>"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optimize CI/CD usage", "bold": true },
-                  {
-                    "type": "paragraph",
-                    "children": [
-                      {
-                        "text": "Use shallow clone (--depth 1) in CI pipelines instead of cloning the full repository."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In real-world projects, the most effective approach is combining Git LFS with history cleanup using git filter-repo."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "84. Jakie podejścia można zastosować, aby zmniejszyć rozmiar repozytorium Git?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Usunięcie niepotrzebnych plików z historii",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Użyć git filter-repo (nowoczesny zamiennik git filter-branch):"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git filter-repo --path <file> --invert-paths"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Polecenie usuwa plik z całej historii repozytorium."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wyniesienie dużych plików poza repozytorium",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zastosować Git LFS do przechowywania binariów i multimediów."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Uruchomienie czyszczenia Git", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git gc --aggressive --prune=now"
-                  },
-                  {
-                    "type": "paragraph",
-                    "children": [
-                      {
-                        "text": "Kompresuje obiekty i usuwa nieużywane dane."
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Usunięcie starych gałęzi i tagów", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Lokalnie:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git branch -D <branch>"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Zdalnie:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git push origin --delete <branch>"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optymalizacja CI/CD", "bold": true },
-                  {
-                    "type": "paragraph",
-                    "children": [
-                      {
-                        "text": "Stosować shallow clone (--depth 1) w pipeline’ach zamiast pełnego klonowania."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W praktyce najlepsze efekty daje połączenie Git LFS oraz czyszczenia historii za pomocą git filter-repo."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 85,
-    "translations": {
-      "uk": {
-        "question": "85. Що таке Git LFS і як ним користуватись?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git LFS (Large File Storage)", "bold": true },
-              {
-                "text": " - це розширення Git для зберігання великих файлів (зображення, відео, бінарники) поза основною історією репозиторію. У Git зберігаються лише спеціальні посилання (пойнтери), а самі файли розміщуються у зовнішньому сховищі."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Установити Git LFS:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git lfs install"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вказати типи файлів для зберігання в LFS:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git lfs track \"*.png\"\ngit lfs track \"*.mp4\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Додати та закомітити файли як звичайно:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add .gitattributes image.png\ngit commit -m \"Add image with Git LFS\"\ngit push origin main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "репозиторій не роздувається великими файлами;" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "швидше клонування та робота з історією;" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "зручно для мультимедіа та бінарних артефактів." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Недоліки:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "потрібна підтримка Git LFS на стороні remote (GitHub, GitLab мають ліміти);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "обмеження за трафіком і обсягом зберігання на безкоштовних тарифах."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git LFS доцільно використовувати, якщо в проєкті є великі файли, що часто змінюються."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "85. What is Git LFS and how do you use it?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git LFS (Large File Storage)", "bold": true },
-              {
-                "text": " is a Git extension designed to handle large files such as images, videos, and binaries outside the main repository history. Git stores lightweight pointer files, while the actual content is stored in a separate storage."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Install Git LFS:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git lfs install"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Track file types to be stored in LFS:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git lfs track \"*.png\"\ngit lfs track \"*.mp4\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Commit and push files as usual:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add .gitattributes image.png\ngit commit -m \"Add image with Git LFS\"\ngit push origin main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Advantages:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "repository size stays small;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "faster cloning and history operations;" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ideal for media and binary artifacts." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Drawbacks:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "requires Git LFS support on the remote side with usage limits;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "storage and bandwidth limits on free plans." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git LFS is recommended when a project contains large files that change frequently."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "85. Czym jest Git LFS i jak z niego korzystać?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git LFS (Large File Storage)", "bold": true },
-              {
-                "text": " to rozszerzenie Git przeznaczone do obsługi dużych plików, takich jak obrazy, wideo i pliki binarne, poza główną historią repozytorium. W repozytorium Git przechowywane są jedynie wskaźniki do tych plików."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zainstalować Git LFS:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git lfs install"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Oznaczyć typy plików przechowywane w LFS:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git lfs track \"*.png\"\ngit lfs track \"*.mp4\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dodać i zakomitować pliki:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add .gitattributes image.png\ngit commit -m \"Add image with Git LFS\"\ngit push origin main"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "repozytorium nie powiększa się przez duże pliki;" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "szybsze klonowanie i praca z historią;" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "idealne rozwiązanie dla multimediów i binariów." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wady:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "wymaga wsparcia Git LFS po stronie zdalnej i posiada limity;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ograniczenia transferu i przestrzeni na darmowych planach."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git LFS warto stosować w projektach z dużymi plikami często podlegającymi zmianom."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 86,
-    "translations": {
-      "uk": {
-        "question": "86. Як Git інтегрується в CI/CD-процеси?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git є джерелом правди для коду, а CI/CD-системи (GitHub Actions, GitLab CI, Jenkins, Azure DevOps тощо) інтегруються з ним через події (hooks або webhooks)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як це працює:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Push / Pull Request / Merge → тригер для CI/CD-пайплайну."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "CI/CD-система клонує або фетчить Git-репозиторій."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Виконуються автоматичні кроки: білд, тести, лінтинг, деплой."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Результати зберігаються: артефакти, логи, статуси, релізи."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклади інтеграції:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitHub Actions запускає workflow при подіях push або pull_request."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitLab CI використовує файл .gitlab-ci.yml для опису пайплайнів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jenkins реагує на webhooks від GitHub/GitLab і запускає job-и."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ключові моменти:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git визначає, які зміни потрібно перевіряти та деплоїти."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git-теги часто використовують для запуску релізних пайплайнів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Стратегія гілок (Gitflow, trunk-based) напряму впливає на CI/CD."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Отже, Git відповідає за контроль версій і події, а CI/CD - за автоматизацію збірки, тестування та деплою."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "86. How does Git integrate with CI/CD processes?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git serves as the single source of truth for code, while CI/CD systems (GitHub Actions, GitLab CI, Jenkins, Azure DevOps, etc.) integrate with it through events such as hooks or webhooks."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Push / Pull Request / Merge events trigger CI/CD pipelines."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The CI/CD system clones or fetches the Git repository."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Automated steps are executed: build, tests, linting, deployment."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Artifacts, logs, statuses, and releases are generated and stored."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Integration examples:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitHub Actions runs workflows on push and pull_request events."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitLab CI uses the .gitlab-ci.yml file to define pipelines."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jenkins listens to webhooks from GitHub/GitLab to trigger jobs."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key points:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git determines what changes should be built and deployed."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git tags are often used to trigger release pipelines."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Branching strategies (Gitflow, trunk-based) directly affect CI/CD design."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In short, Git provides version control and events, while CI/CD automates building, testing, and deployment."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "86. W jaki sposób Git integruje się z procesami CI/CD?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git jest głównym źródłem prawdy dla kodu, a systemy CI/CD (GitHub Actions, GitLab CI, Jenkins, Azure DevOps itd.) integrują się z nim za pomocą zdarzeń takich jak hooki lub webhooki."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak to działa:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zdarzenia Push / Pull Request / Merge uruchamiają pipeline CI/CD."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "System CI/CD klonuje lub pobiera repozytorium Git."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wykonywane są kroki automatyczne: build, testy, linting, deployment."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zapisywane są artefakty, logi, statusy oraz wydania (releases)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykłady integracji:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitHub Actions uruchamia workflow przy zdarzeniach push i pull_request."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitLab CI korzysta z pliku .gitlab-ci.yml do definiowania pipeline’ów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jenkins reaguje na webhooki z GitHub/GitLab i uruchamia zadania."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kluczowe aspekty:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git określa, które zmiany mają być budowane i wdrażane."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tagi Git są często używane do uruchamiania pipeline’ów release."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Strategia gałęzi (Gitflow, trunk-based) wpływa na architekturę CI/CD."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Podsumowując: Git odpowiada za wersjonowanie i zdarzenia, a CI/CD za automatyzację budowania, testowania i wdrażania."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 87,
-    "translations": {
-      "uk": {
-        "question": "87. Як налаштовується автоматизоване розгортання (deployment) з використанням Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Автоматизоване розгортання з використанням Git базується на інтеграції з CI/CD-системами та реакції на події в репозиторії (push, merge, теги)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ключові кроки:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Push або merge у визначену гілку (main, develop, release) → тригер CI/CD-пайплайну."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "CI/CD-система (GitHub Actions, GitLab CI, Jenkins, Azure DevOps):"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "клонує або фетчить репозиторій;" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "виконує білд проєкту (наприклад, npm install && npm run build);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "запускає тести та лінтери;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "створює артефакти (Docker-образ, build bundle)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Розгортання (deployment):" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "публікація артефактів або Docker-образів у реєстр (ECR, Docker Hub);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "деплой на інфраструктуру (Kubernetes, ECS, сервер через SSH, Vercel, Netlify)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Моніторинг і rollback: перевірка статусу деплою та можливість відкату на попередній тег або реліз."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклади:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git push origin main", "code": true },
-                  {
-                    "text": " → GitHub Actions запускає пайплайн і деплоїть застосунок (наприклад, на AWS або Vercel)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "git tag v1.0.0 && git push origin v1.0.0",
-                    "code": true
-                  },
-                  {
-                    "text": " → запускається релізний пайплайн з деплоєм у продакшн."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Основна ідея: Git відповідає за контроль версій і події, а CI/CD-пайплайни автоматично виконують білд, тести та розгортання."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "87. How is automated deployment configured using Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Automated deployment using Git is based on integration with CI/CD systems and reacting to repository events such as push, merge, or tags."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key steps:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Push or merge into a target branch (main, develop, release) triggers a CI/CD pipeline."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The CI/CD system (GitHub Actions, GitLab CI, Jenkins, Azure DevOps):"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "clones or fetches the repository;" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "builds the project (e.g., npm install && npm run build);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "runs tests and linters;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "creates artifacts (Docker images, build bundles)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Deployment:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "pushes artifacts or Docker images to a registry (ECR, Docker Hub);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "deploys to infrastructure (Kubernetes, ECS, SSH servers, Vercel, Netlify)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Monitoring and rollback: tracking deployment status and reverting to a previous tag or release if needed."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In essence, Git acts as the trigger and version control system, while CI/CD pipelines automate build, test, and deployment processes."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "87. Jak konfiguruje się automatyczne wdrażanie (deployment) z użyciem Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Automatyczne wdrażanie z wykorzystaniem Git opiera się na integracji z systemami CI/CD oraz reagowaniu na zdarzenia w repozytorium (push, merge, tagi)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne kroki:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Push lub merge do określonej gałęzi (main, develop, release) uruchamia pipeline CI/CD."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "System CI/CD (GitHub Actions, GitLab CI, Jenkins, Azure DevOps):"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "klonuje lub pobiera repozytorium;" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "buduje projekt (np. npm install && npm run build);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "uruchamia testy i linters;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "tworzy artefakty (obrazy Docker, paczki build)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wdrażanie:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "publikacja artefaktów lub obrazów Docker w rejestrze (ECR, Docker Hub);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "wdrożenie na infrastrukturę (Kubernetes, ECS, serwery SSH, Vercel, Netlify)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Monitoring i rollback: monitorowanie wdrożenia i możliwość cofnięcia do poprzedniego taga lub wydania."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Podsumowując: Git odpowiada za wersjonowanie i zdarzenia, a pipeline’y CI/CD automatyzują proces budowy, testów i wdrażania."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 88,
-    "translations": {
-      "uk": {
-        "question": "88. Як налаштувати правила захисту гілок у Git, щоб інтегрувати їх із CI/CD?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Захищені гілки (наприклад, main або release) використовуються для того, щоб у продакшен не потрапили неякісні або неперевірені зміни."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ключові правила захисту:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Заборона прямих push у гілку - всі зміни лише через Pull Request."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Обов’язкове проходження CI/CD перед злиттям:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "успішний білд;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "успішні тести (green);" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "лінтери та форматтери без помилок." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обов’язковий code review - мінімум 1–2 схвалення перед merge."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Актуальність гілки - PR має бути синхронізований з останнім main (без конфліктів)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обов’язковий підпис комітів (GPG або SSO) для підвищення безпеки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Контроль історії - дозволити лише squash або rebase (без merge-комітів)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад (GitHub):" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Settings → Branches → Branch protection rules" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Require pull request reviews" }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Require status checks to pass before merging (CI)"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Require signed commits" }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Require linear history" }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Результат: злиття і деплой можливі лише після успішного проходження CI/CD, що гарантує стабільність продакшену."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "88. How can branch protection rules be configured in Git to integrate with CI/CD?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Protected branches (such as main or release) ensure that untested or low-quality changes do not reach production."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key protection rules:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Disable direct pushes - all changes must go through Pull Requests."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Require CI/CD checks before merging:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "successful build;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "passing tests;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "linting and formatting checks." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mandatory code review - at least 1–2 approvals." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Branch must be up to date with the target branch (no conflicts)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Require signed commits (GPG or SSO) for security."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Enforce linear history (squash or rebase only)." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "As a result, deployments are triggered only after successful CI/CD validation, protecting production stability."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "88. Jak skonfigurować zasady ochrony gałęzi w Git, aby zintegrować je z CI/CD?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Chronione gałęzie (np. main lub release) zapobiegają trafieniu nieprzetestowanego kodu do środowiska produkcyjnego."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kluczowe zasady ochrony:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakaz bezpośrednich pushy - zmiany tylko przez Pull Request."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wymagane sprawdzenia CI/CD przed scaleniem:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "poprawny build;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "przechodzące testy;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "linting i formatowanie bez błędów." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obowiązkowy code review - co najmniej 1–2 akceptacje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Gałąź musi być aktualna względem main (bez konfliktów)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wymagane podpisane commity (GPG/SSO)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wymuszenie liniowej historii (squash lub rebase)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Efekt: wdrożenie następuje tylko po pomyślnym przejściu CI/CD, co zapewnia stabilność produkcji."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 89,
-    "translations": {
-      "uk": {
-        "question": "89. Яку роль відіграють Git hooks (гачки) в автоматизації процесів?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git hooks - це скрипти, які автоматично виконуються при певних подіях Git (commit, push, merge тощо). Вони дозволяють автоматизувати перевірки та дії безпосередньо в процесі розробки."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні ролі в автоматизації:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Контроль якості коду перед комітом:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "запуск лінтерів (ESLint, Prettier);" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "перевірка форматування;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "блокування коміту з помилками." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Автоматичний запуск тестів:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "pre-push може запускати unit або integration тести, щоб не допустити пушу зламаного коду."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Підвищення безпеки:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "перевірка на наявність секретів (ключі, паролі);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "примусове підписання комітів." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Уніфікація процесів команди:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "перевірка commit message за Conventional Commits;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "автогенерація changelog;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "оновлення документації." }]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "На практиці Git hooks часто керуються через інструменти Husky або lefthook для зручної інтеграції в командні проєкти."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "89. What role do Git hooks play in process automation?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git hooks are scripts that run automatically on specific Git events (commit, push, merge, etc.). They help automate checks and actions directly in the development workflow."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key roles in automation:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Code quality enforcement before commit:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "run linters (ESLint, Prettier);" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "check formatting;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "block commits with errors." }]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automated test execution:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "pre-push hooks can run unit or integration tests to prevent broken code from being pushed."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Security enforcement:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "detect committed secrets (keys, passwords);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "enforce signed commits." }]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Process standardization across the team:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "validate commit messages (Conventional Commits);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "auto-generate changelogs;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "update documentation." }]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In practice, tools like Husky or lefthook are commonly used to manage Git hooks in team projects."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "89. Jaką rolę odgrywają Git hooks w automatyzacji procesów?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git hooks to skrypty uruchamiane automatycznie przy określonych zdarzeniach Git (commit, push, merge itp.). Pozwalają automatyzować działania bezpośrednio w cyklu pracy programisty."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne role w automatyzacji:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kontrola jakości kodu przed commitem:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "uruchamianie linterów (ESLint, Prettier);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "sprawdzanie formatowania;" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "blokowanie commitów z błędami." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automatyczne uruchamianie testów:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "hook pre-push może uruchamiać testy jednostkowe lub integracyjne."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zwiększenie bezpieczeństwa:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "wykrywanie sekretów w commitach;" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "wymuszanie podpisanych commitów." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ujednolicenie procesów zespołu:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "walidacja komunikatów commitów;" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "automatyczne generowanie changelogów;" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "aktualizacja dokumentacji." }]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W praktyce Git hooks są często zarządzane za pomocą narzędzi takich jak Husky lub lefthook."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 90,
-    "translations": {
-      "uk": {
-        "question": "90. Як Git використовується для відкату змін у разі невдалого деплою?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git робить rollback безпечним і контрольованим, оскільки кожен реліз базується на конкретному коміті або тегу. У разі невдалого деплою можна швидко повернутися до стабільного стану коду."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні підходи до відкату:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Повернення до стабільного тегу або коміту:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "переключення на попередній релізний тег:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git checkout v1.2.3"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "повторний деплой цього стану коду." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Використання git revert:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "створює новий коміт, який скасовує зміни проблемного коміту:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git revert <commit_hash>"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "безпечний варіант для main-гілки без переписування історії."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rollback через CI/CD:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "деплой зазвичай відбувається з тегів або main;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "можна автоматично redeploy попереднього тегу."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Blue-Green або Canary deployment:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Git виступає джерелом істини для версій коду;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "відкат відбувається шляхом переключення трафіку на попередню версію."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Головна ідея: Git дозволяє миттєво відтворити будь-який попередній стан коду, що робить rollback швидким, передбачуваним і безпечним."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "90. How is Git used to roll back changes after a failed deployment?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git enables safe and predictable rollbacks because each release is tied to a specific commit or tag. In case of a failed deployment, teams can quickly return to a stable version."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Common rollback strategies:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rollback to a stable tag or commit:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "check out a previous release tag:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git checkout v1.2.3"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "redeploy that version of the code." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Using git revert:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "creates a new commit that undoes a faulty one:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git revert <commit_hash>"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "safe for main branches without rewriting history."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CI/CD-based rollback:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "deployments are typically triggered from tags or main;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "pipelines can redeploy the previous tag automatically."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Blue-Green or Canary deployments:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Git acts as the single source of truth for code versions;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "rollback is done by switching traffic to the previous version."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Key idea: Git allows instant reproduction of any previous code state, making rollbacks fast, controlled, and reliable."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "90. Jak Git jest wykorzystywany do cofania zmian po nieudanym wdrożeniu?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git umożliwia bezpieczny i przewidywalny rollback, ponieważ każdy release jest powiązany z konkretnym commitem lub tagiem. W razie nieudanego wdrożenia można szybko wrócić do stabilnej wersji."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Najczęstsze strategie rollbacku:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Powrót do stabilnego tagu lub commita:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "przełączenie na poprzedni tag release:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git checkout v1.2.3"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "ponowne wdrożenie tej wersji." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Użycie git revert:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "tworzy nowy commit cofający błędne zmiany:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git revert <commit_hash>"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "bezpieczne dla gałęzi main bez przepisywania historii."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rollback w CI/CD:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "wdrożenia uruchamiane są z tagów lub main;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "pipeline może automatycznie wdrożyć poprzedni tag."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Blue-Green lub Canary deployment:" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Git jest źródłem prawdy dla wersji kodu;" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "rollback polega na przełączeniu ruchu na poprzednią wersję."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Kluczowa idea: Git pozwala natychmiast odtworzyć dowolny wcześniejszy stan kodu, dzięki czemu rollback jest szybki i bezpieczny."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 91,
-    "translations": {
-      "uk": {
-        "question": "91. Як налаштувати та інтегрувати Git у сучасне IDE для зручної роботи?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Сучасні IDE мають вбудовану або розширювану інтеграцію з Git, що дозволяє виконувати більшість Git-операцій безпосередньо з інтерфейсу редактора."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Підтримка Git у популярних IDE:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "VS Code", "code": true },
-                  {
-                    "text": " - вбудований Source Control + розширення GitLens, Git Graph."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "IntelliJ IDEA / WebStorm", "code": true },
-                  { "text": " - повна інтеграція через VCS." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Visual Studio", "code": true },
-                  { "text": " - Git Tools / Team Explorer." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні кроки налаштування:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відкрити або клонувати Git-репозиторій у IDE." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Переконатися, що Git встановлений і доступний у PATH."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Налаштувати ім’я та email Git (глобально або локально)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Можливості Git в IDE:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "stage / commit / push / pull з UI;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "візуальний diff та blame;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "керування гілками та тегами;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "GUI для вирішення merge-конфліктів;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "інтеграція з Pull Request та Issues." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Інтеграція Git у IDE зменшує кількість перемикань контексту і значно пришвидшує повсякденну розробку."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "91. How can Git be configured and integrated into a modern IDE for efficient work?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Modern IDEs provide built-in or extensible Git integration, allowing developers to perform most version control operations directly from the editor."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Git support in popular IDEs:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "VS Code", "code": true },
-                  {
-                    "text": " - built-in Source Control with extensions like GitLens and Git Graph."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "IntelliJ IDEA / WebStorm", "code": true },
-                  { "text": " - full VCS integration." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Visual Studio", "code": true },
-                  { "text": " - Git Tools / Team Explorer." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Basic setup steps:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Open or clone a Git repository in the IDE." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ensure Git is installed and available in PATH." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Configure Git user name and email." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Git features inside IDEs:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "stage / commit / push / pull from UI;" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "visual diff and blame;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "branch and tag management;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "GUI-based merge conflict resolution;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Pull Request and issue integration." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "IDE integration with Git reduces context switching and significantly improves developer productivity."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "91. Jak skonfigurować i zintegrować Git z nowoczesnym IDE?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Nowoczesne IDE oferują wbudowaną lub rozszerzalną integrację z Git, umożliwiając wykonywanie większości operacji bezpośrednio z poziomu edytora."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Obsługa Git w popularnych IDE:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "VS Code", "code": true },
-                  {
-                    "text": " - wbudowany Source Control + GitLens, Git Graph."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "IntelliJ IDEA / WebStorm", "code": true },
-                  { "text": " - pełna integracja VCS." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Visual Studio", "code": true },
-                  { "text": " - Git Tools / Team Explorer." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Podstawowe kroki konfiguracji:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Otworzyć lub sklonować repozytorium Git w IDE." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Upewnić się, że Git jest zainstalowany i dostępny w PATH."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Skonfigurować nazwę użytkownika i email Git." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Funkcje Git w IDE:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "stage / commit / push / pull z GUI;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "wizualny diff i blame;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "zarządzanie gałęziami i tagami;" }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "graficzne rozwiązywanie konfliktów merge;" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "integracja z Pull Requestami i Issues." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Integracja Git z IDE znacząco przyspiesza pracę i poprawia komfort codziennej pracy programisty."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 92,
-    "translations": {
-      "uk": {
-        "question": "92. Які плюси та мінуси використання GUI для Git у порівнянні з командним рядком?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги GUI для Git:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Візуалізація історії та гілок" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Зручно бачити граф комітів, merge та конфлікти."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Менше помилок у синтаксисі" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Не потрібно запам’ятовувати точні Git-команди."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Швидкість для типових дій" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stage/commit/branch/revert виконуються через UI."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Інтеграція з IDE та CI/CD" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Статус PR, pipeline та конфлікти видно прямо в IDE."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Недоліки GUI:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Обмежений контроль" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Складні операції (rebase -i, filter-repo) зазвичай простіші в CLI."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Менша прозорість" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "GUI може приховувати реальні Git-операції під капотом."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Продуктивність на великих репозиторіях" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "GUI-інструменти можуть працювати повільніше."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Залежність від конкретного інструменту" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Різні GUI мають різний функціонал і UX." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Висновок:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CLI", "code": true },
-                  {
-                    "text": " - повний контроль, автоматизація, складні сценарії."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GUI", "code": true },
-                  { "text": " - зручність, наочність, швидка щоденна робота." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Найкраща практика - комбінувати CLI та GUI залежно від задачі."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "92. What are the pros and cons of using a Git GUI compared to the command line?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Advantages of Git GUI:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Visual representation of history and branches" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Commit graphs and merges are easier to understand."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Fewer syntax errors" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "No need to memorize complex Git commands."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Fast access to common actions" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stage, commit, branch, and revert via UI."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "IDE and CI/CD integration" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "PRs, pipelines, and conflicts visible directly in IDE."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Disadvantages of Git GUI:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Limited control" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Advanced operations are often easier in CLI."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Less transparency" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "GUI may hide what Git actually does internally."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Performance issues on large repositories" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Some GUIs slow down with big histories." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tool dependency" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Different GUIs behave differently." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Conclusion:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CLI", "code": true },
-                  { "text": " - full control, automation, advanced workflows." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GUI", "code": true },
-                  {
-                    "text": " - convenience and visualization for daily tasks."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Best practice is to combine both approaches." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "92. Jakie są zalety i wady korzystania z GUI Git w porównaniu do wiersza poleceń?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety GUI Git:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wizualizacja historii i gałęzi" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Łatwiejsze zrozumienie grafu commitów." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mniej błędów składni" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Brak potrzeby zapamiętywania komend." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Szybki dostęp do typowych operacji" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Stage, commit i merge przez interfejs." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Integracja z IDE i CI/CD" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Widoczność PR i pipeline’ów." }]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wady GUI Git:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ograniczona kontrola" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Zaawansowane operacje łatwiejsze w CLI." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mniejsza przejrzystość" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "GUI może ukrywać szczegóły działania Git."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Problemy z wydajnością" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Duże repozytoria mogą spowalniać GUI." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zależność od narzędzia" },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Różnice między narzędziami GUI." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wniosek:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CLI", "code": true },
-                  { "text": " - pełna kontrola i automatyzacja." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GUI", "code": true },
-                  { "text": " - wygoda i czytelność." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Najlepsze podejście to łączenie obu metod." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 93,
-    "translations": {
-      "uk": {
-        "question": "93. Які популярні плагіни та розширення використовують для інтеграції Git у IDE та редакторах коду?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Для VS Code:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitLens - авторство рядків (blame), історія комітів, гілок, інтеграція з Pull Request."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git Graph - візуальне дерево гілок і комітів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitHub Pull Requests and Issues - керування PR та Issues без виходу з редактора."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git History - швидкий перегляд історії змін файлів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Project Manager + Git інтеграція - зручна робота з кількома репозиторіями."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Для JetBrains IDE (IntelliJ, WebStorm, PhpStorm):" }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Вбудований Git/VCS - commit, merge, rebase, stash, conflict resolver, history."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitToolBox - інформація про remote-гілки, auto-fetch, підсвітка статусу."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git Flow Integration - підтримка Gitflow без використання CLI."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Для Visual Studio:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git Tools / Team Explorer - базові Git-операції в IDE."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitHub Extension for Visual Studio - інтеграція з GitHub, PR та issues."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Окремі GUI-клієнти:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sourcetree - безкоштовний Git GUI від Atlassian." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Fork - легкий та швидкий Git GUI для macOS та Windows."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tower - комерційний Git GUI з розширеним функціоналом."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Порада:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для фронтенд-розробки найпопулярніша комбінація: VS Code + GitLens + Git Graph + GitHub PR."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "93. What popular plugins and extensions are used to integrate Git into IDEs and code editors?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "For VS Code:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitLens - line blame, commit and branch history, PR integration."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git Graph - visual commit and branch graph." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitHub Pull Requests and Issues - manage PRs and issues directly in the editor."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git History - quick access to file and repository history."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Project Manager with Git support - easy multi-repository workflow."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "For JetBrains IDEs (IntelliJ, WebStorm, PhpStorm):" }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Built-in Git/VCS - commit, merge, rebase, stash, history, conflict resolution."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitToolBox - remote branch info, auto-fetch, enhanced status indicators."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git Flow Integration - Gitflow workflow without CLI."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "For Visual Studio:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git Tools / Team Explorer - core Git operations inside the IDE."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitHub Extension for Visual Studio - GitHub PR and issue integration."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Standalone Git GUI clients:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sourcetree - free Git GUI by Atlassian." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Fork - fast and lightweight Git client for macOS and Windows."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tower - commercial Git client with advanced features."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Tip:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "For frontend development, the most common setup is VS Code + GitLens + Git Graph + GitHub PR integration."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "93. Jakie popularne wtyczki i rozszerzenia są używane do integracji Git z IDE i edytorami kodu?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Dla VS Code:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitLens - blame linii, historia commitów i integracja z Pull Request."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git Graph - wizualne drzewo commitów i gałęzi." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitHub Pull Requests and Issues - zarządzanie PR i issue w edytorze."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git History - szybki podgląd historii repozytorium."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Project Manager z integracją Git - praca z wieloma repozytoriami."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Dla IDE JetBrains (IntelliJ, WebStorm, PhpStorm):" }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wbudowany Git/VCS - commit, merge, rebase, stash, historia."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitToolBox - informacje o gałęziach zdalnych, auto-fetch."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Git Flow Integration - obsługa Gitflow bez CLI." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Dla Visual Studio:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Git Tools / Team Explorer - podstawowe operacje Git."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "GitHub Extension for Visual Studio - integracja z GitHub."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Samodzielne klienty GUI:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sourcetree - darmowy GUI Git od Atlassian." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Fork - lekki i szybki klient Git." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tower - komercyjny klient Git z rozbudowanymi funkcjami."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wskazówka:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Najczęściej używany zestaw we frontendzie to VS Code + GitLens + Git Graph + GitHub PR."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 94,
-    "translations": {
-      "uk": {
-        "question": "94. Як вирішувати Git merge конфлікти за допомогою візуальних інструментів?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використання IDE (VS Code, WebStorm, IntelliJ)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "IDE автоматично відкриває файли з конфліктами та підсвічує їх."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "<<<<<<< HEAD - ваші локальні зміни" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "======= - роздільник конфлікту" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": ">>>>>>> feature-branch - зміни з іншої гілки"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Кнопки керування конфліктами:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Accept Current Change - залишити вашу версію"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Accept Incoming Change - прийняти зміни з іншої гілки"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Accept Both Changes - об’єднати обидві версії"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Compare Changes - перегляд side-by-side для точного аналізу"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Використання Git GUI-клієнтів", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Sourcetree, Fork, GitKraken" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Графічне відображення конфліктів і гілок" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Зручне об’єднання змін через UI" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Після вирішення - Mark as Resolved" }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Завершення merge після вирішення конфліктів:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <resolved_file>\ngit commit"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Порада:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Візуальні інструменти особливо корисні для JSX, CSS та JSON-файлів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для складних конфліктів поєднання IDE + GUI-клієнта дає максимальну наочність."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "94. How can Git merge conflicts be resolved using visual tools?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Using IDEs (VS Code, WebStorm, IntelliJ)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The IDE highlights conflicting files automatically."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "<<<<<<< HEAD - your local changes" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "======= - conflict separator" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": ">>>>>>> feature-branch - incoming branch changes"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Visual conflict resolution actions:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Accept Current Change" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Accept Incoming Change" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Accept Both Changes" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Compare Changes (side-by-side view)" }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Using Git GUI clients", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Sourcetree, Fork, GitKraken" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Graphical conflict tree and visual diffs" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Easy conflict resolution via UI controls" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Finalize with Mark as Resolved" }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Finalize the merge:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <resolved_file>\ngit commit"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Tip:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Visual tools are especially useful for JSX, CSS and JSON conflicts."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "For complex merges, combining IDE tools with a Git GUI gives the best clarity."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "94. Jak rozwiązywać konflikty merge w Git przy użyciu narzędzi wizualnych?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Korzystanie z IDE (VS Code, WebStorm, IntelliJ)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "IDE automatycznie podświetla pliki z konfliktami."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "<<<<<<< HEAD - twoje lokalne zmiany" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "======= - separator konfliktu" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": ">>>>>>> feature-branch - zmiany z innej gałęzi"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Akcje wizualne:", "bold": true }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Accept Current Change" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Accept Incoming Change" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Accept Both Changes" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Compare Changes (widok side-by-side)" }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Korzystanie z klientów GUI Git", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Sourcetree, Fork, GitKraken" }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Graficzne drzewo konfliktów i różnic" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Łatwe łączenie zmian przez interfejs" }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Zakończenie przez Mark as Resolved" }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zakończenie merge:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git add <resolved_file>\ngit commit"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wskazówka:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Narzędzia wizualne są szczególnie przydatne przy konfliktach w JSX, CSS i JSON."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dla złożonych konfliktów najlepiej łączyć IDE z klientem GUI Git."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 95,
-    "translations": {
-      "uk": {
-        "question": "95. Що таке Git bridge і яку роль він відіграє у взаємодії з іншими системами контролю версій?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git bridge", "bold": true },
-              {
-                "text": " - це механізм або набір інструментів, що дозволяє інтегрувати Git з іншими системами контролю версій (SVN, Perforce, Mercurial)."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Він забезпечує двосторонню синхронізацію: розробники можуть працювати у Git, а зміни синхронізуються з іншою VCS, або навпаки."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклади використання:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git-svn - робота з SVN через Git", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Клонування SVN-репозиторію у Git." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Синхронізація комітів між Git і SVN." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Perforce Git Fusion", "bold": true },
-                  {
-                    "text": " - дозволяє користувачам Git працювати з Perforce як із віддаленим репозиторієм."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mercurial ↔ Git", "bold": true },
-                  {
-                    "text": " - інструменти для міграції або тимчасової синхронізації між системами."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Перевага:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git bridge дозволяє поступово мігрувати на Git без зупинки розробки та без руйнування існуючих процесів у старих VCS."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "95. What is a Git bridge and what role does it play in interacting with other version control systems?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git bridge", "bold": true },
-              {
-                "text": " is a mechanism or set of tools that enables Git to integrate with other version control systems such as SVN, Perforce, or Mercurial."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "It provides bidirectional synchronization, allowing developers to work in Git while changes are reflected in the legacy VCS, or vice versa."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Examples:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git-svn", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Clone an SVN repository into Git." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Sync commits between Git and SVN." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Perforce Git Fusion", "bold": true },
-                  {
-                    "text": " allows Git users to interact with Perforce as a remote repository."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mercurial ↔ Git", "bold": true },
-                  {
-                    "text": " tools used for migration or temporary synchronization between systems."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Benefit:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git bridges enable gradual migration to Git without disrupting existing workflows or stopping development."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "95. Czym jest Git bridge i jaką rolę odgrywa we współpracy z innymi systemami kontroli wersji?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Git bridge", "bold": true },
-              {
-                "text": " to mechanizm lub zestaw narzędzi umożliwiających integrację Git z innymi systemami kontroli wersji, takimi jak SVN, Perforce czy Mercurial."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zapewnia dwukierunkową synchronizację, dzięki czemu programiści mogą pracować w Git, a zmiany są odzwierciedlane w starszym systemie VCS lub odwrotnie."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykłady:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "git-svn", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Klonowanie repozytorium SVN do Git." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Synchronizacja commitów między Git a SVN."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Perforce Git Fusion", "bold": true },
-                  {
-                    "text": " umożliwia użytkownikom Git pracę z Perforce jak z repozytorium zdalnym."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mercurial ↔ Git", "bold": true },
-                  {
-                    "text": " narzędzia do migracji lub tymczasowej synchronizacji systemów."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zaleta:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git bridge pozwala zespołom stopniowo przejść na Git bez przerywania istniejących procesów i workflow."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 96,
-    "translations": {
-      "uk": {
-        "question": "96. Як керувати великими бінарними файлами в Git, якщо не використовувати Git LFS?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ігнорування великих файлів", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Додати файли у .gitignore, щоб не зберігати їх у репозиторії:"
-                          }
-                        ]
-                      },
-                    {
-                      "type": "listItem",
-                      "children": [
-                        {
-                          "type": "code",
-                          "language": "gitignore",
-                          "content": "*.mp4\n*.zip\nnode_modules/\ndist/"
-                        }
-                      ]
-                    }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Зберігання поза репозиторієм", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Використовувати зовнішні сховища (AWS S3, GCS, Azure Blob)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "CDN або внутрішні файлові сервери." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "У Git зберігати лише посилання або метадані."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Артефактні репозиторії", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Nexus, Artifactory, Verdaccio для білд-артефактів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Shallow clone та sparse checkout", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Обмежити завантаження історії або директорій:"
-                          }
-                        ]
-                      },
-                    {
-                      "type": "listItem",
-                      "children": [
-                        {
-                          "type": "code",
-                          "language": "bash",
-                          "content": "git clone --depth 1 <repo>\ngit sparse-checkout init --cone\ngit sparse-checkout set src/"
-                        }
-                      ]
-                    }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Висновок:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Без Git LFS великі бінарні файли краще зберігати поза Git, залишаючи в репозиторії лише код і легкі метадані."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "96. How can large binary files be managed in Git without using Git LFS?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ignore large files", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Add them to .gitignore to prevent tracking."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "External storage", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Use AWS S3, Google Cloud Storage, Azure Blob."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Store only links or references in Git." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Artifact repositories", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Use Nexus, Artifactory, or similar tools."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Shallow clone and sparse checkout", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Reduce fetched history or directories to improve performance."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Conclusion:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Without Git LFS, large binary files should be stored externally, while Git remains focused on source code and lightweight metadata."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "96. Jak zarządzać dużymi plikami binarnymi w Git bez użycia Git LFS?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ignorowanie dużych plików", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Dodanie ich do .gitignore, aby nie były śledzone."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przechowywanie poza repozytorium", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Użycie zewnętrznych magazynów (AWS S3, GCS, Azure Blob)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "W Git przechowywać jedynie linki lub metadane."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Repozytoria artefaktów", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Nexus, Artifactory do plików binarnych i buildów."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Shallow clone i sparse checkout", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Ograniczenie historii i katalogów dla lepszej wydajności."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wniosek:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Bez Git LFS duże pliki binarne najlepiej przechowywać poza Git, a repozytorium wykorzystywać głównie do kodu źródłowego."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 97,
-    "translations": {
-      "uk": {
-        "question": "97. Для чого використовується git rebase -i (інтерактивний rebase)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git rebase -i", "code": true },
-              {
-                "text": " дозволяє інтерактивно змінювати історію комітів у локальній гілці перед її злиттям або пушем."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні сценарії використання:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Squash комітів", "bold": true },
-                  {
-                    "text": " – об’єднання кількох дрібних комітів в один логічний."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Редагування повідомлень", "bold": true },
-                  { "text": " – зміна commit message перед merge." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Видалення комітів", "bold": true },
-                  {
-                    "text": " – повне прибирання непотрібних або помилкових комітів (drop)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Зміна порядку комітів", "bold": true },
-                  { "text": " – упорядкування історії для читабельності." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git rebase -i HEAD~3"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відкриває останні 3 коміти в редакторі." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для кожного коміту можна вибрати: pick, squash (s), edit, drop."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Порада:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Використовувати лише для локальних гілок, які ще не були запушені, щоб не зламати історію команди."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "97. What is git rebase -i (interactive rebase) used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git rebase -i", "code": true },
-              {
-                "text": " allows you to interactively rewrite commit history in a local branch."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Common use cases:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Squashing commits into a single logical commit." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Editing commit messages before merging." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Removing unnecessary or incorrect commits." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Reordering commits to keep history clean." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "bash",
-            "content": "git rebase -i HEAD~3"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Use interactive rebase only on local branches that have not been pushed to avoid rewriting shared history."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "97. Do czego służy git rebase -i (interaktywny rebase)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "git rebase -i", "code": true },
-              {
-                "text": " umożliwia interaktywną modyfikację historii commitów w lokalnej gałęzi."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne zastosowania:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Łączenie commitów (squash)." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Edycja komunikatów commitów." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Usuwanie zbędnych commitów." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Zmiana kolejności commitów." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Interaktywny rebase należy stosować tylko na lokalnych gałęziach, aby nie naruszyć wspólnej historii zespołu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 98,
-    "translations": {
-      "uk": {
-        "question": "98. Як організувати безперервне резервне копіювання репозиторіїв Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Безперервне резервне копіювання Git-репозиторіїв гарантує збереження коду, історії комітів, гілок і тегів у разі збою, помилки або втрати доступу."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Віддалені репозиторії (Remote backup)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Регулярний push у віддалені репозиторії (GitHub, GitLab, Bitbucket, приватний сервер)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Дзеркальне копіювання всіх refs:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git remote add backup <backup-repo-url>\ngit push --mirror backup"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Автоматизація (cron / CI/CD)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Налаштувати cron або CI-пайплайн для періодичного mirror-пушу:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "0 2 * * * cd /repo && git fetch origin && git push --mirror backup"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Архівування (git bundle)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Створення повного автономного бекапу:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git bundle create repo.bundle --all"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Відновлення з bundle:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git clone repo.bundle project"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Хмарні сховища", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Резервне копіювання .git директорії у S3, Google Drive, Azure Blob."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Порада:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для критичних проєктів рекомендовано комбінувати mirror-репозиторій + git bundle та регулярно перевіряти можливість відновлення."
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "98. How can continuous backup of Git repositories be organized?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Continuous Git repository backup ensures preservation of code, commit history, branches, and tags in case of failures or data loss."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Remote mirrors", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Push all refs to a secondary remote repository."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Example:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git push --mirror backup"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automation via cron or CI/CD", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Schedule periodic backups using cron or CI pipelines."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Offline backups (git bundle)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Create a self-contained backup file:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git bundle create repo.bundle --all"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Best practice is combining remote mirrors with periodic offline bundles."
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "98. Jak zorganizować ciągłe tworzenie kopii zapasowych repozytoriów Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ciągłe kopie zapasowe repozytoriów Git zapewniają bezpieczeństwo kodu, historii commitów, gałęzi i tagów."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Repozytoria lustrzane", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Regularne pushowanie wszystkich refs do zapasowego repozytorium."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automatyzacja (cron / CI)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Cykliczne wykonywanie kopii zapasowych."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Backup offline (git bundle)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Tworzenie przenośnego archiwum repozytorium:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git bundle create repo.bundle --all"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Najlepszym podejściem jest łączenie repozytorium lustrzanego z archiwami offline."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 99,
-    "translations": {
-      "uk": {
-        "question": "99. Як чутливість до регістру впливає на Git і як її контролювати на різних ОС?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git за своєю природою є регістрочутливим до імен файлів, але фактична поведінка залежить від файлової системи операційної системи."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Чутливість Git до регістру", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "file.txt і File.txt у Git вважаються різними файлами."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "На деяких ОС це може призводити до прихованих конфліктів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "ОС" }],
-              [{ "text": "Файлова система" }],
-              [{ "text": "Типова проблема" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Linux" }],
-                [{ "text": "case-sensitive" }],
-                [{ "text": "Проблем зазвичай немає" }]
-              ],
-              [
-                [{ "text": "macOS" }],
-                [{ "text": "case-insensitive (HFS+/APFS)" }],
-                [{ "text": "Git може не бачити зміну регістру" }]
-              ],
-              [
-                [{ "text": "Windows" }],
-                [{ "text": "case-insensitive (NTFS)" }],
-                [{ "text": "Конфлікти з Linux/CI-серверами" }]
-              ]
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Контроль поведінки", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Налаштування core.ignorecase:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git config core.ignorecase true   # типово для Windows/macOS\ngit config core.ignorecase false  # рекомендовано для Linux/CI"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Зміна регістру імені файлу через проміжний крок:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git mv File.txt temp.txt\ngit mv temp.txt file.txt\ngit commit -m \"Fix filename case\""
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Висновок:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для кросплатформових проєктів регістрочутливість є критичною."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Рекомендовано уніфікувати неймінг файлів (lowercase) і орієнтуватись на Linux/CI як джерело істини."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "99. How does case sensitivity affect Git and how can it be controlled across different operating systems?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git is inherently case-sensitive, but actual behavior depends on the underlying file system of the operating system."
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "OS" }],
-              [{ "text": "File system" }],
-              [{ "text": "Common issue" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Linux" }],
-                [{ "text": "case-sensitive" }],
-                [{ "text": "Works as expected" }]
-              ],
-              [
-                [{ "text": "macOS" }],
-                [{ "text": "case-insensitive" }],
-                [{ "text": "Case-only renames may be ignored" }]
-              ],
-              [
-                [{ "text": "Windows" }],
-                [{ "text": "case-insensitive" }],
-                [{ "text": "Conflicts with Linux-based CI" }]
-              ]
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Control using core.ignorecase configuration:" },
-                  {
-                    "type": "code",
-                    "language": "bash",
-                    "content": "git config core.ignorecase true\ngit config core.ignorecase false"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "99. Jak wrażliwość na wielkość liter wpływa na Git i jak ją kontrolować na różnych systemach?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Git jest wrażliwy na wielkość liter, ale zachowanie zależy od systemu plików systemu operacyjnego."
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "System" }],
-              [{ "text": "System plików" }],
-              [{ "text": "Problem" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Linux" }],
-                [{ "text": "case-sensitive" }],
-                [{ "text": "Brak problemów" }]
-              ],
-              [
-                [{ "text": "macOS" }],
-                [{ "text": "case-insensitive" }],
-                [{ "text": "Zmiany wielkości liter mogą być ignorowane" }]
-              ],
-              [
-                [{ "text": "Windows" }],
-                [{ "text": "case-insensitive" }],
-                [{ "text": "Konflikty z CI/Linux" }]
-              ]
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Najlepszą praktyką jest stosowanie jednolitego nazewnictwa plików oraz dostosowanie core.ignorecase do środowiska CI."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "git",
-    "order": 100,
-    "translations": {
-      "uk": {
-        "question": "100. Як організувати підтримку кількох версій продукту за допомогою Git-гілок?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Підтримка кількох версій продукту в Git базується на чіткій стратегії гілок, яка дозволяє паралельно розвивати нові функції та підтримувати старі релізи."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Основна гілка (main / master)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Містить стабільний код, готовий до продакшен-деплою."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Зазвичай кожен merge у main відповідає релізу або hotfix."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Release-гілки для підтримуваних версій",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Для кожної версії створюється окрема гілка:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "text",
-                            "content": "release/1.0\nrelease/1.1\nrelease/2.0"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "У цих гілках дозволені лише багфікси та security-патчі."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Feature-гілки", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Створюються від main або develop для нових фіч."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Ніколи напряму не вливаються у release-гілки."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Backport змін", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Критичні багфікси можна переносити у старі версії:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git checkout release/1.0\ngit cherry-pick <commit_hash>"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Тегування релізів", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Кожен реліз фіксується тегом:" },
-                          {
-                            "type": "code",
-                            "language": "bash",
-                            "content": "git tag -a v1.0.0 -m \"Release 1.0.0\"\ngit push origin v1.0.0"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Висновок:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Release-гілки дозволяють підтримувати кілька версій паралельно без блокування розробки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Теги гарантують швидкий rollback і відтворюваність релізів."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "en": {
-        "question": "100. How can multiple product versions be maintained using Git branches?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Supporting multiple product versions in Git relies on a clear branching strategy that separates active development from long-term maintenance."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "main/master holds production-ready code." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "release/* branches maintain supported versions with bugfixes only."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "feature branches are used for new functionality." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Critical fixes can be backported using cherry-pick."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tags mark every stable release for rollback and deployment."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-
-      "pl": {
-        "question": "100. Jak organizować wsparcie wielu wersji produktu za pomocą gałęzi Git?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Obsługa wielu wersji produktu w Git opiera się na strategii gałęzi oddzielającej rozwój od utrzymania."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "main/master zawiera stabilny kod produkcyjny." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Gałęzie release/* służą do utrzymania starszych wersji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Nowe funkcje rozwijane są w gałęziach feature." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Poprawki można przenosić do starszych wersji przez cherry-pick."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tagi umożliwiają szybki rollback i identyfikację wersji."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  }
-]
diff --git a/json/01-html.json b/json/01-html.json
deleted file mode 100644
index d3040e19..00000000
--- a/json/01-html.json
+++ /dev/null
@@ -1,17864 +0,0 @@
-[
-  {
-    "question": "1. Що означає абревіатура HTML і яке її призначення?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML — HyperText Markup Language, мова розмітки для структурування вмісту вебсторінок (текст, зображення, посилання тощо)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Призначення — описувати структуру та семантику контенту, який браузер відображає користувачу."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "2. Чим HTML відрізняється від CSS та JavaScript?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML",
-                "bold": true
-              },
-              {
-                "text": " — описує структуру веб-сторінки (що є: заголовки, абзаци, зображення, посилання)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS",
-                "bold": true
-              },
-              {
-                "text": " — відповідає за оформлення і стиль (як виглядає: кольори, шрифти, розташування)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JavaScript",
-                "bold": true
-              },
-              {
-                "text": " — додає динаміку та інтерактивність (що робить: обробка подій, зміна DOM, анімації, логіка)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Разом вони формують основу фронтенд-розробки: HTML — кістяк, CSS — одяг, JavaScript — поведінка."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "3. Що таке HTML теги?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML теги — це інструкції (команди), які визначають структуру та зміст веб-сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Теги пишуться у кутових дужках "
-              },
-              {
-                "text": "< >",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Більшість тегів мають відкриваючу та закриваючу частини:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <p>Текст абзацу</p>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Деякі теги самозакриваючі:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <br />\r\n  <img src=\"image.jpg\" alt=\"Зображення\" />\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Теги можуть мати атрибути для додаткової інформації:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <a href=\"https://example.com\">Посилання</a>\r"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "4. Що таке HTML елементи?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML елемент — це повна конструкція, що складається з відкриваючого тега, контенту та закриваючого тега."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Структура елемента:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<tagname attribute=\"value\">контент</tagname>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<h1>Заголовок</h1>",
-                "code": true
-              },
-              {
-                "text": " — елемент заголовка"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<p>Абзац тексту</p>",
-                "code": true
-              },
-              {
-                "text": " — елемент абзацу"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<img src=\"photo.jpg\" alt=\"Фото\">",
-                "code": true
-              },
-              {
-                "text": " — елемент зображення (самозакриваючий)"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елементи можуть містити інші елементи (вкладеність) і мати атрибути для додаткових налаштувань."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "5. Опишіть базову структуру HTML-сторінки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основна структура HTML-документа:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<!-- Оголошення типу документа -->\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" />\r\n    <title>Назва сторінки</title>\r\n  </head>\r\n  <body>\r\n    <!-- Вміст сторінки -->\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Складові:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<!DOCTYPE html>",
-                "code": true
-              },
-              {
-                "text": " — вказує, що документ у HTML5."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<html>",
-                "code": true
-              },
-              {
-                "text": " — кореневий елемент."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " — метадані (кодова сторінка, заголовок, стилі, скрипти)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<body>",
-                "code": true
-              },
-              {
-                "text": " — видимий вміст сторінки."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "6. Що таке DOCTYPE і навіщо його використовують?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "DOCTYPE",
-            "code": true
-          },
-          {
-            "text": " (Document Type Declaration) — це декларація типу документа, яка повідомляє браузеру, яку версію HTML використовує сторінка."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис для HTML5:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Призначення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Запобігає режиму сумісності (quirks mode) браузера"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечує коректне відображення сторінки згідно зі стандартами"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Допомагає валідаторам перевіряти правильність коду"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Має стояти першим рядком HTML-документа"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "7. Яка поточна версія HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поточна версія — "
-              },
-              {
-                "text": "HTML5",
-                "bold": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML5 є "
-              },
-              {
-                "text": "Living Standard",
-                "code": true
-              },
-              {
-                "text": " (живий стандарт), що означає постійне оновлення без формальних нових версій."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримується всіма сучасними браузерами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Включає нові семантичні елементи, API, покращену підтримку мультимедіа та багато інших функцій."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розробляється консорціумом WHATWG (Web Hypertext Application Technology Working Group)."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "8. Що роблять атрибути DOCTYPE та html lang?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<!DOCTYPE html>",
-                "code": true
-              },
-              {
-                "text": " — повідомляє браузеру, що документ написаний у стандарті HTML5, щоб уникнути режиму сумісності."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "lang",
-                "code": true
-              },
-              {
-                "text": " у "
-              },
-              {
-                "text": "<html>",
-                "code": true
-              },
-              {
-                "text": " — вказує мову вмісту сторінки для пошукових систем, читачів екрану та інших сервісів (наприклад, lang=\"uk\")."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<html lang=\"uk\">\r\n  <!-- Решта документа -->\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Ці атрибути покращують доступність, SEO та коректність відображення сторінки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "9. Що описується в тегі head?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Тег "
-          },
-          {
-            "text": "<head>",
-            "code": true
-          },
-          {
-            "text": " містить метаінформацію про документ:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Назва сторінки",
-                "bold": true
-              },
-              {
-                "text": " — "
-              },
-              {
-                "text": "<title>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мета-теги",
-                "bold": true
-              },
-              {
-                "text": " — "
-              },
-              {
-                "text": "<meta>",
-                "code": true
-              },
-              {
-                "text": " (характеристики документа, ключові слова, опис)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підключення стилів",
-                "bold": true
-              },
-              {
-                "text": " — "
-              },
-              {
-                "text": "<link>",
-                "code": true
-              },
-              {
-                "text": " (CSS-файли)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Скрипти",
-                "bold": true
-              },
-              {
-                "text": " — "
-              },
-              {
-                "text": "<script>",
-                "code": true
-              },
-              {
-                "text": " (підключення JavaScript)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Фавікон",
-                "bold": true
-              },
-              {
-                "text": " — "
-              },
-              {
-                "text": "<link>",
-                "code": true
-              },
-              {
-                "text": " для іконки сайту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інші налаштування",
-                "bold": true
-              },
-              {
-                "text": " — наприклад, "
-              },
-              {
-                "text": "<base>",
-                "code": true
-              },
-              {
-                "text": " для базового URL."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<head>\r\n  <meta charset=\"UTF-8\" />\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n  <title>Назва сторінки</title>\r\n  <link rel=\"stylesheet\" href=\"styles.css\" />\r\n  <script src=\"script.js\"></script>\r\n</head>\r"
-      }
-    ]
-  },
-  {
-    "question": "10. Яка різниця між тегами head та body?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " — містить метадані про документ (назва, кодування, стилі, скрипти, SEO-теги), не відображається безпосередньо на сторінці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<body>",
-                "code": true
-              },
-              {
-                "text": " — містить видимий контент для користувача (текст, зображення, кнопки, відео тощо)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Ключові відмінності:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`<head>`:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Невидимий для користувача"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Містить службову інформацію"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Налаштування сторінки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO-дані"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`<body>`:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Видимий контент"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Те, що бачить користувач"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтерактивні елементи"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Основний вміст сторінки"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "11. Що таке пробільний простір в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Пробільний простір в HTML — це пробіли, табуляції та переноси рядків між елементами."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Поведінка браузера:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузер автоматично "
-              },
-              {
-                "text": "згортає",
-                "bold": true
-              },
-              {
-                "text": " (схлопує) декілька пробілів в один"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кілька переносів рядків замінюються одним пробілом"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Провідні та кінцеві пробіли ігноруються"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Цей текст має багато пробілів</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Відображається як: "
-          },
-          {
-            "text": "Цей текст має багато пробілів",
-            "code": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для збереження пробілів використовуйте CSS "
-          },
-          {
-            "text": "white-space: pre",
-            "code": true
-          },
-          {
-            "text": " або тег "
-          },
-          {
-            "text": "<pre>",
-            "code": true
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "12. Що таке порожні елементи в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Порожні елементи (void elements) — це HTML теги, які не мають контенту і закриваючого тега."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні порожні елементи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<br>",
-                "code": true
-              },
-              {
-                "text": " — розрив рядка"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<hr>",
-                "code": true
-              },
-              {
-                "text": " — горизонтальна лінія"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<img>",
-                "code": true
-              },
-              {
-                "text": " — зображення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<input>",
-                "code": true
-              },
-              {
-                "text": " — поле вводу"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meta>",
-                "code": true
-              },
-              {
-                "text": " — метадані"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<link>",
-                "code": true
-              },
-              {
-                "text": " — посилання на ресурс"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Правильно -->\r\n<img src=\"photo.jpg\" alt=\"Фото\" />\r\n<br />\r\n<input type=\"text\" name=\"name\" />\r\n\r\n<!-- В XHTML/XML стилі (необов'язково в HTML5) -->\r\n<img src=\"photo.jpg\" alt=\"Фото\" />\r\n<br />\r"
-      }
-    ]
-  },
-  {
-    "question": "13. У чому різниця між елементами div і span?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<div>",
-            "code": true
-          },
-          {
-            "text": " (блоковий елемент):"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Займає всю доступну ширину"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Починається з нового рядка"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Має верхні та нижні відступи"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для великих блоків контенту"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<span>",
-            "code": true
-          },
-          {
-            "text": " (вбудований елемент):"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Займає тільки необхідну ширину"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не переносить на новий рядок"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не має вертикальних відступів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для маленьких фрагментів тексту"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div>Це блоковий елемент</div>\r\n<div>Він займає всю ширину</div>\r\n\r\n<p>Це <span>вбудований елемент</span> всередині абзацу.</p>\r"
-      }
-    ]
-  },
-  {
-    "question": "14. Яка різниця між тегами b та strong?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<b>",
-                "code": true
-              },
-              {
-                "text": " — просто робить текст візуально жирним, без додаткового смислового значення."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<strong>",
-                "code": true
-              },
-              {
-                "text": " — робить текст жирним і додає семантичний акцент (важливість), що враховується пошуковими системами та скрінрідерами."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Цей текст <b>жирний</b> тільки візуально.</p>\r\n<p>Цей текст <strong>важливий</strong> за змістом.</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Рекомендація:",
-            "bold": true
-          },
-          {
-            "text": " Використовуйте "
-          },
-          {
-            "text": "<strong>",
-            "code": true
-          },
-          {
-            "text": " для смислово важливого тексту, "
-          },
-          {
-            "text": "<b>",
-            "code": true
-          },
-          {
-            "text": " — тільки для стилізації без семантичного значення."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "15. Коли слід використовувати em замість i, і навпаки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<em>",
-                "code": true
-              },
-              {
-                "text": " — виділяє текст курсивом з семантичним наголосом (інтонаційне чи логічне підкреслення важливості)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<i>",
-                "code": true
-              },
-              {
-                "text": " — відображає текст курсивом без зміни смислу (наприклад, іноземні слова, технічні терміни, назви)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Семантичний наголос -->\r\n<p>Я <em>дуже</em> хочу це зробити!</p>\r\n\r\n<!-- Стилістичне виділення -->\r\n<p>Фільм <i>Титанік</i> вийшов в 1997 році.</p>\r\n<p>Слово <i>bonjour</i> означає \"привіт\" французькою.</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Якщо потрібно передати смисловий акцент — використовуємо "
-          },
-          {
-            "text": "<em>",
-            "code": true
-          },
-          {
-            "text": ". Якщо тільки стиль відображення — "
-          },
-          {
-            "text": "<i>",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "16. Яке призначення тегів small, s та mark?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<small>",
-                "code": true
-              },
-              {
-                "text": " — робить текст меншим і семантично позначає додаткову або другорядну інформацію (примітки, дисклеймери)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<s>",
-                "code": true
-              },
-              {
-                "text": " — відображає текст закресленим, коли він втратив актуальність, але його варто залишити для перегляду."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<mark>",
-                "code": true
-              },
-              {
-                "text": " — виділяє текст жовтим фоном для підсвічування важливого або знайденого фрагмента."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Ціна: <s>100 грн</s> 80 грн</p>\r\n<p><mark>Важливо:</mark> Термін дії до 31 грудня.</p>\r\n<p>Основний текст. <small>© 2023 Всі права захищені.</small></p>\r"
-      }
-    ]
-  },
-  {
-    "question": "17. Як створити абзац або розрив рядка в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Абзац:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Текст абзацу</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "створює блок з відступами зверху і знизу."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Розрив рядка:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "Текст першого рядка<br />Текст другого рядка\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "переносить текст без створення нового абзацу."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовувати:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<p>",
-                "code": true
-              },
-              {
-                "text": " — для окремих абзаців тексту"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<br>",
-                "code": true
-              },
-              {
-                "text": " — для примусового переносу в межах одного блоку (адреси, вірші)"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "18. Для чого використовуються теги sub та sup?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<sub>",
-                "code": true
-              },
-              {
-                "text": " — підрядковий текст (нижче базової лінії)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<sup>",
-                "code": true
-              },
-              {
-                "text": " — надрядковий текст (вище базової лінії)"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Математичні формули:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>H<sub>2</sub>O - формула води</p>\r\n<p>E = mc<sup>2</sup> - формула Ейнштейна</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Хімічні формули:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>CO<sub>2</sub> - вуглекислий газ</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Сноски:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Цей факт<sup>1</sup> потребує підтвердження.</p>\r"
-      }
-    ]
-  },
-  {
-    "question": "19. Розкажіть про тег samp?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Тег "
-          },
-          {
-            "text": "<samp>",
-            "code": true
-          },
-          {
-            "text": " використовується для позначення тексту, який є результатом виконання комп'ютерної програми, наприклад, повідомлень про помилки або вихідних даних. Він відображається звичайним шрифтом, але зазвичай використовується для стилістичних цілей."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад використання тегу "
-          },
-          {
-            "text": "<samp>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Результат виконання програми: <samp>Помилка: Невірний ввід</samp></p>\r\n<p>Командний рядок повернув: <samp>Hello World!</samp></p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Пов'язані теги:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<code>",
-                "code": true
-              },
-              {
-                "text": " — для фрагментів коду"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<kbd>",
-                "code": true
-              },
-              {
-                "text": " — для клавіш клавіатури"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<var>",
-                "code": true
-              },
-              {
-                "text": " — для змінних"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "20. Які глобальні атрибути є в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Глобальні атрибути можна використовувати з будь-яким HTML елементом:"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні глобальні атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "id",
-                "code": true
-              },
-              {
-                "text": " — унікальний ідентифікатор елемента"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "class",
-                "code": true
-              },
-              {
-                "text": " — CSS класи для стилізації"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "style",
-                "code": true
-              },
-              {
-                "text": " — вбудовані стилі CSS"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "title",
-                "code": true
-              },
-              {
-                "text": " — підказка при наведенні"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "lang",
-                "code": true
-              },
-              {
-                "text": " — мова контенту"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dir",
-                "code": true
-              },
-              {
-                "text": " — напрям тексту (ltr/rtl)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tabindex",
-                "code": true
-              },
-              {
-                "text": " — порядок фокусування"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "hidden",
-                "code": true
-              },
-              {
-                "text": " — приховує елемент"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "data-*",
-                "code": true
-              },
-              {
-                "text": " — користувацькі атрибути"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути подій:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "onclick",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "onmouseover",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "onload",
-                "code": true
-              },
-              {
-                "text": " тощо"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div\r\n  id=\"main-content\"\r\n  class=\"container highlight\"\r\n  title=\"Основний контент сторінки\"\r\n  lang=\"uk\"\r\n  data-section=\"hero\"\r\n>\r\n  Контент...\r\n</div>\r"
-      }
-    ]
-  },
-  {
-    "question": "21. Як використовують атрибути class та id? Яка різниця між класами та ідентифікаторами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибут "
-          },
-          {
-            "text": "id",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Унікальний ідентифікатор елемента на сторінці"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Може бути тільки один елемент з конкретним id"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для JavaScript, якірних посилань, CSS стилізації"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибут "
-          },
-          {
-            "text": "class",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Групує елементи за спільними характеристиками"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Один клас можна застосувати до багатьох елементів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Один елемент може мати кілька класів"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- ID - унікальний -->\r\n<div id=\"header\">Заголовок сайту</div>\r\n<div id=\"navigation\">Навігація</div>\r\n\r\n<!-- Class - може повторюватися -->\r\n<p class=\"highlight\">Важливий текст</p>\r\n<p class=\"highlight large\">Великий важливий текст</p>\r\n<span class=\"highlight\">Ще важливий текст</span>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "CSS селектори:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "#header {\r\n  color: blue;\r\n} /* ID селектор */\r\n.highlight {\r\n  color: red;\r\n} /* Class селектор */\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Рекомендація:",
-            "bold": true
-          },
-          {
-            "text": " Використовуйте "
-          },
-          {
-            "text": "id",
-            "code": true
-          },
-          {
-            "text": " для унікальних елементів і якірних посилань, "
-          },
-          {
-            "text": "class",
-            "code": true
-          },
-          {
-            "text": " — для стилізації та групування."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "22. Яке призначення атрибута alt в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " — альтернативний текст для зображення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Призначення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Показується, якщо зображення не завантажилось."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Допомагає скрінрідерам робити сайт доступним."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для SEO."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Інформативне зображення -->\r\n<img src=\"chart.png\" alt=\"Графік продажів за 2023 рік\" />\r\n\r\n<!-- Декоративне зображення -->\r\n<img src=\"decoration.png\" alt=\"\" />\r\n\r\n<!-- Зображення-посилання -->\r\n<a href=\"/home\">\r\n  <img src=\"logo.png\" alt=\"Повернутися на головну сторінку\" />\r\n</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Важливо:",
-            "bold": true
-          },
-          {
-            "text": " Для декоративних зображень використовуйте порожній "
-          },
-          {
-            "text": "alt=\"\"",
-            "code": true
-          },
-          {
-            "text": ", щоб скрін-рідери їх ігнорували."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "23. Навіщо використовується тег label?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<label>",
-            "code": true
-          },
-          {
-            "text": " пов'язує текстову підказку з елементом форми, щоб користувачу було зрозуміло, що вводити."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує доступність (скрінрідери читають підказку разом із полем)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Клік по <label> автоматично фокусує пов'язане поле."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Зовнішній label (через атрибути for та id):",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label for=\"email\">Email:</label> <input type=\"email\" id=\"email\" name=\"email\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Внутрішній label (обгортає елемент):",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label>\r\n  <input type=\"checkbox\" name=\"agree\" />\r\n  Погоджуюсь з умовами\r\n</label>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для групи radio buttons:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label for=\"size-small\">\r\n  <input type=\"radio\" id=\"size-small\" name=\"size\" value=\"small\" />\r\n  Малий\r\n</label>\r\n<label for=\"size-large\">\r\n  <input type=\"radio\" id=\"size-large\" name=\"size\" value=\"large\" />\r\n  Великий\r\n</label>\r"
-      }
-    ]
-  },
-  {
-    "question": "24. Що таке атрибути data-* і коли їх слід використовувати?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "data-*",
-                "code": true
-              },
-              {
-                "text": " — це користувацькі атрибути для зберігання будь-яких додаткових даних у елементі HTML."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div data-user-id=\"123\" data-role=\"admin\" data-last-login=\"2023-12-01\"></div>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовувати:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зберігати інформацію для JavaScript без впливу на відображення."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легко отримувати через element.dataset.userId або element.dataset.role."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Наприклад, для інтерактивних елементів, налаштувань чи передачі даних у JS."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад використання з JavaScript:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<button data-action=\"delete\" data-id=\"42\">Видалити</button>\r\n\r\n<script>\r\n  const button = document.querySelector('button');\r\n  console.log(button.dataset.action); // \"delete\"\r\n  console.log(button.dataset.id); // \"42\"\r\n</script>\r"
-      }
-    ]
-  },
-  {
-    "question": "25. Що таке data-атрибути, в яких випадках їх використовуєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "data-*",
-            "code": true
-          },
-          {
-            "text": " атрибути дозволяють зберігати користувацькі дані прямо в HTML елементах."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Випадки використання:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Конфігурація компонентів:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<div class=\"slider\" data-speed=\"500\" data-autoplay=\"true\">\r\n  <!-- Контент слайдера -->\r\n</div>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ідентифікація для JavaScript:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<tr data-user-id=\"123\" data-status=\"active\">\r\n  <td>John Doe</td>\r\n  <td><button data-action=\"edit\">Редагувати</button></td>\r\n</tr>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стан елементів:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<div class=\"modal\" data-visible=\"false\">\r\n  <!-- Модальне вікно -->\r\n</div>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS стилізація за станом:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "[data-status='active'] {\r\n  color: green;\r\n}\r\n[data-status='inactive'] {\r\n  color: gray;\r\n}\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Переваги:",
-            "bold": true
-          },
-          {
-            "text": " Валідний HTML, легкий доступ через JavaScript, не впливає на стилізацію."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "26. Як створити гіперпосилання в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуємо тег "
-          },
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"https://example.com\">Текст посилання</a>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "href",
-                "code": true
-              },
-              {
-                "text": " — адреса, куди веде посилання."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна додати "
-              },
-              {
-                "text": "target=\"_blank\"",
-                "code": true
-              },
-              {
-                "text": " для відкриття в новій вкладці."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Різні типи посилань:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Зовнішнє посилання -->\r\n<a href=\"https://google.com\">Google</a>\r\n\r\n<!-- Внутрішнє посилання -->\r\n<a href=\"/about\">Про нас</a>\r\n\r\n<!-- Email посилання -->\r\n<a href=\"mailto:contact@example.com\">Написати листа</a>\r\n\r\n<!-- Телефонне посилання -->\r\n<a href=\"tel:+380123456789\">Зателефонувати</a>\r\n\r\n<!-- Посилання на файл -->\r\n<a href=\"document.pdf\">Завантажити PDF</a>\r"
-      }
-    ]
-  },
-  {
-    "question": "27. Що таке внутрішні та зовнішні гіперпосилання і які вони мають атрибути?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Зовнішні посилання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ведуть на інші веб-сайти"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Починаються з "
-              },
-              {
-                "text": "http://",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "https://",
-                "code": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Внутрішні посилання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ведуть на сторінки того самого сайту"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовують відносні або абсолютні шляхи"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Зовнішнє посилання -->\r\n<a\r\n  href=\"https://example.com\"\r\n  target=\"_blank\"\r\n  rel=\"noopener noreferrer\"\r\n  title=\"Перейти на example.com\"\r\n>\r\n  Зовнішній сайт\r\n</a>\r\n\r\n<!-- Внутрішнє посилання -->\r\n<a href=\"/contact\" title=\"Сторінка контактів\"> Контакти </a>\r\n\r\n<!-- Якірне посилання -->\r\n<a href=\"#section1\" title=\"Перейти до розділу 1\"> Розділ 1 </a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибути:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "href",
-                "code": true
-              },
-              {
-                "text": " — URL адреса"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "target",
-                "code": true
-              },
-              {
-                "text": " — де відкрити (\\_blank, \\_self, \\_parent, \\_top)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rel",
-                "code": true
-              },
-              {
-                "text": " — відношення до цільової сторінки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "title",
-                "code": true
-              },
-              {
-                "text": " — підказка при наведенні"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "28. Яка різниця між відносними та абсолютними URL-адресами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Абсолютний URL",
-            "bold": true
-          },
-          {
-            "text": " — містить повний шлях із протоколом і доменом."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"https://example.com/page.html\">Посилання</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовується для переходів на зовнішні ресурси або між доменами."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Відносний URL",
-            "bold": true
-          },
-          {
-            "text": " — вказує шлях відносно поточного документа."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"/page.html\">Посилання</a>\r\n<a href=\"page.html\">Посилання</a>\r\n<a href=\"../page.html\">Посилання</a>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Типи відносних URL:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Відносно кореня сайту -->\r\n<a href=\"/about/team.html\">Команда</a>\r\n\r\n<!-- Відносно поточної папки -->\r\n<a href=\"contact.html\">Контакти</a>\r\n\r\n<!-- На рівень вище -->\r\n<a href=\"../index.html\">Головна</a>\r\n\r\n<!-- На кілька рівнів вище -->\r\n<a href=\"../../docs/manual.pdf\">Інструкція</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Зручно для внутрішніх сторінок сайту, особливо при розробці й тестуванні."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "29. Як відкрити посилання в новій вкладці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додати атрибут "
-              },
-              {
-                "text": "target=\"_blank\"",
-                "code": true
-              },
-              {
-                "text": " до тега "
-              },
-              {
-                "text": "<a>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<a href=\"https://example.com\" target=\"_blank\">Відкрити в новій вкладці</a>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Рекомендовано також додати "
-              },
-              {
-                "text": "rel=\"noopener noreferrer\"",
-                "code": true
-              },
-              {
-                "text": " для безпеки:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<a href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n  Відкрити в новій вкладці\r\n</a>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Інші значення target:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Поточна вкладка (за замовчуванням) -->\r\n<a href=\"page.html\" target=\"_self\">Поточна вкладка</a>\r\n\r\n<!-- Батьківський фрейм -->\r\n<a href=\"page.html\" target=\"_parent\">Батьківський фрейм</a>\r\n\r\n<!-- Верхній рівень вікна -->\r\n<a href=\"page.html\" target=\"_top\">Верхній рівень</a>\r\n\r\n<!-- Конкретне вікно/фрейм -->\r\n<a href=\"page.html\" target=\"myWindow\">Конкретне вікно</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Безпека:",
-            "bold": true
-          },
-          {
-            "text": " "
-          },
-          {
-            "text": "rel=\"noopener noreferrer\"",
-            "code": true
-          },
-          {
-            "text": " запобігає доступу нової сторінки до поточної через "
-          },
-          {
-            "text": "window.opener",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "30. Як створити якір для переходу до певної частини сторінки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додаємо ідентифікатор елементу:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<h2 id=\"contacts\">Контакти</h2>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створюємо посилання на цей id:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<a href=\"#contacts\">Перейти до контактів</a>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "При кліку сторінка прокрутиться до елемента з таким id."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Повний приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>Якірні посилання</title>\r\n  </head>\r\n  <body>\r\n    <!-- Навігація -->\r\n    <nav>\r\n      <a href=\"#about\">Про нас</a>\r\n      <a href=\"#services\">Послуги</a>\r\n      <a href=\"#contacts\">Контакти</a>\r\n    </nav>\r\n\r\n    <!-- Контент -->\r\n    <section id=\"about\">\r\n      <h2>Про нас</h2>\r\n      <p>Інформація про компанію...</p>\r\n    </section>\r\n\r\n    <section id=\"services\">\r\n      <h2>Послуги</h2>\r\n      <p>Опис наших послуг...</p>\r\n    </section>\r\n\r\n    <section id=\"contacts\">\r\n      <h2>Контакти</h2>\r\n      <p>Контактна інформація...</p>\r\n    </section>\r\n\r\n    <!-- Повернутися на верх -->\r\n    <a href=\"#top\">↑ На верх</a>\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "CSS для плавної прокрутки:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "html {\r\n  scroll-behavior: smooth;\r\n}\r"
-      }
-    ]
-  },
-  {
-    "question": "31. Як створити посилання на різні розділи на одній веб-сторінці HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Відповідь: Для створення гіперпосилання використовується тег "
-          },
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": ". Атрибут href вказує URL або шлях."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Повний приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>Якірні посилання</title>\r\n  </head>\r\n  <body>\r\n    <!-- Навігація -->\r\n    <nav>\r\n      <a href=\"#about\">Про нас</a>\r\n      <a href=\"#services\">Послуги</a>\r\n      <a href=\"#contacts\">Контакти</a>\r\n    </nav>\r\n\r\n    <!-- Контент -->\r\n    <section id=\"about\">\r\n      <h2>Про нас</h2>\r\n      <p>Інформація про компанію...</p>\r\n    </section>\r\n\r\n    <section id=\"services\">\r\n      <h2>Послуги</h2>\r\n      <p>Опис наших послуг...</p>\r\n    </section>\r\n\r\n    <section id=\"contacts\">\r\n      <h2>Контакти</h2>\r\n      <p>Контактна інформація...</p>\r\n    </section>\r\n\r\n    <!-- Повернутися на верх -->\r\n    <a href=\"#top\">↑ На верх</a>\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "CSS для плавної прокрутки:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "html {\r\n  scroll-behavior: smooth;\r\n}\r"
-      }
-    ]
-  },
-  {
-    "question": "32. Як створити посилання на файл для завантаження в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використати "
-          },
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": " з атрибутом "
-          },
-          {
-            "text": "download",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"files/manual.pdf\" download>Завантажити інструкцію</a>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "href — шлях до файлу."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "download — каже браузеру зберегти файл замість відкриття."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Можна вказати ім'я:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"files/manual.pdf\" download=\"Instrukciya.pdf\">Завантажити</a>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Завантажити з оригінальним ім'ям -->\r\n<a href=\"document.pdf\" download>Завантажити PDF</a>\r\n\r\n<!-- Завантажити з новим ім'ям -->\r\n<a href=\"report.xlsx\" download=\"financial-report-2023.xlsx\">\r\n  Завантажити звіт\r\n</a>\r\n\r\n<!-- Завантажити зображення -->\r\n<a href=\"photo.jpg\" download=\"my-photo.jpg\"> Зберегти фото </a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Примітка:",
-            "bold": true
-          },
-          {
-            "text": " Атрибут "
-          },
-          {
-            "text": "download",
-            "code": true
-          },
-          {
-            "text": " працює тільки для файлів з того самого домену (same-origin)."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "33. Яке призначення атрибута target у тегу a в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут target визначає, де відкриється посилання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "_self",
-                "code": true
-              },
-              {
-                "text": " (за замовчуванням) — відкриває в тій самій вкладці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "_blank",
-                "code": true
-              },
-              {
-                "text": " — відкриває у новій вкладці/вікні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "_parent",
-                "code": true
-              },
-              {
-                "text": " — відкриває в батьківському фреймі (якщо є фрейми)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "_top",
-                "code": true
-              },
-              {
-                "text": " — відкриває у всьому вікні, виходячи з фреймів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "customName",
-                "code": true
-              },
-              {
-                "text": " — відкриває в конкретному вікні/фреймі з цим ім'ям."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- За замовчуванням - поточна вкладка -->\r\n<a href=\"page.html\">Внутрішня сторінка</a>\r\n\r\n<!-- Нова вкладка -->\r\n<a href=\"https://example.com\" target=\"_blank\">Зовнішній сайт</a>\r\n\r\n<!-- Нова вкладка з безпекою -->\r\n<a href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n  Безпечне зовнішнє посилання\r\n</a>\r\n\r\n<!-- Конкретне вікно -->\r\n<a href=\"help.html\" target=\"helpWindow\">Довідка</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Безпека:",
-            "bold": true
-          },
-          {
-            "text": " Для "
-          },
-          {
-            "text": "target=\"_blank\"",
-            "code": true
-          },
-          {
-            "text": " рекомендується додавати "
-          },
-          {
-            "text": "rel=\"noopener noreferrer\"",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "34. Як вставляти зображення на HTML-сторінку?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуємо тег "
-          },
-          {
-            "text": "<img>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<img src=\"image.jpg\" alt=\"Опис зображення\" />\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "src",
-                "code": true
-              },
-              {
-                "text": " — шлях до зображення."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " — текстовий опис для доступності та коли зображення не завантажилось."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Опційно: "
-          },
-          {
-            "text": "width",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "height",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "title",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Детальніші приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Основне використання -->\r\n<img src=\"photo.jpg\" alt=\"Фотографія заходу сонця\" />\r\n\r\n<!-- З розмірами -->\r\n<img src=\"logo.png\" alt=\"Логотип компанії\" width=\"200\" height=\"100\" />\r\n\r\n<!-- З підказкою -->\r\n<img src=\"chart.png\" alt=\"Графік продажів\" title=\"Натисніть для збільшення\" />\r\n\r\n<!-- Відносний шлях -->\r\n<img src=\"../images/banner.jpg\" alt=\"Банер акції\" />\r\n\r\n<!-- Абсолютний URL -->\r\n<img src=\"https://example.com/image.jpg\" alt=\"Зовнішнє зображення\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Краща практика:",
-            "bold": true
-          },
-          {
-            "text": " Завжди включайте атрибут "
-          },
-          {
-            "text": "alt",
-            "code": true
-          },
-          {
-            "text": " для доступності."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "35. Яке значення має атрибут alt для зображень?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "alt",
-            "code": true
-          },
-          {
-            "text": " — альтернативний текст для зображення."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Призначення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Показується, якщо зображення не завантажилось."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Допомагає скрінрідерам робити сайт доступним."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для SEO."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади правильного використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Інформативне зображення -->\r\n<img\r\n  src=\"chart.png\"\r\n  alt=\"Графік продажів за 2023 рік показує зростання на 25%\"\r\n/>\r\n\r\n<!-- Декоративне зображення -->\r\n<img src=\"decoration.png\" alt=\"\" />\r\n\r\n<!-- Зображення-посилання -->\r\n<a href=\"/home\">\r\n  <img src=\"logo.png\" alt=\"Повернутися на головну сторінку\" />\r\n</a>\r\n\r\n<!-- Складне зображення -->\r\n<img src=\"infographic.jpg\" alt=\"Інфографіка: кроки створення веб-сайту\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Правила:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для декоративних зображень використовуйте "
-              },
-              {
-                "text": "alt=\"\"",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для інформативних - описуйте зміст"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для посилань - описуйте призначення посилання"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "36. Які формати зображень підтримуються веббраузерами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні формати, які підтримують сучасні браузери:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JPEG",
-                "code": true
-              },
-              {
-                "text": " / "
-              },
-              {
-                "text": "JPG",
-                "code": true
-              },
-              {
-                "text": " — фотографії з високою деталізацією, стиснення з втратою якості."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "PNG",
-                "code": true
-              },
-              {
-                "text": " — графіка з прозорістю, без втрати якості."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "GIF",
-                "code": true
-              },
-              {
-                "text": " — анімація та прості картинки з обмеженою палітрою."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "WebP",
-                "code": true
-              },
-              {
-                "text": " — сучасний формат з високим стисненням і прозорістю."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SVG",
-                "code": true
-              },
-              {
-                "text": " — векторна графіка, масштабована без втрати якості."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Менш поширені: BMP, ICO (для іконок)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовувати:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- JPEG для фотографій -->\r\n<img src=\"photo.jpg\" alt=\"Пейзаж\" />\r\n\r\n<!-- PNG для графіки з прозорістю -->\r\n<img src=\"logo.png\" alt=\"Логотип\" />\r\n\r\n<!-- GIF для анімації -->\r\n<img src=\"loading.gif\" alt=\"Завантаження\" />\r\n\r\n<!-- WebP для оптимізації -->\r\n<img src=\"optimized.webp\" alt=\"Оптимізоване зображення\" />\r\n\r\n<!-- SVG для векторної графіки -->\r\n<img src=\"icon.svg\" alt=\"Іконка\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Сучасні тенденції:",
-            "bold": true
-          },
-          {
-            "text": " WebP та AVIF для кращого стиснення, SVG для іконок та простої графіки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "37. Які різні типи списків доступні в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "В HTML є три основні типи списків:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нумерований список (`<ol>`)",
-                "bold": true
-              },
-              {
-                "text": " — елементи пронумеровані:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Маркований список (`<ul>`)",
-                "bold": true
-              },
-              {
-                "text": " — елементи з маркерами (кульки, квадрати):"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Список визначень (`<dl>`)",
-                "bold": true
-              },
-              {
-                "text": " — термін + опис:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Нумерований список -->\r\n<ol>\r\n  <li>Перший крок</li>\r\n  <li>Другий крок</li>\r\n  <li>Третій крок</li>\r\n</ol>\r\n\r\n<!-- Маркований список -->\r\n<ul>\r\n  <li>Молоко</li>\r\n  <li>Хліб</li>\r\n  <li>Яйця</li>\r\n</ul>\r\n\r\n<!-- Список визначень -->\r\n<dl>\r\n  <dt>HTML</dt>\r\n  <dd>HyperText Markup Language</dd>\r\n  <dt>CSS</dt>\r\n  <dd>Cascading Style Sheets</dd>\r\n</dl>\r"
-      }
-    ]
-  },
-  {
-    "question": "38. Як створювати впорядковані, невпорядковані списки та списки з описом у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Впорядкований список (`<ol>`):",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<ol>\r\n  <li>Перший</li>\r\n  <li>Другий</li>\r\n</ol>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Невпорядкований список (`<ul>`):",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<ul>\r\n  <li>Пункт 1</li>\r\n  <li>Пункт 2</li>\r\n</ul>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Список з описом (`<dl>`):",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<dl>\r\n  <dt>HTML</dt>\r\n  <dd>Мова розмітки</dd>\r\n  <dt>JavaScript</dt>\r\n  <dd>Мова програмування</dd>\r\n</dl>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширені приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Нумерований список з атрибутами -->\r\n<ol type=\"A\" start=\"3\">\r\n  <li>Третій пункт (C)</li>\r\n  <li>Четвертий пункт (D)</li>\r\n</ol>\r\n\r\n<!-- Список з різними маркерами (CSS) -->\r\n<ul style=\"list-style-type: square;\">\r\n  <li>Квадратний маркер</li>\r\n  <li>Ще один квадратний маркер</li>\r\n</ul>\r"
-      }
-    ]
-  },
-  {
-    "question": "39. Чи можна вкладати списки в HTML? Якщо так, то як?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Так, можна. Вкладені списки створюють всередині "
-          },
-          {
-            "text": "<li>",
-            "code": true
-          },
-          {
-            "text": " елемента:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<ul>\r\n  <li>\r\n    Пункт 1\r\n    <ul>\r\n      <li>Вкладений пункт 1</li>\r\n      <li>Вкладений пункт 2</li>\r\n    </ul>\r\n  </li>\r\n  <li>Пункт 2</li>\r\n</ul>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Можна вкладати будь-які типи списків ("
-          },
-          {
-            "text": "<ul>",
-            "code": true
-          },
-          {
-            "text": " всередині "
-          },
-          {
-            "text": "<ol>",
-            "code": true
-          },
-          {
-            "text": " і навпаки)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Більш складний приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<ol>\r\n  <li>\r\n    Веб-технології\r\n    <ul>\r\n      <li>\r\n        Frontend\r\n        <ul>\r\n          <li>HTML</li>\r\n          <li>CSS</li>\r\n          <li>JavaScript</li>\r\n        </ul>\r\n      </li>\r\n      <li>\r\n        Backend\r\n        <ul>\r\n          <li>Node.js</li>\r\n          <li>Python</li>\r\n          <li>PHP</li>\r\n        </ul>\r\n      </li>\r\n    </ul>\r\n  </li>\r\n  <li>Мобільна розробка</li>\r\n</ol>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Правило:",
-            "bold": true
-          },
-          {
-            "text": " Вкладений список завжди має бути всередині "
-          },
-          {
-            "text": "<li>",
-            "code": true
-          },
-          {
-            "text": ", а не між "
-          },
-          {
-            "text": "<li>",
-            "code": true
-          },
-          {
-            "text": " елементами."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "40. Як можна згрупувати опції всередині тегу select?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для групування опцій у випадаючому списку використовуйте тег "
-          },
-          {
-            "text": "<optgroup>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<select name=\"course\">\r\n  <optgroup label=\"Фронтенд\">\r\n    <option value=\"html\">HTML</option>\r\n    <option value=\"css\">CSS</option>\r\n    <option value=\"js\">JavaScript</option>\r\n  </optgroup>\r\n\r\n  <optgroup label=\"Бекенд\">\r\n    <option value=\"php\">PHP</option>\r\n    <option value=\"python\">Python</option>\r\n    <option value=\"nodejs\">Node.js</option>\r\n  </optgroup>\r\n\r\n  <optgroup label=\"Дизайн\">\r\n    <option value=\"photoshop\">Photoshop</option>\r\n    <option value=\"figma\">Figma</option>\r\n  </optgroup>\r\n</select>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги "
-          },
-          {
-            "text": "<optgroup>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Візуально групує пов'язані опції"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує юзабіліті для довгих списків"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримує атрибут "
-              },
-              {
-                "text": "label",
-                "code": true
-              },
-              {
-                "text": " для назви групи"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна вимкнути групу через "
-              },
-              {
-                "text": "disabled",
-                "code": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад з вимкненою групою:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<select name=\"country\">\r\n  <optgroup label=\"Європа\">\r\n    <option value=\"ua\">Україна</option>\r\n    <option value=\"pl\">Польща</option>\r\n  </optgroup>\r\n\r\n  <optgroup label=\"Азія\" disabled>\r\n    <option value=\"jp\">Японія</option>\r\n    <option value=\"cn\">Китай</option>\r\n  </optgroup>\r\n</select>\r"
-      }
-    ]
-  },
-  {
-    "question": "41. Що таке HTML-форми та як їх створити?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML-форма — це елемент, який збирає дані від користувача та відправляє їх на сервер або обробляє на клієнті."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад створення:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/submit\" method=\"post\">\r\n  <label for=\"name\">Ім'я:</label>\r\n  <input type=\"text\" id=\"name\" name=\"name\" />\r\n\r\n  <label for=\"email\">Email:</label>\r\n  <input type=\"email\" id=\"email\" name=\"email\" />\r\n\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<form>",
-                "code": true
-              },
-              {
-                "text": " — контейнер форми."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "action",
-                "code": true
-              },
-              {
-                "text": " — URL, куди відправляються дані."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "method",
-                "code": true
-              },
-              {
-                "text": " — спосіб відправки (get або post)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Поля вводу",
-            "bold": true
-          },
-          {
-            "text": " ("
-          },
-          {
-            "text": "<input>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<textarea>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<select>",
-            "code": true
-          },
-          {
-            "text": ") + кнопки ("
-          },
-          {
-            "text": "<button>",
-            "code": true
-          },
-          {
-            "text": " або "
-          },
-          {
-            "text": "<input type=\"submit\">",
-            "code": true
-          },
-          {
-            "text": ")."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширений приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/register\" method=\"post\" enctype=\"multipart/form-data\">\r\n  <fieldset>\r\n    <legend>Реєстрація користувача</legend>\r\n\r\n    <label for=\"username\">Логін:</label>\r\n    <input type=\"text\" id=\"username\" name=\"username\" required />\r\n\r\n    <label for=\"password\">Пароль:</label>\r\n    <input type=\"password\" id=\"password\" name=\"password\" required />\r\n\r\n    <label for=\"avatar\">Аватар:</label>\r\n    <input type=\"file\" id=\"avatar\" name=\"avatar\" accept=\"image/*\" />\r\n\r\n    <button type=\"submit\">Зареєструватися</button>\r\n    <button type=\"reset\">Очистити</button>\r\n  </fieldset>\r\n</form>\r"
-      }
-    ]
-  },
-  {
-    "question": "42. Опишіть різні типи вхідних даних форм у HTML5.",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "В HTML5 у "
-          },
-          {
-            "text": "<input>",
-            "code": true
-          },
-          {
-            "text": " з'явилося багато типів для збору різних даних:"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Текстові типи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "text",
-                "code": true
-              },
-              {
-                "text": " — звичайне текстове поле."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "password",
-                "code": true
-              },
-              {
-                "text": " — поле з прихованим введенням."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "email",
-                "code": true
-              },
-              {
-                "text": " — перевірка формату email."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "url",
-                "code": true
-              },
-              {
-                "text": " — перевірка формату URL."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tel",
-                "code": true
-              },
-              {
-                "text": " — для телефонів (без валідації формату в HTML)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "search",
-                "code": true
-              },
-              {
-                "text": " — поле пошуку."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Числові типи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "number",
-                "code": true
-              },
-              {
-                "text": " — числове поле зі стрілками."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "range",
-                "code": true
-              },
-              {
-                "text": " — повзунок для вибору значення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Дата і час:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "date",
-                "code": true
-              },
-              {
-                "text": " — вибір дати."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "month",
-                "code": true
-              },
-              {
-                "text": " — вибір місяця та року."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "week",
-                "code": true
-              },
-              {
-                "text": " — вибір тижня."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "time",
-                "code": true
-              },
-              {
-                "text": " — вибір часу."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "datetime-local",
-                "code": true
-              },
-              {
-                "text": " — дата і час без часової зони."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Інші типи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "color",
-                "code": true
-              },
-              {
-                "text": " — вибір кольору."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "checkbox",
-                "code": true
-              },
-              {
-                "text": " — прапорець."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "radio",
-                "code": true
-              },
-              {
-                "text": " — перемикач (один із групи)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "file",
-                "code": true
-              },
-              {
-                "text": " — вибір файлу для завантаження."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "hidden",
-                "code": true
-              },
-              {
-                "text": " — приховане поле для передачі даних."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Кнопки:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "submit",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "reset",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "button",
-                "code": true
-              },
-              {
-                "text": " — кнопки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<input type=\"email\" placeholder=\"user@example.com\" />\r\n<input type=\"number\" min=\"1\" max=\"100\" step=\"1\" />\r\n<input type=\"range\" min=\"0\" max=\"100\" value=\"50\" />\r\n<input type=\"date\" value=\"2023-12-31\" />\r\n<input type=\"color\" value=\"#ff0000\" />\r"
-      }
-    ]
-  },
-  {
-    "question": "43. Як зробити вхідні дані форм обов'язковими?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Щоб зробити поле форми обов'язковим, додаємо атрибут "
-          },
-          {
-            "text": "required",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<input type=\"email\" name=\"userEmail\" required />\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузер не дасть відправити форму, поки поле не заповнене."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для спеціалізованих типів (email, number, url) додатково перевіряється формат введення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширені приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Обов'язкове текстове поле -->\r\n<input type=\"text\" name=\"name\" required placeholder=\"Введіть ваше ім'я\" />\r\n\r\n<!-- Обов'язковий вибір з випадаючого списку -->\r\n<select name=\"country\" required>\r\n  <option value=\"\">Оберіть країну</option>\r\n  <option value=\"ua\">Україна</option>\r\n  <option value=\"pl\">Польща</option>\r\n</select>\r\n\r\n<!-- Обов'язкове прийняття умов -->\r\n<input type=\"checkbox\" name=\"terms\" required />\r\n<label for=\"terms\">Я погоджуюсь з умовами використання</label>\r\n\r\n<!-- Обов'язкове заповнення textarea -->\r\n<textarea name=\"message\" required placeholder=\"Ваше повідомлення\"></textarea>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Стилізація через CSS:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "input:required {\r\n  border-left: 3px solid red;\r\n}\r\n\r\ninput:valid {\r\n  border-left: 3px solid green;\r\n}\r"
-      }
-    ]
-  },
-  {
-    "question": "44. Яке призначення елемента label у формах?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<label>",
-            "code": true
-          },
-          {
-            "text": " пов'язує текстову підказку з елементом форми, щоб користувачу було зрозуміло, що вводити."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує доступність (скрінрідери читають підказку разом із полем)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Клік по <label> автоматично фокусує пов'язане поле."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Зовнішній label (через for та id):",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label for=\"email\">Email:</label> <input type=\"email\" id=\"email\" name=\"email\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Внутрішній label (обгортає елемент):",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label>\r\n  <input type=\"checkbox\" name=\"agree\" />\r\n  Погоджуюсь з умовами\r\n</label>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для radio buttons:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<fieldset>\r\n  <legend>Оберіть розмір:</legend>\r\n  <label>\r\n    <input type=\"radio\" name=\"size\" value=\"small\" />\r\n    Малий\r\n  </label>\r\n  <label>\r\n    <input type=\"radio\" name=\"size\" value=\"large\" />\r\n    Великий\r\n  </label>\r\n</fieldset>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Складніший приклад:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"form-group\">\r\n  <label for=\"password\"> Пароль <span class=\"required\">*</span> </label>\r\n  <input type=\"password\" id=\"password\" name=\"password\" required />\r\n  <small>Мінімум 8 символів</small>\r\n</div>\r"
-      }
-    ]
-  },
-  {
-    "question": "45. Як групувати вхідні дані форм і чому це потрібно робити?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для групування даних у формах використовують "
-              },
-              {
-                "text": "<fieldset>",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "<legend>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<fieldset>\r\n  <legend>Особисті дані</legend>\r\n  <label for=\"name\">Ім'я:</label>\r\n  <input type=\"text\" id=\"name\" name=\"name\" />\r\n\r\n  <label for=\"email\">Email:</label>\r\n  <input type=\"email\" id=\"email\" name=\"email\" />\r\n</fieldset>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Навіщо:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Візуально та логічно об'єднує пов'язані поля."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує доступність (скрінрідери читають легенду)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Допомагає структурувати великі форми і робить їх зручнішими для користувача."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширений приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form>\r\n  <fieldset>\r\n    <legend>Контактна інформація</legend>\r\n    <label for=\"phone\">Телефон:</label>\r\n    <input type=\"tel\" id=\"phone\" name=\"phone\" />\r\n\r\n    <label for=\"address\">Адреса:</label>\r\n    <textarea id=\"address\" name=\"address\"></textarea>\r\n  </fieldset>\r\n\r\n  <fieldset>\r\n    <legend>Налаштування акаунту</legend>\r\n    <label for=\"notifications\">\r\n      <input type=\"checkbox\" id=\"notifications\" name=\"notifications\" />\r\n      Отримувати сповіщення\r\n    </label>\r\n\r\n    <label for=\"privacy\">\r\n      <input type=\"radio\" id=\"privacy\" name=\"privacy\" value=\"public\" />\r\n      Публічний профіль\r\n    </label>\r\n  </fieldset>\r\n\r\n  <fieldset disabled>\r\n    <legend>Преміум функції</legend>\r\n    <input type=\"checkbox\" name=\"premium\" disabled />\r\n    <label>Доступно тільки для преміум користувачів</label>\r\n  </fieldset>\r\n</form>\r"
-      }
-    ]
-  },
-  {
-    "question": "46. Як створити форму в HTML і забезпечити її валідацію?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Створення форми з валідацією включає використання HTML5 атрибутів та JavaScript для розширеної перевірки."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "HTML5 валідація:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/submit\" method=\"post\" novalidate>\r\n  <label for=\"username\">Логін:</label>\r\n  <input\r\n    type=\"text\"\r\n    id=\"username\"\r\n    name=\"username\"\r\n    required\r\n    minlength=\"3\"\r\n    maxlength=\"20\"\r\n    pattern=\"[a-zA-Z0-9_]+\"\r\n    title=\"Тільки літери, цифри та підкреслення\"\r\n  />\r\n\r\n  <label for=\"email\">Email:</label>\r\n  <input type=\"email\" id=\"email\" name=\"email\" required />\r\n\r\n  <label for=\"age\">Вік:</label>\r\n  <input type=\"number\" id=\"age\" name=\"age\" min=\"18\" max=\"120\" required />\r\n\r\n  <label for=\"website\">Веб-сайт:</label>\r\n  <input type=\"url\" id=\"website\" name=\"website\" />\r\n\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути валідації:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "required",
-                "code": true
-              },
-              {
-                "text": " — обов'язкове поле"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "minlength/maxlength",
-                "code": true
-              },
-              {
-                "text": " — мінімальна/максимальна довжина"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "min/max",
-                "code": true
-              },
-              {
-                "text": " — мінімальне/максимальне значення для чисел"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "pattern",
-                "code": true
-              },
-              {
-                "text": " — регулярний вираз"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "step",
-                "code": true
-              },
-              {
-                "text": " — крок для числових полів"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "CSS для стилізації:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "input:valid {\r\n  border: 2px solid green;\r\n}\r\n\r\ninput:invalid {\r\n  border: 2px solid red;\r\n}\r\n\r\ninput:required {\r\n  background-color: #fff8dc;\r\n}\r"
-      }
-    ]
-  },
-  {
-    "question": "47. Які методи відправки даних форми ви знаєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні методи HTTP для відправки форм:"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "GET метод:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/search\" method=\"get\">\r\n  <input type=\"text\" name=\"query\" placeholder=\"Пошук...\" />\r\n  <button type=\"submit\">Шукати</button>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Характеристики GET:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дані додаються до URL як параметри запиту"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Видимі в адресному рядку"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна додати в закладки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Обмеження по розміру даних"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для пошуку, фільтрів"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "POST метод:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/submit\" method=\"post\">\r\n  <input type=\"text\" name=\"username\" required />\r\n  <input type=\"password\" name=\"password\" required />\r\n  <button type=\"submit\">Увійти</button>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Характеристики POST:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дані відправляються в тілі запиту"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не видимі в URL"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Немає обмежень по розміру"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для створення, оновлення даних"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Для завантаження файлів -->\r\n<form action=\"/upload\" method=\"post\" enctype=\"multipart/form-data\">\r\n  <input type=\"file\" name=\"document\" required />\r\n  <button type=\"submit\">Завантажити</button>\r\n</form>\r\n\r\n<!-- Перевизначення методу -->\r\n<form action=\"/update\" method=\"post\">\r\n  <input type=\"hidden\" name=\"_method\" value=\"PUT\" />\r\n  <button type=\"submit\">Оновити</button>\r\n</form>\r"
-      }
-    ]
-  },
-  {
-    "question": "48. Основні атрибути HTML-форм? Як вони впливають на надсилання даних з веб-сторінки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути елемента "
-          },
-          {
-            "text": "<form>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "action",
-            "bold": true
-          },
-          {
-            "text": " — URL для відправки даних:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/process-form\" method=\"post\"></form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "method",
-            "bold": true
-          },
-          {
-            "text": " — HTTP метод (GET, POST):"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form method=\"post\">\r\n  <!-- Безпечно для конфіденційних даних -->\r\n  <form method=\"get\"><!-- Для пошуку та фільтрів --></form>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "enctype",
-            "bold": true
-          },
-          {
-            "text": " — кодування даних:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- За замовчуванням -->\r\n<form enctype=\"application/x-www-form-urlencoded\">\r\n  <!-- Для файлів -->\r\n  <form enctype=\"multipart/form-data\">\r\n    <!-- Простий текст -->\r\n    <form enctype=\"text/plain\"></form>\r\n  </form>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "target",
-            "bold": true
-          },
-          {
-            "text": " — де відкрити результат:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form target=\"_blank\">\r\n  <!-- В новому вікні -->\r\n  <form target=\"_self\">\r\n    <!-- В поточному вікні -->\r\n    <form target=\"frame1\"><!-- В конкретному фреймі --></form>\r\n  </form>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "novalidate",
-            "bold": true
-          },
-          {
-            "text": " — вимкнути HTML5 валідацію:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form novalidate>\r\n  <!-- Валідація тільки через JavaScript -->\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "autocomplete",
-            "bold": true
-          },
-          {
-            "text": " — автозаповнення:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form autocomplete=\"on\">\r\n  <!-- Увімкнути -->\r\n  <form autocomplete=\"off\"><!-- Вимкнути --></form>\r\n</form>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад повної форми:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form\r\n  action=\"/contact\"\r\n  method=\"post\"\r\n  enctype=\"multipart/form-data\"\r\n  autocomplete=\"on\"\r\n  target=\"_self\"\r\n>\r\n  <input type=\"text\" name=\"name\" autocomplete=\"name\" />\r\n  <input type=\"email\" name=\"email\" autocomplete=\"email\" />\r\n  <input type=\"file\" name=\"attachment\" />\r\n\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r"
-      }
-    ]
-  },
-  {
-    "question": "49. Для чого використовується елемент datalist?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<datalist>",
-            "code": true
-          },
-          {
-            "text": " надає список готових варіантів для поля вводу, створюючи автодоповнення (autocomplete dropdown)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основне використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label for=\"browser\">Оберіть браузер:</label>\r\n<input list=\"browsers\" id=\"browser\" name=\"browser\" />\r\n\r\n<datalist id=\"browsers\">\r\n  <option value=\"Chrome\"></option>\r\n  <option value=\"Firefox\"></option>\r\n  <option value=\"Safari\"></option>\r\n  <option value=\"Edge\"></option>\r\n  <option value=\"Opera\"></option>\r\n</datalist>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Користувач може обрати зі списку або ввести власний варіант"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує UX через швидкий вибір"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Працює з різними типами input"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширені приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- З описом опцій -->\r\n<input list=\"languages\" name=\"language\" placeholder=\"Мова програмування\" />\r\n<datalist id=\"languages\">\r\n  <option value=\"JavaScript\" label=\"JS - Веб-розробка\"></option>\r\n  <option value=\"Python\" label=\"Python - Дані та ШІ\"></option>\r\n  <option value=\"Java\" label=\"Java - Корпоративна розробка\"></option>\r\n</datalist>\r\n\r\n<!-- Для емейлів -->\r\n<input type=\"email\" list=\"email-domains\" name=\"email\" />\r\n<datalist id=\"email-domains\">\r\n  <option value=\"@gmail.com\"></option>\r\n  <option value=\"@yahoo.com\"></option>\r\n  <option value=\"@outlook.com\"></option>\r\n</datalist>\r\n\r\n<!-- Для URL -->\r\n<input type=\"url\" list=\"sites\" name=\"website\" />\r\n<datalist id=\"sites\">\r\n  <option value=\"https://github.com/\"></option>\r\n  <option value=\"https://stackoverflow.com/\"></option>\r\n  <option value=\"https://developer.mozilla.org/\"></option>\r\n</datalist>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Підтримка браузерів:",
-            "bold": true
-          },
-          {
-            "text": " Всі сучасні браузери. У старих браузерах працює як звичайний input."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "50. Що таке елемент output у HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<output>",
-            "code": true
-          },
-          {
-            "text": " представляє результат обчислення або дії користувача. Зазвичай використовується для відображення результатів форм або динамічних розрахунків."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "for",
-                "code": true
-              },
-              {
-                "text": " — вказує на елементи, які впливають на результат"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "form",
-                "code": true
-              },
-              {
-                "text": " — пов'язує з конкретною формою"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "name",
-                "code": true
-              },
-              {
-                "text": " — ім'я для надсилання з формою"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад з обчисленням:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form>\r\n  <label for=\"quantity\">Кількість:</label>\r\n  <input type=\"number\" id=\"quantity\" name=\"quantity\" value=\"1\" min=\"1\" />\r\n\r\n  <label for=\"price\">Ціна:</label>\r\n  <input type=\"number\" id=\"price\" name=\"price\" value=\"100\" step=\"0.01\" />\r\n\r\n  <label for=\"total\">Загальна сума:</label>\r\n  <output id=\"total\" name=\"total\" for=\"quantity price\">100</output>\r\n</form>\r\n\r\n<script>\r\n  function updateTotal() {\r\n    const quantity = document.getElementById('quantity').value;\r\n    const price = document.getElementById('price').value;\r\n    const total = quantity * price;\r\n    document.getElementById('total').textContent = total.toFixed(2);\r\n  }\r\n\r\n  document.getElementById('quantity').addEventListener('input', updateTotal);\r\n  document.getElementById('price').addEventListener('input', updateTotal);\r\n</script>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад з прогрес-баром:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form>\r\n  <label for=\"progress-slider\">Прогрес:</label>\r\n  <input type=\"range\" id=\"progress-slider\" min=\"0\" max=\"100\" value=\"50\" />\r\n\r\n  <output id=\"progress-value\" for=\"progress-slider\">50%</output>\r\n</form>\r\n\r\n<script>\r\n  document\r\n    .getElementById('progress-slider')\r\n    .addEventListener('input', function () {\r\n      document.getElementById('progress-value').textContent = this.value + '%';\r\n    });\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Семантика:",
-            "bold": true
-          },
-          {
-            "text": " "
-          },
-          {
-            "text": "<output>",
-            "code": true
-          },
-          {
-            "text": " є семантично правильним способом показати результати, на відміну від "
-          },
-          {
-            "text": "<span>",
-            "code": true
-          },
-          {
-            "text": " або "
-          },
-          {
-            "text": "<div>",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "51. Що таке семантичний HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантичний HTML — це використання тегів за їхнім змістовим призначенням ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<footer>",
-                "code": true
-              },
-              {
-                "text": ", а не "
-              },
-              {
-                "text": "<div>",
-                "code": true
-              },
-              {
-                "text": " всюди)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це робить структуру сторінки зрозумілішою для браузерів, пошукових систем і "
-              },
-              {
-                "text": "assistive",
-                "code": true
-              },
-              {
-                "text": "-технологій."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для "
-              },
-              {
-                "text": "SEO",
-                "code": true
-              },
-              {
-                "text": " це критично: пошуковики краще розпізнають ієрархію контенту, визначають головні частини сторінки та підвищують релевантність у видачі."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Семантична розмітка = краща доступність + зрозуміла структура + підсилення SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "52. Що таке семантичні теги HTML і чому вони важливі?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Семантичні теги HTML — це теги, які описують зміст і роль свого вмісту (наприклад, "
-          },
-          {
-            "text": "<header>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<main>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<article>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<footer>",
-            "code": true
-          },
-          {
-            "text": ")."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Чому важливі:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поліпшують SEO — пошукові системи краще розуміють структуру."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність — скрінрідери можуть правильно інтерпретувати вміст."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легше підтримувати та читати код."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стандартизують структуру сторінки."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "53. Чим відрізняється article від section?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": " — самостійний контент, який може існувати окремо (новини, блог-пости, коментарі). Має зміст, зрозумілий поза контекстом сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": " — тематичний розділ контенту, частина більшої структури. Зазвичай має заголовок і логічно пов'язаний із рештою сторінки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<article>\r\n  <h2>Стаття про HTML5</h2>\r\n  <section>\r\n    <h3>Семантичні теги</h3>\r\n    <p>Опис семантичних тегів...</p>\r\n  </section>\r\n  <section>\r\n    <h3>Доступність</h3>\r\n    <p>Як семантика покращує доступність...</p>\r\n  </section>\r\n</article>\r"
-      }
-    ]
-  },
-  {
-    "question": "54. Що нового в HTML5 порівняно з попередніми версіями?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні нововведення HTML5:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантичні теги: "
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<footer>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розширені форми: нові типи "
-              },
-              {
-                "text": "<input>",
-                "code": true
-              },
-              {
-                "text": " (email, url, number, date, color тощо) та атрибути (required, placeholder, pattern)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мультимедіа: "
-              },
-              {
-                "text": "<audio>",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "<video>",
-                "code": true
-              },
-              {
-                "text": " без сторонніх плагінів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Графіка: "
-              },
-              {
-                "text": "<canvas>",
-                "code": true
-              },
-              {
-                "text": " для растрової графіки, "
-              },
-              {
-                "text": "<svg>",
-                "code": true
-              },
-              {
-                "text": " для векторної."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "API для JS: локальне сховище (localStorage, sessionStorage), геолокація, drag-and-drop, Web Workers."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Подкастинг та інтеграція: "
-              },
-              {
-                "text": "<figure>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<figcaption>",
-                "code": true
-              },
-              {
-                "text": " для зображень і підписів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращена підтримка мобільних: "
-              },
-              {
-                "text": "<meta name=\"viewport\">",
-                "code": true
-              },
-              {
-                "text": " та адаптивність."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "55. Як створити розділ на веб-сторінці за допомогою семантичних елементів HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "У HTML5 для створення розділів використовують семантичні теги:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<section>\r\n  <h2>Про нас</h2>\r\n  <p>Текст про компанію...</p>\r\n</section>\r\n\r\n<article>\r\n  <h2>Новина дня</h2>\r\n  <p>Текст новини...</p>\r\n</article>\r\n\r\n<aside>\r\n  <h3>Підказка</h3>\r\n  <p>Додаткова інформація</p>\r\n</aside>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": " — логічний розділ сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": " — самостійний блок контенту, який може існувати окремо."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<aside>",
-                "code": true
-              },
-              {
-                "text": " — побічна інформація, наприклад, сайдбар."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "<footer>",
-                "code": true
-              },
-              {
-                "text": " — заголовки та підвал розділів або сторінки."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "56. Яка роль елемента article у HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<article>",
-            "code": true
-          },
-          {
-            "text": " — семантичний елемент для самостійного контенту, який може існувати окремо від сторінки і бути зрозумілий поза контекстом."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Новини, блоги, публікації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коментарі користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Форумні повідомлення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує SEO і доступність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легко стилізується та структуровано організовує контент."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "57. Чи можете ви пояснити використання елементів nav та aside у HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": " — семантичний контейнер для основної навігації по сайту: меню, посилання на розділи чи сторінки."
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<nav>\r\n  <a href=\"/\">Головна</a>\r\n  <a href=\"/about\">Про нас</a>\r\n</nav>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<aside>",
-                "code": true
-              },
-              {
-                "text": " — для додаткового або побічного контенту, який не є головним, наприклад, сайдбари, підказки, реклами:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<aside>\r\n  <h3>Поради</h3>\r\n  <p>Корисна інформація для користувача</p>\r\n</aside>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Коротко: <nav> = навігація, <aside> = допоміжний або боковий контент."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "58. Як використовувати елементи figure та figcaption?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<figure>",
-                "code": true
-              },
-              {
-                "text": " — контейнер для медіа (зображення, графіка, відео) із підписом."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<figcaption>",
-                "code": true
-              },
-              {
-                "text": " — підпис до медіа всередині "
-              },
-              {
-                "text": "<figure>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<figure>\r\n  <img src=\"image.jpg\" alt=\"Опис зображення\" />\r\n  <figcaption>Підпис до зображення</figcaption>\r\n</figure>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує семантику та доступність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легко стилізується CSS."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "59. Як створити таблицю в HTML і які основні теги для цього використовуються?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "В HTML таблиця створюється тегом "
-          },
-          {
-            "text": "<table>",
-            "code": true
-          },
-          {
-            "text": ". Рядки — "
-          },
-          {
-            "text": "<tr>",
-            "code": true
-          },
-          {
-            "text": ", заголовки стовпців — "
-          },
-          {
-            "text": "<th>",
-            "code": true
-          },
-          {
-            "text": ", комірки — "
-          },
-          {
-            "text": "<td>",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<table>\r\n  <tr>\r\n    <th>Ім'я</th>\r\n    <th>Вік</th>\r\n  </tr>\r\n  <tr>\r\n    <td>Іван</td>\r\n    <td>25</td>\r\n  </tr>\r\n</table>\r"
-      }
-    ]
-  },
-  {
-    "question": "60. Що таке thead, tbody та tfoot у HTML-таблиці і для чого вони потрібні?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<thead>",
-                "code": true
-              },
-              {
-                "text": " — групує рядки заголовків таблиці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<tbody>",
-                "code": true
-              },
-              {
-                "text": " — основна частина таблиці з даними."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<tfoot>",
-                "code": true
-              },
-              {
-                "text": " — групує рядки підсумків (footer таблиці), відображається після tbody, але може рендеритися браузером перед ним для оптимізації."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<table>\r\n  <thead>\r\n    <tr>\r\n      <th>Назва</th>\r\n      <th>Ціна</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>Товар 1</td>\r\n      <td>100 грн</td>\r\n    </tr>\r\n    <tr>\r\n      <td>Товар 2</td>\r\n      <td>200 грн</td>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <tr>\r\n      <td>Загалом</td>\r\n      <td>300 грн</td>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує семантику та доступність"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дозволяє стилізувати різні частини таблиці окремо"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузери можуть фіксувати заголовки при прокрутці"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "61. Що таке атрибути colspan і rowspan у HTML-таблицях?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "colspan",
-                "code": true
-              },
-              {
-                "text": " — об'єднує комірку по кількох стовпцях."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rowspan",
-                "code": true
-              },
-              {
-                "text": " — об'єднує комірку по кількох рядках."
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<td colspan=\"2\">Об'єднано 2 стовпці</td>\r\n<td rowspan=\"3\">Об'єднано 3 рядки</td>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<table border=\"1\">\r\n  <tr>\r\n    <th colspan=\"2\">Заголовок на 2 колонки</th>\r\n    <th rowspan=\"2\">Вертикальний заголовок</th>\r\n  </tr>\r\n  <tr>\r\n    <td>Комірка 1</td>\r\n    <td>Комірка 2</td>\r\n  </tr>\r\n  <tr>\r\n    <td>Комірка 3</td>\r\n    <td>Комірка 4</td>\r\n    <td>Комірка 5</td>\r\n  </tr>\r\n</table>\r"
-      }
-    ]
-  },
-  {
-    "question": "62. Як зробити HTML-таблицю доступною для користувачів з екранними рідерами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати семантичні теги: "
-              },
-              {
-                "text": "<table>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<thead>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<tbody>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<tfoot>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<th>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додавати атрибут scope у "
-              },
-              {
-                "text": "<th>",
-                "code": true
-              },
-              {
-                "text": " (scope=\"col\" або scope=\"row\") для зв'язку заголовків і комірок."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додавати "
-              },
-              {
-                "text": "<caption>",
-                "code": true
-              },
-              {
-                "text": " для опису таблиці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникати зайвого "
-              },
-              {
-                "text": "rowspan/colspan",
-                "code": true
-              },
-              {
-                "text": ", якщо вони ускладнюють навігацію."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечити достатній контраст та видимі фокуси при навігації з клавіатури."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад доступної таблиці:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<table>\r\n  <caption>\r\n    Продажі за 2024 рік\r\n  </caption>\r\n  <thead>\r\n    <tr>\r\n      <th scope=\"col\">Місяць</th>\r\n      <th scope=\"col\">Продажі</th>\r\n      <th scope=\"col\">Прибуток</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr>\r\n      <th scope=\"row\">Січень</th>\r\n      <td>1000</td>\r\n      <td>200</td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r"
-      }
-    ]
-  },
-  {
-    "question": "63. Що таке елемент canvas? І для чого він використовується?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<canvas>",
-            "code": true
-          },
-          {
-            "text": " — растровий холст для малювання графіки через JavaScript API."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ігри та інтерактивна графіка"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Складні візуалізації даних"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Обробка зображень"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Анімації та ефекти"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<canvas id=\"myCanvas\" width=\"400\" height=\"200\"></canvas>\r\n\r\n<script>\r\n  const canvas = document.getElementById('myCanvas');\r\n  const ctx = canvas.getContext('2d');\r\n\r\n  // Малюємо прямокутник\r\n  ctx.fillStyle = 'blue';\r\n  ctx.fillRect(50, 50, 100, 75);\r\n\r\n  // Малюємо коло\r\n  ctx.beginPath();\r\n  ctx.arc(200, 100, 50, 0, 2 * Math.PI);\r\n  ctx.fillStyle = 'red';\r\n  ctx.fill();\r\n</script>\r"
-      }
-    ]
-  },
-  {
-    "question": "64. Різниця між canvas та svg? У яких випадках краще використовувати canvas, а в яких svg?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<canvas>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Растрова графіка (пікселі)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Малювання через JavaScript API"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підходить для ігор, складної анімації, обробки зображень"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Масштабування може погіршити якість"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Неможливо стилізувати окремі елементи CSS"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<svg>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Векторна графіка (математичні об'єкти)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Описується XML-розміткою"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підходить для іконок, логотипів, простих діаграм"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Безкінечне масштабування без втрати якості"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна стилізувати CSS та анімувати"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовувати:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Canvas",
-            "bold": true
-          },
-          {
-            "text": " → ігри, складна графіка, обробка фото, реал-тайм анімації"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "SVG",
-            "bold": true
-          },
-          {
-            "text": " → іконки, логотипи, прості діаграми, масштабована графіка"
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "65. Яка різниця між елементами svg та canvas?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<svg>",
-                "code": true
-              },
-              {
-                "text": " — векторна графіка, кожен елемент DOM-структурований, масштабований без втрати якості, легкий для анімації та стилізації через CSS/JS."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<canvas>",
-                "code": true
-              },
-              {
-                "text": " — растровий холст, малювання відбувається через JS API, не має внутрішньої семантики елементів, масштабування може знизити якість, підходить для ігор і складної графіки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Порівняння:"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Характеристика"
-            }
-          ],
-          [
-            {
-              "text": "SVG"
-            }
-          ],
-          [
-            {
-              "text": "Canvas"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "Тип графіки"
-              }
-            ],
-            [
-              {
-                "text": "Векторна"
-              }
-            ],
-            [
-              {
-                "text": "Растрова"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "DOM-структура"
-              }
-            ],
-            [
-              {
-                "text": "Так"
-              }
-            ],
-            [
-              {
-                "text": "Ні"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Масштабування"
-              }
-            ],
-            [
-              {
-                "text": "Без втрат"
-              }
-            ],
-            [
-              {
-                "text": "З втратами"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Стилізація CSS"
-              }
-            ],
-            [
-              {
-                "text": "Так"
-              }
-            ],
-            [
-              {
-                "text": "Обмежено"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Продуктивність"
-              }
-            ],
-            [
-              {
-                "text": "Повільніше при багатьох елементах"
-              }
-            ],
-            [
-              {
-                "text": "Швидше для складної графіки"
-              }
-            ]
-          ]
-        ]
-      }
-    ]
-  },
-  {
-    "question": "66. Що ви знаєте про SVG? Які є варіанти додавання SVG на сторінки сайту? Чим вони відрізняються?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "SVG (Scalable Vector Graphics)",
-            "bold": true
-          },
-          {
-            "text": " — векторний формат для графіки, що масштабується без втрати якості."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Способи додавання SVG:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Inline SVG",
-                "bold": true
-              },
-              {
-                "text": " — безпосередньо в HTML:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<svg width=\"100\" height=\"100\">\r\n  <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\r\n</svg>\r"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Переваги:",
-                        "bold": true
-                      },
-                      {
-                        "text": " повний контроль CSS/JS, доступність"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Недоліки:",
-                        "bold": true
-                      },
-                      {
-                        "text": " збільшує розмір HTML"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Як зображення",
-                "bold": true
-              },
-              {
-                "text": " — через "
-              },
-              {
-                "text": "<img>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<img src=\"icon.svg\" alt=\"Іконка\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Переваги:",
-                "bold": true
-              },
-              {
-                "text": " кешується, компактний HTML"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Недоліки:",
-                "bold": true
-              },
-              {
-                "text": " не можна стилізувати CSS"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS background",
-                "bold": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".icon {\r\n  background-image: url('icon.svg');\r\n}\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Через `<object>` або `<embed>`",
-                "bold": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<object data=\"graphic.svg\" type=\"image/svg+xml\"></object>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Найкращий вибір:",
-            "bold": true
-          },
-          {
-            "text": " inline для іконок, що потребують стилізації; "
-          },
-          {
-            "text": "<img>",
-            "code": true
-          },
-          {
-            "text": " для статичної графіки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "67. Як створювати карти зображень у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML-карта зображень (image map) дозволяє зробити частини зображення клікабельними."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<img src=\"plan.jpg\" usemap=\"#map1\" alt=\"План будівлі\" />\r\n\r\n<map name=\"map1\">\r\n  <area shape=\"rect\" coords=\"34,44,270,350\" href=\"room1.html\" alt=\"Кімната 1\" />\r\n  <area shape=\"circle\" coords=\"337,300,44\" href=\"room2.html\" alt=\"Кімната 2\" />\r\n  <area\r\n    shape=\"poly\"\r\n    coords=\"400,50,500,50,450,150\"\r\n    href=\"room3.html\"\r\n    alt=\"Кімната 3\"\r\n  />\r\n</map>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Пояснення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "usemap=\"#map1\"",
-                "code": true
-              },
-              {
-                "text": " — прив'язка картинки до карти"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<area>",
-                "code": true
-              },
-              {
-                "text": " — задає клікабельну область:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "shape=\"rect\"",
-                "code": true
-              },
-              {
-                "text": " — прямокутник (coords: x1,y1,x2,y2)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "shape=\"circle\"",
-                "code": true
-              },
-              {
-                "text": " — коло (coords: x,y,radius)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "shape=\"poly\"",
-                "code": true
-              },
-              {
-                "text": " — багатокутник (coords: x1,y1,x2,y2,x3,y3...)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "href",
-                "code": true
-              },
-              {
-                "text": " — посилання при кліку"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " — альтернативний текст для доступності"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "68. Як додати аудіо та відео в HTML-документ за допомогою вбудованих тегів?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Аудіо",
-                "bold": true
-              },
-              {
-                "text": " — тег "
-              },
-              {
-                "text": "<audio>",
-                "code": true
-              },
-              {
-                "text": " з атрибутом controls:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<audio controls>\r\n  <source src=\"sound.mp3\" type=\"audio/mpeg\" />\r\n  <source src=\"sound.ogg\" type=\"audio/ogg\" />\r\n  Ваш браузер не підтримує аудіо.\r\n</audio>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відео",
-                "bold": true
-              },
-              {
-                "text": " — тег "
-              },
-              {
-                "text": "<video>",
-                "code": true
-              },
-              {
-                "text": " з атрибутом controls:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<video controls width=\"640\" height=\"360\">\r\n  <source src=\"video.mp4\" type=\"video/mp4\" />\r\n  <source src=\"video.webm\" type=\"video/webm\" />\r\n  Ваш браузер не підтримує відео.\r\n</video>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Важливо:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<source>",
-                "code": true
-              },
-              {
-                "text": " — дозволяє вказати кілька форматів для кращої сумісності"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Текст між тегами — fallback для старих браузерів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "controls",
-                "code": true
-              },
-              {
-                "text": " — показує елементи керування (play/pause/volume)"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "69. Які основні атрибути підтримують теги video та audio у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Спільні атрибути для "
-          },
-          {
-            "text": "<video>",
-            "code": true
-          },
-          {
-            "text": " та "
-          },
-          {
-            "text": "<audio>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "src",
-                "code": true
-              },
-              {
-                "text": " — шлях до файлу (можна замість "
-              },
-              {
-                "text": "<source>",
-                "code": true
-              },
-              {
-                "text": ")"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "controls",
-                "code": true
-              },
-              {
-                "text": " — відображає елементи керування"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "autoplay",
-                "code": true
-              },
-              {
-                "text": " — автоматичне відтворення (часто вимагає muted)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "loop",
-                "code": true
-              },
-              {
-                "text": " — повторне відтворення після завершення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "muted",
-                "code": true
-              },
-              {
-                "text": " — без звуку"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "preload",
-                "code": true
-              },
-              {
-                "text": " — підвантаження:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "none",
-                "code": true
-              },
-              {
-                "text": " — не завантажувати наперед"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "metadata",
-                "code": true
-              },
-              {
-                "text": " — тільки метадані"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "auto",
-                "code": true
-              },
-              {
-                "text": " — браузер сам вирішує"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додатково для "
-          },
-          {
-            "text": "<video>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "width",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "height",
-                "code": true
-              },
-              {
-                "text": " — розміри відеоплеєра"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "poster",
-                "code": true
-              },
-              {
-                "text": " — зображення-заставка до початку відтворення"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<video\r\n  controls\r\n  width=\"800\"\r\n  height=\"450\"\r\n  poster=\"preview.jpg\"\r\n  preload=\"metadata\"\r\n>\r\n  <source src=\"movie.mp4\" type=\"video/mp4\" />\r\n</video>\r"
-      }
-    ]
-  },
-  {
-    "question": "70. Як додати субтитри або підписи до відео в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використати тег "
-          },
-          {
-            "text": "<track>",
-            "code": true
-          },
-          {
-            "text": " всередині "
-          },
-          {
-            "text": "<video>",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути "
-          },
-          {
-            "text": "<track>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "src",
-                "code": true
-              },
-              {
-                "text": " — файл субтитрів (формат .vtt)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "kind",
-                "code": true
-              },
-              {
-                "text": " — тип (subtitles, captions, descriptions, chapters, metadata)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "srclang",
-                "code": true
-              },
-              {
-                "text": " — мова субтитрів (en, uk)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "label",
-                "code": true
-              },
-              {
-                "text": " — назва треку в меню"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "default",
-                "code": true
-              },
-              {
-                "text": " — трек за замовчуванням"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<video controls>\r\n  <source src=\"movie.mp4\" type=\"video/mp4\" />\r\n  <track src=\"subtitles_en.vtt\" kind=\"subtitles\" srclang=\"en\" label=\"English\" />\r\n  <track\r\n    src=\"subtitles_uk.vtt\"\r\n    kind=\"subtitles\"\r\n    srclang=\"uk\"\r\n    label=\"Українська\"\r\n    default\r\n  />\r\n  <track\r\n    src=\"descriptions.vtt\"\r\n    kind=\"descriptions\"\r\n    srclang=\"uk\"\r\n    label=\"Аудіоопис\"\r\n  />\r\n</video>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Формат .vtt файлу:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": null,
-        "content": "WEBVTT\r\n\r\n00:00:00.000 --> 00:00:03.000\r\nПривіт! Це перший рядок субтитрів.\r\n\r\n00:00:03.000 --> 00:00:06.000\r\nА це другий рядок.\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Браузер покаже вибір субтитрів, якщо формат "
-          },
-          {
-            "text": ".vtt",
-            "code": true
-          },
-          {
-            "text": " коректний."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "71. Чи можете ви пояснити призначення метатегів у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Метатеги у "
-          },
-          {
-            "text": "<head>",
-            "code": true
-          },
-          {
-            "text": " зберігають метадані про сторінку — інформацію, яку не видно користувачу, але використовують браузери, пошукові системи та сервіси."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади призначення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meta charset=\"UTF-8\">",
-                "code": true
-              },
-              {
-                "text": " — задає кодування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
-                "code": true
-              },
-              {
-                "text": " — адаптивність на мобільних."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meta name=\"description\" content=\"Опис сторінки\">",
-                "code": true
-              },
-              {
-                "text": " — SEO."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meta name=\"robots\" content=\"index, follow\">",
-                "code": true
-              },
-              {
-                "text": " — інструкції для пошукових ботів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<head>\r\n  <meta charset=\"UTF-8\" />\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n  <meta\r\n    name=\"description\"\r\n    content=\"Короткий опис сторінки для пошукових систем\"\r\n  />\r\n  <meta name=\"keywords\" content=\"ключові, слова, для, seo\" />\r\n  <meta name=\"author\" content=\"Ім'я автора\" />\r\n  <meta name=\"robots\" content=\"index, follow\" />\r\n\r\n  <!-- Open Graph для соціальних мереж -->\r\n  <meta property=\"og:title\" content=\"Заголовок для Facebook\" />\r\n  <meta property=\"og:description\" content=\"Опис для соціальних мереж\" />\r\n  <meta property=\"og:image\" content=\"image.jpg\" />\r\n\r\n  <!-- Twitter Cards -->\r\n  <meta name=\"twitter:card\" content=\"summary_large_image\" />\r\n  <meta name=\"twitter:title\" content=\"Заголовок для Twitter\" />\r\n</head>\r"
-      }
-    ]
-  },
-  {
-    "question": "72. Як пов'язати CSS-файл з HTML-документом?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "У "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " додаємо тег:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<link rel=\"stylesheet\" href=\"styles.css\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rel=\"stylesheet\"",
-                "code": true
-              },
-              {
-                "text": " — вказує, що це файл стилів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "href",
-                "code": true
-              },
-              {
-                "text": " — шлях до CSS-файлу"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові варіанти:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Основний CSS файл -->\r\n<link rel=\"stylesheet\" href=\"css/main.css\" />\r\n\r\n<!-- CSS з медіа-запитами -->\r\n<link rel=\"stylesheet\" href=\"css/print.css\" media=\"print\" />\r\n<link rel=\"stylesheet\" href=\"css/mobile.css\" media=\"(max-width: 768px)\" />\r\n\r\n<!-- CSS з CDN -->\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\"\r\n/>\r\n\r\n<!-- Внутрішні стилі -->\r\n<style>\r\n  body {\r\n    margin: 0;\r\n    padding: 20px;\r\n  }\r\n</style>\r"
-      }
-    ]
-  },
-  {
-    "question": "73. Як пов'язати JavaScript-файл з HTML-документом?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Через тег "
-              },
-              {
-                "text": "<script>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<script src=\"script.js\"></script>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розміщення та атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- В <head> - завантажується до рендерингу сторінки -->\r\n<head>\r\n  <script src=\"script.js\"></script>\r\n</head>\r\n\r\n<!-- Перед </body> - завантажується після HTML (рекомендовано) -->\r\n<body>\r\n  <!-- HTML контент -->\r\n  <script src=\"script.js\"></script>\r\n</body>\r\n\r\n<!-- Асинхронне завантаження -->\r\n<script src=\"script.js\" async></script>\r\n\r\n<!-- Відкладене завантаження -->\r\n<script src=\"script.js\" defer></script>\r\n\r\n<!-- Внутрішній JavaScript -->\r\n<script>\r\n  console.log('Привіт, світ!');\r\n</script>\r\n\r\n<!-- JavaScript з CDN -->\r\n<script src=\"https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js\"></script>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Різниця між async та defer:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "async",
-                "code": true
-              },
-              {
-                "text": " — завантажується паралельно і виконується одразу"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "defer",
-                "code": true
-              },
-              {
-                "text": " — завантажується паралельно, але виконується після HTML"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "74. Що таке iframe і для чого його використовують?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<iframe>",
-            "code": true
-          },
-          {
-            "text": " — це елемент для вбудовування іншої HTML-сторінки всередину поточної сторінки."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<iframe src=\"https://example.com\" width=\"600\" height=\"400\"></iframe>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<iframe\r\n  src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"\r\n  width=\"560\"\r\n  height=\"315\"\r\n  frameborder=\"0\"\r\n  allowfullscreen\r\n  title=\"YouTube відео\"\r\n  loading=\"lazy\"\r\n>\r\n</iframe>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вбудовування відео",
-                "bold": true
-              },
-              {
-                "text": " (YouTube, Vimeo)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Карти",
-                "bold": true
-              },
-              {
-                "text": " (Google Maps)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Соціальні віджети",
-                "bold": true
-              },
-              {
-                "text": " (Facebook, Twitter)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зовнішні форми",
-                "bold": true
-              },
-              {
-                "text": " чи додатки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Пісочниці",
-                "bold": true
-              },
-              {
-                "text": " для демонстрації коду"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути безпеки:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<iframe\r\n  src=\"untrusted-content.html\"\r\n  sandbox=\"allow-scripts allow-same-origin\"\r\n  referrerpolicy=\"no-referrer\"\r\n>\r\n</iframe>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Недоліки:",
-            "bold": true
-          },
-          {
-            "text": " може впливати на SEO, безпеку та швидкість завантаження."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "75. Як додати коментар у HTML і чому його використовувати?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Це коментар -->\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Призначення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Пояснення коду",
-                "bold": true
-              },
-              {
-                "text": " для себе або колег"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Тимчасове вимкнення",
-                "bold": true
-              },
-              {
-                "text": " частини розмітки без видалення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Позначення секцій",
-                "bold": true
-              },
-              {
-                "text": " коду для зручності навігації"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Документування",
-                "bold": true
-              },
-              {
-                "text": " складної структури"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Заголовок сторінки -->\r\n<header>\r\n  <h1>Моя сторінка</h1>\r\n  <!-- TODO: додати логотип -->\r\n</header>\r\n\r\n<!-- Основний контент -->\r\n<main>\r\n  <section>\r\n    <h2>Про нас</h2>\r\n    <p>Текст про компанію...</p>\r\n  </section>\r\n\r\n  <!-- \r\n    Тимчасово приховано до завершення розробки\r\n    <section>\r\n      <h2>Наші послуги</h2>\r\n      <p>Список послуг...</p>\r\n    </section>\r\n  -->\r\n</main>\r\n\r\n<!-- \r\n  Кінець основного контенту\r\n  Далі йде підвал сторінки\r\n-->\r\n<footer>\r\n  <p>&copy; 2024 Моя компанія</p>\r\n</footer>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Важливо:",
-            "bold": true
-          },
-          {
-            "text": " коментарі видимі в коді сторінки, тому не додавайте конфіденційну інформацію!"
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "76. Різниця між кнопкою та посиланням у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<button>",
-            "code": true
-          },
-          {
-            "text": " — для дій:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відправка форм"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Виклик JavaScript функцій"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зміна стану сторінки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтерактивні елементи UI"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": " — для навігації:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перехід на інші сторінки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Переходи всередині сторінки (якорі)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Завантаження файлів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Посилання на зовнішні ресурси"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади правильного використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Кнопки для дій -->\r\n<button type=\"submit\">Відправити форму</button>\r\n<button onclick=\"toggleMenu()\">Відкрити меню</button>\r\n<button type=\"button\" id=\"likeBtn\">Подобається</button>\r\n\r\n<!-- Посилання для навігації -->\r\n<a href=\"/about\">Про нас</a>\r\n<a href=\"#contacts\">Перейти до контактів</a>\r\n<a href=\"document.pdf\" download>Завантажити PDF</a>\r\n<a href=\"https://external-site.com\" target=\"_blank\">Зовнішнє посилання</a>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Семантична важливість:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кнопки",
-                "bold": true
-              },
-              {
-                "text": " розуміються скрінрідерами як елементи дії"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Посилання",
-                "bold": true
-              },
-              {
-                "text": " розуміються як навігаційні елементи"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це впливає на доступність та SEO"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Стилізація:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Посилання, стилізоване як кнопка (але семантично залишається посиланням) -->\r\n<a href=\"/signup\" class=\"btn\">Зареєструватися</a>\r\n\r\n<!-- Кнопка для навігації (неправильно з точки зору семантики) -->\r\n<button onclick=\"location.href='/signup'\">Зареєструватися</button>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Правило:",
-            "bold": true
-          },
-          {
-            "text": " використовуйте "
-          },
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": " для навігації, "
-          },
-          {
-            "text": "<button>",
-            "code": true
-          },
-          {
-            "text": " для дій."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "77. Як правильно створити семантичну панель навігації в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуємо семантичний тег "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": " з внутрішнім списком посилань "
-              },
-              {
-                "text": "<ul><li><a>",
-                "code": true
-              },
-              {
-                "text": ". Це забезпечує доступність і правильну структуру."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Базовий приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<nav>\r\n  <ul>\r\n    <li><a href=\"/\">Головна</a></li>\r\n    <li><a href=\"/about\">Про нас</a></li>\r\n    <li><a href=\"/services\">Послуги</a></li>\r\n    <li><a href=\"/contact\">Контакти</a></li>\r\n  </ul>\r\n</nav>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширений приклад з підменю:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<nav aria-label=\"Основна навігація\">\r\n  <ul>\r\n    <li><a href=\"/\" aria-current=\"page\">Головна</a></li>\r\n    <li>\r\n      <a href=\"/services\">Послуги</a>\r\n      <ul>\r\n        <li><a href=\"/services/web-design\">Веб-дизайн</a></li>\r\n        <li><a href=\"/services/development\">Розробка</a></li>\r\n        <li><a href=\"/services/seo\">SEO</a></li>\r\n      </ul>\r\n    </li>\r\n    <li><a href=\"/about\">Про нас</a></li>\r\n    <li><a href=\"/contact\">Контакти</a></li>\r\n  </ul>\r\n</nav>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Принципи семантичної навігації:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуйте `<nav>`",
-                "bold": true
-              },
-              {
-                "text": " для основних навігаційних блоків"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Структуруйте списками",
-                "bold": true
-              },
-              {
-                "text": " "
-              },
-              {
-                "text": "<ul><li><a>",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додавайте `aria-label`",
-                "bold": true
-              },
-              {
-                "text": " для множинних навігацій"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Позначайте поточну сторінку",
-                "bold": true
-              },
-              {
-                "text": " "
-              },
-              {
-                "text": "aria-current=\"page\"",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечте доступність",
-                "bold": true
-              },
-              {
-                "text": " клавіатурної навігації"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "78. Як семантично правильно згорнути навігаційне меню?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для семантично правильного згортання навігаційного меню використовуйте елемент "
-          },
-          {
-            "text": "<nav>",
-            "code": true
-          },
-          {
-            "text": " всередині якого знаходяться списки з посиланнями."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад з використанням "
-          },
-          {
-            "text": "<details>",
-            "code": true
-          },
-          {
-            "text": " та "
-          },
-          {
-            "text": "<summary>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<nav>\r\n  <details>\r\n    <summary>Меню</summary>\r\n    <ul>\r\n      <li><a href=\"/\">Головна</a></li>\r\n      <li><a href=\"/about\">Про нас</a></li>\r\n      <li><a href=\"/services\">Послуги</a></li>\r\n      <li><a href=\"/contact\">Контакти</a></li>\r\n    </ul>"
-      }
-    ]
-  },
-  {
-    "question": "79. Як створити базове випадаюче меню в HTML і CSS без JavaScript?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуємо вкладені списки "
-              },
-              {
-                "text": "<ul>",
-                "code": true
-              },
-              {
-                "text": " і керуємо показом підменю через "
-              },
-              {
-                "text": ":hover",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<nav>\r\n  <ul class=\"menu\">\r\n    <li>\r\n      <a href=\"/services\">Послуги</a>\r\n      <ul class=\"dropdown\">\r\n        <li><a href=\"/services/web-development\">Веб-розробка</a></li>\r\n        <li><a href=\"/services/ui-design\">UI/UX Дизайн</a></li>\r\n        <li><a href=\"/services/seo\">SEO оптимізація</a></li>\r\n      </ul>\r\n    </li>\r\n    <li><a href=\"/about\">Про нас</a></li>\r\n    <li><a href=\"/contact\">Контакти</a></li>\r\n  </ul>\r\n</nav>\r\n\r\n<style>\r\n  /* Основні стилі меню */\r\n  .menu {\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    display: flex;\r\n  }\r\n\r\n  .menu li {\r\n    position: relative;\r\n  }\r\n\r\n  .menu a {\r\n    display: block;\r\n    padding: 15px 20px;\r\n    text-decoration: none;\r\n    color: #333;\r\n    background: #f8f9fa;\r\n    border-right: 1px solid #ddd;\r\n  }\r\n\r\n  .menu a:hover {\r\n    background: #e9ecef;\r\n  }\r\n\r\n  /* Стилі випадаючого меню */\r\n  .dropdown {\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    min-width: 200px;\r\n    background: white;\r\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n    display: none;\r\n    z-index: 1000;\r\n  }\r\n\r\n  .dropdown li {\r\n    width: 100%;\r\n  }\r\n\r\n  .dropdown a {\r\n    border-right: none;\r\n    border-bottom: 1px solid #eee;\r\n  }\r\n\r\n  /* Показати підменю при наведенні */\r\n  .menu li:hover .dropdown {\r\n    display: block;\r\n  }\r\n\r\n  /* Альтернативний варіант з плавною анімацією */\r\n  .dropdown {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .menu li:hover .dropdown {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n</style>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Працює без JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Простота реалізації"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Хороша семантика"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Недоліки:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не працює на дотик (мобільні)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Обмежені можливості анімації"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Меню зникає при випадковому відведенні курсора"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "80. Різниця між meter та progress?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<meter>",
-            "code": true
-          },
-          {
-            "text": " — для виміряних значень:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Рівень заповнення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Температура"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Бали або рейтинги"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Показники в певному діапазоні"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<progress>",
-            "code": true
-          },
-          {
-            "text": " — для прогресу завдань:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Завантаження файлів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Виконання процесів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Прогрес форм"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Часові індикатори"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- <meter> для виміряного значення -->\r\n<label for=\"battery\">Рівень заряду батареї:</label>\r\n<meter id=\"battery\" value=\"0.7\" min=\"0\" max=\"1\">70%</meter>\r\n\r\n<label for=\"score\">Оцінка статті:</label>\r\n<meter id=\"score\" value=\"8\" min=\"0\" max=\"10\">8 з 10</meter>\r\n\r\n<label for=\"storage\">Використання диска:</label>\r\n<meter id=\"storage\" value=\"650\" min=\"0\" max=\"1000\" high=\"900\" optimum=\"200\">\r\n  650 GB з 1000 GB\r\n</meter>\r\n\r\n<!-- <progress> для прогресу завдання -->\r\n<label for=\"fileProgress\">Прогрес завантаження:</label>\r\n<progress id=\"fileProgress\" value=\"30\" max=\"100\">30%</progress>\r\n\r\n<label for=\"formProgress\">Заповнення форми:</label>\r\n<progress id=\"formProgress\" value=\"2\" max=\"5\">Крок 2 з 5</progress>\r\n\r\n<!-- Невизначений прогрес -->\r\n<progress>Завантажується...</progress>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути "
-          },
-          {
-            "text": "<meter>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "value",
-                "code": true
-              },
-              {
-                "text": " — поточне значення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "min",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "max",
-                "code": true
-              },
-              {
-                "text": " — діапазон"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "high",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "low",
-                "code": true
-              },
-              {
-                "text": " — пороги"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "optimum",
-                "code": true
-              },
-              {
-                "text": " — оптимальне значення"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути "
-          },
-          {
-            "text": "<progress>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "value",
-                "code": true
-              },
-              {
-                "text": " — поточний прогрес"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "max",
-                "code": true
-              },
-              {
-                "text": " — максимальне значення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Без "
-              },
-              {
-                "text": "value",
-                "code": true
-              },
-              {
-                "text": " — невизначений прогрес"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Візуальні відмінності:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Meter",
-                "bold": true
-              },
-              {
-                "text": " зазвичай показує індикатор рівня"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Progress",
-                "bold": true
-              },
-              {
-                "text": " показує смугу прогресу"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузери стилізують їх по-різному"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "81. Що таке область перегляду (viewport) у веб-розробці та як її налаштувати?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Область перегляду — це видима частина веб-сторінки у браузері користувача. Вона важлива для адаптивного дизайну. Налаштовується через мета-тег у "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "width=device-width",
-                "code": true
-              },
-              {
-                "text": " — ширина "
-              },
-              {
-                "text": "viewport",
-                "code": true
-              },
-              {
-                "text": " дорівнює ширині екрана пристрою."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "initial-scale=1",
-                "code": true
-              },
-              {
-                "text": " — початковий масштаб сторінки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це забезпечує коректне відображення на мобільних пристроях."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "82. Розкажіть про meta-тег із name=\"viewport\"?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мета-тег "
-              },
-              {
-                "text": "viewport",
-                "code": true
-              },
-              {
-                "text": " контролює відображення веб-сторінки на мобільних пристроях:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні параметри:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "width=device-width",
-                "code": true
-              },
-              {
-                "text": " — ширина viewport дорівнює ширині екрана."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "initial-scale=1.0",
-                "code": true
-              },
-              {
-                "text": " — початковий рівень масштабування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "maximum-scale",
-                "code": true
-              },
-              {
-                "text": " — максимальний масштаб."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "minimum-scale",
-                "code": true
-              },
-              {
-                "text": " — мінімальний масштаб."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "user-scalable=no",
-                "code": true
-              },
-              {
-                "text": " — заборона масштабування користувачем."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Без цього тегу мобільні браузери можуть відображати сторінку неправильно."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "83. Як використовуються медіа-запити (media queries) для адаптивного дизайну в HTML/CSS?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Медіа-запити дозволяють застосовувати різні стилі залежно від розміру екрану або типу пристрою. Використовуються у CSS, а не в HTML:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "/* Для екранів до 768px */\r\n@media (max-width: 768px) {\r\n  body {\r\n    font-size: 14px;\r\n  }\r\n}\r\n\r\n/* Для екранів від 769px */\r\n@media (min-width: 769px) {\r\n  body {\r\n    font-size: 16px;\r\n  }\r\n}\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Так можна робити адаптивний дизайн без зміни HTML-структури."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "84. Як робити адаптивні зображення для різних пристроїв та роздільної здатності?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуються атрибути srcset та sizes у "
-              },
-              {
-                "text": "<img>",
-                "code": true
-              },
-              {
-                "text": " або елемент "
-              },
-              {
-                "text": "<picture>",
-                "code": true
-              },
-              {
-                "text": ":"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад з `<img>`:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<img\r\n  src=\"image-800.jpg\"\r\n  srcset=\"image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w\"\r\n  sizes=\"(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px\"\r\n  alt=\"Адаптивне зображення\"\r\n/>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад з `<picture>`:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<picture>\r\n  <source media=\"(max-width: 600px)\" srcset=\"image-400.jpg\" />\r\n  <source media=\"(max-width: 1200px)\" srcset=\"image-800.jpg\" />\r\n  <img src=\"image-1200.jpg\" alt=\"Адаптивне зображення\" />\r\n</picture>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це дозволяє браузеру обирати оптимальний розмір зображення під пристрій та економити трафік."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "85. Що таке адаптивний веб-дизайн (responsive web design)?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Адаптивний веб-дизайн — це підхід до створення сайтів, коли макет і контент автоматично підлаштовуються під різні розміри екранів і пристроїв."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні принципи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Гнучкі сітки ("
-              },
-              {
-                "text": "flexible grids",
-                "code": true
-              },
-              {
-                "text": ") — елементи у відсотках, а не в пікселях."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Гнучкі зображення ("
-              },
-              {
-                "text": "flexible images",
-                "code": true
-              },
-              {
-                "text": ") — використання max-width: 100%, srcset або "
-              },
-              {
-                "text": "<picture>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Медіа-запити ("
-              },
-              {
-                "text": "media queries",
-                "code": true
-              },
-              {
-                "text": ") — зміна стилів залежно від ширини/типу пристрою."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мета — однаково зручний UX на мобільних, планшетах і десктопах."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "86. Як зробити HTML-таблицю адаптивною для мобільних пристроїв?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Горизонтальний скрол (простий спосіб):"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".table-wrapper {\r\n  overflow-x: auto;\r\n}\r\n\r\ntable {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n}\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"table-wrapper\">\r\n  <table>\r\n    ...\r\n  </table>\r\n</div>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перетворення в картки на малих екранах через CSS (display: block + ::before з назвами колонок)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS Grid / Flexbox для кастомних адаптивних таблиць."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мінімізувати кількість колонок для мобільних."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "87. Що таке srcset? Як працює srcset?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "srcset",
-                "code": true
-              },
-              {
-                "text": " — атрибут для адаптивних зображень, який дозволяє браузеру обирати найкращий варіант зображення залежно від умов (роздільності екрану, ширини viewport)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<img\r\n  src=\"image-800.jpg\"\r\n  srcset=\"image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w\"\r\n  sizes=\"(max-width: 600px) 400px, 800px\"\r\n  alt=\"Зображення\"\r\n/>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "400w, 800w, 1200w",
-                "code": true
-              },
-              {
-                "text": " — дескриптори ширини зображень."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "sizes",
-                "code": true
-              },
-              {
-                "text": " — підказка браузеру про розмір відображення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Браузер автоматично вибирає найбільш підходящий файл для поточних умов."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "88. Навіщо використовується елемент picture?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент "
-              },
-              {
-                "text": "<picture>",
-                "code": true
-              },
-              {
-                "text": " надає більше контролю над адаптивними зображеннями порівняно з "
-              },
-              {
-                "text": "srcset",
-                "code": true
-              },
-              {
-                "text": ". Дозволяє:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати різні формати зображень (WebP, AVIF для сучасних браузерів)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Показувати різні зображення на різних пристроях (art direction)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<picture>\r\n  <source media=\"(max-width: 600px)\" srcset=\"mobile.jpg\" />\r\n  <source media=\"(max-width: 1200px)\" srcset=\"tablet.jpg\" />\r\n  <source srcset=\"desktop.webp\" type=\"image/webp\" />\r\n  <img src=\"desktop.jpg\" alt=\"Основне зображення\" />\r\n</picture>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це забезпечує кращу оптимізацію та UX на різних пристроях."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "89. Що таке доступність (accessibility) і чому вона важлива у веб-розробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Доступність — це практика створення веб-сайтів і застосунків, які можуть використовувати люди з різними обмеженнями (зір, слух, моторика, когнітивні особливості)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Чому важлива:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечує рівний доступ до інформації для всіх користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підвищує SEO і відповідність стандартам (WCAG)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшує ризик юридичних проблем."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує загальний UX для всіх користувачів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Прості кроки:",
-            "bold": true
-          },
-          {
-            "text": " семантичний HTML, alt-теги для зображень, достатній контраст, клавіатурна навігація."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "90. Як підвищити доступність веб-сайту (web accessibility)?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні практики:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантичний HTML — використовуйте правильні теги ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<button>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Alt-тексти для зображень — описують зміст для користувачів з екранними читачами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Контрастність — достатній контраст тексту і фону."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Клавіатурна навігація — забезпечити доступ до всіх інтерактивних елементів через клавіатуру."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ARIA-атрибути — для додаткового опису ролей, станів та властивостей елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Форми та інтерфейси — підписані поля, зрозумілі повідомлення про помилки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відео та аудіо — субтитри, транскрипти, аудіоописи."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це підвищує UX для всіх і забезпечує відповідність стандартам WCAG."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "91. Що таке ARIA-ролі і як їх використовувати у веб-розробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "ARIA (Accessible Rich Internet Applications) — це набір атрибутів, які допомагають екранним читачам та іншим допоміжним технологіям розуміти призначення та стан елементів, особливо динамічних."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<button aria-label=\"Закрити модальне вікно\">×</button>\r\n<div role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalTitle\">\r\n  <h2 id=\"modalTitle\">Форма зворотного зв'язку</h2>\r\n</div>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "role",
-                "code": true
-              },
-              {
-                "text": " — визначає тип елемента (button, dialog, alert)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "aria-label",
-                "code": true
-              },
-              {
-                "text": " — додає опис для елементів без видимого тексту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "aria-labelledby",
-                "code": true
-              },
-              {
-                "text": " / "
-              },
-              {
-                "text": "aria-describedby",
-                "code": true
-              },
-              {
-                "text": " — пов'язує елемент з текстовим описом."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "aria-hidden=\"true\"",
-                "code": true
-              },
-              {
-                "text": " — ховає елемент від допоміжних технологій."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуйте ARIA тільки коли семантичний HTML не достатній."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "92. Як використовувати атрибут tabindex у веб-розробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tabindex",
-                "code": true
-              },
-              {
-                "text": " визначає порядок фокусування елементів при навігації клавішею Tab."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tabindex=\"0\"",
-                "code": true
-              },
-              {
-                "text": " — елемент доступний у природному порядку документу."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tabindex=\"-1\"",
-                "code": true
-              },
-              {
-                "text": " — елемент не доступний через Tab, але його можна сфокусувати програмно (.focus())."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tabindex=\"1\", 2, …",
-                "code": true
-              },
-              {
-                "text": " — визначає конкретний порядок фокусування (не рекомендується, бо ускладнює підтримку)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<input type=\"text\" tabindex=\"1\" />\r\n<button tabindex=\"2\">Надіслати</button>\r\n<a href=\"#\" tabindex=\"3\">Детальніше</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовується для покращення доступності і контролю порядку навігації."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "93. Як зробити зображення доступними для всіх користувачів?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Атрибут alt",
-                "bold": true
-              },
-              {
-                "text": " — короткий опис змісту зображення:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<img src=\"logo.png\" alt=\"Логотип компанії\" />\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Порожній alt=\"\"",
-                "bold": true
-              },
-              {
-                "text": " — для декоративних зображень, щоб екранні читачі їх ігнорували."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Текстова альтернатива для складних графіків або діаграм",
-                "bold": true
-              },
-              {
-                "text": " — через "
-              },
-              {
-                "text": "<figcaption>",
-                "code": true
-              },
-              {
-                "text": " або окремий опис."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Контрастність та розмір",
-                "bold": true
-              },
-              {
-                "text": " — зображення повинні бути чіткими і читабельними."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не покладатися тільки на колір",
-                "bold": true
-              },
-              {
-                "text": " — важлива додаткова інформація для людей з порушеннями зору."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це забезпечує доступність і кращий UX для користувачів з обмеженими можливостями."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "94. Які техніки оптимізації HTML допомагають у SEO?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання семантичних тегів ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<footer>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коректна структура заголовків ("
-              },
-              {
-                "text": "<h1>–<h6>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мета-теги: "
-              },
-              {
-                "text": "title",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "meta description",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "viewport",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Атрибути "
-              },
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " для зображень."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Чистий і валідний "
-              },
-              {
-                "text": "HTML",
-                "code": true
-              },
-              {
-                "text": " без дублікатів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання структурованих даних ("
-              },
-              {
-                "text": "Schema.org",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізація швидкості завантаження (мінімізація "
-              },
-              {
-                "text": "DOM",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "lazy-load",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "95. Що таке семантичний HTML і яку роль він відіграє у SEO?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантичний HTML — це використання тегів за їхнім змістовим призначенням ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<footer>",
-                "code": true
-              },
-              {
-                "text": ", а не "
-              },
-              {
-                "text": "<div>",
-                "code": true
-              },
-              {
-                "text": " всюди)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це робить структуру сторінки зрозумілішою для браузерів, пошукових систем і "
-              },
-              {
-                "text": "assistive",
-                "code": true
-              },
-              {
-                "text": "-технологій."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для "
-              },
-              {
-                "text": "SEO",
-                "code": true
-              },
-              {
-                "text": " це критично: пошуковики краще розпізнають ієрархію контенту, визначають головні частини сторінки та підвищують релевантність у видачі."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Семантична розмітка = краща доступність + зрозуміла структура + підсилення SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "96. Яке значення мають теги заголовків h1 – h6 для SEO?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<h1>",
-                "code": true
-              },
-              {
-                "text": " — головний заголовок сторінки, має бути один; сигналізує пошуковикам про основну тему."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<h2>–<h3>",
-                "code": true
-              },
-              {
-                "text": " — підзаголовки, що структурують контент і допомагають пошуковим системам зрозуміти ієрархію."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<h4>–<h6>",
-                "code": true
-              },
-              {
-                "text": " — деталізація дрібніших розділів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання ключових слів у заголовках покращує релевантність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Правильна ієрархія покращує доступність і юзабіліті, що також враховується пошуковими системами."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Заголовки = «карта сторінки» для SEO й користувачів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "97. Як структуровані дані (Schema.org) впливають на SEO та чому їх варто використовувати?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Структуровані дані — це спеціальна розмітка (JSON-LD, microdata, RDFa), яка пояснює пошуковим системам значення контенту (напр. продукт, стаття, подія)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Завдяки схемам пошуковики можуть показувати rich snippets: рейтинг, ціну, FAQ, дату публікації тощо."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це покращує CTR (користувачі частіше клікають по результату)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вони не напряму підвищують рейтинг, але допомагають пошуковим системам краще індексувати сторінку та зробити її більш привабливою у видачі."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад JSON-LD для статті:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<script type=\"application/ld+json\">\r\n  {\r\n    \"@context\": \"https://schema.org\",\r\n    \"@type\": \"Article\",\r\n    \"headline\": \"Як оптимізувати HTML для SEO\",\r\n    \"author\": { \"@type\": \"Person\", \"name\": \"Іван Іванов\" },\r\n    \"datePublished\": \"2025-08-18\",\r\n    \"publisher\": {\r\n      \"@type\": \"Organization\",\r\n      \"name\": \"MySite\"\r\n    }\r\n  }\r\n</script>\r"
-      }
-    ]
-  },
-  {
-    "question": "98. Які найкращі практики використання HTML допомагають у SEO-оптимізації сайту?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати семантичну розмітку ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Один "
-              },
-              {
-                "text": "<h1>",
-                "code": true
-              },
-              {
-                "text": " на сторінку, чітка ієрархія заголовків."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Заповнювати "
-              },
-              {
-                "text": "title",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "meta description",
-                "code": true
-              },
-              {
-                "text": " з ключовими словами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додавати "
-              },
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " для зображень."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізувати URL-адреси (короткі, зрозумілі, з ключовими словами)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати структуровані дані ("
-              },
-              {
-                "text": "Schema.org",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникати дублювання контенту, застосовувати "
-              },
-              {
-                "text": "canonical",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечувати швидке завантаження ("
-              },
-              {
-                "text": "lazy-loading",
-                "code": true
-              },
-              {
-                "text": ", мінімізація "
-              },
-              {
-                "text": "DOM",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Робити HTML доступним: "
-              },
-              {
-                "text": "aria",
-                "code": true
-              },
-              {
-                "text": "-атрибути, правильні форми, семантичні елементи."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Правильний "
-          },
-          {
-            "text": "HTML",
-            "code": true
-          },
-          {
-            "text": " = краща індексація + зручність для користувача + кращі позиції у видачі."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "99. Способи покращення продуктивності веб-сторінки під час використання HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мінімізувати HTML, CSS, JS (видалити пробіли, коментарі)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати gzip/brotli стиснення на сервері."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кешування (HTTP headers, Service Worker)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Critical CSS inline → решта асинхронно."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ледаче завантаження (loading=\"lazy\") для зображень/iframe."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання CDN для статичних ресурсів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізувати DOM: мінімальна кількість елементів, уникати глибокої вкладеності."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати атрибути async/defer для скриптів:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<script src=\"script.js\" defer></script>\r\n<script src=\"analytics.js\" async></script>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Кожен з цих кроків покращує швидкість завантаження та взаємодії користувача."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "100. Що таке категорії контенту в HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Категорії контенту в HTML5 — це класифікація елементів за їхньою роллю та способом використання. Основні категорії:"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Головні категорії:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Flow content",
-                "bold": true
-              },
-              {
-                "text": " — більшість елементів, які можуть з'являтися у "
-              },
-              {
-                "text": "<body>",
-                "code": true
-              },
-              {
-                "text": " (p, div, span, h1-h6)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Sectioning content",
-                "bold": true
-              },
-              {
-                "text": " — створюють розділи в документі (article, section, nav, aside)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Heading content",
-                "bold": true
-              },
-              {
-                "text": " — заголовки (h1-h6)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Phrasing content",
-                "bold": true
-              },
-              {
-                "text": " — текст та inline-елементи (a, span, strong, em)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Embedded content",
-                "bold": true
-              },
-              {
-                "text": " — зовнішній контент (img, video, audio, iframe)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Interactive content",
-                "bold": true
-              },
-              {
-                "text": " — елементи для взаємодії (button, input, textarea, select)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Спеціальні категорії:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Metadata content",
-                "bold": true
-              },
-              {
-                "text": " — елементи у "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " (title, meta, link, script)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Form-associated content",
-                "bold": true
-              },
-              {
-                "text": " — елементи форм (input, button, select, textarea)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Розуміння категорій допомагає правильно структурувати HTML та дотримуватись стандартів валідності."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "101. Що таке marquee у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<marquee>",
-                "code": true
-              },
-              {
-                "text": " — застарілий тег, який створював рухомий текст або зображення на веб-сторінці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент автоматично прокручував контент горизонтально або вертикально."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<marquee direction=\"left\" behavior=\"scroll\"\r\n  >Рухомий текст зліва направо</marquee\r\n>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Чому застарілий:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поганий UX — відволікає та дратує користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Проблеми з доступністю — ускладнює читання для людей з дислексією."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не підтримується в HTML5 стандарті."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Альтернатива:",
-            "bold": true
-          },
-          {
-            "text": " CSS animations або JavaScript для створення контрольованих анімацій."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "102. Що таке властивість valueAsNumber?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Властивість "
-          },
-          {
-            "text": "valueAsNumber",
-            "code": true
-          },
-          {
-            "text": " повертає значення елемента форми як число. Воно доступне для елементів, таких як "
-          },
-          {
-            "text": "<input>",
-            "code": true
-          },
-          {
-            "text": " з типами "
-          },
-          {
-            "text": "number",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "range",
-            "code": true
-          },
-          {
-            "text": " та іншими, де очікується числове введення. Якщо значення не число, властивість повертає "
-          },
-          {
-            "text": "NaN",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<input type=\"number\" id=\"age\" value=\"25\" />\r\n<script>\r\n  const input = document.getElementById('age');\r\n  console.log(input.valueAsNumber); // 25 (як число)\r\n  console.log(input.value); // \"25\" (як рядок)\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це зручно для роботи з числовими розрахунками без додаткового перетворення типів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "103. Навіщо використовується атрибут capture?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут capture використовується в елементах форми, таких як "
-          },
-          {
-            "text": "<input type=\"file\">",
-            "code": true
-          },
-          {
-            "text": ", для запуску камери або мікрофона замість вибору файлу з пам'яті пристрою. Це дозволяє користувачу безпосередньо зробити фото або записати аудіо."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад використання атрибута "
-          },
-          {
-            "text": "capture",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form>\r\n  <label for=\"camera\">Зробити фото:</label>\r\n  <input\r\n    type=\"file\"\r\n    id=\"camera\"\r\n    name=\"camera\"\r\n    accept=\"image/*\"\r\n    capture=\"camera\"\r\n  />\r\n\r\n  <label for=\"audio\">Записати звук:</label>\r\n  <input\r\n    type=\"file\"\r\n    id=\"audio\"\r\n    name=\"audio\"\r\n    accept=\"audio/*\"\r\n    capture=\"microphone\"\r\n  />\r\n\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Особливо корисно для мобільних додатків, де потрібен швидкий доступ до камери чи мікрофона."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "104. Для чого використовується атрибут decoding enterkeyhint novalidate inputmode pattern?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "`decoding`",
-                "bold": true
-              },
-              {
-                "text": ": Визначає, як браузер має обробляти зображення:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <img src=\"photo.jpg\" decoding=\"async\" alt=\"Фото\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Значення: "
-          },
-          {
-            "text": "sync",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "async",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "auto",
-            "code": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "`enterkeyhint`",
-                "bold": true
-              },
-              {
-                "text": ": Дає браузеру підказку, що робити при натисканні Enter на віртуальній клавіатурі:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <input type=\"text\" enterkeyhint=\"search\" placeholder=\"Пошук...\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Значення: "
-          },
-          {
-            "text": "enter",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "done",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "go",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "next",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "previous",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "search",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "send",
-            "code": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "`novalidate`",
-                "bold": true
-              },
-              {
-                "text": ": Вимикає валідацію форми при її відправці:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <form novalidate>\r\n    <input type=\"email\" required />\r\n  </form>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "`inputmode`",
-                "bold": true
-              },
-              {
-                "text": ": Вказує тип введення для віртуальної клавіатури:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <input type=\"text\" inputmode=\"numeric\" placeholder=\"Телефон\" />\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "`pattern`",
-                "bold": true
-              },
-              {
-                "text": ": Задає регулярний вираз для перевірки введеного значення:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <input\r\n    type=\"text\"\r\n    pattern=\"[0-9]{3}-[0-9]{3}-[0-9]{4}\"\r\n    placeholder=\"123-456-7890\"\r\n  />\r"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "105. Що таке і навіщо потрібний атрибут rel=\"nofollow\" у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут "
-          },
-          {
-            "text": "rel=\"nofollow\"",
-            "code": true
-          },
-          {
-            "text": " вказує пошуковим системам не передавати \"link juice\" (вагу посилання) на цільову сторінку."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"https://example.com\" rel=\"nofollow\">Зовнішнє посилання</a>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Навіщо потрібен:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO-контроль",
-                "bold": true
-              },
-              {
-                "text": " — не передавати рейтинг на ненадійні або рекламні сайти."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Спам-захист",
-                "bold": true
-              },
-              {
-                "text": " — запобігання зловживанню коментарями для просування сайтів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Реклама",
-                "bold": true
-              },
-              {
-                "text": " — позначення оплачених посилань для відповідності вимогам пошуковиків."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові значення rel:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rel=\"noopener\"",
-                "code": true
-              },
-              {
-                "text": " — безпека при "
-              },
-              {
-                "text": "target=\"_blank\"",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rel=\"noreferrer\"",
-                "code": true
-              },
-              {
-                "text": " — не передавати referrer"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rel=\"sponsored\"",
-                "code": true
-              },
-              {
-                "text": " — для рекламних посилань"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "106. Навіщо потрібен атрибут autocomplete?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут autocomplete в HTML використовується для вказівки браузеру, чи має він автоматично заповнювати поля форми збереженими даними (наприклад, іменем, адресою, електронною поштою). Він може бути включений або вимкнений для окремих полів форми або для всієї форми."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Значення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "on",
-                "code": true
-              },
-              {
-                "text": " — дозволяє автозаповнення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "off",
-                "code": true
-              },
-              {
-                "text": " — вимикає автозаповнення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Специфічні значення: "
-              },
-              {
-                "text": "name",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "email",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "current-password",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "new-password",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "tel",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "address-line1",
-                "code": true
-              },
-              {
-                "text": " тощо"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form autocomplete=\"on\">\r\n  <input type=\"text\" name=\"name\" autocomplete=\"name\" placeholder=\"Ім'я\" />\r\n  <input type=\"email\" name=\"email\" autocomplete=\"email\" placeholder=\"Email\" />\r\n  <input type=\"password\" name=\"password\" autocomplete=\"current-password\" />\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Покращує UX — користувачі швидше заповнюють форми завдяки автопідказкам браузера."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "107. Як можна приховати елемент розмітки без використання CSS і JS?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елемент можна приховати за допомогою атрибуту "
-          },
-          {
-            "text": "hidden",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div hidden>Цей елемент прихований</div>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Особливості атрибута "
-          },
-          {
-            "text": "hidden",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це булевий атрибут — його наявність робить елемент невидимим."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент повністю видаляється з візуального потоку."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантично означає, що контент зараз не релевантний."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Еквівалент CSS "
-              },
-              {
-                "text": "display: none",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Порівняння з іншими способами:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Атрибут hidden -->\r\n<p hidden>Прихований текст</p>\r\n\r\n<!-- Можна змінювати через JavaScript -->\r\n<script>\r\n  document.querySelector('p').hidden = false; // показати\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це найпростіший спосіб приховати контент без CSS, особливо для динамічних змін через JavaScript."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "108. Що таке Geolocation API у браузері та як його застосовують у веброзробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Geolocation API — вбудований у браузери інтерфейс, який дозволяє отримати географічне положення користувача (координати широти й довготи)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання потребує згоди користувача."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Застосовується для карт, локальних сервісів, геотаргетингу."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "if (navigator.geolocation) {\r\n  navigator.geolocation.getCurrentPosition(\r\n    position => {\r\n      console.log('Lat:', position.coords.latitude);\r\n      console.log('Lng:', position.coords.longitude);\r\n    },\r\n    error => {\r\n      console.error('Помилка:', error.message);\r\n    }\r\n  );\r\n}\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні методи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "getCurrentPosition()",
-                "code": true
-              },
-              {
-                "text": " — поточна позиція"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "watchPosition()",
-                "code": true
-              },
-              {
-                "text": " — відстеження змін позиції"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "clearWatch()",
-                "code": true
-              },
-              {
-                "text": " — зупинка відстеження"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Підтримується більшістю сучасних браузерів, але точність залежить від пристрою (GPS, Wi-Fi, IP)."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "109. Як у вебдодатках використовувати Local Storage і Session Storage?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це частина Web Storage API для зберігання даних у браузері."
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "localStorage",
-                "code": true
-              },
-              {
-                "text": " — зберігає дані безстроково (доки користувач не очистить вручну або додаток не видалить)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "sessionStorage",
-                "code": true
-              },
-              {
-                "text": " — зберігає дані тільки в межах поточної сесії браузера (закрив вкладку = дані зникають)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "// Local Storage\r\nlocalStorage.setItem('username', 'Viktor');\r\nconsole.log(localStorage.getItem('username')); // Viktor\r\nlocalStorage.removeItem('username');\r\n\r\n// Session Storage\r\nsessionStorage.setItem('theme', 'dark');\r\nconsole.log(sessionStorage.getItem('theme')); // dark\r\nsessionStorage.clear();\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Local Storage",
-                "code": true
-              },
-              {
-                "text": " → збереження налаштувань, токенів, кешованих даних."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Session Storage",
-                "code": true
-              },
-              {
-                "text": " → тимчасові дані (форма, стан сторінки)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Обидва працюють тільки з рядками (для об'єктів треба "
-          },
-          {
-            "text": "JSON.stringify",
-            "code": true
-          },
-          {
-            "text": " / "
-          },
-          {
-            "text": "JSON.parse",
-            "code": true
-          },
-          {
-            "text": ")."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "110. Як працює Drag and Drop API у браузері та де його застосовують?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Drag and Drop API дозволяє перетягувати елементи на сторінці та обробляти їх \"скидання\"."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Ключові події:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dragstart",
-                "code": true
-              },
-              {
-                "text": " — початок перетягування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dragover",
-                "code": true
-              },
-              {
-                "text": " — об'єкт знаходиться над зоною скидання (потрібно викликати event.preventDefault())."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "drop",
-                "code": true
-              },
-              {
-                "text": " — елемент скинуто в зону."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dragend",
-                "code": true
-              },
-              {
-                "text": " — завершення перетягування."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div id=\"drag\" draggable=\"true\">Перетягни мене</div>\r\n<div id=\"drop\" style=\"width:200px;height:200px;border:1px solid black;\">\r\n  Зона скидання\r\n</div>\r\n\r\n<script>\r\n  const drag = document.getElementById('drag');\r\n  const drop = document.getElementById('drop');\r\n\r\n  drag.addEventListener('dragstart', e => {\r\n    e.dataTransfer.setData('text/plain', drag.id);\r\n  });\r\n\r\n  drop.addEventListener('dragover', e => {\r\n    e.preventDefault(); // дозволяє скидання\r\n  });\r\n\r\n  drop.addEventListener('drop', e => {\r\n    e.preventDefault();\r\n    const id = e.dataTransfer.getData('text');\r\n    const el = document.getElementById(id);\r\n    drop.appendChild(el);\r\n  });\r\n</script>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Реалізація "
-              },
-              {
-                "text": "drag-and-drop",
-                "code": true
-              },
-              {
-                "text": " інтерфейсів (сортування списків, kanban-дошки)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Завантаження файлів через \"перетягни й скинь\"."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтерактивні UI (редактори, кастомізація блоків)."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "111. Що таке Fullscreen API у браузері та для чого його застосовують?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Fullscreen API дозволяє елементу сторінки (відео, зображення, canvas, div) переходити в повноекранний режим."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для медіа (відеоплеєри, презентації, ігри, карти)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підвищує зручність користувача, коли потрібна максимальна концентрація на контенті."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "const elem = document.documentElement;\r\n\r\n// Увійти в повноекранний режим\r\nfunction openFullscreen() {\r\n  if (elem.requestFullscreen) {\r\n    elem.requestFullscreen();\r\n  }\r\n}\r\n\r\n// Вийти з повноекранного режиму\r\nfunction closeFullscreen() {\r\n  if (document.exitFullscreen) {\r\n    document.exitFullscreen();\r\n  }\r\n}\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовується разом із подіями "
-          },
-          {
-            "text": "fullscreenchange",
-            "code": true
-          },
-          {
-            "text": ", щоб реагувати на зміни стану."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "112. Що таке ApplicationCache в HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`ApplicationCache`",
-            "bold": true
-          },
-          {
-            "text": " в HTML5 — це механізм для офлайн-доступу до веб-додатків. Він дозволяє зберігати ресурси веб-сторінки (HTML, CSS, JavaScript, зображення) в кеші браузера, що дає змогу користувачам працювати з додатком без інтернет-з'єднання."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Особливості:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувався для створення офлайн-додатків"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Визначався через атрибут "
-              },
-              {
-                "text": "manifest",
-                "code": true
-              },
-              {
-                "text": " в HTML"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дозволяв кешувати статичні ресурси"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад застарілого використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<html manifest=\"cache.appcache\">\r\n  <head>\r\n    <title>Офлайн додаток</title>\r\n  </head>\r\n  <body>\r\n    ...\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Важливо:",
-            "bold": true
-          },
-          {
-            "text": " Відповідно до специфікації HTML5, цей механізм був застарілий і замінений новими API, такими як "
-          },
-          {
-            "text": "Service Workers",
-            "bold": true
-          },
-          {
-            "text": ", які надають більш гнучкі можливості для офлайн-функціональності."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "113. Як обробляти події, що надходять від сервера, на фронтенді?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для взаємодії з подіями сервера зазвичай використовують WebSocket або Server-Sent Events (SSE)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "1. Server-Sent Events (SSE) — для односпрямованих подій від сервера:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "const eventSource = new EventSource('/events');\r\n\r\neventSource.onmessage = event => {\r\n  console.log('Нові дані від сервера:', event.data);\r\n};\r\n\r\neventSource.onerror = err => {\r\n  console.error('Помилка SSE:', err);\r\n};\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "2. WebSocket — для двосторонньої взаємодії:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "const socket = new WebSocket('ws://localhost:8080');\r\n\r\nsocket.onopen = () => {\r\n  console.log('З'єднання встановлено');\r\n};\r\n\r\nsocket.onmessage = (event) => {\r\n  console.log('Повідомлення від сервера:', event.data);\r\n};\r\n\r\nsocket.onerror = (err) => {\r\n  console.error('Помилка WebSocket:', err);\r\n};\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Реал-time оновлення UI (чат, сповіщення, лічильники)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стримінг даних без перезавантаження сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Двостороннє спілкування між клієнтом і сервером."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "114. Як відобразити сторінку кількома мовами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Можна зробити кількамовність так:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Окремі HTML-файли для кожної мови:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<!-- index-en.html -->\r\n<html lang=\"en\">\r\n  <head>\r\n    <title>Welcome</title>\r\n  </head>\r\n  <body>\r\n    <h1>Welcome to our site</h1>\r\n  </body>\r\n</html>\r\n\r\n<!-- index-uk.html -->\r\n<html lang=\"uk\">\r\n  <head>\r\n    <title>Ласкаво просимо</title>\r\n  </head>\r\n  <body>\r\n    <h1>Ласкаво просимо на наш сайт</h1>\r\n  </body>\r\n</html>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Серверна локалізація:",
-                "bold": true
-              },
-              {
-                "text": "Сервер віддає потрібну мову залежно від налаштувань користувача чи URL (/en/, /uk/)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JavaScript + JSON-файли перекладів:",
-                "bold": true
-              },
-              {
-                "text": "Підвантаження текстів без перезавантаження сторінки (часто у SPA)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Фреймворки з i18n:",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "react-i18next, vue-i18n, Angular i18n."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Важливо:",
-            "bold": true
-          },
-          {
-            "text": " Для базового HTML обов'язково вказувати "
-          },
-          {
-            "text": "lang=\"...\"",
-            "code": true
-          },
-          {
-            "text": " і "
-          },
-          {
-            "text": "meta charset=\"UTF-8\"",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "115. Як правильно задавати і обробляти кодування символів у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовують UTF-8, щоб підтримувати всі символи (латиницю, кирилицю, емодзі тощо)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вказують у "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " сторінки:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<meta charset=\"UTF-8\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові рекомендації:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Сервер також має надсилати правильний заголовок:"
-              },
-              {
-                "type": "code",
-                "language": null,
-                "content": "  Content-Type: text/html; charset=UTF-8\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання UTF-8 запобігає появі \"кракозябр\" при відображенні тексту."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Краща практика:",
-            "bold": true
-          },
-          {
-            "text": " всі HTML, CSS і JS файли зберігати в UTF-8 без BOM (Byte Order Mark)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад правильного кодування:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<html lang=\"uk\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" />\r\n    <title>Український текст відображається правильно</title>\r\n  </head>\r\n  <body>\r\n    <p>Привіт! Це українські символи: ї, є, ґ, щ</p>\r\n  </body>\r\n</html>\r"
-      }
-    ]
-  },
-  {
-    "question": "116. Що робить атрибут lang у HTML і чому він важливий?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут lang визначає мову контенту елемента або сторінки:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<html lang=\"uk\">\r\n  <body>\r\n    <p>Це український текст</p>\r\n    <p lang=\"en\">This is English text</p>\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Важливість:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO:",
-                "bold": true
-              },
-              {
-                "text": " Допомагає пошуковим системам і поліпшує ранжування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність:",
-                "bold": true
-              },
-              {
-                "text": " Читачі екрану правильно озвучують текст з правильною вимовою."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Локалізація:",
-                "bold": true
-              },
-              {
-                "text": " Впливає на правильне відображення шрифтів і форматування дат, чисел."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузерні функції:",
-                "bold": true
-              },
-              {
-                "text": " Автоматичні перекладачі працюють точніше."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Основна мова документа -->\r\n<html lang=\"uk\">\r\n  <!-- Окремі фрагменти іншими мовами -->\r\n  <blockquote lang=\"en\">\"To be or not to be, that is the question\"</blockquote>\r\n\r\n  <!-- Для багатомовних сайтів -->\r\n  <div lang=\"fr\">Bonjour le monde!</div>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Краща практика:",
-            "bold": true
-          },
-          {
-            "text": " завжди вказувати lang на "
-          },
-          {
-            "text": "<html>",
-            "code": true
-          },
-          {
-            "text": " і при необхідності на внутрішніх елементах з іншою мовою."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "117. Як у HTML враховувати підтримку напрямку тексту LTR (зліва направо) та RTL (справа наліво)?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовують атрибут dir:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dir=\"ltr\"",
-                "code": true
-              },
-              {
-                "text": " — текст зліва направо (за замовчуванням для більшості мов)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dir=\"rtl\"",
-                "code": true
-              },
-              {
-                "text": " — текст справа наліво (арабська, іврит)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p dir=\"ltr\">Hello, world! → (зліва направо)</p>\r\n<p dir=\"rtl\">مرحبا بالعالم ← (справа наліво)</p>\r\n\r\n<!-- Змішаний контент -->\r\n<div dir=\"rtl\">\r\n  <p>نص عربي</p>\r\n  <p dir=\"ltr\">English text in RTL context</p>\r\n</div>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Комбінування з CSS:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "[dir='rtl'] {\r\n  text-align: right;\r\n}\r\n\r\n[dir='rtl'] .menu {\r\n  float: right;\r\n}\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Практичні міркування:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна ставити на "
-              },
-              {
-                "text": "<html>",
-                "code": true
-              },
-              {
-                "text": " або окремі елементи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Потрібно поєднувати з CSS, якщо є специфічне вирівнювання чи флоати (text-align, float, margin)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Враховують при мультимовних сайтах, щоб макет і UI не ламалися."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Краща практика:",
-            "bold": true
-          },
-          {
-            "text": " для мультимовних проєктів задавати lang + dir на кореневому елементі й контролювати локально там, де мова змінюється."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "118. Яке значення та користь має використання \"хлібних крихт\" (breadcrumbs) у веб-навігації?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує юзабіліті:",
-                "bold": true
-              },
-              {
-                "text": " користувач бачить своє місце в ієрархії сайту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Швидка навігація:",
-                "bold": true
-              },
-              {
-                "text": " дозволяє швидко перейти на вищі рівні структури."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшує кліки:",
-                "bold": true
-              },
-              {
-                "text": " скорочує кількість кліків до потрібної сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO-переваги:",
-                "bold": true
-              },
-              {
-                "text": " має позитивний вплив на SEO (пошуковики краще розуміють структуру сайту)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад HTML для breadcrumbs:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<nav aria-label=\"Breadcrumb\">\r\n  <ol class=\"breadcrumb\">\r\n    <li><a href=\"/\">Головна</a></li>\r\n    <li><a href=\"/category\">Категорія</a></li>\r\n    <li><a href=\"/category/subcategory\">Підкategорія</a></li>\r\n    <li aria-current=\"page\">Поточна сторінка</li>\r\n  </ol>\r\n</nav>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Структуровані дані для SEO:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<script type=\"application/ld+json\">\r\n  {\r\n    \"@context\": \"https://schema.org\",\r\n    \"@type\": \"BreadcrumbList\",\r\n    \"itemListElement\": [\r\n      {\r\n        \"@type\": \"ListItem\",\r\n        \"position\": 1,\r\n        \"name\": \"Головна\",\r\n        \"item\": \"https://example.com/\"\r\n      },\r\n      {\r\n        \"@type\": \"ListItem\",\r\n        \"position\": 2,\r\n        \"name\": \"Категорія\",\r\n        \"item\": \"https://example.com/category\"\r\n      }\r\n    ]\r\n  }\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Breadcrumbs особливо корисні для великих сайтів з глибокою ієрархією контенту."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "119. Як створити розсувне (collapsible/accordion) меню в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Метод 1: Через теги "
-          },
-          {
-            "text": "<details>",
-            "code": true
-          },
-          {
-            "text": " і "
-          },
-          {
-            "text": "<summary>",
-            "code": true
-          },
-          {
-            "text": " (нативний HTML):"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<details>\r\n  <summary>Services</summary>\r\n  <ul>\r\n    <li><a href=\"#\">Web Development</a></li>\r\n    <li><a href=\"#\">UI/UX Design</a></li>\r\n    <li><a href=\"#\">SEO</a></li>\r\n  </ul>"
-      }
-    ]
-  },
-  {
-    "question": "120. Яка різниця між вбудовуванням медіафайлів у HTML і посиланням на них?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Вбудовування медіа:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Медіа відтворюється прямо на сторінці через теги ("
-          },
-          {
-            "text": "<img>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<audio>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<video>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<iframe>",
-            "code": true
-          },
-          {
-            "text": "). Користувач взаємодіє з контентом без переходу на інший ресурс."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Вбудовані медіафайли -->\r\n<img src=\"photo.jpg\" alt=\"Фотографія\" />\r\n<video controls>\r\n  <source src=\"video.mp4\" type=\"video/mp4\" />\r\n</video>\r\n<audio controls>\r\n  <source src=\"music.mp3\" type=\"audio/mpeg\" />\r\n</audio>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Посилання на медіа:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Файл відкривається або завантажується після кліку по "
-          },
-          {
-            "text": "<a href=\"...\">",
-            "code": true
-          },
-          {
-            "text": ". Контент не відтворюється безпосередньо у сторінці."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Посилання на медіафайли -->\r\n<a href=\"document.pdf\">Завантажити PDF</a>\r\n<a href=\"photo.jpg\">Переглянути фото</a>\r\n<a href=\"video.mp4\" download>Завантажити відео</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Порівняння:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Критерій"
-            }
-          ],
-          [
-            {
-              "text": "Вбудовування"
-            }
-          ],
-          [
-            {
-              "text": "Посилання"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "UX",
-                "bold": true
-              }
-            ],
-            [
-              {
-                "text": "Безшовний перегляд"
-              }
-            ],
-            [
-              {
-                "text": "Потребує переходу/завантаження"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Швидкість",
-                "bold": true
-              }
-            ],
-            [
-              {
-                "text": "Повільніше завантаження сторінки"
-              }
-            ],
-            [
-              {
-                "text": "Швидша сторінка"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Трафік",
-                "bold": true
-              }
-            ],
-            [
-              {
-                "text": "Завантажується автоматично"
-              }
-            ],
-            [
-              {
-                "text": "Завантажується на вимогу"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Контроль",
-                "bold": true
-              }
-            ],
-            [
-              {
-                "text": "Повний контроль відтворення"
-              }
-            ],
-            [
-              {
-                "text": "Залежить від браузера"
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Висновок:",
-            "bold": true
-          },
-          {
-            "text": " Вбудовування — зручно для інтерактивності, посилання — легше для швидких завантажень або коли не потрібен попередній перегляд."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "121. Що таке Web Components у фронтенд-розробці та для чого їх використовують?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Web Components — це нативна технологія браузера для створення повторно використовуваних, інкапсульованих UI-компонентів без залежності від фреймворків. Складаються з трьох частин:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Custom Elements",
-                "bold": true
-              },
-              {
-                "text": " — визначення власних HTML-тегів ("
-              },
-              {
-                "text": "<my-button>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Shadow DOM",
-                "bold": true
-              },
-              {
-                "text": " — ізоляція стилів і DOM-компонента від решти сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML Templates",
-                "bold": true
-              },
-              {
-                "text": " — заготовки розмітки ("
-              },
-              {
-                "text": "<template>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<template id=\"my-card\">\r\n  <style>\r\n    .card {\r\n      border: 1px solid #ccc;\r\n      padding: 10px;\r\n      border-radius: 8px;\r\n    }\r\n  </style>\r\n  <div class=\"card\"><slot></slot></div>\r\n</template>\r\n\r\n<script>\r\n  class MyCard extends HTMLElement {\r\n    constructor() {\r\n      super();\r\n      const template = document.getElementById('my-card').content;\r\n      const shadow = this.attachShadow({ mode: 'open' });\r\n      shadow.appendChild(template.cloneNode(true));\r\n    }\r\n  }\r\n  customElements.define('my-card', MyCard);\r\n</script>\r\n\r\n<my-card>Привіт! Я веб-компонент</my-card>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створення UI-бібліотек без прив'язки до React/Angular/Vue."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інкапсуляція стилів (не конфліктують з глобальними CSS)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна повторно використовувати між різними проєктами чи фреймворками."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "122. Що таке Shadow DOM у вебкомпонентах і як його правильно застосовувати?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Shadow DOM — це механізм інкапсуляції DOM і стилів усередині вебкомпонента. Він приховує внутрішню реалізацію від зовнішнього коду та запобігає конфліктам CSS/JS."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Ключові властивості:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створюється через "
-              },
-              {
-                "text": "element.attachShadow({ mode: 'open' | 'closed' })",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Має власне дерево елементів, відокремлене від основного DOM."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стилі в Shadow DOM не впливають на глобальні стилі і навпаки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div id=\"host\"></div>\r\n\r\n<script>\r\n  const host = document.getElementById('host');\r\n  const shadow = host.attachShadow({ mode: 'open' });\r\n\r\n  shadow.innerHTML = `\r\n    <style>\r\n      p { color: red; }\r\n    </style>\r\n    <p>Цей текст червоний лише в Shadow DOM</p>\r\n  `;\r\n</script>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Режими:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "mode: 'open'",
-                "code": true
-              },
-              {
-                "text": " — можна отримати доступ до shadow DOM через "
-              },
-              {
-                "text": "element.shadowRoot",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "mode: 'closed'",
-                "code": true
-              },
-              {
-                "text": " — shadow DOM повністю прихований від зовнішнього коду"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовується головним чином у Web Components, щоб створювати незалежні й повторно використовувані UI-елементи."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "123. Як створити власний HTML-елемент (Custom Element) у браузері?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для створення кастомного елемента використовується API Custom Elements:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створюємо клас, що наслідує "
-              },
-              {
-                "text": "HTMLElement",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Реєструємо його через "
-              },
-              {
-                "text": "customElements.define()",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуємо у розмітці як звичайний тег."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<script>\r\n  class MyButton extends HTMLElement {\r\n    constructor() {\r\n      super();\r\n      this.innerHTML = `<button>Click me!</button>`;\r\n    }\r\n\r\n    connectedCallback() {\r\n      console.log('Element додано до DOM');\r\n      this.addEventListener('click', this.handleClick);\r\n    }\r\n\r\n    disconnectedCallback() {\r\n      console.log('Element видалено з DOM');\r\n      this.removeEventListener('click', this.handleClick);\r\n    }\r\n\r\n    handleClick = () => {\r\n      alert('Custom button clicked!');\r\n    };\r\n  }\r\n\r\n  customElements.define('my-button', MyButton);\r\n</script>\r\n\r\n<my-button></my-button>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Lifecycle методи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "connectedCallback()",
-                "code": true
-              },
-              {
-                "text": " — викликається при додаванні до DOM"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "disconnectedCallback()",
-                "code": true
-              },
-              {
-                "text": " — викликається при видаленні з DOM"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "attributeChangedCallback()",
-                "code": true
-              },
-              {
-                "text": " — викликається при зміні атрибутів"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Браузер розпізнає "
-          },
-          {
-            "text": "<my-button>",
-            "code": true
-          },
-          {
-            "text": " як нативний елемент."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Можна додати "
-          },
-          {
-            "text": "Shadow DOM",
-            "code": true
-          },
-          {
-            "text": " для інкапсуляції стилів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "124. Що таке HTML-шаблони template і як їх використовують у веброзробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<template>",
-            "code": true
-          },
-          {
-            "text": " — це тег для визначення розмітки, яка не відображається на сторінці до моменту її програмного клонування. Використовується разом із JavaScript для динамічного створення контенту."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Особливості:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вміст шаблона не рендериться при завантаженні сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна клонувати через "
-              },
-              {
-                "text": "template.content.cloneNode(true)",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Часто застосовується у Web Components та при динамічному рендерингу списків."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<template id=\"item-template\">\r\n  <li class=\"item\">\r\n    <h3 class=\"title\"></h3>\r\n    <p class=\"description\"></p>\r\n  </li>\r\n</template>\r\n\r\n<ul id=\"list\"></ul>\r\n\r\n<script>\r\n  const template = document.getElementById('item-template');\r\n  const list = document.getElementById('list');\r\n\r\n  const items = [\r\n    { title: 'Item 1', description: 'Description 1' },\r\n    { title: 'Item 2', description: 'Description 2' },\r\n  ];\r\n\r\n  items.forEach(item => {\r\n    const clone = template.content.cloneNode(true);\r\n    clone.querySelector('.title').textContent = item.title;\r\n    clone.querySelector('.description').textContent = item.description;\r\n    list.appendChild(clone);\r\n  });\r\n</script>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Динамічне додавання елементів у DOM."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інкапсульована розмітка для вебкомпонентів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Повторне використання UI-блоків без дублювання коду."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Шаблони для генерації контенту на основі даних."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "125. Як Flexbox і Grid допомагають створювати адаптивні макети?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Flexbox",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Дозволяє легко вирівнювати та розподіляти простір між елементами в одному напрямку (рядок або колонка). Ідеально для адаптивних меню, рядків карток, елементів навігації."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"flex-container\">\r\n  <div class=\"flex-item\">Item 1</div>\r\n  <div class=\"flex-item\">Item 2</div>\r\n  <div class=\"flex-item\">Item 3</div>\r\n</div>\r\n\r\n<style>\r\n  .flex-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  .flex-item {\r\n    flex: 1 1 300px; /* grow, shrink, basis */\r\n    margin: 10px;\r\n  }\r\n</style>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Grid",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Дозволяє будувати двовимірні макети (рядки + колонки) і керувати складними структурами сторінки. Легко змінювати кількість колонок під різні екрани через медіа-запити."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"grid-container\">\r\n  <div class=\"grid-item\">Header</div>\r\n  <div class=\"grid-item\">Sidebar</div>\r\n  <div class=\"grid-item\">Main</div>\r\n  <div class=\"grid-item\">Footer</div>\r\n</div>\r\n\r\n<style>\r\n  .grid-container {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n    gap: 20px;\r\n  }\r\n\r\n  /* Адаптивність через медіа-запити */\r\n  @media (max-width: 768px) {\r\n    .grid-container {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n</style>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Переваги для адаптивності:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Автоматичне перенесення елементів на новий рядок"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Гнучкий розподіл простору"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легка зміна макету через медіа-запити"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Менше коду порівняно з float-основними рішеннями"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Обидва підходи роблять макети гнучкими і дозволяють створювати адаптивний дизайн без складних обхідних рішень."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "126. Що таке валідація? Які типи перевірок HTML-документа ви знаєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Валідація — це процес перевірки коректності коду HTML-документа відповідно до стандартів W3C."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Типи перевірок:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Синтаксична валідація",
-                "bold": true
-              },
-              {
-                "text": " — перевірка правильності синтаксису та структури тегів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Валідація атрибутів",
-                "bold": true
-              },
-              {
-                "text": " — перевірка правильності та відповідності використаних атрибутів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Валідація доступності (Accessibility)",
-                "bold": true
-              },
-              {
-                "text": " — перевірка на відповідність стандартам доступності, наприклад WCAG."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка сумісності",
-                "bold": true
-              },
-              {
-                "text": " — оцінка роботи коду в різних браузерах."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO-валідація",
-                "bold": true
-              },
-              {
-                "text": " — перевірка оптимізації документа для пошукових систем."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка швидкодії",
-                "bold": true
-              },
-              {
-                "text": " — аналіз завантаження та продуктивності."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклади помилок:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Синтаксична помилка: незакритий тег -->\r\n<div>\r\n  <p>Text</p>\r\n</div>\r\n\r\n<!-- Помилка атрибута: неіснуючий атрибут -->\r\n<img src=\"photo.jpg\" invalidattr=\"value\" />\r\n\r\n<!-- Доступність: відсутній alt -->\r\n<img src=\"photo.jpg\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Інструменти валідації:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "W3C Markup Validator"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTMLHint (лінтер)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Lighthouse (доступність і SEO)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "axe DevTools"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Валідний HTML",
-            "bold": true
-          },
-          {
-            "text": " = краща сумісність, доступність і SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "127. Основні етапи перевірок валідності HTML-документа?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні етапи перевірки валідності:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка синтаксису",
-                "bold": true
-              },
-              {
-                "text": " — аналіз тегів, вкладеності та закриття."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка атрибутів",
-                "bold": true
-              },
-              {
-                "text": " — відповідність атрибутів специфікації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка DocType",
-                "bold": true
-              },
-              {
-                "text": " — відповідність документа заявленому типу."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка доступності",
-                "bold": true
-              },
-              {
-                "text": " — наявність елементів для підтримки доступності (alt, aria)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка семантики",
-                "bold": true
-              },
-              {
-                "text": " — правильне використання семантичних тегів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка посилань",
-                "bold": true
-              },
-              {
-                "text": " — аналіз працездатності та коректності URL."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Детальний процес:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Етап 1: Структурна валідація",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<!-- Правильний DOCTYPE -->\r\n<html lang=\"uk\">\r\n  <!-- Мова документа -->\r\n  <head>\r\n    <meta charset=\"UTF-8\" />\r\n    <!-- Кодування -->\r\n    <title>Заголовок</title>\r\n  </head>\r\n  <body>\r\n    <!-- Правильно вкладені елементи -->\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Етап 2: Семантична валідація",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання відповідних тегів ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ")"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Правильна ієрархія заголовків (h1-h6)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коректні форми та їх елементи"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Етап 3: Доступність",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Alt-тексти для зображень"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ARIA-атрибути де потрібно"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Табуляційна навігація"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Етап 4: Продуктивність і SEO",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізовані зображення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мета-теги для SEO"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Валідні посилання"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "128. Якими способами перевіряють HTML на валідність і коректність?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні способи перевірки:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Онлайн валідатори:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "W3C Markup Validator",
-                        "bold": true
-                      },
-                      {
-                        "text": " (validator.w3.org) — офіційний сервіс для перевірки синтаксису й стандартів"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "HTML5 Validator",
-                        "bold": true
-                      },
-                      {
-                        "text": " — перевірка специфічно для HTML5"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Редакторні плагіни та лінтери:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "HTMLHint",
-                        "bold": true
-                      },
-                      {
-                        "text": " — інтегрується в CI/CD або редактор"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "ESLint з HTML плагінами",
-                        "bold": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Prettier",
-                        "bold": true
-                      },
-                      {
-                        "text": " — форматування коду"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузерні інструменти:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "DevTools",
-                        "bold": true
-                      },
-                      {
-                        "text": " — виявляють помилки розмітки в консолі"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Elements панель",
-                        "bold": true
-                      },
-                      {
-                        "text": " — показує структуру та помилки DOM"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Автоматизоване тестування:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Lighthouse",
-                        "bold": true
-                      },
-                      {
-                        "text": " — комплексна перевірка (accessibility, SEO, performance)"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "axe DevTools",
-                        "bold": true
-                      },
-                      {
-                        "text": " — спеціалізовано на доступності"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "WAVE",
-                        "bold": true
-                      },
-                      {
-                        "text": " — онлайн інструмент для accessibility"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CI/CD інтеграція:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "json",
-                "content": "{\r\n  \"scripts\": {\r\n    \"lint:html\": \"htmlhint src/**/*.html\",\r\n    \"validate\": \"html-validate src/**/*.html\"\r\n  }\r\n}\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Командні інструменти:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "html-validate",
-                        "bold": true
-                      },
-                      {
-                        "text": " — CLI валідатор"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "htmllint",
-                        "bold": true
-                      },
-                      {
-                        "text": " — лінтер для HTML"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад перевірки:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "bash",
-        "content": "# Перевірка через HTMLHint\r\nnpx htmlhint index.html\r\n\r\n# Автоматична перевірка в pipeline\r\nnpm run lint:html\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Валідний HTML",
-            "bold": true
-          },
-          {
-            "text": " = краща сумісність, доступність і SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "129. Як перевірити, що HTML-код відповідає стандартам і найкращим практикам?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Комплексний підхід до перевірки:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Валідатори:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "W3C HTML Validator",
-                        "bold": true
-                      },
-                      {
-                        "text": " для перевірки синтаксису"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Nu Html Checker",
-                        "bold": true
-                      },
-                      {
-                        "text": " — сучасний валідатор HTML5"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Лінтери:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "HTMLHint",
-                        "bold": true
-                      },
-                      {
-                        "text": " з налаштованими правилами"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "ESLint",
-                        "bold": true
-                      },
-                      {
-                        "text": " з плагінами для HTML"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Audits і аналіз:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Chrome Lighthouse",
-                        "bold": true
-                      },
-                      {
-                        "text": " → accessibility, SEO, performance"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "PageSpeed Insights",
-                        "bold": true
-                      },
-                      {
-                        "text": " — Google аналіз продуктивності"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Accessibility тестування:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "axe DevTools",
-                        "bold": true
-                      },
-                      {
-                        "text": " — найпопулярніший інструмент"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "WAVE",
-                        "bold": true
-                      },
-                      {
-                        "text": " — онлайн accessibility валідатор"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Colour Contrast Analyser",
-                        "bold": true
-                      },
-                      {
-                        "text": " — перевірка контрастності"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Code review:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Внутрішні стандарти команди"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "PR-рецензії з чеклістами"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Автоматичні коментарі від ботів"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CI/CD інтеграція:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "yaml",
-                "content": "# GitHub Actions приклад\r\n- name: Validate HTML\r\n  run: |\r\n    npm install -g htmlhint\r\n    htmlhint src/**/*.html\r\n\r\n- name: Accessibility test\r\n  run: |\r\n    npm install -g @axe-core/cli\r\n    axe src/**/*.html\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Чекліст найкращих практик:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Семантичні теги замість "
-                      },
-                      {
-                        "text": "<div>",
-                        "code": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Один "
-                      },
-                      {
-                        "text": "<h1>",
-                        "code": true
-                      },
-                      {
-                        "text": " на сторінку"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Alt-тексти для всіх зображень"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Правильна ієрархія заголовків"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Валідні форми з labels"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "HTTPS і безпечні атрибути"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Мінімізований HTML для продакшену"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Комбо автоматичних інструментів + ручне рев'ю = гарантія дотримання best practices."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "130. Якщо представити HTML5 як відкриту веб-платформу, з яких блоків він складається?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML5 як відкрита веб-платформа складається з наступних ключових блоків:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантика",
-                "bold": true
-              },
-              {
-                "text": "Семантичні теги для структурування контенту:"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<header>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<footer>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<main>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<article>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<section>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<nav>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<aside>",
-                        "code": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Покращують доступність та SEO"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мультимедіа",
-                "bold": true
-              },
-              {
-                "text": "Нативна підтримка аудіо та відео:"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<audio>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<video>",
-                        "code": true
-                      },
-                      {
-                        "text": " — без сторонніх плагінів"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<track>",
-                        "code": true
-                      },
-                      {
-                        "text": " — субтитри та доступність"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Media API для програмного контролю"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Графіка",
-                "bold": true
-              },
-              {
-                "text": "Елементи для роботи з графікою:"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<canvas>",
-                        "code": true
-                      },
-                      {
-                        "text": " — растрова графіка через JavaScript"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<svg>",
-                        "code": true
-                      },
-                      {
-                        "text": " — векторна графіка"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "WebGL для 3D графіки"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Сховище і офлайн",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "API для локального зберігання даних:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "localStorage",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "sessionStorage",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "IndexedDB",
-                "code": true
-              },
-              {
-                "text": " — потужна NoSQL база даних"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Service Workers",
-                "code": true
-              },
-              {
-                "text": " — офлайн функціональність"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Cache API",
-                "code": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Комунікації",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "WebSocket",
-                        "code": true
-                      },
-                      {
-                        "text": " — реал-тайм двостороння комунікація"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Server-Sent Events",
-                        "code": true
-                      },
-                      {
-                        "text": " — односпрямовані події від сервера"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "WebRTC",
-                        "code": true
-                      },
-                      {
-                        "text": " — peer-to-peer зв'язок"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Fetch API",
-                        "code": true
-                      },
-                      {
-                        "text": " — сучасні HTTP запити"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Форми",
-                "bold": true
-              },
-              {
-                "text": "Розширені можливості форм:"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Нові типи "
-                      },
-                      {
-                        "text": "<input>",
-                        "code": true
-                      },
-                      {
-                        "text": " (email, url, date, color, range)"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Вбудована валідація"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<datalist>",
-                        "code": true
-                      },
-                      {
-                        "text": " — автокомпліт"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Продуктивність",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "API для оптимізації роботи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Web Workers",
-                "code": true
-              },
-              {
-                "text": " — фонові обчислення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Intersection Observer",
-                "code": true
-              },
-              {
-                "text": " — ефективне відстеження видимості"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Performance API",
-                "code": true
-              },
-              {
-                "text": " — моніторинг швидкодії"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "ARIA-атрибути для покращення доступності"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Семантичні ролі та стани"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Підтримка асистивних технологій"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Безпека",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Content Security Policy",
-                        "code": true
-                      },
-                      {
-                        "text": " (CSP)"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Sandbox",
-                        "code": true
-                      },
-                      {
-                        "text": " атрибути"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Захищені контексти (HTTPS)"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Геолокація та пристрої",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Geolocation API",
-                        "code": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Device Orientation API",
-                        "code": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Vibration API",
-                        "code": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Battery Status API",
-                        "code": true
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Ця платформа забезпечує повноцінну екосистему для розробки сучасних веб-додатків без залежності від сторонніх плагінів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "131. Що таке Living Standard і як HTML підтримує цей підхід?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Living Standard — модель розвитку веб-стандартів, коли специфікація постійно оновлюється замість випуску фіксованих версій."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML (через WHATWG) слідує цій моделі: нові елементи, атрибути й API додаються без формальних великих версій, а застарілі депрекейтяться поступово."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Завжди актуальна специфікація."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Менше застарілих версій у браузерах."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Швидке впровадження нових технологій (Web Components, "
-              },
-              {
-                "text": "<dialog>",
-                "code": true
-              },
-              {
-                "text": ", API для медіа)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузери синхронізуються з Living Standard, забезпечуючи сумісність і інновації одночасно."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML Living Standard гарантує, що розробники працюють із сучасним, підтримуваним і сумісним кодом."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "132. Як HTML еволюціонує у контексті веб-стандартів і нових технологій?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантика та структура:",
-                "bold": true
-              },
-              {
-                "text": " додаються нові теги для сучасних інтерфейсів ("
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<dialog>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<template>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтерактивність:",
-                "bold": true
-              },
-              {
-                "text": " тісна інтеграція з JavaScript API (Web Components, Canvas, WebRTC, Web Audio)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Безпека:",
-                "bold": true
-              },
-              {
-                "text": " нові атрибути і механізми (CSP, sandbox, form validation)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність:",
-                "bold": true
-              },
-              {
-                "text": " стандарти WAI-ARIA та краща підтримка скрінрідерів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мобільність і PWA:",
-                "bold": true
-              },
-              {
-                "text": " API для офлайн-доступу, push-сповіщень, service workers."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML оновлюється разом із CSS і JS стандартами, забезпечуючи сумісність, продуктивність і безпеку."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Коротко: HTML розвивається як частина екосистеми веб-стандартів, зберігаючи сумісність і додаючи сучасні функції для UI, доступності та безпеки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "133. Які ключові зміни та нововведення з'явилися в HTML5.1 та HTML5.2?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML5.1 (2016):",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нові семантичні теги: "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<picture>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращення форм: "
-              },
-              {
-                "text": "autocomplete",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "autofocus",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "required",
-                "code": true
-              },
-              {
-                "text": " та нові "
-              },
-              {
-                "text": "input types",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додано підтримку "
-              },
-              {
-                "text": "custom elements",
-                "code": true
-              },
-              {
-                "text": " (Web Components)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поліпшення атрибутів для "
-              },
-              {
-                "text": "accessibility",
-                "code": true
-              },
-              {
-                "text": " (hidden, tabindex)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Невеликі уточнення в DOM API і інтеграції з JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML5.2 (2017):",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нові теги та атрибути: "
-              },
-              {
-                "text": "<dialog>",
-                "code": true
-              },
-              {
-                "text": " для модальних вікон, formaction для "
-              },
-              {
-                "text": "<button>",
-                "code": true
-              },
-              {
-                "text": " та "
-              },
-              {
-                "text": "<input>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечення безпечного використання "
-              },
-              {
-                "text": "iframe:",
-                "code": true
-              },
-              {
-                "text": " "
-              },
-              {
-                "text": "sandbox",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "allow",
-                "code": true
-              },
-              {
-                "text": " атрибути."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращення "
-              },
-              {
-                "text": "ARIA",
-                "code": true
-              },
-              {
-                "text": " підтримки та "
-              },
-              {
-                "text": "accessibility",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Деякі застарілі елементи були депрекейтовані ("
-              },
-              {
-                "text": "<menu>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<keygen>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтеграція з "
-              },
-              {
-                "text": "Content Security Policy",
-                "code": true
-              },
-              {
-                "text": " (CSP) та нові механізми безпеки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Кожне оновлення робить HTML більш семантичним, безпечним і дружнім до доступності."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "134. Які потенційні напрямки розвитку HTML можна очікувати у найближчому майбутньому?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Більш тісна інтеграція з "
-              },
-              {
-                "text": "Web Components",
-                "code": true
-              },
-              {
-                "text": " → спрощена кастомізація і повторне використання UI."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нові семантичні елементи для сучасних інтерфейсів (напр. "
-              },
-              {
-                "text": "<dialog>",
-                "code": true
-              },
-              {
-                "text": " покращення, "
-              },
-              {
-                "text": "<modal>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<carousel>",
-                "code": true
-              },
-              {
-                "text": " можливі)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращена мультимедіа-підтримка → "
-              },
-              {
-                "text": "Web Audio",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "WebRTC",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "3D/AR",
-                "code": true
-              },
-              {
-                "text": " контент без сторонніх плагінів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Більш потужні форми → нові "
-              },
-              {
-                "text": "input types",
-                "code": true
-              },
-              {
-                "text": ", краща валідація і "
-              },
-              {
-                "text": "accessibility",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримка прогресивних веб-додатків (PWA) → офлайн, "
-              },
-              {
-                "text": "push notifications",
-                "code": true
-              },
-              {
-                "text": ", фонова синхронізація."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтеграція зі стандартами безпеки та конфіденційності → "
-              },
-              {
-                "text": "CSP",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "cookie-less auth",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "sandboxing",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізація для мобільних і "
-              },
-              {
-                "text": "low-power",
-                "code": true
-              },
-              {
-                "text": " пристроїв → легші елементи та оптимізовані API."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Загальний тренд: HTML стає більш семантичним, інтерактивним і безпечним, з меншим залученням сторонніх бібліотек."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "135. Які популярні CSS-фреймворки найчастіше інтегрують із HTML для швидкої розробки UI?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Bootstrap",
-                "code": true
-              },
-              {
-                "text": " → найпопулярніший, готові компоненти й grid-система."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Tailwind CSS",
-                "code": true
-              },
-              {
-                "text": " → утилітарний підхід, висока гнучкість."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Foundation (від Zurb)",
-                "code": true
-              },
-              {
-                "text": " → адаптивна сітка, компоненти."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Bulma",
-                "code": true
-              },
-              {
-                "text": " → чистий flexbox-фреймворк, простий у використанні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Materialize",
-                "code": true
-              },
-              {
-                "text": " → реалізація Google Material Design."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "UIkit",
-                "code": true
-              },
-              {
-                "text": " → легкий, зручний для швидкого прототипування."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Вибір залежить від потреб: Bootstrap — швидкий старт, Tailwind — кастомні дизайн-системи, Bulma/Materialize — простота."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "136. Як CSS-фреймворки на кшталт Bootstrap полегшують створення HTML-структур і UI?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Готові компоненти:",
-                "code": true
-              },
-              {
-                "text": " кнопки, форми, навігація, модальні вікна."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Адаптивна сітка (Grid)",
-                "code": true
-              },
-              {
-                "text": " → легке створення макетів для різних екранів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уніфіковані стилі",
-                "code": true
-              },
-              {
-                "text": " → не потрібно писати CSS з нуля."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JavaScript-компоненти",
-                "code": true
-              },
-              {
-                "text": " → каруселі, модальні, тултіпи без власного JS."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кросбраузерність",
-                "code": true
-              },
-              {
-                "text": " → вирішує проблеми сумісності HTML/CSS."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Результат: швидша розробка, менше помилок у верстці, легке прототипування."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "137. Які JavaScript-бібліотеки часто використовують для підвищення інтерактивності HTML-сторінок?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "jQuery",
-                "code": true
-              },
-              {
-                "text": " → прості маніпуляції DOM і анімації (старі проєкти)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "GSAP",
-                "code": true
-              },
-              {
-                "text": " → складні та плавні анімації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Anime.js",
-                "code": true
-              },
-              {
-                "text": " → легкі анімації елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Swiper.js",
-                "code": true
-              },
-              {
-                "text": " → інтерактивні каруселі і слайдери."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Chart.js / D3.js",
-                "code": true
-              },
-              {
-                "text": " → інтерактивні графіки та діаграми."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Sortable.js / Dragula",
-                "code": true
-              },
-              {
-                "text": " → drag-and-drop елементи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Popper.js / Tippy.js",
-                "code": true
-              },
-              {
-                "text": " → тултіпи та спливаючі підказки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Вибір залежить від задачі: анімації, інтерактивні UI, графіки або drag-and-drop."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "138. Як HTML, CSS та JavaScript працюють разом у веб-розробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML → структура сторінки, семантичні елементи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS → оформлення: кольори, шрифти, розташування, адаптивність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JavaScript → динаміка та інтерактивність (події, анімації, API)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Взаємозв'язок:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML надає «скелет»."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS прикрашає цей скелет."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JS робить його живим, реагуючи на події користувача або сервер."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<button id=\"btn\">Клікни мене</button>\r\n<style>\r\n  #btn {\r\n    background: blue;\r\n    color: white;\r\n    padding: 10px;\r\n  }\r\n</style>\r\n<script>\r\n  document\r\n    .getElementById('btn')\r\n    .addEventListener('click', () => alert('Привіт!'));\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML + CSS + JS = базова тріада фронтенду, яка формує структуру, стиль і поведінку сторінки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "139. Які переваги дає використання HTML-препроцесора (наприклад, Pug/Jade) у фронтенд-розробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Скорочений синтаксис → менше коду, швидше писати."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Шаблонізація → змінні, цикли, умови прямо в HTML."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Міксини → повторне використання блоків розмітки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Краща структура → вкладеність зрозуміліша, ніж у звичайному HTML."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легко підтримувати динамічні сторінки в SSR (Express, NestJS)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мінус: потрібна збірка, ще один шар абстракції."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "140. Як працює механізм шаблонів у HTML і для чого він використовується?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML має нативний тег "
-              },
-              {
-                "text": "<template>",
-                "code": true
-              },
-              {
-                "text": " → його вміст не рендериться, доки не буде клонований через JS."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Шаблон зберігає розмітку, стилі й навіть скрипти, але пасивно, поки не активований."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для динамічного рендерингу контенту та у Web Components."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<template id=\"user-template\">\r\n  <div class=\"user\">\r\n    <p class=\"name\"></p>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  const tmpl = document.getElementById('user-template');\r\n  const clone = tmpl.content.cloneNode(true);\r\n  clone.querySelector('.name').textContent = 'Alice';\r\n  document.body.appendChild(clone);\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Перевага — можна підготувати заготовки UI та багаторазово їх використовувати."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "141. Які переваги дає мінімізація (minification) HTML-коду?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Менший розмір файлу → швидше завантаження сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшення трафіку → особливо важливо для мобільних користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кращий SEO → швидкість сайту впливає на ранжування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Економія ресурсів сервера/CDN."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Часто поєднується з мінімізацією CSS/JS і gzip/brotli компресією."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мінус: складніше читати код → тому в проєктах зберігають оригінал + мініфіковану збірку."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "142. Які основні способи оптимізації часу завантаження HTML-сторінки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мінімізувати HTML, CSS, JS (видалити пробіли, коментарі)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати gzip/brotli стиснення на сервері."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кешування (HTTP headers, Service Worker)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Critical CSS inline → решта асинхронно."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ледаче завантаження (loading=\"lazy\") для зображень/iframe."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання CDN для статичних ресурсів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Правильне підключення скриптів: defer або async."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізація медіа (webp, responsive images)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшити кількість HTTP-запитів (об'єднання ресурсів)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Головна мета — швидкий First Contentful Paint (FCP) і хороший LCP для користувачів і SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "143. Які переваги згортання пробілів (collapsing white space) в HTML та CSS?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшення розміру файлів:",
-                "bold": true
-              },
-              {
-                "text": " Коли зайві пробіли, нові рядки або табуляції автоматично згортатимуться, це допомагає зменшити розмір файлів, що може бути корисно для оптимізації швидкості завантаження веб-сторінки. Це особливо важливо для мобільних пристроїв або при повільному інтернет-з'єднанні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Спрощення структури документа:",
-                "bold": true
-              },
-              {
-                "text": " Згортання пробілів дозволяє уникнути зайвих пробілів між елементами, що робить код HTML та CSS більш чистим і зрозумілим. Код стає компактнішим, і його легше підтримувати та редагувати."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращення читабельності контенту:",
-                "bold": true
-              },
-              {
-                "text": " Згортання пробілів дозволяє браузеру правильно відображати текст, забезпечуючи, щоб зайві пробіли не порушували структуру та відображення елементів. Це особливо важливо при відображенні тексту в абзацах, списках або інших блочних елементах."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ізоляція та відокремлення елементів:",
-                "bold": true
-              },
-              {
-                "text": " Коли працює згортання пробілів, можна забезпечити рівномірний розподіл простору між елементами, що дозволяє більш ефективно керувати відстанями між ними, без того щоб зайві пробіли впливали на вигляд веб-сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникнення непотрібних порушень макета:",
-                "bold": true
-              },
-              {
-                "text": " В деяких випадках зайві пробіли можуть спричиняти небажану поведінку макета, наприклад, додавання непотрібних відступів між елементами. Згортання пробілів допомагає уникнути таких ситуацій і зберегти дизайн відповідно до заданих правил стилів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Згортання пробілів",
-            "bold": true
-          },
-          {
-            "text": " — це стандартна поведінка в HTML, що дозволяє браузеру ігнорувати зайві пробіли, кілька переносів рядка або табуляцій між текстовими елементами. Таким чином, візуальне відображення не залежить від кількості пробілів у коді."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "[MDN link](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse)"
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "144. Як у HTML реалізується підхід прогресивного вдосконалення (Progressive Enhancement)?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Progressive Enhancement",
-            "bold": true
-          },
-          {
-            "text": " → спочатку базова функціональність працює на будь-якому браузері, а додаткові можливості додаються через сучасні HTML, CSS і JS."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Принципи:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Базова розмітка — семантичний HTML для всіх користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стілі CSS — покращують дизайн, але не ламають функціонал без них."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JavaScript — додає інтерактивність та анімації, але сайт працює і без нього."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/submit\" method=\"POST\">\r\n  <input type=\"text\" name=\"email\" required placeholder=\"Email\" />\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r\n<script>\r\n  // JS: покращення UX — валідація на клієнті\r\n  document.querySelector('form').addEventListener('submit', e => {\r\n    const email = e.target.email.value;\r\n    if (!email.includes('@')) e.preventDefault();\r\n  });\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Базовий функціонал завжди доступний, а сучасні фічі підвищують зручність і інтерктивність."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "145. Які є поширені антипатерни (погані практики) при написанні HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання "
-              },
-              {
-                "text": "<div>",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "<span>",
-                "code": true
-              },
-              {
-                "text": " замість семантичних тегів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кілька "
-              },
-              {
-                "text": "<h1>",
-                "code": true
-              },
-              {
-                "text": " на сторінці без потреби."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інлайнові стилі та події ("
-              },
-              {
-                "text": "style=\"\"",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "onclick=\"\"",
-                "code": true
-              },
-              {
-                "text": ") → важче підтримувати."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відсутність атрибута "
-              },
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " у зображень."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дублікат "
-              },
-              {
-                "text": "id",
-                "code": true
-              },
-              {
-                "text": " на сторінці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання застарілих тегів ("
-              },
-              {
-                "text": "<font>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<center>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<marquee>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зловживання табличною розміткою для "
-              },
-              {
-                "text": "layout",
-                "code": true
-              },
-              {
-                "text": " замість "
-              },
-              {
-                "text": "CSS Grid/Flexbox",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відсутність "
-              },
-              {
-                "text": "lang",
-                "code": true
-              },
-              {
-                "text": " та "
-              },
-              {
-                "text": "meta charset=\"UTF-8\"",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання пустих елементів для відступів (наприклад, "
-              },
-              {
-                "text": "<br><br>",
-                "code": true
-              },
-              {
-                "text": " замість "
-              },
-              {
-                "text": "CSS",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Такі практики шкодять SEO, доступності й ускладнюють підтримку коду."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "146. Чому важлива документація при роботі з HTML і як її правильно вести?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримуваність коду → інші розробники швидко розуміють структуру та призначення елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Командна робота → зменшує помилки при масштабуванні проєкту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO і доступність → коментарі про призначення блоків, використання семантики."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стандарти та best practices → легше дотримуватись внутрішніх правил або HTML5-стандартів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Практики:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати коментарі <!-- пояснення -->."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Документувати складні структури, шаблони та інтерактивні блоки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ведення зовнішньої документації (Wiki, Storybook для UI-компонентів)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Добра документація економить час на підтримку, знижує помилки і покращує командну роботу."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "147. Що таке інструменти розробника браузера (DevTools) і як вони допомагають працювати з HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "DevTools — вбудовані інструменти у браузерах (Chrome, Firefox, Edge) для налагодження вебсторінок."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "З HTML їх використовують для:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перегляду та редагування DOM у реальному часі."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Аналізу атрибутів, структури й доступності елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відстеження завантаження ресурсів і продуктивності."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірки SEO-тегів, метаінформації, семантики."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дає можливість швидко експериментувати з розміткою без зміни вихідного коду."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Краща практика: перевіряти валідність HTML, доступність і performance прямо через DevTools."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "148. Як забезпечити сумісність HTML-коду між різними браузерами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантичний HTML",
-                "code": true
-              },
-              {
-                "text": " → базові елементи ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<form>",
-                "code": true
-              },
-              {
-                "text": ") працюють у всіх сучасних браузерах."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поліфіли та шими",
-                "code": true
-              },
-              {
-                "text": " → підключення JS/CSS для старих або непідтримуваних функцій (e.g., fetch, Promise, "
-              },
-              {
-                "text": "<dialog>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Тестування у кількох браузерах",
-                "code": true
-              },
-              {
-                "text": " → Chrome, Firefox, Edge, Safari, мобільні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Can I Use",
-                "code": true
-              },
-              {
-                "text": " → перевірка підтримки тегів, атрибутів і API."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Progressive Enhancement / Graceful Degradation",
-                "code": true
-              },
-              {
-                "text": " → базовий функціонал доступний усюди, додаткові можливості — де підтримується."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "DevTools і автоматичне тестування",
-                "code": true
-              },
-              {
-                "text": " → перевірка рендерингу, accessibility і JavaScript API."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Комбінація стандартного HTML, поліфілів, progressive enhancement і ретельного тестування забезпечує максимальну сумісність."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "149. Що таке візуалізація даних у HTML і як її реалізувати на вебсторінці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Візуалізація даних — графічне відображення інформації (діаграми, графіки, карти) прямо в браузері."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Реалізація в HTML:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Canvas API → малювання графіки через JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SVG → векторна графіка, інтерактивна та масштабована."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Бібліотеки JS → полегшують роботу і додають інтерактивність:"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Chart.js — швидке створення графіків."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "D3.js — гнучкі й кастомні візуалізації."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Plotly.js — інтерактивні графіки з zoom і tooltip."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад із Chart.js:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<canvas id=\"myChart\"></canvas>\r\n\r\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\r\n<script>\r\n  const ctx = document.getElementById('myChart').getContext('2d');\r\n  new Chart(ctx, {\r\n    type: 'bar',\r\n    data: {\r\n      labels: ['Red', 'Blue', 'Green'],\r\n      datasets: [{ label: 'Votes', data: [12, 19, 7] }],\r\n    },\r\n  });\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Візуалізації роблять дані більш зрозумілими і інтерактивними для користувача."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "150. Які теги з найсвіжіших оновлень ви знаєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<mark>",
-                "code": true
-              },
-              {
-                "text": ": Для виділення тексту (позначення важливих фрагментів)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<progress>",
-                "code": true
-              },
-              {
-                "text": ": Для відображення прогресу виконання задачі."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meter>",
-                "code": true
-              },
-              {
-                "text": ": Для вимірювання значення в певному діапазоні (наприклад, рівень батареї)."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "151. Які атрибути можна використовувати зі списками для зміни їхнього зовнішнього вигляду або поведінки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для списків в HTML основні атрибути та способи зміни вигляду/поведінки:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "type (для "
-              },
-              {
-                "text": "<ol>",
-                "code": true
-              },
-              {
-                "text": " та "
-              },
-              {
-                "text": "<ul>",
-                "code": true
-              },
-              {
-                "text": " в старому HTML, частково застаріло):"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<ol type=\"1\">",
-                        "code": true
-                      },
-                      {
-                        "text": " — цифри (за замовчуванням)"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<ol type=\"A\">",
-                        "code": true
-                      },
-                      {
-                        "text": " — великі літери"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<ol type=\"a\">",
-                        "code": true
-                      },
-                      {
-                        "text": " — малі літери"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<ol type=\"I\">",
-                        "code": true
-                      },
-                      {
-                        "text": " — римські великі"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<ol type=\"i\">",
-                        "code": true
-                      },
-                      {
-                        "text": " — римські малі"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "start (для <ol>) — початковий номер:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<ol start=\"5\">\r\n  <li>Пункт</li>\r\n</ol>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "reversed (для <ol>) — зворотний порядок нумерації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "compact (застарілий) — менш відстані між пунктами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS (сучасний спосіб):"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "list-style-type",
-                        "code": true
-                      },
-                      {
-                        "text": " — тип маркера (disc, circle, square, none)."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "list-style-image",
-                        "code": true
-                      },
-                      {
-                        "text": " — використовувати зображення замість маркера."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "list-style-position",
-                        "code": true
-                      },
-                      {
-                        "text": " — розташування маркера (inside, outside)."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Сучасні проєкти майже завжди стилізують списки через CSS, а не HTML-атрибути."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "152. Як створити посилання на різні розділи на одній веб-сторінці HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Відповідь: Для створення гіперпосилання використовується тег "
-          },
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": ". Атрибут href вказує URL або шлях."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": null,
-        "content": "<a href=\"https://example.com\">Перейти на Example</a>\r"
-      }
-    ]
-  },
-  {
-    "question": "153. Опишіть основну структуру HTML-документа.",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основна структура HTML-документа:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<!-- Оголошення типу документа -->\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" />\r\n    <title>Назва сторінки</title>\r\n  </head>\r\n  <body>\r\n    <!-- Вміст сторінки -->\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Складові:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<!DOCTYPE html>",
-                "code": true
-              },
-              {
-                "text": " — вказує, що документ у HTML5."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<html>",
-                "code": true
-              },
-              {
-                "text": " — кореневий елемент."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " — метадані (кодова сторінка, заголовок, стилі, скрипти)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<body>",
-                "code": true
-              },
-              {
-                "text": " — видимий вміст сторінки."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "154. Різниця між кнопкою та посиланням у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<button>",
-                "code": true
-              },
-              {
-                "text": " використовується для виконання дій (відправити форму, викликати JavaScript функції)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<a>",
-                "code": true
-              },
-              {
-                "text": " використовується для навігації (перехід на іншу сторінку, розділ)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<button type=\"submit\">Відправити</button> <a href=\"/about\">Про нас</a>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Семантика:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кнопка — дія."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Посилання — навігація."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використання правильних елементів покращує доступність і SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "155. Чим відрізняється article від section?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": " — самостійний блок контенту, який може існувати окремо від сторінки і бути зрозумілий поза контекстом."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": " — логічний розділ сторінки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Article:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Новини, блоги, публікації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коментарі користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Форумні повідомлення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Section:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розділи сторінки (Про нас, Контакти)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Тематичні групи контенту."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує SEO і доступність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легко стилізується та структуровано організовує контент."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "156. Що таке категорії контенту в HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантика",
-                "bold": true
-              },
-              {
-                "text": " — семантичні теги для структурування контенту (header, footer, article)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мультимедіа",
-                "bold": true
-              },
-              {
-                "text": " — підтримка аудіо та відео (audio, video)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Графіка",
-                "bold": true
-              },
-              {
-                "text": " — елементи для роботи з графікою (canvas, SVG)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Сховище і офлайн",
-                "bold": true
-              },
-              {
-                "text": " — API для локального зберігання даних (localStorage, IndexedDB)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Комунікації",
-                "bold": true
-              },
-              {
-                "text": " — WebSocket, Server-Sent Events."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Форми",
-                "bold": true
-              },
-              {
-                "text": " — розширені можливості форм (нові типи input, валідація)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Продуктивність",
-                "bold": true
-              },
-              {
-                "text": " — API для оптимізації роботи (Web Workers)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність",
-                "bold": true
-              },
-              {
-                "text": " — ARIA-атрибути для покращення доступності."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "157. Що таке data-атрибути, в яких випадках їх використовуєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут autocomplete в HTML використовується для вказівки браузеру, чи має він автоматично заповнювати поля форми збереженими даними (наприклад, іменем, адресою, електронною поштою). Він може бути включений або вимкнений для окремих полів форми або для всієї форми."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Значення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "on",
-                "code": true
-              },
-              {
-                "text": " — дозволяє автозаповнення."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "off",
-                "code": true
-              },
-              {
-                "text": " — вимикає автозаповнення."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "158. Як створити форму в HTML і забезпечити її валідацію?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML-форма — це елемент, який збирає дані від користувача та відправляє їх на сервер або обробляє на клієнті."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад створення:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/submit\" method=\"post\">\r\n  <label for=\"name\">Ім'я:</label>\r\n  <input type=\"text\" id=\"name\" name=\"name\" />\r\n\r\n  <label for=\"email\">Email:</label>\r\n  <input type=\"email\" id=\"email\" name=\"email\" />\r\n\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<form>",
-                "code": true
-              },
-              {
-                "text": " — контейнер форми."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "action",
-                "code": true
-              },
-              {
-                "text": " — URL, куди відправляються дані."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "method",
-                "code": true
-              },
-              {
-                "text": " — спосіб відправки (get або post)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Поля вводу",
-            "bold": true
-          },
-          {
-            "text": " ("
-          },
-          {
-            "text": "<input>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<textarea>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<select>",
-            "code": true
-          },
-          {
-            "text": ") + кнопки ("
-          },
-          {
-            "text": "<button>",
-            "code": true
-          },
-          {
-            "text": " або "
-          },
-          {
-            "text": "<input type=\"submit\">",
-            "code": true
-          },
-          {
-            "text": ")."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "159. Які методи відправки даних форми ви знаєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`ApplicationCache`",
-            "bold": true
-          },
-          {
-            "text": " в HTML5 — це механізм для офлайн-доступу до веб-додатків. Він дозволяє зберігати ресурси веб-сторінки (HTML, CSS, JavaScript, зображення) в кеші браузера, що дає змогу користувачам працювати з додатком без інтернет-з'єднання."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Відповідно до специфікації HTML5, цей механізм був застарілий і замінений новими API, такими як "
-          },
-          {
-            "text": "Service Workers",
-            "bold": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  }
-]
diff --git a/json/03-javascript.json b/json/03-javascript.json
deleted file mode 100644
index 744ecca2..00000000
--- a/json/03-javascript.json
+++ /dev/null
@@ -1,48089 +0,0 @@
-[
-  {
-    "category": "javascript",
-    "order": 1,
-    "translations": {
-      "uk": {
-        "question": "1. Що таке JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Опис JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript - це динамічна, прототипно-орієнтована мова програмування, яка використовується для створення інтерактивного контенту на вебсторінках. Вона підтримує подієве програмування, асинхронність і працює в браузері, а також на сервері через Node.js."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "1. What is JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "JavaScript description:"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript is a dynamic, prototype-based programming language used to create interactive content on web pages. It supports event-driven programming, asynchrony, and runs both in the browser and on the server via Node.js."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "1. Czym jest JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Opis JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript to dynamiczny, oparty na prototypach język programowania używany do tworzenia interaktywnych treści na stronach internetowych. Obsługuje programowanie zdarzeniowe, asynchroniczność i działa zarówno w przeglądarce, jak i po stronie serwera przez Node.js."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 2,
-    "translations": {
-      "uk": {
-        "question": "2. Які ключові слова використовуються для оголошення змінних у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "У JavaScript змінні можна оголошувати за допомогою трьох ключових слів:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`var`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Старий спосіб оголошення змінних."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Функціональна область видимості."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Підтримує hoisting з undefined."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Не рекомендується."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "var x = 10;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`let`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Блочна область видимості."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Дозволяє зміну значення."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Без доступного hoisting."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let y = 20;\ny = 30;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`const`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Блочна область видимості."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Потрібна ініціалізація."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Значення не можна перевизначити."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const z = 40;\n// z = 50; // Error"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "2. Which keywords are used to declare variables in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "In JavaScript, variables can be declared using three keywords:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`var`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Legacy declaration method."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Function scope."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting with undefined."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Not recommended."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "var x = 10;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`let`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Block scope."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Value can be reassigned."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "No usable hoisting."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let y = 20;\ny = 30;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`const`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Block scope."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Must be initialized."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Cannot be reassigned."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const z = 40;\n// z = 50; // Error"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "2. Jakie słowa kluczowe służą do deklarowania zmiennych w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "W JavaScript zmienne można deklarować za pomocą trzech słów kluczowych:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`var`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stary sposób deklaracji."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zakres funkcji."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting z undefined."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Niezalecane."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "var x = 10;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`let`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zakres blokowy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Możliwość zmiany wartości."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Brak dostępnego hoistingu."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let y = 20;\ny = 30;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`const`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zakres blokowy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wymaga inicjalizacji."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Nie można nadpisać."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const z = 40;\n// z = 50; // Error"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 3,
-    "translations": {
-      "uk": {
-        "question": "3. Перерахуйте типи даних у JavaScript.",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Типи даних у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Примітивні:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "string",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "number",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "boolean",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "null",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "undefined",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "bigint",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "symbol",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Складні:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "object",
-                            "code": true
-                          },
-                          {
-                            "text": " (масиви, функції, дати тощо)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "3. List the data types in JavaScript.",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "JavaScript data types"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Primitive:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "string",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "number",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "boolean",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "null",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "undefined",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "bigint",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "symbol",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Complex:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "object",
-                            "code": true
-                          },
-                          {
-                            "text": " (arrays, functions, dates, etc.)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "3. Wymień typy danych w JavaScript.",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Typy danych w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prymitywne:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "string",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "number",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "boolean",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "null",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "undefined",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "bigint",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "symbol",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Złożone:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "object",
-                            "code": true
-                          },
-                          {
-                            "text": " (tablice, funkcje, daty itd.)."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 1,
-    "translations": {
-      "uk": {
-        "question": "1. Що таке JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Опис JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript - це динамічна, прототипно-орієнтована мова програмування, яка використовується для створення інтерактивного контенту на вебсторінках. Вона підтримує подієве програмування, асинхронність і працює в браузері, а також на сервері через Node.js."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "1. What is JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "JavaScript description:"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript is a dynamic, prototype-based programming language used to create interactive content on web pages. It supports event-driven programming, asynchrony, and runs both in the browser and on the server via Node.js."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "1. Czym jest JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Opis JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript to dynamiczny, oparty na prototypach język programowania używany do tworzenia interaktywnych treści na stronach internetowych. Obsługuje programowanie zdarzeniowe, asynchroniczność i działa zarówno w przeglądarce, jak i po stronie serwera przez Node.js."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 2,
-    "translations": {
-      "uk": {
-        "question": "2. Які ключові слова використовуються для оголошення змінних у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "У JavaScript змінні можна оголошувати за допомогою трьох ключових слів:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`var`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Старий спосіб оголошення змінних."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Функціональна область видимості."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Підтримує hoisting з undefined."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Не рекомендується."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "var x = 10;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`let`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Блочна область видимості."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Дозволяє зміну значення."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Без доступного hoisting."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let y = 20;\ny = 30;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`const`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Блочна область видимості."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Потрібна ініціалізація."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Значення не можна перевизначити."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const z = 40;\n// z = 50; // Error"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "2. Which keywords are used to declare variables in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "In JavaScript, variables can be declared using three keywords:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`var`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Legacy declaration method."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Function scope."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting with undefined."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Not recommended."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "var x = 10;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`let`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Block scope."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Value can be reassigned."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "No usable hoisting."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let y = 20;\ny = 30;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`const`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Block scope."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Must be initialized."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Cannot be reassigned."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const z = 40;\n// z = 50; // Error"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "2. Jakie słowa kluczowe służą do deklarowania zmiennych w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "W JavaScript zmienne można deklarować za pomocą trzech słów kluczowych:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`var`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stary sposób deklaracji."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zakres funkcji."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting z undefined."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Niezalecane."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "var x = 10;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`let`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zakres blokowy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Możliwość zmiany wartości."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Brak dostępnego hoistingu."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let y = 20;\ny = 30;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "`const`",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zakres blokowy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wymaga inicjalizacji."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Nie można nadpisać."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const z = 40;\n// z = 50; // Error"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 4,
-    "translations": {
-      "uk": {
-        "question": "4. У чому різниця між функціональним (functional) і подієвим (event-driven) програмуванням у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Різниця між функціональним та подієвим програмуванням у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Функціональне програмування:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Базується на чистих функціях без побічних ефектів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Дані не змінюються, використовується іммутабельність."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Логіка будується через композицію функцій ("
-                  },
-                  {
-                    "text": "map",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "reduce",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "filter",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Типовий приклад: трансформація масивів даних."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Подієве програмування:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Код реагує на події ("
-                  },
-                  {
-                    "text": "click",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "hover",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "async responses",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовує слухачі подій ("
-                  },
-                  {
-                    "text": "event listeners",
-                    "code": true
-                  },
-                  {
-                    "text": ") і обробники ("
-                  },
-                  {
-                    "text": "callbacks",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Орієнтоване на взаємодію з середовищем виконання."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Типовий приклад: обробка кліку користувача."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "4. What is the difference between functional and event-driven programming in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference between functional and event-driven programming in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Functional programming:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Based on pure functions without side effects."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Data is immutable and not modified directly."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Logic is built using function composition ("
-                  },
-                  {
-                    "text": "map",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "reduce",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "filter",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Typical example: processing data collections."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event-driven programming:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Code reacts to events ("
-                  },
-                  {
-                    "text": "click",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "hover",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "async responses",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Uses event listeners and handlers ("
-                  },
-                  {
-                    "text": "callbacks",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Built around interaction with the runtime environment."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Typical example: handling a button click."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "4. Jaka jest różnica między programowaniem funkcyjnym a sterowanym zdarzeniami w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnica między programowaniem funkcyjnym a zdarzeniowym w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Programowanie funkcyjne:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Opiera się na czystych funkcjach bez efektów ubocznych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dane są niemutowalne."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Logika oparta na kompozycji funkcji ("
-                  },
-                  {
-                    "text": "map",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "reduce",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "filter",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przykład: przetwarzanie kolekcji danych."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Programowanie sterowane zdarzeniami:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reaguje na zdarzenia ("
-                  },
-                  {
-                    "text": "click",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "hover",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "async responses",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wykorzystuje nasłuchiwacze i procedury obsługi ("
-                  },
-                  {
-                    "text": "callbacks",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Skupione na interakcji ze środowiskiem wykonawczym."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przykład: obsługa kliknięcia przycisku."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 5,
-    "translations": {
-      "uk": {
-        "question": "5. У якому році відбувся перший реліз JavaScript, і в якому браузері він був вперше використаний?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Рік першого релізу JavaScript та перший браузер"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Перший реліз JavaScript відбувся у 1995 році. Мову вперше було реалізовано в браузері Netscape Navigator."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "5. In which year was JavaScript first released, and in which browser was it first used?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "JavaScript first release year and initial browser"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The first release of JavaScript took place in 1995. It was initially implemented in the Netscape Navigator browser."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "5. W którym roku odbyła się pierwsza wersja JavaScript i w jakiej przeglądarce został on po raz pierwszy użyty?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Rok pierwszego wydania JavaScript i pierwsza przeglądarka"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pierwsze wydanie JavaScript miało miejsce w 1995 roku. Język został po raz pierwszy zaimplementowany w przeglądarce Netscape Navigator."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 6,
-    "translations": {
-      "uk": {
-        "question": "6. Чим відрізняється масив та обʼєкт? У яких випадках що використовуєте?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Різниця між масивом та обʼєктом і їх використання в JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Масив:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Призначений для зберігання впорядкованих елементів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Доступ до значень здійснюється за числовими індексами."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовується для колекцій однотипних даних, де порядок має значення."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Обʼєкт:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зберігає дані у вигляді пар ключ-значення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Доступ до значень відбувається через іменовані ключі."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Підходить для опису сутностей з різними властивостями."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Використання:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Масив:",
-                    "bold": true
-                  },
-                  {
-                    "text": " коли важливий порядок елементів або потрібна обробка списків даних."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обʼєкт:",
-                    "bold": true
-                  },
-                  {
-                    "text": " коли потрібно зберігати структуровані дані з різними атрибутами."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "6. What is the difference between an array and an object? When would you use each?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference between arrays and objects and their usage in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Array:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Used to store ordered collections of elements."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Values are accessed by numeric indexes."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Suitable for homogeneous data where order matters."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Object:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Stores data as key-value pairs."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Values are accessed using named keys."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Suitable for representing entities with different properties."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Usage:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Array:",
-                    "bold": true
-                  },
-                  {
-                    "text": " when element order is important or when working with lists."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object:",
-                    "bold": true
-                  },
-                  {
-                    "text": " when storing structured data with named attributes."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "6. Czym różni się tablica od obiektu? Kiedy używać każdego z nich?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnica między tablicą a obiektem i ich zastosowanie w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Tablica:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Służy do przechowywania uporządkowanych elementów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dostęp do danych odbywa się przez indeksy liczbowe."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Stosowana do kolekcji danych, gdzie kolejność ma znaczenie."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Obiekt:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przechowuje dane jako pary klucz-wartość."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dostęp do wartości przez nazwane klucze."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nadaje się do opisu złożonych struktur danych."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zastosowanie:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tablica:",
-                    "bold": true
-                  },
-                  {
-                    "text": " gdy ważna jest kolejność elementów lub praca na listach danych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekt:",
-                    "bold": true
-                  },
-                  {
-                    "text": " gdy potrzebne są dane z różnymi właściwościami."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 7,
-    "translations": {
-      "uk": {
-        "question": "7. Events в JavaScript. Розкажіть про event propagation, bubbling, delegation, preventing тощо.",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Обробка подій в JavaScript: Propagation, Bubbling, Delegation, Preventing тощо"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event Propagation",
-                "bold": true
-              },
-              {
-                "text": " — це процес, під час якого подія поширюється через DOM-дерево. Існує два основні етапи:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Bubbling",
-                    "bold": true
-                  },
-                  {
-                    "text": " (спливання): подія виникає на цільовому елементі та піднімається вгору до батьківських елементів аж до document."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Capturing",
-                    "bold": true
-                  },
-                  {
-                    "text": " (перехоплення): подія спочатку обробляється на верхніх рівнях DOM і спускається до цільового елемента."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event Delegation",
-                "bold": true
-              },
-              {
-                "text": " — техніка, коли один обробник вішається на батьківський елемент і обробляє події від дочірніх. Корисно для динамічних елементів і зменшення кількості слухачів."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Preventing Default Behavior",
-                "bold": true
-              },
-              {
-                "text": " — скасування стандартної поведінки браузера."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "event.preventDefault() блокує стандартну дію, наприклад перехід за посиланням або відправку форми."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "stopPropagation() та stopImmediatePropagation():",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "stopPropagation(): зупиняє подальше поширення події, але не інші обробники на поточному елементі."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "stopImmediatePropagation(): зупиняє поширення події та всі інші обробники на цьому ж елементі."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "7. Events in JavaScript. Explain event propagation, bubbling, delegation, preventing, etc.",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Event handling in JavaScript: Propagation, Bubbling, Delegation, Preventing, etc."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event Propagation",
-                "bold": true
-              },
-              {
-                "text": " is the process by which an event travels through the DOM tree. There are two main phases:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Bubbling",
-                    "bold": true
-                  },
-                  {
-                    "text": ": the event starts at the target element and bubbles up to parent elements up to document."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Capturing",
-                    "bold": true
-                  },
-                  {
-                    "text": ": the event is handled from the top of the DOM tree down to the target element."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event Delegation",
-                "bold": true
-              },
-              {
-                "text": " is a technique where a single event handler is attached to a parent element to handle events from its children. Useful for dynamic elements."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Preventing Default Behavior",
-                "bold": true
-              },
-              {
-                "text": " means stopping the browser’s default action."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "event.preventDefault() prevents default actions such as link navigation or form submission."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "stopPropagation() vs stopImmediatePropagation():",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "stopPropagation(): stops the event from bubbling further, but allows other handlers on the same element."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "stopImmediatePropagation(): stops propagation and prevents other handlers on the same element."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "7. Zdarzenia w JavaScript. Wyjaśnij propagację zdarzeń, bubbling, delegację, zapobieganie itp.",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Obsługa zdarzeń w JavaScript: propagacja, bubbling, delegacja, zapobieganie itp."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event Propagation",
-                "bold": true
-              },
-              {
-                "text": " to proces, w którym zdarzenie rozchodzi się po drzewie DOM. Występują dwie główne fazy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Bubbling",
-                    "bold": true
-                  },
-                  {
-                    "text": ": zdarzenie zaczyna się na elemencie docelowym i przechodzi w górę do elementów nadrzędnych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Capturing",
-                    "bold": true
-                  },
-                  {
-                    "text": ": zdarzenie jest obsługiwane od góry drzewa DOM w dół do elementu docelowego."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event Delegation",
-                "bold": true
-              },
-              {
-                "text": " polega na dodaniu jednego obsługiwacza do elementu nadrzędnego zamiast wielu do elementów potomnych."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Preventing Default Behavior",
-                "bold": true
-              },
-              {
-                "text": " oznacza blokowanie domyślnego zachowania przeglądarki."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "event.preventDefault() zapobiega domyślnym akcjom, np. wysyłaniu formularza."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "stopPropagation() oraz stopImmediatePropagation():",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "stopPropagation(): zatrzymuje dalszą propagację zdarzenia."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "stopImmediatePropagation(): zatrzymuje propagację oraz inne obsługiwacze na tym samym elemencie."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 8,
-    "translations": {
-      "uk": {
-        "question": "8. Чи можливо перевизначити const?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Перевизначення значення "
-              },
-              {
-                "text": "const",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ні, змінну, оголошену через const, не можна переназначити. Водночас, якщо const використовується для обʼєкта або масиву, дозволено змінювати їхній вміст. const гарантує незмінність посилання, але не внутрішніх даних складних типів."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "8. Is it possible to reassign a const?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Reassigning "
-              },
-              {
-                "text": "const",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "No, a variable declared with const cannot be reassigned. However, if const is used for an object or an array, its internal content can still be modified. const guarantees immutability of the reference, not of the underlying data."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "8. Czy można nadpisać const?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Nadpisywanie "
-              },
-              {
-                "text": "const",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Nie, zmiennej zadeklarowanej za pomocą const nie można przypisać ponownie. Jeśli jednak const odnosi się do obiektu lub tablicy, ich zawartość może być modyfikowana. const chroni referencję, a nie dane wewnętrzne."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 9,
-    "translations": {
-      "uk": {
-        "question": "9. Чи відомі вам принципи DRY, KISS, YAGNI, SOLID?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Принципи DRY, KISS, YAGNI, SOLID"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Так, ці принципи застосовуються для написання чистого, зрозумілого та підтримуваного коду."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "DRY (Don't Repeat Yourself)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — уникайте дублювання логіки. Спільний код слід виносити в окремі функції або модулі."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "KISS (Keep It Simple, Stupid)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — робіть рішення простими й очевидними, без зайвих ускладнень."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "YAGNI (You Aren't Gonna Need It)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — не реалізовуйте функціональність, яка наразі не потрібна."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "SOLID",
-                    "bold": true
-                  },
-                  {
-                    "text": " — набір принципів обʼєктно-орієнтованого проєктування:"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "S (Single Responsibility) — одна відповідальність на клас або функцію."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "O (Open/Closed) — відкритість до розширення, закритість до змін."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "L (Liskov Substitution) — підкласи повинні коректно замінювати базові класи."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "I (Interface Segregation) — краще кілька вузьких інтерфейсів, ніж один загальний."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "D (Dependency Inversion) — залежності мають будуватись від абстракцій."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "9. Are you familiar with the principles DRY, KISS, YAGNI, SOLID?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "DRY, KISS, YAGNI, SOLID principles"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Yes, these principles are widely used to write clean, maintainable, and efficient code."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "DRY (Don't Repeat Yourself)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — avoid code duplication by extracting shared logic."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "KISS (Keep It Simple, Stupid)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — keep solutions simple and easy to understand."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "YAGNI (You Aren't Gonna Need It)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — do not implement functionality until it is actually needed."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "SOLID",
-                    "bold": true
-                  },
-                  {
-                    "text": " — a set of object-oriented design principles:"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "S — Single Responsibility Principle."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "O — Open/Closed Principle."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "L — Liskov Substitution Principle."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "I — Interface Segregation Principle."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "D — Dependency Inversion Principle."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "9. Czy znasz zasady DRY, KISS, YAGNI, SOLID?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zasady DRY, KISS, YAGNI, SOLID"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Tak, są to powszechnie stosowane zasady tworzenia czytelnego i łatwego w utrzymaniu kodu."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "DRY (Don't Repeat Yourself)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — unikanie powielania kodu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "KISS (Keep It Simple, Stupid)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — prostota rozwiązań ponad złożoność."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "YAGNI (You Aren't Gonna Need It)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — nie implementuj funkcji, które nie są aktualnie potrzebne."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "SOLID",
-                    "bold": true
-                  },
-                  {
-                    "text": " — zestaw zasad projektowania obiektowego:"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "S — jedna odpowiedzialność."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "O — otwarte na rozszerzenia, zamknięte na modyfikacje."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "L — zasada podstawienia Liskov."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "I — segregacja interfejsów."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "D — odwrócenie zależności."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 10,
-    "translations": {
-      "uk": {
-        "question": "10. У чому відмінності LocalStorage від SessionStorage?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Відмінності між LocalStorage та SessionStorage"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "LocalStorage:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Дані зберігаються без обмежень у часі."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Доступний у всіх вкладках одного домену."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Типовий ліміт 5–10 МБ на домен."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Видаляється лише явно."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "SessionStorage:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Дані живуть лише протягом сесії вкладки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Доступний тільки в поточній вкладці."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ліміт схожий на LocalStorage."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Очищається автоматично при закритті вкладки."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Основні відмінності:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Тривалість зберігання:",
-                    "bold": true
-                  },
-                  {
-                    "text": " LocalStorage — постійно, SessionStorage — лише сесія."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Доступність:",
-                    "bold": true
-                  },
-                  {
-                    "text": " LocalStorage — всі вкладки, SessionStorage — одна вкладка."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "10. What is the difference between LocalStorage and SessionStorage?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Differences between LocalStorage and SessionStorage"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "LocalStorage:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Data persists without time limits."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Accessible across all tabs of the same domain."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Typical limit is 5–10 MB per domain."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Removed only explicitly."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "SessionStorage:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Data exists only for the lifetime of a tab session."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Accessible only within the same tab."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Storage limit similar to LocalStorage."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Cleared automatically when the tab is closed."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Key differences:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Persistence:",
-                    "bold": true
-                  },
-                  {
-                    "text": " LocalStorage is persistent, SessionStorage is session-based."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Scope:",
-                    "bold": true
-                  },
-                  {
-                    "text": " LocalStorage works across tabs, SessionStorage is tab-specific."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "10. Jakie są różnice między LocalStorage a SessionStorage?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnice między LocalStorage i SessionStorage"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "LocalStorage:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dane są przechowywane bez ograniczeń czasowych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dostępny we wszystkich kartach tej samej domeny."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Limit zwykle 5–10 MB na domenę."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Usuwany tylko ręcznie."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "SessionStorage:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dane istnieją tylko w trakcie sesji karty."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dostępny tylko w jednej karcie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Limit podobny do LocalStorage."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Czyszczony automatycznie po zamknięciu karty."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Główne różnice:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Czas przechowywania:",
-                    "bold": true
-                  },
-                  {
-                    "text": " LocalStorage — stały, SessionStorage — sesyjny."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakres:",
-                    "bold": true
-                  },
-                  {
-                    "text": " LocalStorage — wiele kart, SessionStorage — jedna karta."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 11,
-    "translations": {
-      "uk": {
-        "question": "11. Що таке замикання (closure) в JavaScript і як воно працює?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Замикання (closure) в JavaScript та його принцип роботи."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Замикання (closure)",
-                "bold": true
-              },
-              {
-                "text": " — це функція, яка запам’ятовує лексичне оточення, в якому була створена, і має доступ до змінних цього оточення навіть після завершення виконання зовнішньої функції."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Як це працює:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Оточення:",
-                    "bold": true
-                  },
-                  {
-                    "text": " кожна функція має доступ до власних локальних змінних та до змінних з області видимості, в якій вона була оголошена."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Замикання:",
-                    "bold": true
-                  },
-                  {
-                    "text": " внутрішня функція зберігає доступ до змінних зовнішньої функції навіть після її виконання."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Приклад:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function outer() {\n  let counter = 0;\n\n  return function inner() {\n    counter++;\n    console.log(counter);\n  };\n}\n\nconst increment = outer();\nincrement(); // 1\nincrement(); // 2"
-          }
-        ]
-      },
-      "en": {
-        "question": "11. What is a closure in JavaScript and how does it work?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Closure in JavaScript and how it works."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A closure",
-                "bold": true
-              },
-              {
-                "text": " is a function that remembers the lexical environment in which it was created. This allows it to access variables from that scope even after the outer function has finished executing."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "How it works:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Environment:",
-                    "bold": true
-                  },
-                  {
-                    "text": " every function has access to its local variables and to variables from the scope where it was defined."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Closure:",
-                    "bold": true
-                  },
-                  {
-                    "text": " an inner function retains access to the outer function’s variables after the outer function has completed."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Example:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function outer() {\n  let counter = 0;\n\n  return function inner() {\n    counter++;\n    console.log(counter);\n  };\n}\n\nconst increment = outer();\nincrement(); // 1\nincrement(); // 2"
-          }
-        ]
-      },
-      "pl": {
-        "question": "11. Czym jest domknięcie (closure) w JavaScript i jak działa?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Domknięcie (closure) w JavaScript i zasada jego działania."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Domknięcie (closure)",
-                "bold": true
-              },
-              {
-                "text": " to funkcja, która zapamiętuje środowisko leksykalne, w którym została utworzona, i ma dostęp do zmiennych z tego zakresu nawet po zakończeniu działania funkcji zewnętrznej."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Jak to działa:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Środowisko:",
-                    "bold": true
-                  },
-                  {
-                    "text": " każda funkcja ma dostęp do własnych zmiennych lokalnych oraz do zmiennych z zakresu, w którym została zdefiniowana."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Domknięcie:",
-                    "bold": true
-                  },
-                  {
-                    "text": " funkcja wewnętrzna zachowuje dostęp do zmiennych funkcji zewnętrznej po jej zakończeniu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Przykład:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function outer() {\n  let counter = 0;\n\n  return function inner() {\n    counter++;\n    console.log(counter);\n  };\n}\n\nconst increment = outer();\nincrement(); // 1\nincrement(); // 2"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 12,
-    "translations": {
-      "uk": {
-        "question": "12. Що таке Кукі (cookies) і як вони працюють в JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Кукі (cookies) в JavaScript: як вони працюють і для чого використовуються."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Кукі (cookies)",
-                "bold": true
-              },
-              {
-                "text": " — це невеликі фрагменти даних, які сайт зберігає в браузері користувача для ідентифікації, збереження налаштувань і роботи сесій."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Як працюють кукі:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зчитування:",
-                    "bold": true
-                  },
-                  {
-                    "text": " браузер автоматично додає кукі до HTTP-запитів, а JavaScript читає їх через document.cookie."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const cookies = document.cookie;\nconsole.log(cookies);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Запис:",
-                    "bold": true
-                  },
-                  {
-                    "text": " кукі встановлюються через document.cookie із зазначенням параметрів."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "document.cookie = 'name=value; expires=Thu, 31 Dec 2025 23:59:59 UTC; path=/';"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Видалення:",
-                    "bold": true
-                  },
-                  {
-                    "text": " відбувається шляхом встановлення дати завершення в минуле."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Особливості:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Розмір однієї кукі обмежений ~4 КБ."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Можуть мати термін дії або бути сесійними."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Можуть бути обмежені доменом і шляхом."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Параметри безпеки: Secure, HttpOnly, SameSite."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "12. What are cookies and how do they work in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Cookies in JavaScript: how they work and what they are used for."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Cookies",
-                "bold": true
-              },
-              {
-                "text": " are small pieces of data stored in the user's browser to identify users, store preferences, and manage sessions."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "How cookies work:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reading:",
-                    "bold": true
-                  },
-                  {
-                    "text": " the browser sends cookies with requests, and JavaScript can access them via document.cookie."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const cookies = document.cookie;\nconsole.log(cookies);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Writing:",
-                    "bold": true
-                  },
-                  {
-                    "text": " cookies are set using document.cookie with parameters."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "document.cookie = 'name=value; expires=Thu, 31 Dec 2025 23:59:59 UTC; path=/';"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Deleting:",
-                    "bold": true
-                  },
-                  {
-                    "text": " done by setting an expiration date in the past."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Key aspects:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Maximum size is about 4 KB per cookie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Can be session-based or persistent."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Restricted by domain and path."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Security flags include Secure, HttpOnly, and SameSite."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "12. Czym są cookies i jak działają w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Cookies w JavaScript: jak działają i do czego służą."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Cookies",
-                "bold": true
-              },
-              {
-                "text": " to niewielkie dane zapisywane w przeglądarce użytkownika w celu identyfikacji, przechowywania ustawień i obsługi sesji."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Jak działają cookies:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Odczyt:",
-                    "bold": true
-                  },
-                  {
-                    "text": " przeglądarka wysyła cookies z żądaniami, a JavaScript odczytuje je przez document.cookie."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const cookies = document.cookie;\nconsole.log(cookies);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zapis:",
-                    "bold": true
-                  },
-                  {
-                    "text": " cookies są ustawiane za pomocą document.cookie."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "document.cookie = 'name=value; expires=Thu, 31 Dec 2025 23:59:59 UTC; path=/';"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Usuwanie:",
-                    "bold": true
-                  },
-                  {
-                    "text": " przez ustawienie daty wygaśnięcia w przeszłości."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Cechy:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Maksymalny rozmiar jednej cookie to około 4 KB."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mogą być sesyjne lub trwałe."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ograniczone do domeny i ścieżki."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obsługują flagi bezpieczeństwa: Secure, HttpOnly, SameSite."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 13,
-    "translations": {
-      "uk": {
-        "question": "13. Що таке область видимості змінної?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Область видимості змінної в JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Область видимості змінної",
-                "bold": true
-              },
-              {
-                "text": " — це частина коду, в межах якої змінна доступна для використання. У JavaScript існують такі основні типи області видимості:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Глобальна область видимості (Global Scope):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Змінна доступна у всьому коді."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Оголошується поза функціями та блоками."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функціональна область видимості (Function Scope):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Змінні var доступні лише всередині функції."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Не застосовується до let і const."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Блочна область видимості (Block Scope):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Змінні let і const доступні лише в межах блоку {}."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "var не підтримує блочну область."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Вкладені області видимості:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Внутрішня область має доступ до зовнішньої, але не навпаки."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Hoisting (підняття):",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "var піднімається без ініціалізації."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "let і const мають Temporal Dead Zone до моменту ініціалізації."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "13. What is variable scope?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Variable scope in JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Variable scope",
-                "bold": true
-              },
-              {
-                "text": " is the part of the code where a variable can be accessed. JavaScript has several types of scope:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Global scope:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Accessible throughout the entire program."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Function scope:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Variables declared with var are scoped to the function."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Block scope:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "let and const are limited to block scope."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Nested scopes:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Inner scopes can access outer variables, but not vice versa."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Hoisting:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "var is hoisted without initialization."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "let and const have a temporal dead zone."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "13. Czym jest zakres widoczności zmiennej?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zakres widoczności zmiennej w JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zakres widoczności zmiennej",
-                "bold": true
-              },
-              {
-                "text": " to część kodu, w której zmienna jest dostępna. W JavaScript wyróżniamy kilka typów zakresu:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakres globalny:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Dostępny w całym programie."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakres funkcji:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "var działa w obrębie funkcji."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakres blokowy:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "let i const są ograniczone do bloku {}."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zakresy zagnieżdżone:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakres wewnętrzny ma dostęp do zewnętrznego."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Hoisting:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "var jest hoistowany bez inicjalizacji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "let i const mają temporal dead zone."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 14,
-    "translations": {
-      "uk": {
-        "question": "14. Що таке анонімна функція (anonymous function)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Анонімна функція в JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Анонімна функція",
-                "bold": true
-              },
-              {
-                "text": " — це функція без імені, яка зазвичай використовується там, де логіка потрібна одноразово або передається як значення."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Приклади використання:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функція як аргумент:",
-                    "bold": true
-                  },
-                  {
-                    "text": " передається в методи масивів ("
-                  },
-                  {
-                    "text": "map",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "filter",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "forEach",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const numbers = [1, 2, 3];\nconst doubled = numbers.map(function (num) {\n  return num * 2;\n});"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функціональний вираз:",
-                    "bold": true
-                  },
-                  {
-                    "text": " анонімна функція присвоюється змінній."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const greet = function () {\n  console.log('Hello');\n};"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "IIFE:",
-                    "bold": true
-                  },
-                  {
-                    "text": " функція виконується одразу після оголошення."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "(function () {\n  console.log('I am an IIFE');\n})();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Стрілкові функції:",
-                    "bold": true
-                  },
-                  {
-                    "text": " скорочений синтаксис анонімних функцій."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const add = (a, b) => a + b;"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Особливості:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зручні для короткої логіки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зменшують кількість імен у просторі змінних."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Складніше відлагоджувати через відсутність імені ("
-                  },
-                  {
-                    "text": "<anonymous>",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "14. What is an anonymous function?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Anonymous function in JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "An anonymous function",
-                "bold": true
-              },
-              {
-                "text": " is a function without a name, commonly used when logic is needed only once or passed as a value."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Common use cases:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "As a callback:",
-                    "bold": true
-                  },
-                  {
-                    "text": " passed to array methods."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const doubled = [1,2,3].map(function(n) {\n  return n * 2;\n});"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Function expression:",
-                    "bold": true
-                  },
-                  {
-                    "text": " assigned to a variable."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const greet = function () {\n  console.log('Hello');\n};"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "IIFE:",
-                    "bold": true
-                  },
-                  {
-                    "text": " executed immediately after creation."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "(function () {\n  console.log('I am an IIFE');\n})();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Arrow functions:",
-                    "bold": true
-                  },
-                  {
-                    "text": " concise anonymous syntax."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const add = (a, b) => a + b;"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Notes:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reduce boilerplate code."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Harder to debug due to missing names."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "14. Czym jest funkcja anonimowa?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Funkcja anonimowa w JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Funkcja anonimowa",
-                "bold": true
-              },
-              {
-                "text": " to funkcja bez nazwy, używana zazwyczaj jednorazowo lub przekazywana jako wartość."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Przykłady użycia:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Callback:",
-                    "bold": true
-                  },
-                  {
-                    "text": " przekazywana do metod tablic."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const doubled = [1,2,3].map(function(n) {\n  return n * 2;\n});"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wyrażenie funkcyjne:",
-                    "bold": true
-                  },
-                  {
-                    "text": " przypisana do zmiennej."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const greet = function () {\n  console.log('Hello');\n};"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "IIFE:",
-                    "bold": true
-                  },
-                  {
-                    "text": " wykonywana natychmiast."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "(function () {\n  console.log('I am an IIFE');\n})();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcje strzałkowe:",
-                    "bold": true
-                  },
-                  {
-                    "text": " skrócona forma funkcji anonimowych."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const add = (a, b) => a + b;"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Uwagi:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Czytelne przy krótkiej logice."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Utrudniają debugowanie ("
-                  },
-                  {
-                    "text": "<anonymous>",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 15,
-    "translations": {
-      "uk": {
-        "question": "15. Що таке стрілкова функція і як вона відрізняється від звичайної функції?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Стрілкова функція в JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Стрілкова функція (arrow function)",
-                "bold": true
-              },
-              {
-                "text": " — це скорочений синтаксис оголошення функцій, введений в ES6. Вона відрізняється від звичайної функції насамперед поведінкою контексту "
-              },
-              {
-                "text": "this",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Основні відмінності:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": ": стрілкова функція не має власного this і успадковує його з зовнішнього контексту."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "arguments",
-                    "code": true
-                  },
-                  {
-                    "text": ": у стрілкових функцій відсутній, використовується rest-оператор."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Конструктор:"
-                  },
-                  {
-                    "text": " стрілкові функції не можуть викликатися через new."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Синтаксис:"
-                  },
-                  {
-                    "text": " стрілкові функції коротші та лаконічніші."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "15. What is an arrow function and how does it differ from a regular function?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Arrow function in JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "An arrow function",
-                "bold": true
-              },
-              {
-                "text": " is a concise function syntax introduced in ES6. It differs from regular functions mainly in how it handles "
-              },
-              {
-                "text": "this",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Key differences:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": ": arrow functions do not have their own this and inherit it lexically."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "arguments",
-                    "code": true
-                  },
-                  {
-                    "text": ": not available in arrow functions."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Constructor:"
-                  },
-                  {
-                    "text": " arrow functions cannot be used with new."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Syntax:"
-                  },
-                  {
-                    "text": " arrow functions are more concise."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "15. Czym jest funkcja strzałkowa i czym różni się od zwykłej funkcji?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Funkcja strzałkowa w JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Funkcja strzałkowa",
-                "bold": true
-              },
-              {
-                "text": " to skrócona forma zapisu funkcji wprowadzona w ES6. Różni się od zwykłej funkcji głównie zachowaniem "
-              },
-              {
-                "text": "this",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Główne różnice:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": ": funkcje strzałkowe dziedziczą this z otoczenia."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "arguments",
-                    "code": true
-                  },
-                  {
-                    "text": ": niedostępne w funkcjach strzałkowych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Konstruktor:"
-                  },
-                  {
-                    "text": " nie można ich używać z new."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Składnia:"
-                  },
-                  {
-                    "text": " krótsza i bardziej zwięzła."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 16,
-    "translations": {
-      "uk": {
-        "question": "16. Які методи перебору масивів ви знаєте?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Методи перебору масивів в JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Основні методи перебору масивів у JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "forEach",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Виконує функцію для кожного елемента, нічого не повертає."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "map",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повертає новий масив із трансформованих елементів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "filter",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Фільтрує елементи за умовою."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "reduce",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Зводить масив до одного значення."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "find / findIndex",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Пошук елемента або його індексу."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "some / every",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Перевірка умов для частини або всіх елементів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "for...of",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Проста ітерація по значеннях масиву."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "16. What array iteration methods do you know?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Array iteration methods in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The main array iteration methods in JavaScript include:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "forEach",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Executes a function for each element, returns nothing."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "map",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Creates a new array with transformed elements."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "filter",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Returns elements matching a condition."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "reduce",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Reduces the array to a single value."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "find / findIndex",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Search for an element or its index."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "some / every",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Check conditions for some or all elements."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "for...of",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Simple value-based iteration."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "16. Jakie znasz metody iteracji tablic?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Metody iteracji tablic w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Podstawowe metody iteracji tablic w JavaScript to:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "forEach",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wykonuje funkcję dla każdego elementu, nic nie zwraca."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "map",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Tworzy nową tablicę z przekształconych elementów."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "filter",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Filtruje elementy według warunku."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "reduce",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Redukuje tablicę do jednej wartości."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "find / findIndex",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wyszukiwanie elementu lub jego indeksu."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "some / every",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Sprawdzenie warunku dla części lub wszystkich elementów."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "for...of",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Prosta iteracja po wartościach."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 17,
-    "translations": {
-      "uk": {
-        "question": "17. Що таке JSON і як працювати з ним у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "JSON та робота з ним у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JSON (JavaScript Object Notation)",
-                "bold": true
-              },
-              {
-                "text": " — це текстовий формат обміну даними між клієнтом і сервером. Він базується на синтаксисі JavaScript-обʼєктів, але є мовонезалежним."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ключові особливості:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ключі завжди є рядками в подвійних лапках."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Підтримує: string, number, boolean, array, object, null."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Не підтримує: функції, undefined, NaN."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Робота з JSON у JavaScript:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JSON.stringify",
-                    "bold": true
-                  },
-                  {
-                    "text": " — перетворює JavaScript-обʼєкт у JSON-рядок."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JSON.parse",
-                    "bold": true
-                  },
-                  {
-                    "text": " — перетворює JSON-рядок у JavaScript-обʼєкт."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "17. What is JSON and how do you work with it in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "JSON and working with it in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JSON (JavaScript Object Notation)",
-                "bold": true
-              },
-              {
-                "text": " is a text-based data exchange format commonly used between client and server. It is language-independent and easy to read."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Key characteristics:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Keys must be strings in double quotes."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Supports strings, numbers, booleans, arrays, objects, null."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Does not support functions or undefined."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Working with JSON:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JSON.stringify",
-                    "bold": true
-                  },
-                  {
-                    "text": " converts a JavaScript object into a JSON string."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JSON.parse",
-                    "bold": true
-                  },
-                  {
-                    "text": " converts a JSON string into a JavaScript object."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "17. Czym jest JSON i jak pracować z nim w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "JSON i praca z nim w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JSON (JavaScript Object Notation)",
-                "bold": true
-              },
-              {
-                "text": " to tekstowy format wymiany danych używany głównie między klientem a serwerem. Jest niezależny od języka."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Najważniejsze cechy:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Klucze są zawsze łańcuchami w podwójnych cudzysłowach."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obsługuje typy: string, number, boolean, array, object, null."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nie obsługuje funkcji ani undefined."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Praca z JSON:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JSON.stringify",
-                    "bold": true
-                  },
-                  {
-                    "text": " zamienia obiekt JavaScript na JSON."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JSON.parse",
-                    "bold": true
-                  },
-                  {
-                    "text": " zamienia JSON na obiekt JavaScript."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 18,
-    "translations": {
-      "uk": {
-        "question": "18. Як виконується асинхронний код у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Асинхронне виконання коду в JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Асинхронний код у JavaScript",
-                "bold": true
-              },
-              {
-                "text": " виконується через Event Loop, що дозволяє обробляти довгі операції без блокування основного потоку."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Основні механізми:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Колбеки:",
-                    "bold": true
-                  },
-                  {
-                    "text": " виконуються після завершення асинхронної операції."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Promises:",
-                    "bold": true
-                  },
-                  {
-                    "text": " представляють результат асинхронної операції (fulfilled / rejected)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "async/await",
-                    "code": true
-                  },
-                  {
-                    "text": " — синтаксичний цукор для роботи з промісами."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event Loop:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack виконує синхронний код."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Microtask Queue має вищий пріоритет (Promises)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue містить macrotasks (setTimeout, DOM events)."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "18. How is asynchronous code executed in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Asynchronous code execution in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Asynchronous code",
-                "bold": true
-              },
-              {
-                "text": " in JavaScript is handled by the Event Loop, allowing long operations without blocking the main thread."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Core mechanisms:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Callbacks: executed after async operations complete."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Promises: represent future completion or failure."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "async/await: syntactic sugar over promises."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event Loop:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack runs synchronous code."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Microtask Queue has higher priority (Promises)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue contains macrotasks (timers, DOM events)."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "18. Jak wykonywany jest kod asynchroniczny w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Asynchroniczne wykonywanie kodu w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Kod asynchroniczny",
-                "bold": true
-              },
-              {
-                "text": " w JavaScript jest obsługiwany przez Event Loop, co zapobiega blokowaniu głównego wątku."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Główne mechanizmy:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Callbacki: uruchamiane po zakończeniu operacji asynchronicznej."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Promises: reprezentują wynik operacji asynchronicznej."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "async/await: uproszczona składnia pracy z promises."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event Loop:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack wykonuje kod synchroniczny."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Microtask Queue ma wyższy priorytet (Promises)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue zawiera macrotaski (setTimeout, zdarzenia DOM)."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 19,
-    "translations": {
-      "uk": {
-        "question": "19. Що таке Event Loop (Цикл подій)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Цикл подій (Event Loop) в JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event Loop",
-                "bold": true
-              },
-              {
-                "text": " — це механізм, який координує виконання синхронного та асинхронного коду в JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Основні складові:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack:",
-                    "bold": true
-                  },
-                  {
-                    "text": " виконує синхронні функції."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Microtask Queue:",
-                    "bold": true
-                  },
-                  {
-                    "text": " містить Promise.then, async/await."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue:",
-                    "bold": true
-                  },
-                  {
-                    "text": " містить setTimeout, DOM-події."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Коли Call Stack порожній, Event Loop спочатку обробляє всі microtasks, а потім бере завдання з Task Queue."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "19. What is the Event Loop?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Event Loop in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The Event Loop",
-                "bold": true
-              },
-              {
-                "text": " is a mechanism that coordinates synchronous and asynchronous code execution in JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Core components:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack:",
-                    "bold": true
-                  },
-                  {
-                    "text": " executes synchronous code."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Microtask Queue:",
-                    "bold": true
-                  },
-                  {
-                    "text": " handles promises and async/await."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue:",
-                    "bold": true
-                  },
-                  {
-                    "text": " contains timers and DOM events."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "When the Call Stack is empty, the Event Loop processes microtasks first, then macrotasks."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "19. Czym jest Event Loop?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Event Loop w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Event Loop",
-                "bold": true
-              },
-              {
-                "text": " to mechanizm zarządzający wykonywaniem kodu synchronicznego i asynchronicznego w JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Główne elementy:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack:",
-                    "bold": true
-                  },
-                  {
-                    "text": " wykonuje kod synchroniczny."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Microtask Queue:",
-                    "bold": true
-                  },
-                  {
-                    "text": " obsługuje promises i async/await."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue:",
-                    "bold": true
-                  },
-                  {
-                    "text": " zawiera setTimeout i zdarzenia DOM."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Gdy Call Stack jest pusty, Event Loop najpierw wykonuje microtasks, a następnie tasks."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 20,
-    "translations": {
-      "uk": {
-        "question": "20. Що таке Call Stack (Стек викликів)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Стек викликів (Call Stack) в JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це структура даних, що працює за принципом LIFO (Last In, First Out) і використовується для контролю порядку виконання функцій у JavaScript."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Під час виклику функції вона додається на вершину стеку."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Після завершення виконання функція видаляється зі стеку."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Якщо функція викликає іншу функцію, новий виклик розміщується поверх попереднього."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": " обробляє лише синхронний код. Переповнення стеку, наприклад через неконтрольовану рекурсію, призводить до помилки RangeError: "
-                  },
-                  {
-                    "text": "Maximum call stack size exceeded",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "20. What is the Call Stack?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Call Stack in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": " is a data structure that follows the LIFO (Last In, First Out) principle and is used to manage the execution order of functions in JavaScript."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "When a function is called, it is pushed onto the top of the stack."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "When a function finishes execution, it is popped off the stack."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "If a function calls another function, the new call is placed on top of the previous one."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": " handles only synchronous code. Stack overflow, for example due to uncontrolled recursion, results in a RangeError: "
-                  },
-                  {
-                    "text": "Maximum call stack size exceeded",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "20. Czym jest Call Stack (stos wywołań)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Call Stack w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": " to struktura danych działająca zgodnie z zasadą LIFO (Last In, First Out), używana do kontrolowania kolejności wykonywania funkcji w JavaScript."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Podczas wywołania funkcji jest ona dodawana na szczyt stosu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Po zakończeniu działania funkcja jest usuwana ze stosu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jeśli funkcja wywołuje inną funkcję, nowe wywołanie trafia na wierzch poprzedniego."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": " obsługuje wyłącznie kod synchroniczny. Przepełnienie stosu, na przykład przez niekontrolowaną rekurencję, powoduje błąd RangeError: "
-                  },
-                  {
-                    "text": "Maximum call stack size exceeded",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 21,
-    "translations": {
-      "uk": {
-        "question": "21. Що таке Task Queue (Черга завдань)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Черга завдань (Task Queue) в JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це черга, у якій зберігаються асинхронні завдання, готові до виконання, наприклад колбеки з "
-                  },
-                  {
-                    "text": "setTimeout",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "setInterval",
-                    "code": true
-                  },
-                  {
-                    "text": " або події DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Коли "
-                  },
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": " порожній, "
-                  },
-                  {
-                    "text": "Event Loop",
-                    "bold": true
-                  },
-                  {
-                    "text": " бере завдання з "
-                  },
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " та додає його до стеку викликів для виконання."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " має нижчий пріоритет, ніж "
-                  },
-                  {
-                    "text": "Microtask Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": ", тому мікрозавдання, наприклад з "
-                  },
-                  {
-                    "text": "Promises",
-                    "code": true
-                  },
-                  {
-                    "text": ", виконуються першими навіть за наявності завдань у "
-                  },
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "21. What is the Task Queue?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Task Queue in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " is a queue that stores asynchronous tasks ready for execution, such as callbacks from "
-                  },
-                  {
-                    "text": "setTimeout",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "setInterval",
-                    "code": true
-                  },
-                  {
-                    "text": ", or DOM events."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "When the "
-                  },
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": " is empty, the "
-                  },
-                  {
-                    "text": "Event Loop",
-                    "bold": true
-                  },
-                  {
-                    "text": " takes a task from the "
-                  },
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " and pushes it onto the call stack for execution."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " has lower priority than the "
-                  },
-                  {
-                    "text": "Microtask Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": ", so microtasks, for example from "
-                  },
-                  {
-                    "text": "Promises",
-                    "code": true
-                  },
-                  {
-                    "text": ", are executed first even if tasks are waiting in the "
-                  },
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "21. Czym jest Task Queue (kolejka zadań)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Task Queue w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " to kolejka przechowująca asynchroniczne zadania gotowe do wykonania, na przykład callbacki z "
-                  },
-                  {
-                    "text": "setTimeout",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "setInterval",
-                    "code": true
-                  },
-                  {
-                    "text": " lub zdarzenia DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Gdy "
-                  },
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": " jest pusty, "
-                  },
-                  {
-                    "text": "Event Loop",
-                    "bold": true
-                  },
-                  {
-                    "text": " pobiera zadanie z "
-                  },
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " i umieszcza je na stosie wywołań do wykonania."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " ma niższy priorytet niż "
-                  },
-                  {
-                    "text": "Microtask Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": ", dlatego mikrozadania, na przykład z "
-                  },
-                  {
-                    "text": "Promises",
-                    "code": true
-                  },
-                  {
-                    "text": ", są wykonywane jako pierwsze, nawet jeśli w "
-                  },
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " czekają już zadania."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 22,
-    "translations": {
-      "uk": {
-        "question": "22. Що таке Microtask Queue (Черга мікрозавдань)?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Microtask Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це черга для завдань з високим пріоритетом."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Колбеки з "
-                  },
-                  {
-                    "text": "Promise",
-                    "code": true
-                  },
-                  {
-                    "text": ", наприклад "
-                  },
-                  {
-                    "text": ".then",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": ".catch",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": ".finally",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Завдання з "
-                  },
-                  {
-                    "text": "MutationObserver",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Після завершення кожної операції в "
-                  },
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "Event Loop",
-                    "bold": true
-                  },
-                  {
-                    "text": " перевіряє "
-                  },
-                  {
-                    "text": "Microtask Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " і виконує всі мікрозавдання перед переходом до "
-                  },
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Це гарантує, що мікрозавдання виконуються раніше за звичайні асинхронні задачі."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "22. What is the Microtask Queue?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Microtask Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " is a queue for high priority tasks."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Callbacks from "
-                  },
-                  {
-                    "text": "Promise",
-                    "code": true
-                  },
-                  {
-                    "text": ", such as "
-                  },
-                  {
-                    "text": ".then",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": ".catch",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": ".finally",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tasks from "
-                  },
-                  {
-                    "text": "MutationObserver",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "After each operation in the "
-                  },
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": ", the "
-                  },
-                  {
-                    "text": "Event Loop",
-                    "bold": true
-                  },
-                  {
-                    "text": " checks the "
-                  },
-                  {
-                    "text": "Microtask Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " and executes all microtasks before moving to the "
-                  },
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "This ensures microtasks are executed before regular asynchronous tasks."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "22. Czym jest Microtask Queue (kolejka mikrozadań)?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Microtask Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " to kolejka zadań o wysokim priorytecie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Callbacki z "
-                  },
-                  {
-                    "text": "Promise",
-                    "code": true
-                  },
-                  {
-                    "text": ", takie jak "
-                  },
-                  {
-                    "text": ".then",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": ".catch",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": ".finally",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zadania z "
-                  },
-                  {
-                    "text": "MutationObserver",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Po zakończeniu każdej operacji w "
-                  },
-                  {
-                    "text": "Call Stack",
-                    "bold": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "Event Loop",
-                    "bold": true
-                  },
-                  {
-                    "text": " sprawdza "
-                  },
-                  {
-                    "text": "Microtask Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": " i wykonuje wszystkie mikrozadania przed przejściem do "
-                  },
-                  {
-                    "text": "Task Queue",
-                    "bold": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zapewnia to, że mikrozadania są wykonywane przed zwykłymi zadaniami asynchronicznymi."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 23,
-    "translations": {
-      "uk": {
-        "question": "23. Як ви працюєте з асинхронним кодом у JavaScript без використання async/await? Які інші підходи ви розглядаєте для роботи з асинхронністю?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Без "
-              },
-              {
-                "text": "async/await",
-                "code": true
-              },
-              {
-                "text": " асинхронний код у JavaScript можна обробляти такими підходами:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Callbacks (Колбеки):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Передача функції як аргументу для обробки результату асинхронної операції."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Недолік: призводить до \"callback hell\" і ускладнює читабельність коду."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "setTimeout(() => {\n  console.log('Дані завантажені');\n}, 1000);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Promises:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Використання "
-                          },
-                          {
-                            "text": "then",
-                            "code": true
-                          },
-                          {
-                            "text": ", "
-                          },
-                          {
-                            "text": "catch",
-                            "code": true
-                          },
-                          {
-                            "text": " і "
-                          },
-                          {
-                            "text": "finally",
-                            "code": true
-                          },
-                          {
-                            "text": " для ланцюжкової обробки асинхронних операцій."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Більш структурований підхід, але може ускладнюватися в складних сценаріях."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "fetch('/api/data')\n  .then(response => response.json())\n  .then(data => console.log(data))\n  .catch(error => console.error(error));"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Event Listeners (Слухачі подій):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Обробка асинхронних подій через механізм підписок."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Типово використовується для взаємодії з DOM та діями користувача."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "button.addEventListener('click', () => {\n  console.log('Кнопка натиснута');\n});"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "RxJS (Reactive Extensions):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Робота з асинхронними потоками даних через "
-                          },
-                          {
-                            "text": "Observable",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Доцільно для складної асинхронної логіки та композиції подій."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const observable = from(fetch('/api/data'));\nobservable.subscribe({\n  next: response => console.log(response),\n  error: err => console.error(err),\n});"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "23. How do you work with asynchronous code in JavaScript without using async/await? What other approaches do you consider?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Without "
-              },
-              {
-                "text": "async/await",
-                "code": true
-              },
-              {
-                "text": ", asynchronous code in JavaScript can be handled using the following approaches:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Callbacks:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Passing a function as an argument to handle the result of an asynchronous operation."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Drawback: leads to callback hell and reduces readability."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "setTimeout(() => {\n  console.log('Data loaded');\n}, 1000);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Promises:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Using "
-                          },
-                          {
-                            "text": "then",
-                            "code": true
-                          },
-                          {
-                            "text": ", "
-                          },
-                          {
-                            "text": "catch",
-                            "code": true
-                          },
-                          {
-                            "text": ", and "
-                          },
-                          {
-                            "text": "finally",
-                            "code": true
-                          },
-                          {
-                            "text": " to chain asynchronous operations."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "More structured than callbacks, but can become verbose in complex flows."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "fetch('/api/data')\n  .then(response => response.json())\n  .then(data => console.log(data))\n  .catch(error => console.error(error));"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Event Listeners:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Reacting to asynchronous events using subscription-based handlers."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Commonly used for DOM interactions and user input."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "button.addEventListener('click', () => {\n  console.log('Button clicked');\n});"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "RxJS (Reactive Extensions):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Working with asynchronous data streams using "
-                          },
-                          {
-                            "text": "Observable",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Suitable for complex asynchronous logic and event composition."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const observable = from(fetch('/api/data'));\nobservable.subscribe({\n  next: response => console.log(response),\n  error: err => console.error(err),\n});"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "23. Jak pracujesz z kodem asynchronicznym w JavaScript bez użycia async/await? Jakie inne podejścia stosujesz?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Bez "
-              },
-              {
-                "text": "async/await",
-                "code": true
-              },
-              {
-                "text": " kod asynchroniczny w JavaScript można obsługiwać następującymi metodami:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Callbacks:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przekazywanie funkcji jako argumentu do obsługi wyniku operacji asynchronicznej."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wada: prowadzi do callback hell i obniża czytelność kodu."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "setTimeout(() => {\n  console.log('Dane załadowane');\n}, 1000);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Promises:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Użycie "
-                          },
-                          {
-                            "text": "then",
-                            "code": true
-                          },
-                          {
-                            "text": ", "
-                          },
-                          {
-                            "text": "catch",
-                            "code": true
-                          },
-                          {
-                            "text": " oraz "
-                          },
-                          {
-                            "text": "finally",
-                            "code": true
-                          },
-                          {
-                            "text": " do łańcuchowej obsługi asynchroniczności."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Bardziej uporządkowane niż callbacki, ale rozbudowane w złożonych scenariuszach."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "fetch('/api/data')\n  .then(response => response.json())\n  .then(data => console.log(data))\n  .catch(error => console.error(error));"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Event Listeners:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Reagowanie na zdarzenia asynchroniczne poprzez mechanizm nasłuchiwania."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stosowane głównie w pracy z DOM i interakcjach użytkownika."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "button.addEventListener('click', () => {\n  console.log('Przycisk kliknięty');\n});"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "RxJS (Reactive Extensions):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Praca z asynchronicznymi strumieniami danych za pomocą "
-                          },
-                          {
-                            "text": "Observable",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przydatne w złożonej logice asynchronicznej i kompozycji zdarzeń."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const observable = from(fetch('/api/data'));\nobservable.subscribe({\n  next: response => console.log(response),\n  error: err => console.error(err),\n});"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 24,
-    "translations": {
-      "uk": {
-        "question": "24. Яка різниця між нестрогим порівнянням == та строгим порівнянням === у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "В JavaScript "
-              },
-              {
-                "text": "==",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "===",
-                "code": true
-              },
-              {
-                "text": " відрізняються способом порівняння:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " (Нестроге порівняння): Виконує приведення типів (type coercion), тому значення можуть мати різні типи."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'5' == 5; // true\nfalse == 0; // true\nnull == undefined; // true"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": " (Строге порівняння): Порівнює без приведення типів. Значення повинні бути одного типу."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'5' === 5; // false\nfalse === 0; // false\nnull === undefined; // false"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Коротко:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовуйте "
-                  },
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": ", щоб уникнути неочікуваних результатів через приведення типів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " доцільно використовувати лише коли ви точно розумієте правила приведення типів."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "24. What is the difference between loose comparison == and strict comparison === in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "In JavaScript "
-              },
-              {
-                "text": "==",
-                "code": true
-              },
-              {
-                "text": " and "
-              },
-              {
-                "text": "===",
-                "code": true
-              },
-              {
-                "text": " differ in how they perform comparisons:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " (Loose comparison): Performs type coercion, so values of different types may be considered equal."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'5' == 5; // true\nfalse == 0; // true\nnull == undefined; // true"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": " (Strict comparison): Compares without type coercion. Both value and type must match."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'5' === 5; // false\nfalse === 0; // false\nnull === undefined; // false"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "In short:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Use "
-                  },
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": " to avoid unexpected results caused by type coercion."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " should be used only when you fully understand type coercion rules."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "24. Jaka jest różnica między porównaniem luźnym == a ścisłym === w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "W JavaScript "
-              },
-              {
-                "text": "==",
-                "code": true
-              },
-              {
-                "text": " oraz "
-              },
-              {
-                "text": "===",
-                "code": true
-              },
-              {
-                "text": " różnią się sposobem porównywania:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " (Porównanie luźne): Wykonuje rzutowanie typów, dlatego wartości o różnych typach mogą zostać uznane za równe."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'5' == 5; // true\nfalse == 0; // true\nnull == undefined; // true"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": " (Porównanie ścisłe): Nie wykonuje rzutowania typów. Porównywane są zarówno wartość, jak i typ."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'5' === 5; // false\nfalse === 0; // false\nnull === undefined; // false"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "W skrócie:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Używaj "
-                  },
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": ", aby uniknąć nieoczekiwanych efektów rzutowania typów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " ma sens tylko wtedy, gdy dokładnie znasz zasady rzutowania typów."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 25,
-    "translations": {
-      "uk": {
-        "question": "25. Що таке прототип у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Прототип у JavaScript — це механізм, за допомогою якого об'єкти можуть успадковувати властивості та методи від інших об'єктів."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Як це працює:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Кожен об'єкт має внутрішнє посилання на свій прототип, яке називається "
-                  },
-                  {
-                    "text": "[[Prototype]]",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Прототипом об'єкта може бути інший об'єкт або "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Під час доступу до властивості або методу JavaScript спочатку шукає їх у самому об'єкті, а якщо не знаходить — переходить по ланцюжку прототипів."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(`Привіт, я ${this.name}`);\n};\n\nconst user = new Person('Іван');\nuser.greet(); // Привіт, я Іван"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Person.prototype",
-                    "code": true
-                  },
-                  {
-                    "text": " — це прототип для всіх об'єктів, створених через "
-                  },
-                  {
-                    "text": "Person",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Метод "
-                  },
-                  {
-                    "text": "greet",
-                    "code": true
-                  },
-                  {
-                    "text": " доступний об'єкту "
-                  },
-                  {
-                    "text": "user",
-                    "code": true
-                  },
-                  {
-                    "text": " через його прототип."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Прототипне наслідування:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const animal = {\n  eat() {\n    console.log('Їм');\n  },\n};\n\nconst dog = Object.create(animal);\ndog.bark = function () {\n  console.log('Гав!');\n};\n\ndog.eat(); // Їм\ndog.bark(); // Гав!"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Ключові моменти:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Прототипи лежать в основі об'єктної моделі JavaScript."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ланцюжок прототипів завжди завершується "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object.getPrototypeOf(obj)",
-                    "code": true
-                  },
-                  {
-                    "text": " повертає прототип об'єкта."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "25. What is a prototype in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "A prototype in JavaScript is a mechanism that allows objects to inherit properties and methods from other objects."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "How it works:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Every object has an internal reference to its prototype called "
-                  },
-                  {
-                    "text": "[[Prototype]]",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "An object's prototype can be another object or "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "When accessing a property or method, JavaScript searches the object first and then continues up the prototype chain if not found."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Example:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(`Hi, I am ${this.name}`);\n};\n\nconst user = new Person('John');\nuser.greet(); // Hi, I am John"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Person.prototype",
-                    "code": true
-                  },
-                  {
-                    "text": " is the prototype for all objects created via "
-                  },
-                  {
-                    "text": "Person",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The "
-                  },
-                  {
-                    "text": "greet",
-                    "code": true
-                  },
-                  {
-                    "text": " method is available on "
-                  },
-                  {
-                    "text": "user",
-                    "code": true
-                  },
-                  {
-                    "text": " through the prototype."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Prototypal inheritance:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const animal = {\n  eat() {\n    console.log('Eating');\n  },\n};\n\nconst dog = Object.create(animal);\ndog.bark = function () {\n  console.log('Woof!');\n};\n\ndog.eat();\ndog.bark();"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Key points:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prototypes are fundamental to JavaScript object behavior."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The prototype chain always ends with "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object.getPrototypeOf(obj)",
-                    "code": true
-                  },
-                  {
-                    "text": " returns an object's prototype."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "25. Czym jest prototyp w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Prototyp w JavaScript to mechanizm, który pozwala obiektom dziedziczyć właściwości i metody z innych obiektów."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Jak to działa:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Każdy obiekt posiada wewnętrzne odwołanie do swojego prototypu o nazwie "
-                  },
-                  {
-                    "text": "[[Prototype]]",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prototypem obiektu może być inny obiekt lub "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Podczas dostępu do właściwości lub metody JavaScript przeszukuje obiekt, a następnie kolejne prototypy w łańcuchu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykład:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function Person(name) {\n  this.name = name;\n}\n\nPerson.prototype.greet = function () {\n  console.log(`Cześć, jestem ${this.name}`);\n};\n\nconst user = new Person('Jan');\nuser.greet();"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Person.prototype",
-                    "code": true
-                  },
-                  {
-                    "text": " jest prototypem dla wszystkich obiektów utworzonych przez "
-                  },
-                  {
-                    "text": "Person",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Metoda "
-                  },
-                  {
-                    "text": "greet",
-                    "code": true
-                  },
-                  {
-                    "text": " jest dostępna w obiekcie "
-                  },
-                  {
-                    "text": "user",
-                    "code": true
-                  },
-                  {
-                    "text": " poprzez prototyp."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Dziedziczenie prototypowe:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const animal = {\n  eat() {\n    console.log('Jem');\n  },\n};\n\nconst dog = Object.create(animal);\ndog.bark = function () {\n  console.log('Hau!');\n};\n\ndog.eat();\ndog.bark();"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Kluczowe punkty:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prototypy są podstawą modelu obiektowego JavaScript."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Łańcuch prototypów zawsze kończy się "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object.getPrototypeOf(obj)",
-                    "code": true
-                  },
-                  {
-                    "text": " pozwala pobrać prototyp obiektu."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 26,
-    "translations": {
-      "uk": {
-        "question": "26. У чому різниця між null та undefined?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Різниця між null та undefined"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "null",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "undefined",
-                "code": true
-              },
-              {
-                "text": " — це різні типи даних у JavaScript, які означають відсутність значення, але використовуються в різних ситуаціях."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Явно задане значення, що означає відсутність об'єкта або значення."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Присвоюється вручну розробником."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let user = null; // значення відсутнє явно"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Значення за замовчуванням для змінних, яким не присвоєно значення."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Автоматично встановлюється JavaScript."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let user;\nconsole.log(user); // undefined"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Порівняння:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " == "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "true",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " === "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "false",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "26. What is the difference between null and undefined?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference between null and undefined"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "null",
-                "code": true
-              },
-              {
-                "text": " and "
-              },
-              {
-                "text": "undefined",
-                "code": true
-              },
-              {
-                "text": " represent absence of value in JavaScript but are used differently."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "An explicitly assigned value meaning no object or value."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Set manually by the developer."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let user = null;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Default value for declared variables without assignment."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Automatically assigned by JavaScript."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let user;\nconsole.log(user); // undefined"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Comparison:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " == "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "true",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " === "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "false",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "26. Jaka jest różnica między null a undefined?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnica między null a undefined"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "null",
-                "code": true
-              },
-              {
-                "text": " oraz "
-              },
-              {
-                "text": "undefined",
-                "code": true
-              },
-              {
-                "text": " oznaczają brak wartości, ale są używane w innych kontekstach."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Jawnie przypisana wartość oznaczająca brak obiektu lub wartości."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Ustawiana ręcznie przez programistę."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let user = null;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Domyślna wartość dla zmiennych bez przypisania."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Automatycznie nadawana przez JavaScript."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let user;\nconsole.log(user); // undefined"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Porównanie:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " == "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "true",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " === "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "false",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 27,
-    "translations": {
-      "uk": {
-        "question": "27. Що таке контекст? Як можна змінювати контекст виконання функції?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Контекст"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Контекст виконання",
-                "bold": true
-              },
-              {
-                "text": " — це середовище, в якому виконується JavaScript-код. Він визначає, які змінні, функції та об'єкти доступні під час виконання."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Види контексту:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Глобальний контекст:",
-                    "bold": true
-                  },
-                  {
-                    "text": " початковий контекст виконання коду (у браузері — об'єкт window)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Контекст функції:",
-                    "bold": true
-                  },
-                  {
-                    "text": " створюється під час кожного виклику функції."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Контекст об'єкта:",
-                    "bold": true
-                  },
-                  {
-                    "text": " якщо функція викликається як метод, контекстом є цей об'єкт."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Зміна контексту виконання:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " вказує на поточний контекст виконання."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Методи зміни контексту:"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "call()",
-                            "code": true
-                          },
-                          {
-                            "text": " — викликає функцію з переданим контекстом."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "function greet() {\n  console.log(`Привіт, ${this.name}`);\n}\n\nconst person = { name: 'Іван' };\ngreet.call(person);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "apply()",
-                            "code": true
-                          },
-                          {
-                            "text": " — аналог call, але аргументи передаються масивом."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "function sum(a, b) {\n  console.log(this.name, a + b);\n}\n\nconst person = { name: 'Оля' };\nsum.apply(person, [2, 3]);"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "bind()",
-                            "code": true
-                          },
-                          {
-                            "text": " — повертає нову функцію з прив'язаним контекстом."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "function show() {\n  console.log(this.name);\n}\n\nconst person = { name: 'Петро' };\nconst showPerson = show.bind(person);\nshowPerson();"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "27. What is context? How can you change a function's execution context?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Context"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Execution context",
-                "bold": true
-              },
-              {
-                "text": " is the environment in which JavaScript code is executed. It defines accessible variables, functions, and objects."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Types of context:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Global context:",
-                    "bold": true
-                  },
-                  {
-                    "text": " the default execution context (window in browsers)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Function context:",
-                    "bold": true
-                  },
-                  {
-                    "text": " created each time a function is invoked."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object context:",
-                    "bold": true
-                  },
-                  {
-                    "text": " when a function is called as a method, the object becomes the context."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Changing execution context:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " refers to the current execution context."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Context control methods:"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "call()",
-                            "code": true
-                          },
-                          {
-                            "text": " invokes a function with a specified context."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "apply()",
-                            "code": true
-                          },
-                          {
-                            "text": " same as call but accepts arguments as an array."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "bind()",
-                            "code": true
-                          },
-                          {
-                            "text": " returns a new function with a fixed context."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "27. Czym jest kontekst? Jak można zmieniać kontekst wykonania funkcji?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Kontekst"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Kontekst wykonania",
-                "bold": true
-              },
-              {
-                "text": " to środowisko, w którym wykonywany jest kod JavaScript. Określa dostępne zmienne, funkcje i obiekty."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Rodzaje kontekstu:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kontekst globalny:",
-                    "bold": true
-                  },
-                  {
-                    "text": " domyślny kontekst wykonania (window w przeglądarce)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kontekst funkcji:",
-                    "bold": true
-                  },
-                  {
-                    "text": " tworzony przy każdym wywołaniu funkcji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kontekst obiektu:",
-                    "bold": true
-                  },
-                  {
-                    "text": " gdy funkcja jest metodą, obiekt staje się kontekstem."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zmiana kontekstu wykonania:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " wskazuje bieżący kontekst wykonania."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Metody zmiany kontekstu:"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "call()",
-                            "code": true
-                          },
-                          {
-                            "text": " wywołuje funkcję z określonym kontekstem."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "apply()",
-                            "code": true
-                          },
-                          {
-                            "text": " działa jak call, ale przyjmuje argumenty w tablicy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "bind()",
-                            "code": true
-                          },
-                          {
-                            "text": " zwraca nową funkcję z przypisanym kontekstem."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 28,
-    "translations": {
-      "uk": {
-        "question": "28. Що таке Promise? У яких випадках ви ним користуєтеся?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Promise",
-                "code": true
-              },
-              {
-                "text": " - це обʼєкт, який представляє результат асинхронної операції, що може завершитися успіхом або помилкою. Promise використовується для керування асинхронним кодом замість вкладених колбеків."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Структура:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pending",
-                    "bold": true
-                  },
-                  {
-                    "text": " - початковий стан, операція ще виконується."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Resolved",
-                    "bold": true
-                  },
-                  {
-                    "text": " (Fulfilled) - операція завершена успішно."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Rejected",
-                    "bold": true
-                  },
-                  {
-                    "text": " - операція завершена з помилкою."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад створення:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "let promise = new Promise((resolve, reject) => {\n  let success = true;\n\n  if (success) {\n    resolve('Операція успішна');\n  } else {\n    reject('Щось пішло не так');\n  }\n});\n\npromise\n  .then(result => console.log(result))\n  .catch(error => console.log(error));"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Переваги:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Читабельність:",
-                    "bold": true
-                  },
-                  {
-                    "text": " послідовний ланцюжок через "
-                  },
-                  {
-                    "text": ".then()",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обробка помилок:",
-                    "bold": true
-                  },
-                  {
-                    "text": " централізована через "
-                  },
-                  {
-                    "text": ".catch()",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Композиція:",
-                    "bold": true
-                  },
-                  {
-                    "text": " робота з кількома асинхронними задачами через "
-                  },
-                  {
-                    "text": "Promise.all()",
-                    "code": true
-                  },
-                  {
-                    "text": " або "
-                  },
-                  {
-                    "text": "Promise.race()",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Promise спрощує контроль асинхронних операцій та зменшує складність коду."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "28. What is a Promise? When do you use it?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Promise",
-                "code": true
-              },
-              {
-                "text": " is an object that represents the eventual result of an asynchronous operation, either fulfilled or rejected. It is used to manage async code more cleanly than callbacks."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Structure:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pending",
-                    "bold": true
-                  },
-                  {
-                    "text": " - initial state, operation is in progress."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Resolved",
-                    "bold": true
-                  },
-                  {
-                    "text": " (Fulfilled) - operation completed successfully."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Rejected",
-                    "bold": true
-                  },
-                  {
-                    "text": " - operation failed with an error."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Creation example:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "let promise = new Promise((resolve, reject) => {\n  let success = true;\n\n  if (success) {\n    resolve('Operation successful');\n  } else {\n    reject('Something went wrong');\n  }\n});\n\npromise\n  .then(result => console.log(result))\n  .catch(error => console.log(error));"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Advantages:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Readability:",
-                    "bold": true
-                  },
-                  {
-                    "text": " chaining with "
-                  },
-                  {
-                    "text": ".then()",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Error handling:",
-                    "bold": true
-                  },
-                  {
-                    "text": " centralized via "
-                  },
-                  {
-                    "text": ".catch()",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Concurrency:",
-                    "bold": true
-                  },
-                  {
-                    "text": " handling multiple async tasks with "
-                  },
-                  {
-                    "text": "Promise.all()",
-                    "code": true
-                  },
-                  {
-                    "text": " or "
-                  },
-                  {
-                    "text": "Promise.race()",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Promises make asynchronous code predictable and easier to maintain."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "28. Czym jest Promise? Kiedy go używasz?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Promise",
-                "code": true
-              },
-              {
-                "text": " to obiekt reprezentujący wynik operacji asynchronicznej, zakończonej sukcesem lub błędem. Używany jest do czytelnego zarządzania kodem asynchronicznym."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Struktura:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pending",
-                    "bold": true
-                  },
-                  {
-                    "text": " - stan początkowy, operacja trwa."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Resolved",
-                    "bold": true
-                  },
-                  {
-                    "text": " (Fulfilled) - operacja zakończona powodzeniem."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Rejected",
-                    "bold": true
-                  },
-                  {
-                    "text": " - operacja zakończona błędem."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykład utworzenia:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "let promise = new Promise((resolve, reject) => {\n  let success = true;\n\n  if (success) {\n    resolve('Operacja zakończona sukcesem');\n  } else {\n    reject('Wystąpił błąd');\n  }\n});\n\npromise\n  .then(result => console.log(result))\n  .catch(error => console.log(error));"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zalety:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Czytelność:",
-                    "bold": true
-                  },
-                  {
-                    "text": " sekwencyjna obsługa przez "
-                  },
-                  {
-                    "text": ".then()",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obsługa błędów:",
-                    "bold": true
-                  },
-                  {
-                    "text": " uproszczona przez "
-                  },
-                  {
-                    "text": ".catch()",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wiele operacji:",
-                    "bold": true
-                  },
-                  {
-                    "text": " praca z wieloma zadaniami przez "
-                  },
-                  {
-                    "text": "Promise.all()",
-                    "code": true
-                  },
-                  {
-                    "text": " lub "
-                  },
-                  {
-                    "text": "Promise.race()",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Promise upraszcza kontrolę nad asynchronicznym przepływem programu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 29,
-    "translations": {
-      "uk": {
-        "question": "29. Які особливості об’єктноорієнтованого програмування у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "ООП"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Об'єктноорієнтоване програмування у JavaScript базується на прототипах, а не на класичній класовій моделі. Починаючи з "
-              },
-              {
-                "text": "ES6",
-                "code": true
-              },
-              {
-                "text": ", мова підтримує класовий синтаксис, який є надбудовою над прототипним механізмом."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Прототипне наслідування:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Обʼєкти наслідують властивості та методи безпосередньо від інших обʼєктів через прототип."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функції-конструктори:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Функції можуть використовуватися для створення обʼєктів за допомогою ключового слова new."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Класи (ES6+):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Класовий синтаксис спрощує опис обʼєктів, але технічно залишається прототипним."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Інкапсуляція:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Реалізується через замикання або приватні поля класів (з "
-                          },
-                          {
-                            "text": "ES2022",
-                            "code": true
-                          },
-                          {
-                            "text": ")."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Поліморфізм:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Досягається шляхом перевизначення методів у похідних обʼєктах."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Абстракція:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Реалізується через базові класи, методи або приховування деталей реалізації."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Підсумок:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Прототипна модель замість класичної."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Класи є синтаксичним цукром."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Підтримка ключових принципів ООП."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript поєднує прототипний підхід з елементами класичного ООП."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "29. What are the features of object-oriented programming in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "OOP"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Object-oriented programming in JavaScript is based on prototypes rather than a classical class model. Since "
-              },
-              {
-                "text": "ES6",
-                "code": true
-              },
-              {
-                "text": ", the language provides class syntax built on top of prototypes."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prototype-based inheritance:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Objects inherit directly from other objects via the prototype chain."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Constructor functions:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Functions can be used to create objects with the new keyword."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Classes (ES6+):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Class syntax improves readability but remains prototype-based internally."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Encapsulation:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Achieved via closures or private class fields ("
-                          },
-                          {
-                            "text": "ES2022",
-                            "code": true
-                          },
-                          {
-                            "text": ")."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Polymorphism:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Implemented through method overriding."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Abstraction:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Provided by base classes and hiding implementation details."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Summary:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prototype-based OOP model."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Classes are syntactic sugar."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Core OOP principles are supported."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript combines prototype inheritance with object-oriented concepts."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "29. Jakie są cechy programowania obiektowego w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "OOP"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Programowanie obiektowe w JavaScript opiera się na prototypach, a nie na klasycznym modelu klasowym. Od wersji "
-              },
-              {
-                "text": "ES6",
-                "code": true
-              },
-              {
-                "text": " dostępna jest składnia klasowa oparta na prototypach."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dziedziczenie prototypowe:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Obiekty dziedziczą bezpośrednio po innych obiektach przez łańcuch prototypów."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcje-konstruktory:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Funkcje mogą tworzyć obiekty przy użyciu słowa kluczowego new."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Klasy (ES6+):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Składnia klasowa poprawia czytelność, ale bazuje na prototypach."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Enkapsulacja:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Realizowana przez domknięcia lub prywatne pola klas ("
-                          },
-                          {
-                            "text": "ES2022",
-                            "code": true
-                          },
-                          {
-                            "text": ")."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Polimorfizm:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Osiągany przez nadpisywanie metod."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Abstrakcja:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zapewniana przez klasy bazowe i ukrywanie szczegółów implementacji."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Podsumowanie:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Model prototypowy zamiast klasycznego."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Klasy jako cukier składniowy."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obsługa głównych zasad OOP."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript łączy dziedziczenie prototypowe z podejściem obiektowym."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "translations": {
-      "uk": {
-        "question": "30. Як з JavaScript-коду звернутись до HTML-елемента та змінити його текст?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Щоб звернутися до HTML-елемента та змінити його текст у JavaScript, можна використовувати різні методи доступу до елементів DOM."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовуємо getElementById(), querySelector() або інші методи для доступу до елемента."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Змінюємо текст елемента за допомогою властивості textContent або innerText."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад з "
-              },
-              {
-                "text": "getElementById():",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<!DOCTYPE html>\n<html lang=\"uk\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>Зміна тексту</title>\n  </head>\n  <body>\n    <p id=\"example\">Старий текст</p>\n    <script>\n      // Отримуємо елемент за ID\n      const element = document.getElementById('example');\n\n      // Змінюємо текст\n      element.textContent = 'Новий текст';\n    </script>\n  </body>\n</html>"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад з "
-              },
-              {
-                "text": "querySelector():",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "html",
-            "content": "<!DOCTYPE html>\n<html lang=\"uk\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>Зміна тексту</title>\n  </head>\n  <body>\n    <p class=\"example\">Старий текст</p>\n    <script>\n      // Отримуємо елемент за класом\n      const element = document.querySelector('.example');\n\n      // Змінюємо текст\n      element.textContent = 'Новий текст';\n    </script>\n  </body>\n</html>"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Різниця між "
-              },
-              {
-                "text": "textContent",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "innerText",
-                "code": true
-              },
-              {
-                "text": ":"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "textContent:",
-                    "code": true
-                  },
-                  {
-                    "text": " Оновлює текст у елементі, включаючи прихований текст, але не виконує рендеринг CSS."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "innerText:",
-                    "code": true
-                  },
-                  {
-                    "text": " Оновлює текст, враховуючи стилі CSS (наприклад, схований текст не буде видимим)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Обидва підходи працюють для зміни тексту, але textContent - це більш швидкий і загальний спосіб."
-              }
-            ]
-          }
-        ]
-      }
-    },
-    "order": 30
-  },
-  {
-    "category": "javascript",
-    "order": 31,
-    "translations": {
-      "uk": {
-        "question": "31. Що таке деструктуризація?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Деструктуризація в JavaScript — це синтаксис, який дозволяє розпаковувати значення з масивів або властивості з обʼєктів у окремі змінні, зменшуючи обʼєм коду та підвищуючи читабельність."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Деструктуризація масивів",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Розпаковує елементи масиву за позицією."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Приклад:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const numbers = [10, 20, 30];\nconst [a, b, c] = numbers;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Деструктуризація обʼєктів",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Розпаковує властивості обʼєкта за іменами ключів."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Приклад:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const user = { name: 'Evan', age: 25 };\nconst { name, age } = user;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Деструктуризація у функціях",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Дозволяє розпаковувати аргументи безпосередньо в параметрах функції."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Переваги:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Менше шаблонного коду."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Краща читабельність."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зручна робота зі структурами даних."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "31. What is destructuring?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Destructuring in JavaScript is a syntax that allows unpacking values from arrays or properties from objects into separate variables, reducing boilerplate and improving readability."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Array destructuring",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Extracts array elements by position."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Example:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const numbers = [10, 20, 30];\nconst [a, b, c] = numbers;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object destructuring",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Extracts object properties by key names."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Example:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const user = { name: 'Evan', age: 25 };\nconst { name, age } = user;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Destructuring in functions",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Allows unpacking parameters directly in function signatures."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Advantages:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Less boilerplate code."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Improved readability."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Efficient data extraction."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "31. Czym jest destrukturyzacja?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Destrukturyzacja w JavaScript to składnia umożliwiająca rozpakowywanie wartości z tablic lub właściwości z obiektów do osobnych zmiennych, co upraszcza kod."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Destrukturyzacja tablic",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Pobiera elementy tablicy według pozycji."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przykład:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const numbers = [10, 20, 30];\nconst [a, b, c] = numbers;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Destrukturyzacja obiektów",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Rozpakowuje właściwości obiektu według nazw kluczy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przykład:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const user = { name: 'Evan', age: 25 };\nconst { name, age } = user;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Destrukturyzacja w funkcjach",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Umożliwia destrukturyzację parametrów funkcji."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zalety:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mniej kodu pomocniczego."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Lepsza czytelność."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Szybsza praca z danymi."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 32,
-    "translations": {
-      "uk": {
-        "question": "32. Що буде, якщо звернутись до елемента масива, якого немає за індексом?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Якщо звернутися до елемента масиву за неіснуючим індексом, JavaScript поверне "
-              },
-              {
-                "text": "undefined",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Причина:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Масиви в JavaScript є обʼєктами. Якщо властивість з таким індексом не існує, результатом доступу буде "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "32. What happens if you access an array element that does not exist by index?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "If you access an array element using a non-existent index, JavaScript returns "
-              },
-              {
-                "text": "undefined",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reason:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Arrays in JavaScript are objects. If a property with that index does not exist, the result is "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "32. Co się stanie, jeśli odwołamy się do elementu tablicy o nieistniejącym indeksie?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Jeśli odwołasz się do elementu tablicy o nieistniejącym indeksie, JavaScript zwróci "
-              },
-              {
-                "text": "undefined",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Powód:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tablice w JavaScript są obiektami. Jeśli właściwość o danym indeksie nie istnieje, wynikiem będzie "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 33,
-    "translations": {
-      "uk": {
-        "question": "33. У чому різниця між for..of та for...in?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "for...of",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "for...in",
-                "code": true
-              },
-              {
-                "text": " використовуються для ітерації, але вирішують різні задачі."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "for...of",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Ітерує значення ітерабельних структур: масивів, рядків, "
-                          },
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ", "
-                          },
-                          {
-                            "text": "Set",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Приклад:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = ['a', 'b', 'c'];\nfor (const value of arr) {\n  console.log(value);\n}"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повертає значення елементів."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Підходить для масивів та ітерабельних обʼєктів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "for...in",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Ітерує ключі обʼєкта або індекси масиву."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Приклад:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const obj = { name: 'Іван', age: 25 };\nfor (const key in obj) {\n  console.log(key);\n}"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повертає ключі як рядки."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Призначений для перебору властивостей обʼєктів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "33. What is the difference between for...of and for...in?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "for...of",
-                "code": true
-              },
-              {
-                "text": " and "
-              },
-              {
-                "text": "for...in",
-                "code": true
-              },
-              {
-                "text": " are both used for iteration, but serve different purposes."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "for...of",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Iterates over values of iterable objects such as arrays, strings, "
-                          },
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ", and "
-                          },
-                          {
-                            "text": "Set",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Example:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = ['a', 'b', 'c'];\nfor (const value of arr) {\n  console.log(value);\n}"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Returns element values."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "for...in",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Iterates over object keys or array indices."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Example:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const obj = { name: 'Ivan', age: 25 };\nfor (const key in obj) {\n  console.log(key);\n}"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Returns keys as strings."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "33. Jaka jest różnica między for...of a for...in?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "for...of",
-                "code": true
-              },
-              {
-                "text": " oraz "
-              },
-              {
-                "text": "for...in",
-                "code": true
-              },
-              {
-                "text": " służą do iteracji, ale mają inne zastosowanie."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "for...of",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Iteruje po wartościach obiektów iterowalnych, takich jak tablice, napisy, "
-                          },
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": " i "
-                          },
-                          {
-                            "text": "Set",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przykład:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = ['a', 'b', 'c'];\nfor (const value of arr) {\n  console.log(value);\n}"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zwraca wartości elementów."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "for...in",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Iteruje po kluczach obiektu lub indeksach tablicy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przykład:"
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const obj = { name: 'Jan', age: 25 };\nfor (const key in obj) {\n  console.log(key);\n}"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zwraca klucze jako ciągi znaków."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 34,
-    "translations": {
-      "uk": {
-        "question": "34. Навіщо використовується оператор && логічне І?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Оператор "
-              },
-              {
-                "text": "&&",
-                "code": true
-              },
-              {
-                "text": " у JavaScript використовується для перевірки кількох умов та реалізації короткого замикання. Він повертає перше хибне значення або останнє істинне."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перевірка кількох умов",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повертає істину лише якщо всі операнди істинні."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Коротке замикання",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Якщо перший операнд хибний, наступні не обчислюються."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Умовне виконання",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Дозволяє виконувати код лише за істинної умови."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Повернення значень",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повертає значення операндів, а не лише true або false."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "34. Why is the logical AND operator && used?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "The "
-              },
-              {
-                "text": "&&",
-                "code": true
-              },
-              {
-                "text": " operator in JavaScript is used to combine conditions and implement short-circuit evaluation. It returns the first falsy value or the last truthy one."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Multiple condition checks",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Evaluates to true only if all operands are truthy."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Short-circuiting",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stops evaluation when a falsy operand is encountered."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Conditional execution",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Executes expressions only when the condition is truthy."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Value returning",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Returns operand values, not just booleans."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "34. Do czego służy operator logiczny &&?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Operator "
-              },
-              {
-                "text": "&&",
-                "code": true
-              },
-              {
-                "text": " w JavaScript służy do łączenia warunków oraz krótkiego obliczania. Zwraca pierwszą fałszywą wartość lub ostatnią prawdziwą."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Sprawdzanie wielu warunków",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zwraca prawdę tylko gdy wszystkie operandy są prawdziwe."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Krótkie obliczanie",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przerywa dalsze sprawdzanie po napotkaniu fałszu."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Warunkowe wykonanie",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Pozwala wykonać kod tylko przy spełnieniu warunku."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zwracanie wartości",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zwraca wartości operandów, a nie tylko true lub false."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 35,
-    "translations": {
-      "uk": {
-        "question": "35. Навіщо використовується оператор || логічне АБО?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Оператор "
-              },
-              {
-                "text": "||",
-                "code": true
-              },
-              {
-                "text": " у JavaScript використовується для перевірки альтернативних умов і короткого замикання. Він повертає перше істинне значення або останнє хибне."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перевірка кількох умов",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повертає істину, якщо хоча б один операнд істинний."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Коротке замикання",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Якщо перший операнд істинний, наступні не обчислюються."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Значення за замовчуванням",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Часто використовується для встановлення дефолтних значень."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Повернення значень",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повертає значення операндів, а не лише true або false."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "35. Why is the logical OR operator || used?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "The "
-              },
-              {
-                "text": "||",
-                "code": true
-              },
-              {
-                "text": " operator in JavaScript is used to evaluate alternative conditions and perform short-circuiting. It returns the first truthy value or the last falsy one."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Multiple condition checks",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Evaluates to true if at least one operand is truthy."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Short-circuiting",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stops evaluation when a truthy operand is found."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Default values",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Commonly used to provide fallback values."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Value returning",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Returns operand values instead of booleans."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "35. Do czego służy operator logiczny ||?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Operator "
-              },
-              {
-                "text": "||",
-                "code": true
-              },
-              {
-                "text": " w JavaScript służy do sprawdzania alternatywnych warunków i krótkiego obliczania. Zwraca pierwszą prawdziwą wartość lub ostatnią fałszywą."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Sprawdzanie wielu warunków",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zwraca prawdę, jeśli przynajmniej jeden operand jest prawdziwy."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Krótkie obliczanie",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przerywa sprawdzanie po znalezieniu wartości prawdziwej."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wartości domyślne",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stosowany do ustawiania wartości zapasowych."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zwracanie wartości",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zwraca wartości operandów, a nie tylko true lub false."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 36,
-    "translations": {
-      "uk": {
-        "question": "36. Навіщо використовується оператор !!?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Оператор "
-              },
-              {
-                "text": "!!",
-                "code": true
-              },
-              {
-                "text": " у JavaScript використовується для явного приведення будь-якого значення до булевого типу. Результатом завжди є "
-              },
-              {
-                "text": "true",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "false",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Як працює",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Перший !",
-                            "code": true
-                          },
-                          {
-                            "text": " приводить значення до булевого типу і інвертує його."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Другий !",
-                            "code": true
-                          },
-                          {
-                            "text": " знову інвертує значення, повертаючи логіку у булевій формі."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Приведення до boolean",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "!!0;        // false\n!!1;        // true\n!!'';       // false\n!!'text';   // true\n!!null;     // false\n!!{};       // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Практичне використання",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Явне отримання булевого результату в умовах і перевірках."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "36. Why is the !! operator used?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "The "
-              },
-              {
-                "text": "!!",
-                "code": true
-              },
-              {
-                "text": " operator in JavaScript is used to explicitly convert any value to a boolean. The result is always "
-              },
-              {
-                "text": "true",
-                "code": true
-              },
-              {
-                "text": " or "
-              },
-              {
-                "text": "false",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "How it works",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The first ! converts the value to boolean and negates it."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The second ! negates it again, preserving the original truthiness."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Boolean conversion",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "!!0;      // false\n!!1;      // true\n!!'';     // false\n!!'text'; // true\n!!null;   // false"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Practical usage",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Used to explicitly obtain a boolean result in conditions."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "36. Do czego służy operator !!?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Operator "
-              },
-              {
-                "text": "!!",
-                "code": true
-              },
-              {
-                "text": " w JavaScript służy do jawnego rzutowania dowolnej wartości na typ logiczny. Wynikiem jest zawsze "
-              },
-              {
-                "text": "true",
-                "code": true
-              },
-              {
-                "text": " lub "
-              },
-              {
-                "text": "false",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jak działa",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Pierwszy ! konwertuje wartość na boolean i ją neguje."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Drugi ! ponownie neguje wynik, zachowując pierwotną logiczność."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Konwersja do boolean",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "!!0;        // false\n!!1;        // true\n!!'';       // false\n!!'tekst';  // true\n!!null;     // false"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zastosowanie praktyczne",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Jawne uzyskanie wartości logicznej w warunkach i walidacji."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 37,
-    "translations": {
-      "uk": {
-        "question": "37. Навіщо використовується оператор ! логічне НЕ?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Оператор "
-              },
-              {
-                "text": "!",
-                "code": true
-              },
-              {
-                "text": " у JavaScript використовується для логічної інверсії. Він перетворює істинне значення на хибне і навпаки."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Інверсія булевого значення",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "!true;  // false\n!false; // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Приведення до boolean",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "!0;        // true\n!'text';   // false\n!null;     // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Умовні перевірки",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Використовується для перевірки хибності значення."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "37. Why is the logical NOT operator ! used?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "The "
-              },
-              {
-                "text": "!",
-                "code": true
-              },
-              {
-                "text": " operator in JavaScript is used to invert a boolean value. It turns truthy values into false and falsy values into true."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Boolean inversion",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "!true;  // false\n!false; // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Boolean coercion",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "!0;      // true\n!'text'; // false\n!null;   // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Conditional checks",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Used to test whether a value is falsy."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "37. Do czego służy operator logiczny !?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Operator "
-              },
-              {
-                "text": "!",
-                "code": true
-              },
-              {
-                "text": " w JavaScript służy do negacji logicznej. Zmienia wartość prawdziwą na fałszywą i odwrotnie."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Negacja wartości logicznej",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "!true;  // false\n!false; // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Konwersja do boolean",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "!0;        // true\n!'tekst';  // false\n!null;     // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Instrukcje warunkowe",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Używany do sprawdzania fałszywości wartości."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 38,
-    "translations": {
-      "uk": {
-        "question": "38. Які значення в JavaScript є хибними?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "У JavaScript до "
-              },
-              {
-                "text": "хибних значень (falsy values)",
-                "bold": true
-              },
-              {
-                "text": " належать значення, які при приведенні до булевого типу стають "
-              },
-              {
-                "text": "false",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": " — логічна хибність."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "0",
-                    "code": true
-                  },
-                  {
-                    "text": " — числовий нуль."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "-0",
-                    "code": true
-                  },
-                  {
-                    "text": " — відʼємний нуль."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "NaN",
-                    "code": true
-                  },
-                  {
-                    "text": " — нечислове значення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "\"\"",
-                    "code": true
-                  },
-                  {
-                    "text": " — порожній рядок."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " — відсутність значення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": " — невизначене значення."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "38. Which values are falsy in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "In JavaScript, "
-              },
-              {
-                "text": "falsy values",
-                "bold": true
-              },
-              {
-                "text": " are values that are coerced to "
-              },
-              {
-                "text": "false",
-                "code": true
-              },
-              {
-                "text": " in a boolean context."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": " — boolean false."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "0",
-                    "code": true
-                  },
-                  {
-                    "text": " — numeric zero."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "-0",
-                    "code": true
-                  },
-                  {
-                    "text": " — negative zero."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "NaN",
-                    "code": true
-                  },
-                  {
-                    "text": " — Not a Number."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "\"\"",
-                    "code": true
-                  },
-                  {
-                    "text": " — empty string."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " — absence of value."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": " — undefined value."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "38. Jakie wartości w JavaScript są fałszywe?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "W JavaScript "
-              },
-              {
-                "text": "wartości fałszywe (falsy values)",
-                "bold": true
-              },
-              {
-                "text": " to te, które po konwersji logicznej dają "
-              },
-              {
-                "text": "false",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": " — fałsz logiczny."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "0",
-                    "code": true
-                  },
-                  {
-                    "text": " — zero."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "-0",
-                    "code": true
-                  },
-                  {
-                    "text": " — ujemne zero."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "NaN",
-                    "code": true
-                  },
-                  {
-                    "text": " — nie jest liczbą."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "\"\"",
-                    "code": true
-                  },
-                  {
-                    "text": " — pusty string."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " — brak wartości."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": " — niezdefiniowana wartość."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 39,
-    "translations": {
-      "uk": {
-        "question": "39. Які значення в JavaScript є правдивими?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "У JavaScript "
-              },
-              {
-                "text": "правдиві значення (truthy values)",
-                "bold": true
-              },
-              {
-                "text": " — це всі значення, які при приведенні до булевого типу стають "
-              },
-              {
-                "text": "true",
-                "code": true
-              },
-              {
-                "text": ". Це будь-які значення, що не входять до списку хибних."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Непорожні рядки",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean('hello'); // true\nBoolean(' ');     // true\nBoolean('0');     // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Числа, крім 0",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean(42);        // true\nBoolean(-1);        // true\nBoolean(Infinity);  // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обʼєкти та масиви",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean({}); // true\nBoolean([]); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функції",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean(function () {}); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Спеціальні типи",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Symbol()",
-                            "code": true
-                          },
-                          {
-                            "text": " — завжди істинний."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "BigInt",
-                            "code": true
-                          },
-                          {
-                            "text": ", відмінний від "
-                          },
-                          {
-                            "text": "0n",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "39. Which values are truthy in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "In JavaScript, "
-              },
-              {
-                "text": "truthy values",
-                "bold": true
-              },
-              {
-                "text": " are values that are coerced to "
-              },
-              {
-                "text": "true",
-                "code": true
-              },
-              {
-                "text": " in a boolean context. This includes all values that are not falsy."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Non-empty strings",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean('hello'); // true\nBoolean(' ');     // true\nBoolean('0');     // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Numbers except 0",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean(42);       // true\nBoolean(-1);       // true\nBoolean(Infinity); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Objects and arrays",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean({}); // true\nBoolean([]); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Functions",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean(function () {}); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Special types",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Symbol()",
-                            "code": true
-                          },
-                          {
-                            "text": " is always truthy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Any "
-                          },
-                          {
-                            "text": "BigInt",
-                            "code": true
-                          },
-                          {
-                            "text": " other than "
-                          },
-                          {
-                            "text": "0n",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "39. Jakie wartości w JavaScript są prawdziwe?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "W JavaScript "
-              },
-              {
-                "text": "wartości prawdziwe (truthy values)",
-                "bold": true
-              },
-              {
-                "text": " to wszystkie wartości, które po konwersji logicznej dają "
-              },
-              {
-                "text": "true",
-                "code": true
-              },
-              {
-                "text": ". Obejmuje to wszystkie wartości niebędące fałszywymi."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Niepuste ciągi znaków",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean('hello'); // true\nBoolean(' ');     // true\nBoolean('0');     // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Liczby różne od 0",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean(42);       // true\nBoolean(-1);       // true\nBoolean(Infinity); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekty i tablice",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean({}); // true\nBoolean([]); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcje",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Boolean(function () {}); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Typy specjalne",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Symbol()",
-                            "code": true
-                          },
-                          {
-                            "text": " zawsze jest prawdziwy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Każdy "
-                          },
-                          {
-                            "text": "BigInt",
-                            "code": true
-                          },
-                          {
-                            "text": " różny od "
-                          },
-                          {
-                            "text": "0n",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 40,
-    "translations": {
-      "uk": {
-        "question": "40. Як перевірити, чи є значення хибним?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Щоб перевірити, чи є "
-              },
-              {
-                "text": "значення хибним (falsy)",
-                "code": true
-              },
-              {
-                "text": " у JavaScript, використовується неявне або явне приведення до булевого типу."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використання `!` (логічного НЕ):",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "if (!value) {\n  console.log('Значення є хибним');\n}"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Оператор ! інвертує булеве значення. Для falsy умовний блок виконається."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використання `Boolean()`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "if (!Boolean(value)) {\n  console.log('Значення є хибним');\n}"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Boolean() явно приводить значення до true або false."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Подвійний `!!`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "console.log(!!value);"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Використовується для явного приведення до булевого типу."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Falsy значення:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "false, 0, '', null, undefined, NaN"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Висновок:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Найпростіша перевірка — !value."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "40. How can you check if a value is falsy?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "To check whether a "
-              },
-              {
-                "text": "value is falsy",
-                "code": true
-              },
-              {
-                "text": " in JavaScript, boolean coercion is used."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Using `!` (logical NOT):",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "if (!value) {\n  console.log('Value is falsy');\n}"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Logical NOT inverts the boolean value. Falsy values trigger the condition."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Using `Boolean()`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "if (!Boolean(value)) {\n  console.log('Value is falsy');\n}"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Boolean() explicitly converts a value to true or false."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Double `!!`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "console.log(!!value);"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Used for explicit boolean conversion."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Falsy values:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "false, 0, '', null, undefined, NaN"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Conclusion:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The simplest check is !value."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "40. Jak sprawdzić, czy wartość jest fałszywa (falsy)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Aby sprawdzić, czy "
-              },
-              {
-                "text": "wartość jest falsy",
-                "code": true
-              },
-              {
-                "text": " w JavaScript, stosuje się konwersję do typu logicznego."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Użycie `!` (logiczne NIE):",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "if (!value) {\n  console.log('Wartość jest falsy');\n}"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Operator ! odwraca wartość logiczną. Falsy spełniają warunek."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Użycie `Boolean()`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "if (!Boolean(value)) {\n  console.log('Wartość jest falsy');\n}"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Boolean() jawnie konwertuje wartość na true lub false."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Podwójne `!!`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "console.log(!!value);"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Służy do jawnej konwersji na boolean."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Falsy wartości:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "false, 0, '', null, undefined, NaN"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wniosek:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Najprostsze sprawdzenie to !value."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 41,
-    "translations": {
-      "uk": {
-        "question": "41. Що таке DOM?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Document Object Model"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "DOM",
-                    "bold": true
-                  },
-                  {
-                    "text": " (Document Object Model) — це програмний інтерфейс для HTML та XML документів, який представляє документ у вигляді дерева обʼєктів і дозволяє програмно змінювати його структуру, вміст і стилі."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Основні моменти:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Представлення документа:",
-                    "bold": true
-                  },
-                  {
-                    "text": " DOM представляє HTML або XML документ як ієрархічне дерево вузлів, де кожен вузол відповідає елементу, атрибуту або тексту."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Динамічна взаємодія:",
-                    "bold": true
-                  },
-                  {
-                    "text": " За допомогою JavaScript через DOM можна змінювати сторінку без перезавантаження: додавати, видаляти елементи, реагувати на події та змінювати стилі."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Структура дерева:",
-                    "bold": true
-                  },
-                  {
-                    "text": " DOM має кореневий елемент "
-                  },
-                  {
-                    "text": "<html>",
-                    "code": true
-                  },
-                  {
-                    "text": ", який містить "
-                  },
-                  {
-                    "text": "<head>",
-                    "code": true
-                  },
-                  {
-                    "text": " і "
-                  },
-                  {
-                    "text": "<body>",
-                    "code": true
-                  },
-                  {
-                    "text": ", всередині яких знаходяться інші елементи, наприклад "
-                  },
-                  {
-                    "text": "<div>",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "<p>",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "<span>",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Висновок:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "DOM є базовим механізмом взаємодії JavaScript з веб-сторінкою і основою для створення динамічних інтерфейсів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "41. What is the DOM?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Document Object Model"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "DOM",
-                    "bold": true
-                  },
-                  {
-                    "text": " (Document Object Model) is a programming interface for HTML and XML documents that represents the document as a tree of objects and allows programmatic manipulation of its structure, content, and styles."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Key points:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Document representation:",
-                    "bold": true
-                  },
-                  {
-                    "text": " The DOM represents an HTML or XML document as a hierarchical tree where each node corresponds to an element, attribute, or text."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dynamic interaction:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Using JavaScript, the DOM allows modifying the page without reloading by adding, removing elements, handling events, and updating styles."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tree structure:",
-                    "bold": true
-                  },
-                  {
-                    "text": " The DOM has a root element "
-                  },
-                  {
-                    "text": "<html>",
-                    "code": true
-                  },
-                  {
-                    "text": ", which contains "
-                  },
-                  {
-                    "text": "<head>",
-                    "code": true
-                  },
-                  {
-                    "text": " and "
-                  },
-                  {
-                    "text": "<body>",
-                    "code": true
-                  },
-                  {
-                    "text": ", which in turn contain other elements such as "
-                  },
-                  {
-                    "text": "<div>",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "<p>",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "<span>",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Conclusion:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The DOM is the core mechanism that enables JavaScript to interact with web pages and build dynamic interfaces."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "41. Czym jest DOM?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Document Object Model"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "DOM",
-                    "bold": true
-                  },
-                  {
-                    "text": " (Document Object Model) to interfejs programistyczny dla dokumentów HTML i XML, który przedstawia dokument jako drzewo obiektów i umożliwia jego programową modyfikację."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Najważniejsze elementy:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reprezentacja dokumentu:",
-                    "bold": true
-                  },
-                  {
-                    "text": " DOM przedstawia dokument HTML lub XML jako hierarchiczne drzewo węzłów odpowiadających elementom, atrybutom i tekstowi."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Interakcja dynamiczna:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Dzięki JavaScript DOM pozwala dynamicznie zmieniać stronę, reagować na zdarzenia i modyfikować style bez przeładowania."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Struktura drzewa:",
-                    "bold": true
-                  },
-                  {
-                    "text": " DOM posiada element główny "
-                  },
-                  {
-                    "text": "<html>",
-                    "code": true
-                  },
-                  {
-                    "text": ", który zawiera "
-                  },
-                  {
-                    "text": "<head>",
-                    "code": true
-                  },
-                  {
-                    "text": " oraz "
-                  },
-                  {
-                    "text": "<body>",
-                    "code": true
-                  },
-                  {
-                    "text": ", a wewnątrz nich znajdują się inne elementy, np. "
-                  },
-                  {
-                    "text": "<div>",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "<p>",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "<span>",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wniosek:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "DOM jest podstawą interakcji JavaScript z dokumentem i umożliwia tworzenie dynamicznych stron internetowych."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 42,
-    "translations": {
-      "uk": {
-        "question": "42. Що таке розповсюдження події (Event Propagation)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Event Propagation"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Розповсюдження події (Event Propagation)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це механізм у JavaScript, який описує, як подія проходить через DOM-дерево від одного елемента до інших."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Фаза захоплення (Capturing phase):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Подія рухається від кореня документа до цільового елемента. Використовується рідко."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Фаза цільового елемента (Target phase):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Подія обробляється безпосередньо на елементі, де вона виникла."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Фаза спливання (Bubbling phase):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Подія піднімається від цільового елемента вгору по DOM-дереву. Це основна та найуживаніша фаза."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Висновок:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Розповсюдження подій дає контроль над обробкою подій у DOM і може бути зупинене за допомогою "
-                          },
-                          {
-                            "text": "stopPropagation()",
-                            "code": true
-                          },
-                          {
-                            "text": " або "
-                          },
-                          {
-                            "text": "stopImmediatePropagation()",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "42. What is event propagation?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Event Propagation"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Event Propagation",
-                    "bold": true
-                  },
-                  {
-                    "text": " is the process in JavaScript that defines how an event travels through the DOM tree."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Capturing phase:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The event travels from the document root down to the target element. Rarely used."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Target phase:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The event is handled on the element where it originated."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Bubbling phase:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The event bubbles up from the target element to its ancestors. This is the most commonly used phase."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Conclusion:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Event propagation allows fine-grained control over event handling and can be stopped using "
-                          },
-                          {
-                            "text": "stopPropagation()",
-                            "code": true
-                          },
-                          {
-                            "text": " or "
-                          },
-                          {
-                            "text": "stopImmediatePropagation()",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "42. Czym jest propagacja zdarzeń (Event Propagation)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Event Propagation"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Propagacja zdarzeń (Event Propagation)",
-                    "bold": true
-                  },
-                  {
-                    "text": " to mechanizm w JavaScript opisujący sposób, w jaki zdarzenie przechodzi przez drzewo DOM."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Faza przechwytywania (Capturing phase):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zdarzenie przechodzi od korzenia dokumentu do elementu docelowego. Rzadko stosowana."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Faza elementu docelowego (Target phase):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zdarzenie jest obsługiwane bezpośrednio na elemencie, na którym wystąpiło."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Faza bąbelkowania (Bubbling phase):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zdarzenie przemieszcza się w górę drzewa DOM. Jest to najczęściej używana faza."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wniosek:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Propagację zdarzeń można kontrolować lub zatrzymać za pomocą "
-                          },
-                          {
-                            "text": "stopPropagation()",
-                            "code": true
-                          },
-                          {
-                            "text": " oraz "
-                          },
-                          {
-                            "text": "stopImmediatePropagation()",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 43,
-    "translations": {
-      "uk": {
-        "question": "43. Чому результат порівняння двох схожих об'єктів є false?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Порівняння двох схожих об'єктів"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "У JavaScript порівняння об'єктів операторами "
-                  },
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " або "
-                  },
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": " майже завжди повертає "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": ", навіть якщо об'єкти виглядають однаково."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Причина:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Об'єкти порівнюються за посиланням у пам'яті, а не за їхнім вмістом. Два різні об'єкти ніколи не є рівними, навіть якщо мають однакові властивості."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Приклад:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const obj1 = { name: 'John', age: 30 };\nconst obj2 = { name: 'John', age: 30 };\n\nconsole.log(obj1 == obj2);  // false\nconsole.log(obj1 === obj2); // false"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Хоча "
-                  },
-                  {
-                    "text": "obj1",
-                    "code": true
-                  },
-                  {
-                    "text": " і "
-                  },
-                  {
-                    "text": "obj2",
-                    "code": true
-                  },
-                  {
-                    "text": " мають однаковий вміст, це різні об'єкти в пам'яті."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Пояснення операторів:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " приводить типи, але для об'єктів все одно порівнює посилання."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": " не приводить типи і також порівнює лише посилання."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Як порівнювати по вмісту?",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Можна порівняти серіалізований вміст через "
-                  },
-                  {
-                    "text": "JSON.stringify()",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Цей підхід непридатний для об'єктів з методами або циклічними посиланнями."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "43. Why does comparing two similar objects return false?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Comparison of similar objects"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "In JavaScript, comparing objects with "
-                  },
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " or "
-                  },
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": " usually returns "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": ", even if the objects look identical."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reason:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Objects are compared by reference, not by value. Two different objects never point to the same memory location."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Example:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const obj1 = { name: 'John', age: 30 };\nconst obj2 = { name: 'John', age: 30 };\n\nconsole.log(obj1 == obj2);  // false\nconsole.log(obj1 === obj2); // false"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Both objects have the same properties but are different references in memory."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Operator behavior:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " performs type coercion but still compares object references."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": " performs strict comparison and also compares references only."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "How to compare by value?",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A simple approach is using "
-                  },
-                  {
-                    "text": "JSON.stringify()",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "This method fails for complex objects, methods, or circular references."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "43. Dlaczego porównanie dwóch podobnych obiektów zwraca false?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Porównywanie podobnych obiektów"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "W JavaScript porównanie obiektów za pomocą "
-                  },
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " lub "
-                  },
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": " zazwyczaj zwraca "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": ", nawet jeśli obiekty wyglądają identycznie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Powód:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekty są porównywane przez referencję w pamięci, a nie przez zawartość."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przykład:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const obj1 = { name: 'John', age: 30 };\nconst obj2 = { name: 'John', age: 30 };\n\nconsole.log(obj1 == obj2);  // false\nconsole.log(obj1 === obj2); // false"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekty mają te same właściwości, ale są różnymi referencjami."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Działanie operatorów:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "==",
-                    "code": true
-                  },
-                  {
-                    "text": " wykonuje konwersję typów, ale nadal porównuje referencje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "===",
-                    "code": true
-                  },
-                  {
-                    "text": " porównuje ściśle i również sprawdza tylko referencje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Porównanie po wartości:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Można użyć "
-                  },
-                  {
-                    "text": "JSON.stringify()",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "To rozwiązanie nie działa dla obiektów z metodami lub cyklicznymi referencjami."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 44,
-    "translations": {
-      "uk": {
-        "question": "44. Який найшвидший спосіб перетворення рядка на число?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Найшвидший спосіб перетворення рядка на число в JavaScript — це унарний оператор +."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Приклад:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const str = '42';\nconst num = +str;\nconsole.log(num); // 42"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Цей спосіб працює швидко, оскільки використовує внутрішнє приведення типів без додаткової логіки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Альтернативи:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "parseInt()",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Перетворює рядок на ціле число."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const num = parseInt(str, 10); // 42"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повільніше через обробку основи числення."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "parseFloat()",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Перетворює рядок на число з плаваючою комою."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const num = parseFloat(str); // 42"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Також повільніше за унарний оператор."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Висновок:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Унарний оператор + є найшвидшим способом перетворення рядка на число."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "44. What is the fastest way to convert a string to a number?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "The fastest way to convert a string to a number in JavaScript is using the unary + operator."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Example:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const str = '42';\nconst num = +str;\nconsole.log(num); // 42"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "It is fast because it relies on built-in type coercion without extra processing."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Alternatives:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "parseInt()",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Converts a string to an integer."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const num = parseInt(str, 10); // 42"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Slower due to radix handling."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "parseFloat()",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Converts a string to a floating-point number."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const num = parseFloat(str); // 42"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Also slower than the unary operator."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Conclusion:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The unary + operator is the fastest and simplest option."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "44. Jaki jest najszybszy sposób konwersji ciągu znaków na liczbę?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Najszybszym sposobem konwersji stringa na liczbę w JavaScript jest użycie operatora unarnego +."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przykład:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const str = '42';\nconst num = +str;\nconsole.log(num); // 42"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jest to szybkie, ponieważ wykorzystuje wbudowaną konwersję typów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Alternatywy:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "parseInt()",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Konwertuje string na liczbę całkowitą."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const num = parseInt(str, 10); // 42"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wolniejsze z powodu obsługi podstawy liczby."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "parseFloat()",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Konwertuje string na liczbę zmiennoprzecinkową."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const num = parseFloat(str); // 42"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Również wolniejsze niż operator unarny."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wniosek:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Operator unarny + jest najszybszym sposobem konwersji stringa na liczbę."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 45,
-    "translations": {
-      "uk": {
-        "question": "45. Як записати кілька виразів в один рядок?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Щоб записати кілька виразів в один рядок у JavaScript, використовується крапка з комою "
-              },
-              {
-                "text": ";",
-                "code": true
-              },
-              {
-                "text": " як роздільник інструкцій."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Приклад:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "let a = 5; let b = 10; let c = a + b; console.log(c);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Кожен вираз відокремлюється крапкою з комою."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зауваження:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Такий запис можливий, але знижує читабельність і застосовується рідко."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "45. How can you write multiple expressions on one line?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "To write multiple expressions on a single line in JavaScript, use the semicolon "
-              },
-              {
-                "text": ";",
-                "code": true
-              },
-              {
-                "text": " as a statement separator."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Example:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "let a = 5; let b = 10; let c = a + b; console.log(c);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Each expression is separated by a semicolon."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Note:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "This style is valid but reduces readability and is generally discouraged."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "45. Jak zapisać kilka wyrażeń w jednej linii?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Aby zapisać kilka wyrażeń w jednej linii w JavaScript, używa się średnika "
-              },
-              {
-                "text": ";",
-                "code": true
-              },
-              {
-                "text": " jako separatora instrukcji."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przykład:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "let a = 5; let b = 10; let c = a + b; console.log(c);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Każde wyrażenie jest oddzielone średnikiem."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Uwaga:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Taki zapis jest poprawny składniowo, ale pogarsza czytelność kodu."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 46,
-    "translations": {
-      "uk": {
-        "question": "46. Що таке підняття (Hoisting)?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Підняття (Hoisting) — це механізм у JavaScript, за якого оголошення змінних і функцій обробляються до виконання коду, ніби вони знаходяться на початку своєї області видимості."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Основні моменти:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Піднімаються лише оголошення, а не ініціалізація значень."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функції, оголошені через function, повністю доступні до місця оголошення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Змінні з var піднімаються, але мають значення undefined до присвоєння."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Приклад: Функція",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(greet());\nfunction greet() {\n  return 'Hello!';\n}"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Приклад: var",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(a); // undefined\nvar a = 5;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "let та const",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "let і const мають Temporal Dead Zone і недоступні до ініціалізації."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(a); // ReferenceError\nlet a = 5;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Висновок:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting пояснює, чому функції працюють до оголошення, а доступ до let і const до ініціалізації викликає помилку."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "46. What is hoisting?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Hoisting is a JavaScript mechanism where variable and function declarations are processed before code execution as if they were moved to the top of their scope."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Key points:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Only declarations are hoisted, not initializations."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Function declarations are fully hoisted."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Variables declared with var are hoisted with value undefined."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Example: function",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(greet());\nfunction greet() {\n  return 'Hello!';\n}"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Example: var",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(a); // undefined\nvar a = 5;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "let and const",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "let and const exist in the Temporal Dead Zone and cannot be accessed before initialization."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(a); // ReferenceError\nlet a = 5;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Conclusion:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting explains why functions work before declaration and why let and const throw errors when accessed early."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "46. Czym jest hoisting?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Hoisting to mechanizm w JavaScript, w którym deklaracje zmiennych i funkcji są przetwarzane przed wykonaniem kodu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Najważniejsze punkty:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Podnoszone są tylko deklaracje, nie inicjalizacje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Deklaracje funkcji są w pełni hoistowane."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zmienne zadeklarowane przez var mają wartość undefined do momentu przypisania."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przykład: funkcja",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(greet());\nfunction greet() {\n  return 'Hello!';\n}"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przykład: var",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(a); // undefined\nvar a = 5;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "let i const",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "let i const znajdują się w Temporal Dead Zone i nie są dostępne przed inicjalizacją."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(a); // ReferenceError\nlet a = 5;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wniosek:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting wyjaśnia zachowanie funkcji oraz błędy przy użyciu let i const przed deklaracją."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 47,
-    "translations": {
-      "uk": {
-        "question": "47. Що таке область видимості (Scope)?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Область видимості (Scope)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це контекст у JavaScript, який визначає, де змінні, функції та ідентифікатори доступні для використання."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Типи областей видимості:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Глобальна область видимості:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Доступна з будь-якого місця коду."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Змінні та функції, оголошені поза блоками або функціями, є глобальними."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let globalVar = \"I'm global\";\nfunction test() {\n  console.log(globalVar);\n}\ntest();\nconsole.log(globalVar);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Область видимості функції:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Змінні всередині функції доступні лише в межах цієї функції."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "function test() {\n  let localVar = \"I'm local\";\n  console.log(localVar);\n}\ntest();\n// localVar недоступна"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Область видимості блоку:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Змінні з "
-                          },
-                          {
-                            "text": "let",
-                            "code": true
-                          },
-                          {
-                            "text": " і "
-                          },
-                          {
-                            "text": "const",
-                            "code": true
-                          },
-                          {
-                            "text": " мають область видимості в межах блоку."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "if (true) {\n  let blockVar = \"block\";\n  console.log(blockVar);\n}\n// blockVar недоступна"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Лексична область видимості:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Визначається під час написання коду, а не виконання."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "function outer() {\n  let outerVar = \"outer\";\n  function inner() {\n    console.log(outerVar);\n  }\n  inner();\n}\nouter();"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Підсумок:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Scope визначає доступність змінних і функцій та є ключовим для розуміння поведінки коду."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "47. What is scope?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Scope",
-                    "bold": true
-                  },
-                  {
-                    "text": " is the context in JavaScript that determines where variables and functions are accessible."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Types of scope:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Global scope:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Accessible from anywhere in the code."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Function scope:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Variables declared inside a function are local to that function."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Block scope:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Variables declared with "
-                          },
-                          {
-                            "text": "let",
-                            "code": true
-                          },
-                          {
-                            "text": " or "
-                          },
-                          {
-                            "text": "const",
-                            "code": true
-                          },
-                          {
-                            "text": " are limited to the block."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Lexical scope:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Scope is determined by where functions are defined, not where they are called."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Conclusion:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Understanding scope prevents unexpected variable access and bugs."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "47. Czym jest zakres widoczności (Scope)?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakres widoczności (Scope)",
-                    "bold": true
-                  },
-                  {
-                    "text": " to kontekst w JavaScript określający, gdzie zmienne i funkcje są dostępne."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Rodzaje zakresu:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakres globalny:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Dostępny w całym kodzie."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakres funkcji:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zmienne zadeklarowane w funkcji są lokalne."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakres blokowy:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "let i const działają tylko w obrębie bloku."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakres leksykalny:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zakres zależy od miejsca deklaracji w kodzie."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wniosek:",
-                            "bold": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zrozumienie scope jest kluczowe dla poprawnego działania programu."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 48,
-    "translations": {
-      "uk": {
-        "question": "48. Навіщо використовується директива use strict?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "use strict",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Директива "
-                  },
-                  {
-                    "text": "\"use strict\"",
-                    "code": true
-                  },
-                  {
-                    "text": " вмикає строгий режим виконання JavaScript, роблячи мову менш поблажливою до помилок і більш передбачуваною."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Основні цілі:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Запобігання прихованим помилкам."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Посилення синтаксичних перевірок."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перетворення небезпечної поведінки на явні помилки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Заборона неоголошених змінних:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'use strict';\nmyVar = 10; // ReferenceError"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Інша поведінка this:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'use strict';\nfunction test() {\n  console.log(this); // undefined\n}\ntest();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Заборона дублювання параметрів:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'use strict';\nfunction sum(a, a) {}\n// SyntaxError"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Висновок:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "use strict робить код безпечнішим, передбачуваним і простішим для налагодження."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "48. What is the use of the use strict directive?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "use strict",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The "
-                  },
-                  {
-                    "text": "\"use strict\"",
-                    "code": true
-                  },
-                  {
-                    "text": " directive enables strict mode in JavaScript, enforcing safer and more predictable language behavior."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Main goals:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prevent silent errors."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Strengthen syntax checks."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Turn unsafe behavior into explicit errors."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Disallow undeclared variables:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'use strict';\nmyVar = 10; // ReferenceError"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Different this binding:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'use strict';\nfunction test() {\n  console.log(this); // undefined\n}\ntest();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Disallow duplicate parameters:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'use strict';\nfunction sum(a, a) {}\n// SyntaxError"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Conclusion:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "use strict improves code safety, predictability, and debuggability."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "48. Do czego służy dyrektywa use strict?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "use strict",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dyrektywa "
-                  },
-                  {
-                    "text": "\"use strict\"",
-                    "code": true
-                  },
-                  {
-                    "text": " włącza tryb ścisły w JavaScript, wymuszając bezpieczniejsze i bardziej przewidywalne działanie kodu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Główne cele:",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Eliminacja ukrytych błędów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zaostrzenie kontroli składni."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zamiana niebezpiecznych zachowań na błędy."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakaz niezadeklarowanych zmiennych:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'use strict';\nmyVar = 10; // ReferenceError"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Inne wiązanie this:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'use strict';\nfunction test() {\n  console.log(this); // undefined\n}\ntest();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakaz duplikacji parametrów:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "'use strict';\nfunction sum(a, a) {}\n// SyntaxError"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wniosek:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "use strict zwiększa bezpieczeństwo, czytelność i niezawodność kodu."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 49,
-    "translations": {
-      "uk": {
-        "question": "49. Яке значення має this?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "this",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Значення "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " у JavaScript визначається контекстом виклику."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Глобальний контекст або функція у strict mode:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " дорівнює "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Глобальний контекст або функція без strict mode:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " вказує на глобальний об’єкт."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Метод об’єкта:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " — це об’єкт, якому належить метод."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Конструктор або клас:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " — новостворений екземпляр."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Стрілкова функція:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " береться з зовнішнього лексичного контексту."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call / apply / bind:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " задається явно."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обробник події:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " залежить від способу прив’язки обробника."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "49. What is the value of this?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "this",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The value of "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " in JavaScript depends on how a function is called."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Global scope or function in strict mode:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " is "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Global scope or function in non-strict mode:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " refers to the global object."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object method:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " refers to the owning object."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Constructor or class:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " is the newly created instance."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Arrow function:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " is inherited from the lexical scope."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call / apply / bind:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " is explicitly set."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Event handler:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " depends on how the handler is attached."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "49. Jaką wartość ma this?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "this",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wartość "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " w JavaScript zależy od kontekstu wywołania."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kontekst globalny lub funkcja w strict mode:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " ma wartość "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kontekst globalny lub funkcja bez strict mode:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " wskazuje na obiekt globalny."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Metoda obiektu:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " odnosi się do obiektu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Konstruktor lub klasa:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " to nowa instancja."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcja strzałkowa:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " jest dziedziczone z zakresu leksykalnego."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call / apply / bind:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " jest ustawiane jawnie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obsługa zdarzeń:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": " zależy od sposobu przypięcia handlera."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 50,
-    "translations": {
-      "uk": {
-        "question": "50. Що таке прототип об'єкта?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "prototype",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Прототип об'єкта — це механізм JavaScript, який дозволяє об'єктам наслідувати властивості та методи від інших об'єктів."
-                  },
-                  {
-                    "text": " [[Prototype]]",
-                    "code": true
-                  },
-                  {
-                    "text": " — це внутрішнє посилання на об'єкт-прототип ("
-                  },
-                  {
-                    "text": "__proto__",
-                    "code": true
-                  },
-                  {
-                    "text": " є застарілим доступом)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні моменти:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Наслідування:",
-                    "bold": true
-                  },
-                  {
-                    "text": " якщо властивість не знайдена в об'єкті, пошук іде в його прототипі."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Прототипний ланцюг:",
-                    "bold": true
-                  },
-                  {
-                    "text": " пошук триває вгору по ланцюгу до null."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Встановлення прототипу:",
-                    "bold": true
-                  },
-                  {
-                    "text": " через Object.create(), Object.setPrototypeOf() або class."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Конструктори:",
-                    "bold": true
-                  },
-                  {
-                    "text": " об'єкти, створені через new, наслідують prototype конструктора."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function Animal(name) {\n  this.name = name;\n}\n\nAnimal.prototype.speak = function () {\n  return `${this.name} makes a noise.`;\n};\n\nconst dog = new Animal('Dog');\nconsole.log(dog.speak());"
-          }
-        ]
-      },
-      "en": {
-        "question": "50. What is an object prototype?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "prototype",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "An object prototype is a JavaScript mechanism that allows objects to inherit properties and methods from other objects."
-                  },
-                  {
-                    "text": " [[Prototype]]",
-                    "code": true
-                  },
-                  {
-                    "text": " is the internal reference to the prototype object ("
-                  },
-                  {
-                    "text": "__proto__",
-                    "code": true
-                  },
-                  {
-                    "text": " is legacy)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Key points:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Inheritance:",
-                    "bold": true
-                  },
-                  {
-                    "text": " missing properties are searched for in the prototype."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prototype chain:",
-                    "bold": true
-                  },
-                  {
-                    "text": " lookup continues up the chain until null."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Setting prototypes:",
-                    "bold": true
-                  },
-                  {
-                    "text": " via Object.create(), Object.setPrototypeOf(), or class."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Constructors:",
-                    "bold": true
-                  },
-                  {
-                    "text": " objects created with new inherit from constructor.prototype."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Example:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function Animal(name) {\n  this.name = name;\n}\n\nAnimal.prototype.speak = function () {\n  return `${this.name} makes a noise.`;\n};\n\nconst dog = new Animal('Dog');\nconsole.log(dog.speak());"
-          }
-        ]
-      },
-      "pl": {
-        "question": "50. Czym jest prototyp obiektu?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "prototype",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prototyp obiektu to mechanizm w JavaScript umożliwiający dziedziczenie właściwości i metod między obiektami."
-                  },
-                  {
-                    "text": " [[Prototype]]",
-                    "code": true
-                  },
-                  {
-                    "text": " jest wewnętrznym odwołaniem do prototypu ("
-                  },
-                  {
-                    "text": "__proto__",
-                    "code": true
-                  },
-                  {
-                    "text": " jest przestarzałe)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Najważniejsze informacje:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dziedziczenie:",
-                    "bold": true
-                  },
-                  {
-                    "text": " brakujące właściwości są wyszukiwane w prototypie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Łańcuch prototypów:",
-                    "bold": true
-                  },
-                  {
-                    "text": " wyszukiwanie trwa aż do null."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ustawianie prototypu:",
-                    "bold": true
-                  },
-                  {
-                    "text": " przez Object.create(), Object.setPrototypeOf() lub class."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Konstruktory:",
-                    "bold": true
-                  },
-                  {
-                    "text": " obiekty utworzone przez new dziedziczą prototype konstruktora."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykład:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function Animal(name) {\n  this.name = name;\n}\n\nAnimal.prototype.speak = function () {\n  return `${this.name} makes a noise.`;\n};\n\nconst dog = new Animal('Dog');\nconsole.log(dog.speak());"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 51,
-    "translations": {
-      "uk": {
-        "question": "51. Що таке IIFE?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Immediately Invoked Function Expression",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "IIFE — це функція, яка виконується одразу після оголошення. Вона використовується для створення ізольованого лексичного контексту та уникнення забруднення глобальної області видимості."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Синтаксис:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "(function () {\n  // код виконується одразу\n})();"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Або",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "(() => {\n  // код виконується одразу\n})();"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Ключові аспекти:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ізоляція змінних через замикання."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відсутність побічних ефектів у глобальному scope."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зручне виконання одноразового коду."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "(function () {\n  const message = 'Hello, IIFE!';\n  console.log(message);\n})();"
-          }
-        ]
-      },
-      "en": {
-        "question": "51. What is an IIFE?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Immediately Invoked Function Expression",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "An IIFE is a function that runs immediately after it is defined. It is used to create an isolated lexical scope and avoid polluting the global scope."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Syntax:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "(function () {\n  // code runs immediately\n})();"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Or",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "(() => {\n  // code runs immediately\n})();"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Key points:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Creates a private scope via closures."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prevents global namespace pollution."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Useful for one-time execution logic."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Example:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "(function () {\n  const message = 'Hello, IIFE!';\n  console.log(message);\n})();"
-          }
-        ]
-      },
-      "pl": {
-        "question": "51. Czym jest IIFE?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Immediately Invoked Function Expression",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "IIFE to funkcja wywoływana natychmiast po zdefiniowaniu. Służy do tworzenia izolowanego zakresu i unikania zanieczyszczania globalnego scope."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Składnia:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "(function () {\n  // kod wykonuje się od razu\n})();"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Lub",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "(() => {\n  // kod wykonuje się od razu\n})();"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Kluczowe cechy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Izolacja zmiennych dzięki domknięciom."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Brak wpływu na globalny zakres."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wygodne dla jednorazowego kodu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykład:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "(function () {\n  const message = 'Hello, IIFE!';\n  console.log(message);\n})();"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 52,
-    "translations": {
-      "uk": {
-        "question": "52. Навіщо використовується метод Function.prototype.apply?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Function.prototype.apply",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Метод "
-                  },
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " використовується для виклику функції з явним заданням контексту this та передачею аргументів у вигляді масиву."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні використання:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зміна контексту this:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const obj = { name: 'Alice' };\nfunction greet(greeting) {\n  return `${greeting}, ${this.name}`;\n}\ngreet.apply(obj, ['Hello']);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Передача аргументів масивом:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const numbers = [1, 2, 3];\nMath.max.apply(null, numbers);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Повторне використання конструктора:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function Animal(name) {\n  this.name = name;\n}\nfunction Dog(name) {\n  Animal.apply(this, [name]);\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Відмінність від call:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " приймає аргументи масивом, а "
-                  },
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " — списком."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "52. What is Function.prototype.apply used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Function.prototype.apply",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The "
-                  },
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " method invokes a function with an explicitly defined this value and arguments provided as an array."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Common use cases:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Changing this context:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "greet.apply(obj, ['Hello']);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Passing arguments as an array:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "Math.max.apply(null, numbers);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Constructor reuse:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "Animal.apply(this, [name]);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference from call:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " accepts arguments as an array, while "
-                  },
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " accepts them individually."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "52. Do czego służy metoda Function.prototype.apply?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Function.prototype.apply",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Metoda "
-                  },
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " służy do wywołania funkcji z określonym this oraz argumentami przekazanymi jako tablica."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zastosowania:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zmiana kontekstu this:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "greet.apply(obj, ['Hello']);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przekazywanie argumentów w tablicy:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "Math.max.apply(null, numbers);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ponowne użycie konstruktora:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "Animal.apply(this, [name]);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnica względem call:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " przyjmuje argumenty jako tablicę, a "
-                  },
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " jako listę."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 53,
-    "translations": {
-      "uk": {
-        "question": "53. Навіщо використовується метод Function.prototype.call?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Function.prototype.call",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Метод "
-                  },
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " викликає функцію з явно заданим this та передає аргументи як список."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні використання:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зміна контексту this:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "greet.call(obj, 'Hello');"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Передача аргументів списком:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "sum.call(null, 1, 2, 3);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Повторне використання методів:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "person.fullName.call(john);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Виклик конструктора батьківського класу:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "Animal.call(this, name);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Відмінність від apply:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " приймає аргументи списком, а "
-                  },
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " — масивом."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "53. What is Function.prototype.call used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Function.prototype.call",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The "
-                  },
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " method invokes a function with an explicit this value and arguments passed individually."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Common use cases:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Changing this context:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "greet.call(obj, 'Hello');"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Passing arguments individually:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "sum.call(null, 1, 2, 3);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Method borrowing:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "person.fullName.call(john);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Calling a parent constructor:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "Animal.call(this, name);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference from apply:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " takes arguments individually, while "
-                  },
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " takes an array."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "53. Do czego służy metoda Function.prototype.call?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Function.prototype.call",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Metoda "
-                  },
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " wywołuje funkcję z jawnie ustawionym this oraz argumentami przekazanymi jako lista."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zastosowania:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zmiana kontekstu this:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "greet.call(obj, 'Hello');"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przekazywanie argumentów jako lista:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "sum.call(null, 1, 2, 3);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pożyczanie metod:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "person.fullName.call(john);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wywołanie konstruktora nadrzędnego:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "Animal.call(this, name);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnica względem apply:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " przyjmuje argumenty jako listę, a "
-                  },
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " jako tablicę."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 54,
-    "translations": {
-      "uk": {
-        "question": "54. У чому різниця між методами call та apply?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Різниця між методами "
-              },
-              {
-                "text": "call",
-                "code": true
-              },
-              {
-                "text": " та "
-              },
-              {
-                "text": "apply",
-                "code": true
-              },
-              {
-                "text": " полягає у способі передачі аргументів:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Аргументи передаються як окремий список."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "greet.call(person, 'Hello', '!');"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Аргументи передаються у вигляді масиву."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "greet.apply(person, ['Hello', '!']);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Схожість:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обидва методи змінюють контекст "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Коли що використовувати:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " — коли аргументи передаються явно."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " — коли аргументи вже є масивом."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "54. What is the difference between call and apply?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "The difference between "
-              },
-              {
-                "text": "call",
-                "code": true
-              },
-              {
-                "text": " and "
-              },
-              {
-                "text": "apply",
-                "code": true
-              },
-              {
-                "text": " is how arguments are passed:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Arguments are passed individually."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "greet.call(person, 'Hello', '!');"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Arguments are passed as an array."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "greet.apply(person, ['Hello', '!']);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Similarity:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Both methods explicitly set "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "When to use:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " when arguments are known upfront."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " when arguments are stored in an array."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "54. Jaka jest różnica między call a apply?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnica między "
-              },
-              {
-                "text": "call",
-                "code": true
-              },
-              {
-                "text": " i "
-              },
-              {
-                "text": "apply",
-                "code": true
-              },
-              {
-                "text": " dotyczy sposobu przekazywania argumentów:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Argumenty przekazywane są jako lista."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "greet.call(person, 'Hello', '!');"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Argumenty przekazywane są jako tablica."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "greet.apply(person, ['Hello', '!']);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Podobieństwo:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Oba ustawiają kontekst "
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Kiedy używać:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " gdy argumenty są znane."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " gdy argumenty są w tablicy."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 55,
-    "translations": {
-      "uk": {
-        "question": "55. Навіщо використовується метод Function.prototype.bind?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Function.prototype.bind",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Метод "
-                  },
-                  {
-                    "text": "bind",
-                    "code": true
-                  },
-                  {
-                    "text": " створює нову функцію з фіксованим значенням this та, за потреби, попередньо заданими аргументами."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні використання:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Фіксація this:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const bound = fn.bind(obj);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Часткове застосування аргументів:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const double = multiply.bind(null, 2);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Колбеки з гарантованим контекстом:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "setTimeout(fn.bind(obj), 1000);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "this більше не можна змінити:",
-                    "bold": true
-                  },
-                  {
-                    "text": "bind робить прив’язку остаточною."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Відмінність від call та apply:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "bind",
-                    "code": true
-                  },
-                  {
-                    "text": " повертає нову функцію."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " і "
-                  },
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " викликають функцію одразу."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "55. What is Function.prototype.bind used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Function.prototype.bind",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The "
-                  },
-                  {
-                    "text": "bind",
-                    "code": true
-                  },
-                  {
-                    "text": " method creates a new function with a permanently bound this value and optional preset arguments."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Main use cases:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Locking this context:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const bound = fn.bind(obj);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Partial application:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const double = multiply.bind(null, 2);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Safe callbacks:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "setTimeout(fn.bind(obj), 1000);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "this cannot be overridden:",
-                    "bold": true
-                  },
-                  {
-                    "text": "bind makes the binding permanent."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Difference from call and apply:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "bind",
-                    "code": true
-                  },
-                  {
-                    "text": " returns a new function."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " and "
-                  },
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " invoke the function immediately."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "55. Do czego służy metoda Function.prototype.bind?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Function.prototype.bind",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Metoda "
-                  },
-                  {
-                    "text": "bind",
-                    "code": true
-                  },
-                  {
-                    "text": " tworzy nową funkcję z trwale powiązanym this oraz opcjonalnie wstępnie ustawionymi argumentami."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne zastosowania:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Stałe powiązanie this:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const bound = fn.bind(obj);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Częściowe przekazanie argumentów:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const double = multiply.bind(null, 2);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Bezpieczne callbacki:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "setTimeout(fn.bind(obj), 1000);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Brak możliwości zmiany this:",
-                    "bold": true
-                  },
-                  {
-                    "text": "bind ustawia this na stałe."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Różnica względem call i apply:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "bind",
-                    "code": true
-                  },
-                  {
-                    "text": " zwraca nową funkcję."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "call",
-                    "code": true
-                  },
-                  {
-                    "text": " i "
-                  },
-                  {
-                    "text": "apply",
-                    "code": true
-                  },
-                  {
-                    "text": " wywołują funkcję natychmiast."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 56,
-    "translations": {
-      "uk": {
-        "question": "56. Що таке функціональне програмування?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Функціональне програмування"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Функціональне програмування — це парадигма, у якій обчислення будуються через застосування функцій без побічних ефектів і без зміни стану."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні принципи:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Чисті функції:",
-                    "bold": true
-                  },
-                  {
-                    "text": " однаковий ввід завжди дає однаковий результат, без побічних ефектів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Немутованість:",
-                    "bold": true
-                  },
-                  {
-                    "text": " дані не змінюються, створюються нові значення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функції першого класу:",
-                    "bold": true
-                  },
-                  {
-                    "text": " функції можна передавати, повертати та зберігати."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функції вищого порядку:",
-                    "bold": true
-                  },
-                  {
-                    "text": " функції приймають або повертають інші функції."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Композиція:",
-                    "bold": true
-                  },
-                  {
-                    "text": " складні операції будуються з простих функцій."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "56. What is functional programming?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Functional programming"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Functional programming is a paradigm where computation is built by composing pure functions without shared state or side effects."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Core principles:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pure functions:",
-                    "bold": true
-                  },
-                  {
-                    "text": " same input always produces the same output."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Immutability:",
-                    "bold": true
-                  },
-                  {
-                    "text": " data is not modified, new values are created."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "First-class functions:",
-                    "bold": true
-                  },
-                  {
-                    "text": " functions can be passed, returned, and stored."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Higher-order functions:",
-                    "bold": true
-                  },
-                  {
-                    "text": " functions operate on other functions."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Composition:",
-                    "bold": true
-                  },
-                  {
-                    "text": " complex logic is built from simple functions."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "56. Czym jest programowanie funkcyjne?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Programowanie funkcyjne"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Programowanie funkcyjne to paradygmat, w którym programy są budowane z czystych funkcji bez efektów ubocznych i modyfikowania stanu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne zasady:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Czyste funkcje:",
-                    "bold": true
-                  },
-                  {
-                    "text": " ten sam argument daje ten sam wynik."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Niezmienność danych:",
-                    "bold": true
-                  },
-                  {
-                    "text": " dane nie są modyfikowane."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcje pierwszej klasy:",
-                    "bold": true
-                  },
-                  {
-                    "text": " funkcje są traktowane jak wartości."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcje wyższego rzędu:",
-                    "bold": true
-                  },
-                  {
-                    "text": " funkcje przyjmują inne funkcje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kompozycja:",
-                    "bold": true
-                  },
-                  {
-                    "text": " łączenie funkcji w bardziej złożone operacje."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 57,
-    "translations": {
-      "uk": {
-        "question": "57. Які особливості JavaScript дозволяють говорити про нього як про функціональну мову програмування?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Особливості JavaScript, що підтримують функціональний стиль:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функції першого класу:",
-                    "bold": true
-                  },
-                  {
-                    "text": " функції можна зберігати у змінних, передавати як аргументи та повертати з інших функцій."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функції вищого порядку:",
-                    "bold": true
-                  },
-                  {
-                    "text": " функції можуть приймати інші функції або повертати їх."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Стрілкові функції:",
-                    "bold": true
-                  },
-                  {
-                    "text": " короткий синтаксис спрощує використання функцій у виразах."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Методи масивів:",
-                    "bold": true
-                  },
-                  {
-                    "text": " map, filter, reduce дозволяють працювати з даними без мутації."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Замикання:",
-                    "bold": true
-                  },
-                  {
-                    "text": " функції зберігають доступ до лексичного контексту."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Підтримка немутованості:",
-                    "bold": true
-                  },
-                  {
-                    "text": " досягається через стиль коду або бібліотеки."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "57. What JavaScript features allow it to be considered a functional programming language?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "JavaScript features supporting functional programming:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "First-class functions:",
-                    "bold": true
-                  },
-                  {
-                    "text": " functions can be stored, passed, and returned."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Higher-order functions:",
-                    "bold": true
-                  },
-                  {
-                    "text": " functions operate on other functions."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Arrow functions:",
-                    "bold": true
-                  },
-                  {
-                    "text": " concise syntax encourages functional patterns."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Array methods:",
-                    "bold": true
-                  },
-                  {
-                    "text": " map, filter, reduce enable non-mutating data transformations."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Closures:",
-                    "bold": true
-                  },
-                  {
-                    "text": " functions retain access to lexical scope."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Immutability support:",
-                    "bold": true
-                  },
-                  {
-                    "text": " achieved through patterns or libraries."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "57. Jakie cechy JavaScript pozwalają uznać go za język funkcyjny?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Cechy JavaScript wspierające programowanie funkcyjne:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcje pierwszej klasy:",
-                    "bold": true
-                  },
-                  {
-                    "text": " funkcje mogą być przechowywane i przekazywane."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcje wyższego rzędu:",
-                    "bold": true
-                  },
-                  {
-                    "text": " funkcje przyjmują inne funkcje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcje strzałkowe:",
-                    "bold": true
-                  },
-                  {
-                    "text": " skrócony zapis sprzyja stylowi funkcyjnemu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Metody tablic:",
-                    "bold": true
-                  },
-                  {
-                    "text": " map, filter, reduce umożliwiają niemutujące operacje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Domknięcia:",
-                    "bold": true
-                  },
-                  {
-                    "text": " funkcje zachowują dostęp do zakresu leksykalnego."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wsparcie niemutowalności:",
-                    "bold": true
-                  },
-                  {
-                    "text": " realizowane przez wzorce lub biblioteki."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 58,
-    "translations": {
-      "uk": {
-        "question": "58. Що таке функції вищого ладу (Higher Order Functions)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Функції вищого порядку"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Функції вищого порядку (Higher Order Functions) — це функції, які приймають інші функції як аргументи або повертають функції як результат."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Ключові ознаки:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Приймають функції:",
-                    "bold": true
-                  },
-                  {
-                    "text": " поведінка передається як аргумент."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Повертають функції:",
-                    "bold": true
-                  },
-                  {
-                    "text": " дозволяють будувати нові функції на основі існуючих."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Типові приклади:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "map",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "filter",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "reduce",
-                    "code": true
-                  },
-                  {
-                    "text": " — стандартні HOF для роботи з масивами без мутації."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "58. What are Higher Order Functions?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Higher Order Functions"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Higher Order Functions are functions that take other functions as arguments or return functions as results."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Key properties:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Accept functions:",
-                    "bold": true
-                  },
-                  {
-                    "text": " behavior is passed as data."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Return functions:",
-                    "bold": true
-                  },
-                  {
-                    "text": " enable function composition and abstraction."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Common examples:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "map",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "filter",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "reduce",
-                    "code": true
-                  },
-                  {
-                    "text": " — built-in higher order functions for arrays."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "58. Czym są funkcje wyższego rzędu?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Funkcje wyższego rzędu"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Funkcje wyższego rzędu to funkcje, które przyjmują inne funkcje jako argumenty lub zwracają funkcje jako wynik."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Cechy charakterystyczne:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przyjmują funkcje:",
-                    "bold": true
-                  },
-                  {
-                    "text": " logika jest przekazywana jako dane."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zwracają funkcje:",
-                    "bold": true
-                  },
-                  {
-                    "text": " umożliwiają kompozycję i abstrakcję."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Typowe przykłady:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "map",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "filter",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "reduce",
-                    "code": true
-                  },
-                  {
-                    "text": " — wbudowane funkcje wyższego rzędu."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 59,
-    "translations": {
-      "uk": {
-        "question": "59. Чому функції у JavaScript називають об'єктами першого класу (First-class Objects)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Функції як об'єкти першого класу"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Функції в JavaScript вважаються об'єктами першого класу, оскільки з ними можна поводитися так само, як і з будь-якими іншими значеннями."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Присвоєння змінним:",
-                    "bold": true
-                  },
-                  {
-                    "text": " функції можуть зберігатися у змінних."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Передача як аргументів:",
-                    "bold": true
-                  },
-                  {
-                    "text": " функції можна передавати в інші функції."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Повернення з функцій:",
-                    "bold": true
-                  },
-                  {
-                    "text": " функції можуть бути результатом виконання інших функцій."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Динамічне створення:",
-                    "bold": true
-                  },
-                  {
-                    "text": " функції можуть створюватися під час виконання програми."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "59. Why are functions in JavaScript called first-class objects?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Functions as first-class objects"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Functions in JavaScript are considered first-class objects because they can be used like any other value."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Assignment to variables:",
-                    "bold": true
-                  },
-                  {
-                    "text": " functions can be stored in variables."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Passing as arguments:",
-                    "bold": true
-                  },
-                  {
-                    "text": " functions can be passed to other functions."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Returning from functions:",
-                    "bold": true
-                  },
-                  {
-                    "text": " functions can be returned as results."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dynamic creation:",
-                    "bold": true
-                  },
-                  {
-                    "text": " functions can be created at runtime."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "59. Dlaczego funkcje w JavaScript są nazywane obiektami pierwszej klasy?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Funkcje jako obiekty pierwszej klasy"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Funkcje w JavaScript są obiektami pierwszej klasy, ponieważ można je traktować jak dowolne inne wartości."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przypisywanie do zmiennych:",
-                    "bold": true
-                  },
-                  {
-                    "text": " funkcje mogą być przechowywane w zmiennych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przekazywanie jako argumenty:",
-                    "bold": true
-                  },
-                  {
-                    "text": " funkcje mogą być przekazywane do innych funkcji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zwracanie z funkcji:",
-                    "bold": true
-                  },
-                  {
-                    "text": " funkcje mogą być wynikiem innych funkcji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dynamiczne tworzenie:",
-                    "bold": true
-                  },
-                  {
-                    "text": " funkcje mogą być tworzone w trakcie działania programu."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 60,
-    "translations": {
-      "uk": {
-        "question": "60. Що таке об'єкт arguments?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "arguments",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Об'єкт "
-              },
-              {
-                "text": "arguments",
-                "code": true
-              },
-              {
-                "text": " — це вбудований масивоподібний об'єкт, доступний усередині звичайних функцій, який містить усі передані аргументи незалежно від кількості параметрів."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Масивоподібний:",
-                    "bold": true
-                  },
-                  {
-                    "text": " має індекси та властивість length, але не має методів масиву."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Доступ за індексом:",
-                    "bold": true
-                  },
-                  {
-                    "text": " arguments[0], arguments[1] тощо."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обмеження:",
-                    "bold": true
-                  },
-                  {
-                    "text": " недоступний у стрілкових функціях."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "60. What is the arguments object?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "arguments",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The "
-              },
-              {
-                "text": "arguments",
-                "code": true
-              },
-              {
-                "text": " object is a built-in array-like object available inside regular functions that contains all arguments passed to the function."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Array-like:",
-                    "bold": true
-                  },
-                  {
-                    "text": " has indexes and length, but no array methods."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Indexed access:",
-                    "bold": true
-                  },
-                  {
-                    "text": " arguments[0], arguments[1], etc."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Limitations:",
-                    "bold": true
-                  },
-                  {
-                    "text": " not available in arrow functions."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "60. Czym jest obiekt arguments?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "arguments",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Obiekt "
-              },
-              {
-                "text": "arguments",
-                "code": true
-              },
-              {
-                "text": " to wbudowany obiekt tablicopodobny dostępny w zwykłych funkcjach, zawierający wszystkie przekazane argumenty."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tablicopodobny:",
-                    "bold": true
-                  },
-                  {
-                    "text": " posiada indeksy i length, ale nie metody tablic."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dostęp indeksowy:",
-                    "bold": true
-                  },
-                  {
-                    "text": " arguments[0], arguments[1] itd."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ograniczenia:",
-                    "bold": true
-                  },
-                  {
-                    "text": " niedostępny w funkcjach strzałkowych."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 61,
-    "translations": {
-      "uk": {
-        "question": "61. Як створити об'єкт, який не має прототипу?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Object.create(null)",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Щоб створити об'єкт без прототипу в JavaScript, використовується метод "
-                  },
-                  {
-                    "text": "Object.create(null)",
-                    "code": true
-                  },
-                  {
-                    "text": ". Це створює об'єкт, який не має властивостей і методів, успадкованих від "
-                  },
-                  {
-                    "text": "Object.prototype",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const obj = Object.create(null);\n\nconsole.log(obj); // {}\nconsole.log(Object.getPrototypeOf(obj)); // null\nconsole.log(obj.hasOwnProperty); // undefined"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Особливості такого об'єкта:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відсутність прототипу:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Об'єкт не має стандартних методів, таких як "
-                  },
-                  {
-                    "text": "toString",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "hasOwnProperty",
-                    "code": true
-                  },
-                  {
-                    "text": ", які успадковуються від "
-                  },
-                  {
-                    "text": "Object.prototype",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Корисний для створення чистих словників:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Використовується для хеш-таблиць без конфліктів із властивостями прототипу."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const dictionary = Object.create(null);\ndictionary.key = 'value';\nconsole.log(dictionary.key); // \"value\"\nconsole.log(dictionary.toString); // undefined"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обмеження:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Методи "
-                  },
-                  {
-                    "text": "Object.prototype",
-                    "code": true
-                  },
-                  {
-                    "text": " недоступні напряму."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Виклик hasOwnProperty:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Object.prototype.hasOwnProperty.call(obj, 'key');"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Підхід корисний для уникнення колізій з успадкованими властивостями."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "61. How do you create an object with no prototype?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Object.create(null)",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "To create an object without a prototype in JavaScript, use "
-                  },
-                  {
-                    "text": "Object.create(null)",
-                    "code": true
-                  },
-                  {
-                    "text": ". It creates an object that does not inherit from "
-                  },
-                  {
-                    "text": "Object.prototype",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Example:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const obj = Object.create(null);\n\nconsole.log(obj); // {}\nconsole.log(Object.getPrototypeOf(obj)); // null\nconsole.log(obj.hasOwnProperty); // undefined"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Characteristics:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "No prototype:",
-                    "bold": true
-                  },
-                  {
-                    "text": " The object has no inherited methods like "
-                  },
-                  {
-                    "text": "toString",
-                    "code": true
-                  },
-                  {
-                    "text": " or "
-                  },
-                  {
-                    "text": "hasOwnProperty",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Useful for dictionaries:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Ideal for pure hash maps without prototype collisions."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const dictionary = Object.create(null);\ndictionary.key = 'value';\nconsole.log(dictionary.key); // \"value\"\nconsole.log(dictionary.toString); // undefined"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Limitations:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Prototype methods must be called explicitly."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Calling hasOwnProperty:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Object.prototype.hasOwnProperty.call(obj, 'key');"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This approach avoids issues caused by inherited properties."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "61. Jak utworzyć obiekt bez prototypu?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Object.create(null)",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Aby utworzyć obiekt bez prototypu w JavaScript, używa się "
-                  },
-                  {
-                    "text": "Object.create(null)",
-                    "code": true
-                  },
-                  {
-                    "text": ". Taki obiekt nie dziedziczy po "
-                  },
-                  {
-                    "text": "Object.prototype",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykład:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const obj = Object.create(null);\n\nconsole.log(obj); // {}\nconsole.log(Object.getPrototypeOf(obj)); // null\nconsole.log(obj.hasOwnProperty); // undefined"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Cechy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Brak prototypu:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Obiekt nie posiada metod takich jak "
-                  },
-                  {
-                    "text": "toString",
-                    "code": true
-                  },
-                  {
-                    "text": " czy "
-                  },
-                  {
-                    "text": "hasOwnProperty",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Idealny jako słownik:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Brak konfliktów z właściwościami prototypu."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const dictionary = Object.create(null);\ndictionary.key = 'value';\nconsole.log(dictionary.key); // \"value\"\nconsole.log(dictionary.toString); // undefined"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ograniczenia:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Metody prototypu wymagają jawnego wywołania."
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wywołanie hasOwnProperty:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Object.prototype.hasOwnProperty.call(obj, 'key');"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Rozwiązanie eliminuje problemy z dziedziczonymi właściwościami."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 62,
-    "translations": {
-      "uk": {
-        "question": "62. Що таке ECMAScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ECMAScript",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ECMAScript (ES) - це специфікація мови програмування, яка є стандартом для JavaScript та інших реалізацій. Вона визначає синтаксис, семантику та базову поведінку мови."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні аспекти:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Стандартизація:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ECMAScript розробляється організацією "
-                          },
-                          {
-                            "text": "ECMA International",
-                            "bold": true
-                          },
-                          {
-                            "text": " комітетом "
-                          },
-                          {
-                            "text": "TC39",
-                            "bold": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зв’язок з JavaScript:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "JavaScript є конкретною реалізацією специфікації ECMAScript."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Історія версій:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ES3 (1999):",
-                            "bold": true
-                          },
-                          {
-                            "text": " перший стабільний стандарт."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ES5 (2009):",
-                            "bold": true
-                          },
-                          {
-                            "text": " strict mode, JSON, методи масивів."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ES6 / ES2015:",
-                            "bold": true
-                          },
-                          {
-                            "text": " let, const, класи, модулі, стрілкові функції."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Подальші версії:",
-                            "bold": true
-                          },
-                          {
-                            "text": " щорічні оновлення з інкрементальними змінами."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ECMAScript забезпечує єдину поведінку JavaScript у різних середовищах."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "62. What is ECMAScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ECMAScript",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ECMAScript (ES) is a programming language specification that serves as the standard for JavaScript. It defines syntax, semantics, and core language behavior."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Key aspects:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Standardization:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ECMAScript is maintained by "
-                          },
-                          {
-                            "text": "ECMA International",
-                            "bold": true
-                          },
-                          {
-                            "text": " via the "
-                          },
-                          {
-                            "text": "TC39",
-                            "bold": true
-                          },
-                          {
-                            "text": " committee."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Relation to JavaScript:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "JavaScript is an implementation of the ECMAScript specification."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Version history:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ES3 (1999):",
-                            "bold": true
-                          },
-                          {
-                            "text": " first widely supported version."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ES5 (2009):",
-                            "bold": true
-                          },
-                          {
-                            "text": " strict mode, JSON, array methods."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ES6 / ES2015:",
-                            "bold": true
-                          },
-                          {
-                            "text": " major update with classes, modules, let and const."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Later versions:",
-                            "bold": true
-                          },
-                          {
-                            "text": " annual incremental updates."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ECMAScript ensures consistent JavaScript behavior across environments."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "62. Czym jest ECMAScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ECMAScript",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ECMAScript (ES) to specyfikacja języka programowania będąca standardem dla JavaScript. Określa składnię, semantykę i podstawowe zachowanie języka."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne aspekty:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Standaryzacja:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ECMAScript jest rozwijany przez "
-                          },
-                          {
-                            "text": "ECMA International",
-                            "bold": true
-                          },
-                          {
-                            "text": " w ramach komitetu "
-                          },
-                          {
-                            "text": "TC39",
-                            "bold": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Relacja z JavaScript:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "JavaScript jest implementacją specyfikacji ECMAScript."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Historia wersji:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ES3 (1999):",
-                            "bold": true
-                          },
-                          {
-                            "text": " pierwszy stabilny standard."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ES5 (2009):",
-                            "bold": true
-                          },
-                          {
-                            "text": " tryb ścisły, JSON, metody tablic."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "ES6 / ES2015:",
-                            "bold": true
-                          },
-                          {
-                            "text": " klasy, moduły, let i const."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Kolejne wersje:",
-                            "bold": true
-                          },
-                          {
-                            "text": " coroczne aktualizacje języka."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ECMAScript zapewnia spójność działania JavaScript w różnych środowiskach."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 63,
-    "translations": {
-      "uk": {
-        "question": "63. У чому різниця між ключовими словами var, let та const?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "`var` `let` `const`",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Різниця між "
-                  },
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " та "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": " полягає в області видимості, hoisting та можливості перевизначення."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Область видимості:",
-                            "bold": true
-                          },
-                          {
-                            "text": " функціональна або глобальна, блочна ігнорується."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting:",
-                            "bold": true
-                          },
-                          {
-                            "text": " оголошення піднімається, значення "
-                          },
-                          {
-                            "text": "undefined",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Перевизначення:",
-                            "bold": true
-                          },
-                          {
-                            "text": " дозволене."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Область видимості:",
-                            "bold": true
-                          },
-                          {
-                            "text": " блочна."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting:",
-                            "bold": true
-                          },
-                          {
-                            "text": " TDZ до ініціалізації."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Перевизначення:",
-                            "bold": true
-                          },
-                          {
-                            "text": " заборонене."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Область видимості:",
-                            "bold": true
-                          },
-                          {
-                            "text": " блочна."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Зміна значення:",
-                            "bold": true
-                          },
-                          {
-                            "text": " заборонена після ініціалізації."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Об'єкти:",
-                            "bold": true
-                          },
-                          {
-                            "text": " внутрішній стан змінювати можна."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "63. What is the difference between var, let, and const?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "`var` `let` `const`",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The difference between "
-                  },
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " and "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": " relates to scope, hoisting, and reassignment."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Scope:",
-                            "bold": true
-                          },
-                          {
-                            "text": " function or global scope."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting:",
-                            "bold": true
-                          },
-                          {
-                            "text": " hoisted with value "
-                          },
-                          {
-                            "text": "undefined",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Redeclaration:",
-                            "bold": true
-                          },
-                          {
-                            "text": " allowed."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Scope:",
-                            "bold": true
-                          },
-                          {
-                            "text": " block scope."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting:",
-                            "bold": true
-                          },
-                          {
-                            "text": " TDZ before initialization."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Redeclaration:",
-                            "bold": true
-                          },
-                          {
-                            "text": " not allowed."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Scope:",
-                            "bold": true
-                          },
-                          {
-                            "text": " block scope."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Reassignment:",
-                            "bold": true
-                          },
-                          {
-                            "text": " not allowed."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Objects:",
-                            "bold": true
-                          },
-                          {
-                            "text": " internal mutation allowed."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "63. Jaka jest różnica między var, let i const?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "`var` `let` `const`",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Różnice między "
-                  },
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " i "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": " dotyczą zasięgu, hoistingu i nadpisywania."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zasięg:",
-                            "bold": true
-                          },
-                          {
-                            "text": " funkcyjny lub globalny."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting:",
-                            "bold": true
-                          },
-                          {
-                            "text": " wartość "
-                          },
-                          {
-                            "text": "undefined",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Ponowna deklaracja:",
-                            "bold": true
-                          },
-                          {
-                            "text": " dozwolona."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zasięg:",
-                            "bold": true
-                          },
-                          {
-                            "text": " blokowy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Hoisting:",
-                            "bold": true
-                          },
-                          {
-                            "text": " TDZ przed inicjalizacją."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Ponowna deklaracja:",
-                            "bold": true
-                          },
-                          {
-                            "text": " zabroniona."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zasięg:",
-                            "bold": true
-                          },
-                          {
-                            "text": " blokowy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zmiana wartości:",
-                            "bold": true
-                          },
-                          {
-                            "text": " niedozwolona."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Obiekty:",
-                            "bold": true
-                          },
-                          {
-                            "text": " ich zawartość może się zmieniać."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 64,
-    "translations": {
-      "uk": {
-        "question": "64. Що таке класи (Classes)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Classes",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Класи в JavaScript — це синтаксичний цукор над прототипним успадкуванням, який спрощує створення об’єктів і роботу з ними. Введені в ECMAScript 2015 (ES6)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні характеристики:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Оголошення класу:",
-                    "bold": true
-                  },
-                  {
-                    "text": " використовується ключове слово "
-                  },
-                  {
-                    "text": "class",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Конструктор:",
-                    "bold": true
-                  },
-                  {
-                    "text": " метод "
-                  },
-                  {
-                    "text": "constructor",
-                    "code": true
-                  },
-                  {
-                    "text": " викликається при створенні екземпляра."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Методи:",
-                    "bold": true
-                  },
-                  {
-                    "text": " спільні для всіх екземплярів класу."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Статичні методи:",
-                    "bold": true
-                  },
-                  {
-                    "text": " викликаються без створення екземпляра ("
-                  },
-                  {
-                    "text": "static",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Наслідування:",
-                    "bold": true
-                  },
-                  {
-                    "text": " реалізується через "
-                  },
-                  {
-                    "text": "extends",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Гетери та сетери:",
-                    "bold": true
-                  },
-                  {
-                    "text": " контроль доступу до властивостей."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "64. What are classes (Classes)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Classes",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Classes in JavaScript are syntactic sugar over prototype-based inheritance. Introduced in ECMAScript 2015 (ES6), they simplify object creation and code structure."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Key characteristics:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Class declaration:",
-                    "bold": true
-                  },
-                  {
-                    "text": " defined using the "
-                  },
-                  {
-                    "text": "class",
-                    "code": true
-                  },
-                  {
-                    "text": " keyword."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Constructor:",
-                    "bold": true
-                  },
-                  {
-                    "text": " the "
-                  },
-                  {
-                    "text": "constructor",
-                    "code": true
-                  },
-                  {
-                    "text": " method runs on instantiation."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Methods:",
-                    "bold": true
-                  },
-                  {
-                    "text": " shared across all instances."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Static methods:",
-                    "bold": true
-                  },
-                  {
-                    "text": " called on the class itself using "
-                  },
-                  {
-                    "text": "static",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Inheritance:",
-                    "bold": true
-                  },
-                  {
-                    "text": " implemented with "
-                  },
-                  {
-                    "text": "extends",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Getters and setters:",
-                    "bold": true
-                  },
-                  {
-                    "text": " control access to properties."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "64. Czym są klasy (Classes)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Classes",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Klasy w JavaScript to cukier składniowy nad dziedziczeniem prototypowym. Wprowadzone w ECMAScript 2015 (ES6), upraszczają tworzenie obiektów."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne cechy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Deklaracja klasy:",
-                    "bold": true
-                  },
-                  {
-                    "text": " za pomocą słowa kluczowego "
-                  },
-                  {
-                    "text": "class",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Konstruktor:",
-                    "bold": true
-                  },
-                  {
-                    "text": " metoda "
-                  },
-                  {
-                    "text": "constructor",
-                    "code": true
-                  },
-                  {
-                    "text": " wywoływana przy tworzeniu obiektu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Metody:",
-                    "bold": true
-                  },
-                  {
-                    "text": " wspólne dla wszystkich instancji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Metody statyczne:",
-                    "bold": true
-                  },
-                  {
-                    "text": " dostępne bez tworzenia instancji ("
-                  },
-                  {
-                    "text": "static",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dziedziczenie:",
-                    "bold": true
-                  },
-                  {
-                    "text": " realizowane przez "
-                  },
-                  {
-                    "text": "extends",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Gettery i settery:",
-                    "bold": true
-                  },
-                  {
-                    "text": " kontrola dostępu do właściwości."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 65,
-    "translations": {
-      "uk": {
-        "question": "65. Що таке шаблонні літерали (Template Literals)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Template Literals"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Шаблонні літерали ("
-                  },
-                  {
-                    "text": "Template Literals",
-                    "code": true
-                  },
-                  {
-                    "text": ") — це синтаксис створення рядків у JavaScript з підтримкою інтерполяції, багаторядковості та виразів. Запроваджені в ES6."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні можливості:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Інтерполяція:",
-                    "bold": true
-                  },
-                  {
-                    "text": " використання ${...}."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Багаторядкові рядки:",
-                    "bold": true
-                  },
-                  {
-                    "text": " без \\n."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Вирази та виклики функцій:",
-                    "bold": true
-                  },
-                  {
-                    "text": " всередині рядка."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Теговані шаблони:",
-                    "bold": true
-                  },
-                  {
-                    "text": " рядок обробляється функцією."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "65. What are template literals?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Template Literals"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Template literals ("
-                  },
-                  {
-                    "text": "Template Literals",
-                    "code": true
-                  },
-                  {
-                    "text": ") are a string syntax in JavaScript that supports interpolation, multiline strings, and expressions. Introduced in ES6."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Main features:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Interpolation:",
-                    "bold": true
-                  },
-                  {
-                    "text": " using ${...}."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Multiline strings:",
-                    "bold": true
-                  },
-                  {
-                    "text": " without \\n."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Expressions and function calls:",
-                    "bold": true
-                  },
-                  {
-                    "text": " inside strings."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tagged templates:",
-                    "bold": true
-                  },
-                  {
-                    "text": " strings processed by a function."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "65. Czym są template literals?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Template Literals"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Template literals ("
-                  },
-                  {
-                    "text": "Template Literals",
-                    "code": true
-                  },
-                  {
-                    "text": ") to składnia tworzenia łańcuchów w JavaScript z interpolacją, wieloliniowością i wyrażeniami. Wprowadzone w ES6."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne możliwości:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Interpolacja:",
-                    "bold": true
-                  },
-                  {
-                    "text": " składnia ${...}."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Napisy wieloliniowe:",
-                    "bold": true
-                  },
-                  {
-                    "text": " bez \\n."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wyrażenia i funkcje:",
-                    "bold": true
-                  },
-                  {
-                    "text": " wewnątrz stringów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Szablony tagowane:",
-                    "bold": true
-                  },
-                  {
-                    "text": " przetwarzane przez funkcję."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 66,
-    "translations": {
-      "uk": {
-        "question": "66. Що таке модулі (Modules)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Модулі (Modules)",
-                "bold": true
-              },
-              {
-                "text": " в JavaScript — це спосіб організації коду шляхом поділу програми на ізольовані файли з явними залежностями. Вони підвищують читабельність, повторне використання та підтримуваність коду."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні концепції:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Експорт:",
-                    "bold": true
-                  },
-                  {
-                    "text": " відкриває частини модуля для інших файлів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Імпорт:",
-                    "bold": true
-                  },
-                  {
-                    "text": " підключає експортований код з інших модулів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ізоляція:",
-                    "bold": true
-                  },
-                  {
-                    "text": " кожен модуль має власну область видимості."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Strict mode:",
-                    "bold": true
-                  },
-                  {
-                    "text": " увімкнений за замовчуванням."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Модулі дозволяють чітко керувати залежностями та уникати глобального простору імен."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "66. What are modules?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Modules",
-                "bold": true
-              },
-              {
-                "text": " in JavaScript are a way to organize code by splitting programs into isolated files with explicit dependencies. They improve structure, reuse, and maintainability."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Core concepts:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Export:",
-                    "bold": true
-                  },
-                  {
-                    "text": " exposes module members."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Import:",
-                    "bold": true
-                  },
-                  {
-                    "text": " consumes exported members."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Isolation:",
-                    "bold": true
-                  },
-                  {
-                    "text": " each module has its own scope."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Strict mode:",
-                    "bold": true
-                  },
-                  {
-                    "text": " enabled by default."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Modules make dependencies explicit and prevent global namespace pollution."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "66. Czym są moduły?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Moduły (Modules)",
-                "bold": true
-              },
-              {
-                "text": " w JavaScript to sposób organizacji kodu poprzez podział programu na odizolowane pliki z jawnymi zależnościami. Ułatwiają utrzymanie i ponowne użycie kodu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne pojęcia:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Eksport:",
-                    "bold": true
-                  },
-                  {
-                    "text": " udostępnia elementy modułu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Import:",
-                    "bold": true
-                  },
-                  {
-                    "text": " pobiera elementy z innych modułów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Izolacja:",
-                    "bold": true
-                  },
-                  {
-                    "text": " każdy moduł ma własny zakres."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tryb ścisły:",
-                    "bold": true
-                  },
-                  {
-                    "text": " aktywny domyślnie."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Moduły jasno definiują zależności i chronią przed konfliktami nazw."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 67,
-    "translations": {
-      "uk": {
-        "question": "67. Навіщо потрібен оператор опціональної послідовності?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Optional Chaining",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Оператор опціональної послідовності ("
-                  },
-                  {
-                    "text": "Optional Chaining",
-                    "bold": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "?.",
-                    "code": true
-                  },
-                  {
-                    "text": ") дозволяє безпечно звертатися до властивостей, методів або елементів масивів, якщо частина ланцюжка може бути null або undefined."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Як працює:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перевірка існування:",
-                    "bold": true
-                  },
-                  {
-                    "text": " якщо значення існує, воно повертається, інакше — "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Без помилок виконання:",
-                    "bold": true
-                  },
-                  {
-                    "text": " не викликає винятків при null або undefined."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Оператор зменшує кількість перевірок і робить код читабельнішим."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "67. Why is the optional chaining operator needed?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Optional Chaining",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The optional chaining operator ("
-                  },
-                  {
-                    "text": "?.",
-                    "code": true
-                  },
-                  {
-                    "text": ") provides safe access to object properties, methods, or array elements when parts of the chain may be null or undefined."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "How it works:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Existence check:",
-                    "bold": true
-                  },
-                  {
-                    "text": " returns the value if present, otherwise "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "No runtime errors:",
-                    "bold": true
-                  },
-                  {
-                    "text": " safely stops evaluation on null or undefined."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "It reduces boilerplate checks and improves code readability."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "67. Do czego służy operator optional chaining?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Optional Chaining",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Operator optional chaining ("
-                  },
-                  {
-                    "text": "?.",
-                    "code": true
-                  },
-                  {
-                    "text": ") umożliwia bezpieczny dostęp do właściwości, metod lub elementów tablic, gdy część łańcucha może być null lub undefined."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Jak działa:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Sprawdzenie istnienia:",
-                    "bold": true
-                  },
-                  {
-                    "text": " zwraca wartość lub "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Brak błędów wykonania:",
-                    "bold": true
-                  },
-                  {
-                    "text": " bezpiecznie przerywa odczyt."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Upraszcza kod i eliminuje ręczne sprawdzanie zagnieżdżeń."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 68,
-    "translations": {
-      "uk": {
-        "question": "68. Що таке генератори?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Генератори"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Генератори",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це спеціальні функції, які можуть призупиняти та відновлювати виконання. Вони оголошуються через "
-                  },
-                  {
-                    "text": "function*",
-                    "code": true
-                  },
-                  {
-                    "text": " і використовують "
-                  },
-                  {
-                    "text": "yield",
-                    "code": true
-                  },
-                  {
-                    "text": " для поетапного повернення значень."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Ключові властивості:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Призупинення виконання:",
-                    "bold": true
-                  },
-                  {
-                    "text": " виконання зупиняється на "
-                  },
-                  {
-                    "text": "yield",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відновлення:",
-                    "bold": true
-                  },
-                  {
-                    "text": " продовження через "
-                  },
-                  {
-                    "text": "next()",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ітератори:",
-                    "bold": true
-                  },
-                  {
-                    "text": " підтримують "
-                  },
-                  {
-                    "text": "for...of",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Генератори корисні для створення послідовностей, керування потоком виконання та складної ітерації."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "68. What are generators?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Generators"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Generators",
-                    "bold": true
-                  },
-                  {
-                    "text": " are special functions that can pause and resume execution. They are defined with "
-                  },
-                  {
-                    "text": "function*",
-                    "code": true
-                  },
-                  {
-                    "text": " and use "
-                  },
-                  {
-                    "text": "yield",
-                    "code": true
-                  },
-                  {
-                    "text": " to return intermediate values."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Key properties:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Paused execution:",
-                    "bold": true
-                  },
-                  {
-                    "text": " stops at "
-                  },
-                  {
-                    "text": "yield",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Resumable:",
-                    "bold": true
-                  },
-                  {
-                    "text": " continues via "
-                  },
-                  {
-                    "text": "next()",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Iterators:",
-                    "bold": true
-                  },
-                  {
-                    "text": " usable in "
-                  },
-                  {
-                    "text": "for...of",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Generators are useful for sequences, controlled execution flow, and custom iteration."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "68. Czym są generatory?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Generatory"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Generatory",
-                    "bold": true
-                  },
-                  {
-                    "text": " to specjalne funkcje, które mogą wstrzymywać i wznawiać wykonanie. Definiuje się je za pomocą "
-                  },
-                  {
-                    "text": "function*",
-                    "code": true
-                  },
-                  {
-                    "text": " oraz operatora "
-                  },
-                  {
-                    "text": "yield",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Najważniejsze cechy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wstrzymanie wykonania:",
-                    "bold": true
-                  },
-                  {
-                    "text": " zatrzymanie na "
-                  },
-                  {
-                    "text": "yield",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wznawianie:",
-                    "bold": true
-                  },
-                  {
-                    "text": " kontynuacja przez "
-                  },
-                  {
-                    "text": "next()",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Iteratory:",
-                    "bold": true
-                  },
-                  {
-                    "text": " obsługa "
-                  },
-                  {
-                    "text": "for...of",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Generatory są użyteczne do tworzenia sekwencji, kontroli przepływu i iteracji."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 69,
-    "translations": {
-      "uk": {
-        "question": "69. Що таке регулярні вирази (RegEx)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "RegEx",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Регулярні вирази",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це шаблони для пошуку, перевірки та зміни тексту. Вони описують текстові патерни за допомогою спеціального синтаксису."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні можливості:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Пошук підрядків.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Валідація форматів.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Заміна частин тексту.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "RegEx активно використовуються для обробки рядків, але складні шаблони важко читати та підтримувати."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "69. What are regular expressions (RegEx)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "RegEx",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Regular expressions",
-                    "bold": true
-                  },
-                  {
-                    "text": " are patterns used to search, validate, and manipulate text using a compact syntax."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Main capabilities:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Substring search.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Format validation.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Text replacement.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "RegEx is powerful but complex patterns reduce readability and may impact performance."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "69. Czym są wyrażenia regularne (RegEx)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "RegEx",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wyrażenia regularne",
-                    "bold": true
-                  },
-                  {
-                    "text": " to wzorce służące do wyszukiwania, walidacji i modyfikacji tekstu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne zastosowania:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wyszukiwanie tekstu.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Sprawdzanie formatów.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zamiana fragmentów.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "RegEx jest potężny, ale trudny w utrzymaniu przy złożonych wzorcach."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 70,
-    "translations": {
-      "uk": {
-        "question": "70. Що таке temporal dead zone?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Temporal Dead Zone (TDZ)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це проміжок між початком області видимості змінної, оголошеної через "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " або "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": ", і моментом її ініціалізації. У цей час доступ до змінної викликає "
-                  },
-                  {
-                    "text": "ReferenceError",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Ключові моменти:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Hoisting без ініціалізації:",
-                    "bold": true
-                  },
-                  {
-                    "text": " змінна піднімається, але недоступна до оголошення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Помилка доступу:",
-                    "bold": true
-                  },
-                  {
-                    "text": " звернення до змінної в TDZ призводить до "
-                  },
-                  {
-                    "text": "ReferenceError",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відмінність від var:",
-                    "bold": true
-                  },
-                  {
-                    "text": " змінні через "
-                  },
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "text": " не мають TDZ і ініціалізуються значенням undefined."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "70. What is the temporal dead zone?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Temporal Dead Zone (TDZ)",
-                    "bold": true
-                  },
-                  {
-                    "text": " is the period between entering a scope and the actual initialization of a variable declared with "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " or "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": ". Accessing it during this time throws a "
-                  },
-                  {
-                    "text": "ReferenceError",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Key points:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Hoisted but uninitialized:",
-                    "bold": true
-                  },
-                  {
-                    "text": " the binding exists but cannot be accessed."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Runtime error:",
-                    "bold": true
-                  },
-                  {
-                    "text": " accessing the variable results in "
-                  },
-                  {
-                    "text": "ReferenceError",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Difference from var:",
-                    "bold": true
-                  },
-                  {
-                    "text": " variables declared with "
-                  },
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "text": " do not have TDZ and are initialized to undefined."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "70. Czym jest temporal dead zone?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Temporal Dead Zone (TDZ)",
-                    "bold": true
-                  },
-                  {
-                    "text": " to okres pomiędzy wejściem w zakres a inicjalizacją zmiennej zadeklarowanej przez "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " lub "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": ". Dostęp w tym czasie powoduje "
-                  },
-                  {
-                    "text": "ReferenceError",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Najważniejsze informacje:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Hoisting bez inicjalizacji:",
-                    "bold": true
-                  },
-                  {
-                    "text": " zmienna istnieje, ale jest niedostępna."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Błąd wykonania:",
-                    "bold": true
-                  },
-                  {
-                    "text": " odwołanie skutkuje "
-                  },
-                  {
-                    "text": "ReferenceError",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Różnica względem var:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "text": " nie posiada TDZ i inicjalizuje się jako undefined."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 71,
-    "translations": {
-      "uk": {
-        "question": "71. Яка різниця між function declaration та function expression?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Різниця між "
-              },
-              {
-                "text": "Function Declaration",
-                "code": true
-              },
-              {
-                "text": " та "
-              },
-              {
-                "text": "Function Expression",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Властивість"
-                }
-              ],
-              [
-                {
-                  "text": "Function Declaration"
-                }
-              ],
-              [
-                {
-                  "text": "Function Expression"
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Синтаксис",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "function name() {}",
-                    "code": true
-                  }
-                ],
-                [
-                  {
-                    "text": "const name = function() {}",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "() => {}",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Hoisting",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Піднімається повністю"
-                  }
-                ],
-                [
-                  {
-                    "text": "Піднімається лише змінна"
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Виклик до оголошення",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Дозволено"
-                  }
-                ],
-                [
-                  {
-                    "text": "Помилка"
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Function Declaration доступна до оголошення, Function Expression — тільки після ініціалізації."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "71. What is the difference between function declaration and function expression?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference between "
-              },
-              {
-                "text": "Function Declaration",
-                "code": true
-              },
-              {
-                "text": " and "
-              },
-              {
-                "text": "Function Expression",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Property"
-                }
-              ],
-              [
-                {
-                  "text": "Function Declaration"
-                }
-              ],
-              [
-                {
-                  "text": "Function Expression"
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Syntax",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "function name() {}",
-                    "code": true
-                  }
-                ],
-                [
-                  {
-                    "text": "const name = function() {}",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "() => {}",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Hoisting",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Fully hoisted"
-                  }
-                ],
-                [
-                  {
-                    "text": "Only variable hoisted"
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Call before definition",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Allowed"
-                  }
-                ],
-                [
-                  {
-                    "text": "Error"
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Function declarations are callable before definition, expressions are not."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "71. Jaka jest różnica między function declaration a function expression?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnica między "
-              },
-              {
-                "text": "Function Declaration",
-                "code": true
-              },
-              {
-                "text": " a "
-              },
-              {
-                "text": "Function Expression",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Właściwość"
-                }
-              ],
-              [
-                {
-                  "text": "Function Declaration"
-                }
-              ],
-              [
-                {
-                  "text": "Function Expression"
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Składnia",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "function name() {}",
-                    "code": true
-                  }
-                ],
-                [
-                  {
-                    "text": "const name = function() {}",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "() => {}",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Hoisting",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Pełny hoisting"
-                  }
-                ],
-                [
-                  {
-                    "text": "Tylko zmienna"
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Wywołanie przed deklaracją",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Dozwolone"
-                  }
-                ],
-                [
-                  {
-                    "text": "Błąd"
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Deklaracje funkcji są dostępne wcześniej niż ich definicja."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 72,
-    "translations": {
-      "uk": {
-        "question": "72. Типи таймерів у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Типи таймерів у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "setTimeout",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Виконує код один раз після заданої затримки."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "setInterval",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Виконує код регулярно з фіксованим інтервалом."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Таймери працюють через Event Loop і не гарантують точної затримки."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "72. What types of timers exist in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Timer types in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "setTimeout",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Executes code once after a delay."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "setInterval",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Executes code repeatedly at a fixed interval."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Timers depend on the Event Loop and are not precise."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "72. Jakie są typy timerów w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Typy timerów w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "setTimeout",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Uruchamia kod jednorazowo po opóźnieniu."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "setInterval",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Uruchamia kod cyklicznie w stałych odstępach."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Timery są obsługiwane przez Event Loop i nie gwarantują dokładnego czasu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 73,
-    "translations": {
-      "uk": {
-        "question": "73. Які методи рядків у JavaScript ти знаєш?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Методи рядків у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "length",
-                    "code": true
-                  },
-                  {
-                    "text": " — довжина рядка."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "toUpperCase()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "toLowerCase()",
-                    "code": true
-                  },
-                  {
-                    "text": " — зміна регістру."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "trim()",
-                    "code": true
-                  },
-                  {
-                    "text": " — обрізання пробілів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "includes()",
-                    "code": true
-                  },
-                  {
-                    "text": " — перевірка наявності підрядка."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "indexOf()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "lastIndexOf()",
-                    "code": true
-                  },
-                  {
-                    "text": " — пошук індексу."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "slice()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "substring()",
-                    "code": true
-                  },
-                  {
-                    "text": " — отримання частини рядка."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "replace()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "replaceAll()",
-                    "code": true
-                  },
-                  {
-                    "text": " — заміна фрагментів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "split()",
-                    "code": true
-                  },
-                  {
-                    "text": " — розбиття на масив."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "startsWith()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "endsWith()",
-                    "code": true
-                  },
-                  {
-                    "text": " — перевірка початку або кінця."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "repeat()",
-                    "code": true
-                  },
-                  {
-                    "text": " — повторення рядка."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "padStart()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "padEnd()",
-                    "code": true
-                  },
-                  {
-                    "text": " — доповнення рядка."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "charAt()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "charCodeAt()",
-                    "code": true
-                  },
-                  {
-                    "text": " — доступ до символів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "match()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "matchAll()",
-                    "code": true
-                  },
-                  {
-                    "text": " — робота з RegEx."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "73. What string methods do you know in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "String methods in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "length",
-                    "code": true
-                  },
-                  {
-                    "text": " — string length."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "toUpperCase()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "toLowerCase()",
-                    "code": true
-                  },
-                  {
-                    "text": " — case conversion."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "trim()",
-                    "code": true
-                  },
-                  {
-                    "text": " — removes whitespace."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "includes()",
-                    "code": true
-                  },
-                  {
-                    "text": " — substring check."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "indexOf()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "lastIndexOf()",
-                    "code": true
-                  },
-                  {
-                    "text": " — index search."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "slice()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "substring()",
-                    "code": true
-                  },
-                  {
-                    "text": " — extract substring."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "replace()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "replaceAll()",
-                    "code": true
-                  },
-                  {
-                    "text": " — replace text."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "split()",
-                    "code": true
-                  },
-                  {
-                    "text": " — split into array."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "startsWith()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "endsWith()",
-                    "code": true
-                  },
-                  {
-                    "text": " — prefix/suffix check."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "repeat()",
-                    "code": true
-                  },
-                  {
-                    "text": " — repeat string."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "padStart()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "padEnd()",
-                    "code": true
-                  },
-                  {
-                    "text": " — pad string."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "charAt()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "charCodeAt()",
-                    "code": true
-                  },
-                  {
-                    "text": " — character access."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "match()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "matchAll()",
-                    "code": true
-                  },
-                  {
-                    "text": " — RegEx matching."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "73. Jakie metody stringów znasz w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Metody stringów w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "length",
-                    "code": true
-                  },
-                  {
-                    "text": " — długość ciągu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "toUpperCase()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "toLowerCase()",
-                    "code": true
-                  },
-                  {
-                    "text": " — zmiana wielkości liter."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "trim()",
-                    "code": true
-                  },
-                  {
-                    "text": " — usuwa spacje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "includes()",
-                    "code": true
-                  },
-                  {
-                    "text": " — sprawdzanie zawartości."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "indexOf()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "lastIndexOf()",
-                    "code": true
-                  },
-                  {
-                    "text": " — wyszukiwanie indeksu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "slice()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "substring()",
-                    "code": true
-                  },
-                  {
-                    "text": " — wycinanie fragmentów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "replace()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "replaceAll()",
-                    "code": true
-                  },
-                  {
-                    "text": " — zamiana tekstu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "split()",
-                    "code": true
-                  },
-                  {
-                    "text": " — podział na tablicę."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "startsWith()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "endsWith()",
-                    "code": true
-                  },
-                  {
-                    "text": " — sprawdzanie początku i końca."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "repeat()",
-                    "code": true
-                  },
-                  {
-                    "text": " — powielanie ciągu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "padStart()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "padEnd()",
-                    "code": true
-                  },
-                  {
-                    "text": " — uzupełnianie ciągu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "charAt()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "charCodeAt()",
-                    "code": true
-                  },
-                  {
-                    "text": " — dostęp do znaków."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "match()",
-                    "code": true
-                  },
-                  {
-                    "text": " / "
-                  },
-                  {
-                    "text": "matchAll()",
-                    "code": true
-                  },
-                  {
-                    "text": " — praca z RegEx."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 74,
-    "translations": {
-      "uk": {
-        "question": "74. Які методи масивів у JavaScript ти знаєш?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Методи масивів у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript надає багатий набір методів для роботи з масивами. Нижче наведені основні з них:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "length",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повертає кількість елементів у масиві."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1, 2, 3];\nconsole.log(arr.length); // 3"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "74. What array methods do you know in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Array methods in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript provides a rich set of methods for working with arrays. Below are the main ones:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "length",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Returns the number of elements in an array."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1, 2, 3];\nconsole.log(arr.length); // 3"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "74. Jakie metody tablic znasz w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Metody tablic w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript oferuje bogaty zestaw metod do pracy z tablicami. Poniżej przedstawiono najważniejsze z nich:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "length",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zwraca liczbę elementów w tablicy."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1, 2, 3];\nconsole.log(arr.length); // 3"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 75,
-    "translations": {
-      "uk": {
-        "question": "75. Що таке чиста функція?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Що таке чиста функція?"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Чиста функція (Pure Function)",
-                    "bold": true
-                  },
-                  {
-                    "text": " - це функція, яка має такі характеристики:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Детермінованість",
-                    "bold": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повертає однаковий результат для однакових вхідних даних."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відсутність побічних ефектів",
-                    "bold": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Не змінює зовнішній стан і не взаємодіє з ним."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Приклад чистої функції:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "function add(a, b) {\n  return a + b;\n}"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "75. What is a pure function?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "What is a pure function?"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A pure function",
-                    "bold": true
-                  },
-                  {
-                    "text": " is a function with the following properties:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Determinism",
-                    "bold": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Returns the same output for the same input."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "No side effects",
-                    "bold": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Does not modify external state or rely on it."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Example of a pure function:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "function add(a, b) {\n  return a + b;\n}"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "75. Czym jest funkcja czysta?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Czym jest funkcja czysta?"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcja czysta (Pure Function)",
-                    "bold": true
-                  },
-                  {
-                    "text": " to funkcja o następujących cechach:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Deterministyczność",
-                    "bold": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zwraca ten sam wynik dla tych samych danych wejściowych."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Brak efektów ubocznych",
-                    "bold": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Nie modyfikuje stanu zewnętrznego."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przykład funkcji czystej:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "function add(a, b) {\n  return a + b;\n}"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 76,
-    "translations": {
-      "uk": {
-        "question": "76. Як визначити наявність властивості в об'єкті?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Визначення властивості в об'єкті"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "У JavaScript існує кілька способів перевірити, чи має об'єкт певну властивість:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Оператор in",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Перевіряє власні та успадковані властивості."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const obj = { name: 'Alice' };\nconsole.log('name' in obj); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "hasOwnProperty()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Перевіряє лише власні властивості об'єкта."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(obj.hasOwnProperty('name')); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перевірка на undefined",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Підходить, якщо значення не дорівнює undefined."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(obj.name !== undefined); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "76. How can you check if an object has a property?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Checking for a property in an object"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript provides several ways to check whether an object contains a specific property:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "in operator",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Checks both own and inherited properties."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const obj = { name: 'Alice' };\nconsole.log('name' in obj); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "hasOwnProperty()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Checks only the object's own properties."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(obj.hasOwnProperty('name')); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Undefined check",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Works if the property value is not undefined."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(obj.name !== undefined); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "76. Jak sprawdzić, czy obiekt ma daną właściwość?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Sprawdzanie właściwości w obiekcie"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "W JavaScript istnieje kilka sposobów sprawdzenia, czy obiekt zawiera określoną właściwość:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Operator in",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Sprawdza właściwości własne i dziedziczone."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const obj = { name: 'Alice' };\nconsole.log('name' in obj); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "hasOwnProperty()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Sprawdza tylko własne właściwości obiektu."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(obj.hasOwnProperty('name')); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Sprawdzenie undefined",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Działa, jeśli wartość nie jest undefined."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "console.log(obj.name !== undefined); // true"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 77,
-    "translations": {
-      "uk": {
-        "question": "77. Різниця між host-об'єктами та нативними об'єктами?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Різниця між Host-об'єктами та Нативними об'єктами в JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript містить два класи об'єктів: ",
-                    "bold": false
-                  },
-                  {
-                    "text": "Host-об'єкти",
-                    "bold": true
-                  },
-                  {
-                    "text": " та ",
-                    "bold": false
-                  },
-                  {
-                    "text": "Нативні об'єкти",
-                    "bold": true
-                  },
-                  {
-                    "text": ".",
-                    "bold": false
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Host-об'єкти",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Надаються середовищем виконання (браузер, Node.js)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Залежать від конкретного середовища."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Приклади:"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "window",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "document",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "console",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Нативні об'єкти",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Є частиною специфікації ECMAScript."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Доступні у будь-якому середовищі JavaScript."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Приклади:"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Array",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Date",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "77. What is the difference between host objects and native objects?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference between Host Objects and Native Objects in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript has two categories of objects: ",
-                    "bold": false
-                  },
-                  {
-                    "text": "Host objects",
-                    "bold": true
-                  },
-                  {
-                    "text": " and ",
-                    "bold": false
-                  },
-                  {
-                    "text": "Native objects",
-                    "bold": true
-                  },
-                  {
-                    "text": ".",
-                    "bold": false
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Host objects",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Provided by the runtime environment (browser, Node.js)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Depend on the execution environment."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Examples:"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "window",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "document",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "console",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Native objects",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Defined by the ECMAScript specification."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Available in all JavaScript environments."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Examples:"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Array",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Date",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "77. Jaka jest różnica między obiektami hosta a obiektami natywnymi?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnica między obiektami hosta a obiektami natywnymi w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript posiada dwie grupy obiektów: ",
-                    "bold": false
-                  },
-                  {
-                    "text": "obiekty hosta",
-                    "bold": true
-                  },
-                  {
-                    "text": " oraz ",
-                    "bold": false
-                  },
-                  {
-                    "text": "obiekty natywne",
-                    "bold": true
-                  },
-                  {
-                    "text": ".",
-                    "bold": false
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekty hosta",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Dostarczane przez środowisko uruchomieniowe (przeglądarka, Node.js)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zależne od środowiska wykonania."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przykłady:"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "window",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "document",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "console",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekty natywne",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zdefiniowane w specyfikacji ECMAScript."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Dostępne w każdym środowisku JavaScript."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przykłady:"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Array",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Date",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 78,
-    "translations": {
-      "uk": {
-        "question": "78. Що таке об'єктна обгортка (Wrapper Objects)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Об'єктна обгортка (Wrapper Objects)"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Об'єктна обгортка",
-                    "bold": true
-                  },
-                  {
-                    "text": " - це тимчасовий об'єкт, який JavaScript автоматично створює для примітивних типів ("
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "boolean",
-                    "code": true
-                  },
-                  {
-                    "text": "), щоб надати доступ до методів і властивостей."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Як працює:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Створюється тимчасовий об'єкт-обгортка."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Виконується виклик методу або властивості."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Об'єкт-обгортка одразу видаляється."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Приклад:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const str = 'hello';\nconsole.log(str.toUpperCase()); // \"HELLO\""
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "78. What are wrapper objects?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Wrapper Objects"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A wrapper object",
-                    "bold": true
-                  },
-                  {
-                    "text": " is a temporary object automatically created by JavaScript for primitive types ("
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "boolean",
-                    "code": true
-                  },
-                  {
-                    "text": ") to provide access to methods and properties."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "How it works:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "A temporary wrapper object is created."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The method or property is accessed."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The wrapper object is immediately discarded."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Example:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const num = 42;\nconsole.log(num.toFixed(2)); // \"42.00\""
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "78. Czym są obiekty opakowujące (Wrapper Objects)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Obiekty opakowujące (Wrapper Objects)"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekt opakowujący",
-                    "bold": true
-                  },
-                  {
-                    "text": " to tymczasowy obiekt tworzony automatycznie przez JavaScript dla typów prymitywnych ("
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "boolean",
-                    "code": true
-                  },
-                  {
-                    "text": "), aby umożliwić dostęp do metod i właściwości."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jak to działa:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Tworzony jest tymczasowy obiekt opakowujący."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Następuje dostęp do metody lub właściwości."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Obiekt jest natychmiast usuwany."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przykład:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const bool = true;\nconsole.log(bool.toString()); // \"true\""
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 79,
-    "translations": {
-      "uk": {
-        "question": "79. Навіщо використовується оператор залишку (%)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Використання оператора залишку (%)"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Оператор ",
-                    "bold": false
-                  },
-                  {
-                    "text": "%",
-                    "code": true
-                  },
-                  {
-                    "text": " використовується для отримання залишку від ділення одного числа на інше."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обчислення залишку",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "console.log(10 % 3); // 1"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перевірка парності",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const isEven = n => n % 2 === 0;\nconsole.log(isEven(4)); // true"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Циклічні обчислення",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const arr = ['a', 'b', 'c'];\nconsole.log(arr[5 % arr.length]); // 'c'"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "79. What is the remainder operator (%) used for?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Usage of the remainder operator (%)"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The ",
-                    "bold": false
-                  },
-                  {
-                    "text": "%",
-                    "code": true
-                  },
-                  {
-                    "text": " operator returns the remainder of a division."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Remainder calculation",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "console.log(10 % 3); // 1"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Even or odd check",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const isEven = n => n % 2 === 0;\nconsole.log(isEven(7)); // false"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Cyclic indexing",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const arr = ['a', 'b', 'c'];\nconsole.log(arr[5 % arr.length]); // 'c'"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "79. Do czego służy operator reszty (%)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zastosowanie operatora reszty (%)"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Operator ",
-                    "bold": false
-                  },
-                  {
-                    "text": "%",
-                    "code": true
-                  },
-                  {
-                    "text": " zwraca resztę z dzielenia jednej liczby przez drugą."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obliczanie reszty",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "console.log(10 % 3); // 1"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Sprawdzanie parzystości",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const isEven = n => n % 2 === 0;\nconsole.log(isEven(4)); // true"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Indeksowanie cykliczne",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const arr = ['a', 'b', 'c'];\nconsole.log(arr[5 % arr.length]); // 'c'"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 80,
-    "translations": {
-      "uk": {
-        "question": "80. Як працює boxing / unboxing у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Boxing / Unboxing у JavaScript",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Boxing",
-                    "bold": true
-                  },
-                  {
-                    "text": " та "
-                  },
-                  {
-                    "text": "Unboxing",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це автоматичні перетворення між примітивами ("
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "boolean",
-                    "code": true
-                  },
-                  {
-                    "text": ") та їх обʼєктними обгортками ("
-                  },
-                  {
-                    "text": "String",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "Number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "Boolean",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Boxing (обгортання)"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Автоматичне створення тимчасового обʼєкта-обгортки для примітиву при доступі до методів."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const str = 'hello';\nconsole.log(str.toUpperCase()); // \"HELLO\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Unboxing (розпаковка)"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Отримання примітивного значення з обʼєкта через ",
-                    "bold": false
-                  },
-                  {
-                    "text": "valueOf()",
-                    "code": true
-                  },
-                  {
-                    "text": " або ",
-                    "bold": false
-                  },
-                  {
-                    "text": "toString()",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const num = new Number(42);\nconsole.log(num + 8); // 50"
-          }
-        ]
-      },
-      "en": {
-        "question": "80. How does boxing / unboxing work in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Boxing / Unboxing in JavaScript",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Boxing",
-                    "bold": true
-                  },
-                  {
-                    "text": " and "
-                  },
-                  {
-                    "text": "Unboxing",
-                    "bold": true
-                  },
-                  {
-                    "text": " are automatic conversions between primitives ("
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "boolean",
-                    "code": true
-                  },
-                  {
-                    "text": ") and their wrapper objects ("
-                  },
-                  {
-                    "text": "String",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "Number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "Boolean",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Boxing"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "A temporary wrapper object is created when accessing methods on a primitive."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const str = 'hello';\nconsole.log(str.toUpperCase()); // \"HELLO\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Unboxing"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Primitive value is extracted using ",
-                    "bold": false
-                  },
-                  {
-                    "text": "valueOf()",
-                    "code": true
-                  },
-                  {
-                    "text": " or ",
-                    "bold": false
-                  },
-                  {
-                    "text": "toString()",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const num = new Number(42);\nconsole.log(num + 8); // 50"
-          }
-        ]
-      },
-      "pl": {
-        "question": "80. Jak działa boxing / unboxing w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Boxing / Unboxing w JavaScript",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Boxing",
-                    "bold": true
-                  },
-                  {
-                    "text": " oraz "
-                  },
-                  {
-                    "text": "Unboxing",
-                    "bold": true
-                  },
-                  {
-                    "text": " to automatyczne konwersje między typami prymitywnymi ("
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "boolean",
-                    "code": true
-                  },
-                  {
-                    "text": ") a obiektami opakowującymi ("
-                  },
-                  {
-                    "text": "String",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "Number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "Boolean",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Boxing"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tworzony jest tymczasowy obiekt opakowujący dla prymitywu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const str = 'hello';\nconsole.log(str.toUpperCase()); // \"HELLO\""
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Unboxing"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pobranie wartości prymitywnej przez ",
-                    "bold": false
-                  },
-                  {
-                    "text": "valueOf()",
-                    "code": true
-                  },
-                  {
-                    "text": " lub ",
-                    "bold": false
-                  },
-                  {
-                    "text": "toString()",
-                    "code": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const num = new Number(42);\nconsole.log(num + 8); // 50"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 81,
-    "translations": {
-      "uk": {
-        "question": "81. Що таке мемоізація?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Мемоізація"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Мемоізація",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це техніка оптимізації, яка зберігає результати викликів функції для повторного використання при однакових аргументах."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перевірка кешу для переданих аргументів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Повернення збереженого результату, якщо він існує."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обчислення і збереження результату, якщо його немає."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function memoize(fn) {\n  const cache = new Map();\n  return (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) return cache.get(key);\n    const res = fn(...args);\n    cache.set(key, res);\n    return res;\n  };\n}"
-          }
-        ]
-      },
-      "en": {
-        "question": "81. What is memoization?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Memoization"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Memoization",
-                    "bold": true
-                  },
-                  {
-                    "text": " is an optimization technique that caches function results to avoid repeated computations for the same inputs."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Check cache for given arguments."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Return cached result if available."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Compute, store, and return result if not cached."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function memoize(fn) {\n  const cache = new Map();\n  return (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) return cache.get(key);\n    const res = fn(...args);\n    cache.set(key, res);\n    return res;\n  };\n}"
-          }
-        ]
-      },
-      "pl": {
-        "question": "81. Czym jest memoizacja?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Memoizacja"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Memoizacja",
-                    "bold": true
-                  },
-                  {
-                    "text": " to technika optymalizacji polegająca na zapisywaniu wyników funkcji w celu uniknięcia ponownych obliczeń dla tych samych argumentów."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Sprawdzenie pamięci podręcznej."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zwrócenie zapisanego wyniku."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obliczenie i zapis wyniku, jeśli go brak."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function memoize(fn) {\n  const cache = new Map();\n  return (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) return cache.get(key);\n    const res = fn(...args);\n    cache.set(key, res);\n    return res;\n  };\n}"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 82,
-    "translations": {
-      "uk": {
-        "question": "82. Різниця між глибокою (deep) та поверхневою (shallow) копіями об'єкта?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Різниця між глибокою (deep) та поверхневою (shallow) копіями об'єкта"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Критерій",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Shallow Copy",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Deep Copy",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Рівень копіювання",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Лише перший рівень властивостей"
-                  }
-                ],
-                [
-                  {
-                    "text": "Усі рівні об'єкта рекурсивно"
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Вкладені обʼєкти",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Копіюються за посиланням"
-                  }
-                ],
-                [
-                  {
-                    "text": "Створюються нові незалежні обʼєкти"
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Побічні ефекти",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Можливі"
-                  }
-                ],
-                [
-                  {
-                    "text": "Відсутні"
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклади"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Shallow copy:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const a = { x: { y: 1 } };\nconst b = { ...a };\nb.x.y = 2;\nconsole.log(a.x.y); // 2"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Deep copy:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const a = { x: { y: 1 } };\nconst b = JSON.parse(JSON.stringify(a));\nb.x.y = 2;\nconsole.log(a.x.y); // 1"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "82. What is the difference between deep and shallow copies of an object?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference between deep and shallow copies of an object"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Criterion",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Shallow Copy",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Deep Copy",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Copy depth",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Only top-level properties"
-                  }
-                ],
-                [
-                  {
-                    "text": "All nested levels recursively"
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Nested objects",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Copied by reference"
-                  }
-                ],
-                [
-                  {
-                    "text": "Fully cloned"
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Side effects",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Possible"
-                  }
-                ],
-                [
-                  {
-                    "text": "None"
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Examples"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Shallow copy:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const a = { x: { y: 1 } };\nconst b = { ...a };\nb.x.y = 2;\nconsole.log(a.x.y); // 2"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Deep copy:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const a = { x: { y: 1 } };\nconst b = JSON.parse(JSON.stringify(a));\nb.x.y = 2;\nconsole.log(a.x.y); // 1"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "82. Jaka jest różnica między płytką (shallow) a głęboką (deep) kopią obiektu?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnica między płytką a głęboką kopią obiektu"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Kryterium",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Shallow Copy",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Deep Copy",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Zakres kopiowania",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Tylko pierwszy poziom"
-                  }
-                ],
-                [
-                  {
-                    "text": "Wszystkie poziomy obiektu"
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Zagnieżdżone obiekty",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Kopiowane przez referencję"
-                  }
-                ],
-                [
-                  {
-                    "text": "Tworzone jako nowe obiekty"
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Efekty uboczne",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Możliwe"
-                  }
-                ],
-                [
-                  {
-                    "text": "Brak"
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykłady"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Shallow copy:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const a = { x: { y: 1 } };\nconst b = { ...a };\nb.x.y = 2;\nconsole.log(a.x.y); // 2"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Deep copy:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const a = { x: { y: 1 } };\nconst b = JSON.parse(JSON.stringify(a));\nb.x.y = 2;\nconsole.log(a.x.y); // 1"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 83,
-    "translations": {
-      "uk": {
-        "question": "83. Що таке ланцюжок викликів функцій (chaining)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Ланцюжок викликів функцій (chaining)"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ланцюжок викликів (chaining)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це техніка, за якої кілька методів викликаються послідовно в одному виразі, тому що кожен метод повертає обʼєкт ",
-                    "bold": false
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const result = ' JavaScript '\n  .trim()\n  .toUpperCase()\n  .replace('JAVASCRIPT', 'CHAINING');"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Переваги:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Код компактніший і читабельніший."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Усі методи повинні повертати обʼєкт для продовження ланцюжка."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "83. What is function call chaining?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Function call chaining"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Chaining",
-                    "bold": true
-                  },
-                  {
-                    "text": " is a technique where multiple methods are called sequentially in a single expression because each method returns ",
-                    "bold": false
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const result = [1, 2, 3, 4]\n  .filter(n => n % 2 === 0)\n  .map(n => n * 2)\n  .reduce((a, b) => a + b, 0);"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pros:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Cleaner and more expressive code."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "All chained methods must return the object itself."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "83. Czym jest chaining (łańcuch wywołań funkcji)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Łańcuch wywołań funkcji (chaining)"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Chaining",
-                    "bold": true
-                  },
-                  {
-                    "text": " to technika polegająca na wywoływaniu wielu metod jedna po drugiej w jednym wyrażeniu, ponieważ każda metoda zwraca ",
-                    "bold": false
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const result = ' JavaScript '\n  .trim()\n  .toLowerCase()\n  .replace('javascript', 'chaining');"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zalety:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Bardziej zwięzły i czytelny kod."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Metody muszą zwracać obiekt, aby łańcuch działał."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 84,
-    "translations": {
-      "uk": {
-        "question": "84. Що таке неоголошена змінна?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Неоголошена змінна"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Неоголошена змінна",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це змінна, яка використовується без оголошення через "
-                  },
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " або "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function test() {\n  x = 10; // неоголошена змінна\n}\n\ntest();\nconsole.log(x); // 10 (глобальна)"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "У строгому режимі ",
-                    "bold": false
-                  },
-                  {
-                    "text": "use strict",
-                    "code": true
-                  },
-                  {
-                    "text": " така змінна викликає помилку."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "84. What is an undeclared variable?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Undeclared variable"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "An undeclared variable",
-                    "bold": true
-                  },
-                  {
-                    "text": " is a variable used without being declared with "
-                  },
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " or "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function test() {\n  x = 10; // undeclared variable\n}\n\ntest();\nconsole.log(x); // 10 (global)"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "In ",
-                    "bold": false
-                  },
-                  {
-                    "text": "strict mode",
-                    "code": true
-                  },
-                  {
-                    "text": ", this causes a ReferenceError."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "84. Czym jest niezadeklarowana zmienna?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Niezadeklarowana zmienna"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Niezadeklarowana zmienna",
-                    "bold": true
-                  },
-                  {
-                    "text": " to zmienna użyta bez deklaracji za pomocą "
-                  },
-                  {
-                    "text": "var",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " lub "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function test() {\n  x = 10; // niezadeklarowana zmienna\n}\n\ntest();\nconsole.log(x); // 10 (globalna)"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "W trybie ",
-                    "bold": false
-                  },
-                  {
-                    "text": "strict",
-                    "code": true
-                  },
-                  {
-                    "text": " powoduje to błąd."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 85,
-    "translations": {
-      "uk": {
-        "question": "85. Як передаються параметри у функцію: за посиланням чи значенням?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Передача параметрів у функцію"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "У JavaScript всі параметри передаються ",
-                    "bold": false
-                  },
-                  {
-                    "text": "за значенням",
-                    "bold": true
-                  },
-                  {
-                    "text": ", але для обʼєктів цим значенням є ",
-                    "bold": false
-                  },
-                  {
-                    "text": "посилання",
-                    "bold": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Примітиви (number, string, boolean тощо) передаються як копії значень."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обʼєкти передаються як копія посилання на обʼєкт."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function changeValue(x) {\n  x = 20;\n}\nlet a = 10;\nchangeValue(a);\nconsole.log(a); // 10"
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function changeObject(obj) {\n  obj.name = 'Alice';\n}\nconst user = { name: 'Bob' };\nchangeObject(user);\nconsole.log(user.name); // Alice"
-          }
-        ]
-      },
-      "en": {
-        "question": "85. Are function parameters passed by value or by reference?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Function parameter passing"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "In JavaScript, all parameters are passed ",
-                    "bold": false
-                  },
-                  {
-                    "text": "by value",
-                    "bold": true
-                  },
-                  {
-                    "text": ", but for objects the value itself is a ",
-                    "bold": false
-                  },
-                  {
-                    "text": "reference",
-                    "bold": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Primitives are copied and cannot be modified from inside the function."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Objects are passed as references, so their internal state can be changed."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function changeValue(x) {\n  x = 20;\n}\nlet a = 10;\nchangeValue(a);\nconsole.log(a); // 10"
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function changeObject(obj) {\n  obj.name = 'Alice';\n}\nconst user = { name: 'Bob' };\nchangeObject(user);\nconsole.log(user.name); // Alice"
-          }
-        ]
-      },
-      "pl": {
-        "question": "85. Czy parametry funkcji są przekazywane przez wartość czy przez referencję?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przekazywanie parametrów do funkcji"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "W JavaScript wszystkie parametry są przekazywane ",
-                    "bold": false
-                  },
-                  {
-                    "text": "przez wartość",
-                    "bold": true
-                  },
-                  {
-                    "text": ", ale w przypadku obiektów tą wartością jest ",
-                    "bold": false
-                  },
-                  {
-                    "text": "referencja",
-                    "bold": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Typy prymitywne są kopiowane i nie zmieniają oryginału."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekty są przekazywane jako referencje, więc mogą być modyfikowane."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function changeValue(x) {\n  x = 20;\n}\nlet a = 10;\nchangeValue(a);\nconsole.log(a); // 10"
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function changeObject(obj) {\n  obj.name = 'Alice';\n}\nconst user = { name: 'Bob' };\nchangeObject(user);\nconsole.log(user.name); // Alice"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 86,
-    "translations": {
-      "uk": {
-        "question": "86. Плюси та мінуси іммутабельності? Як досягти іммутабельності у JS?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Іммутабельність у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Іммутабельність",
-                    "bold": true
-                  },
-                  {
-                    "text": " означає неможливість зміни даних після створення. Будь-яка зміна створює нове значення або обʼєкт."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Плюси:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Передбачуваність і простіше налагодження."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Менше побічних ефектів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зручність для функціонального програмування."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Мінуси:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Більше витрат памʼяті."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Потенційне падіння продуктивності."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const user = { name: 'Alice', age: 25 };\nconst updated = { ...user, age: 30 };"
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const frozen = Object.freeze({ x: 1 });\nfrozen.x = 2; // ігнорується або помилка в strict mode"
-          }
-        ]
-      },
-      "en": {
-        "question": "86. Pros and cons of immutability. How to achieve immutability in JS?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Immutability in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Immutability",
-                    "bold": true
-                  },
-                  {
-                    "text": " means data cannot be changed after creation. Any change produces a new value or object."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pros:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Predictable behavior and easier debugging."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Fewer side effects."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Fits functional programming well."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Cons:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Higher memory usage."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Possible performance overhead."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const user = { name: 'Alice', age: 25 };\nconst updated = { ...user, age: 30 };"
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const frozen = Object.freeze({ x: 1 });\nfrozen.x = 2; // ignored or error in strict mode"
-          }
-        ]
-      },
-      "pl": {
-        "question": "86. Zalety i wady niemutowalności. Jak osiągnąć niemutowalność w JS?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Niemutowalność w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Niemutowalność",
-                    "bold": true
-                  },
-                  {
-                    "text": " oznacza, że dane nie mogą być zmienione po utworzeniu. Zmiana tworzy nowy obiekt lub wartość."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zalety:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Większa przewidywalność kodu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mniej efektów ubocznych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Lepsze dopasowanie do programowania funkcyjnego."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wady:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Większe zużycie pamięci."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Możliwe obniżenie wydajności."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const user = { name: 'Alice', age: 25 };\nconst updated = { ...user, age: 30 };"
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const frozen = Object.freeze({ x: 1 });\nfrozen.x = 2; // ignorowane lub błąd w strict mode"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 87,
-    "translations": {
-      "uk": {
-        "question": "87. Типи спливаючих вікон JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Типи спливаючих вікон у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "alert",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Показує інформаційне повідомлення."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Блокує виконання коду до закриття."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "confirm",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Запитує підтвердження дії."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повертає true або false."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "prompt",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Дозволяє ввести текст."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Повертає рядок або null."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Усі ці вікна синхронні та блокують UI."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "У сучасних додатках вважаються поганою практикою."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "87. Types of JavaScript popup windows?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Types of popup windows in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "alert",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Displays an informational message."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Blocks execution until closed."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "confirm",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Asks the user to confirm an action."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Returns true or false."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "prompt",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Allows text input."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Returns a string or null."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "All popups are synchronous and block the UI."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Generally discouraged in modern web apps."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "87. Jakie są typy okien dialogowych w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Typy okien dialogowych w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "alert",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wyświetla komunikat informacyjny."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Blokuje wykonanie kodu."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "confirm",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Służy do potwierdzania akcji."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zwraca true lub false."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "prompt",
-                    "code": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Umożliwia wprowadzenie tekstu."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zwraca tekst lub null."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wszystkie okna są synchroniczne i blokują UI."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Niepolecane w nowoczesnych aplikacjach."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 88,
-    "translations": {
-      "uk": {
-        "question": "88. Типи об'єктів JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Типи об'єктів у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Нативні об'єкти",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Вбудовані стандартом ECMAScript."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object, Array, Function, Date, RegExp, Promise",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Глобальні об'єкти",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Доступні глобально."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Math, JSON, console, globalThis",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Host-об'єкти",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Надаються середовищем виконання."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "window, document, process, Buffer",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Користувацькі об'єкти",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Створюються вручну або через класи."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Спеціалізовані об'єкти",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map, Set, WeakMap, WeakSet, ArrayBuffer, Symbol",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "88. Types of JavaScript objects?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Types of objects in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Native objects",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Defined by the ECMAScript standard."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object, Array, Function, Date, RegExp, Promise",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Global objects",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Available in the global scope."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Math, JSON, console, globalThis",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Host objects",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Provided by the runtime environment."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "window, document, process, Buffer",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "User-defined objects",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Created manually or via classes."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Specialized objects",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map, Set, WeakMap, WeakSet, ArrayBuffer, Symbol",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "88. Jakie są typy obiektów w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Typy obiektów w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekty natywne",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zdefiniowane w standardzie ECMAScript."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object, Array, Function, Date, RegExp, Promise",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekty globalne",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Dostępne globalnie."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Math, JSON, console, globalThis",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekty środowiska (host)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Dostarczane przez środowisko uruchomieniowe."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "window, document, process, Buffer",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekty użytkownika",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Tworzone ręcznie lub przez klasy."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekty specjalizowane",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map, Set, WeakMap, WeakSet, ArrayBuffer, Symbol",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 89,
-    "translations": {
-      "uk": {
-        "question": "89. Парадигми програмування JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Парадигми програмування в JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Парадигма",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Опис",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Імперативна",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Покроковий опис того, як виконувати задачу."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Декларативна",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Опис того, що потрібно отримати, а не як це зробити."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Обʼєктно-орієнтована",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Код організований навколо обʼєктів і прототипів."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Функціональна",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Чисті функції, іммутабельність, композиція."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Асинхронна",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Робота з асинхронністю через callbacks, Promise, async/await."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Подієво-орієнтована",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Реакція на події через обробники."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Реактивна",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Робота з потоками даних у реальному часі (RxJS)."
-                  }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "89. Programming paradigms in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Programming paradigms in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Paradigm",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Description",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Imperative",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Step-by-step instructions describing how to perform a task."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Declarative",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Describes what should be done, not how."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Object-Oriented",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Code organized around objects and prototypes."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Functional",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Pure functions, immutability, composition."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Asynchronous",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Async logic using callbacks, Promise, async/await."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Event-driven",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Logic based on events and handlers."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Reactive",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Streams and reactive data flows (RxJS)."
-                  }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "89. Paradygmaty programowania w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Paradygmaty programowania w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Paradygmat",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Opis",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Imperatywny",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Instrukcje krok po kroku, jak wykonać zadanie."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Deklaratywny",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Opisuje co ma zostać wykonane, a nie jak."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Obiektowy",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Kod oparty na obiektach i prototypach."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Funkcyjny",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Funkcje czyste, niemutowalność, kompozycja."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Asynchroniczny",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Obsługa asynchroniczności przez callbacks, Promise, async/await."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Zdarzeniowy",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Reakcja na zdarzenia i ich obsługa."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Reaktywny",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Przetwarzanie strumieni danych w czasie rzeczywistym."
-                  }
-                ]
-              ]
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 90,
-    "translations": {
-      "uk": {
-        "question": "90. Типи помилок у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Типи помилок у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "У JavaScript існує кілька типів помилок, які можуть виникати під час виконання коду:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Тип помилки",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Опис",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Приклад",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "SyntaxError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Виникає, коли код містить синтаксичну помилку, що унеможливлює виконання."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>console.log(\"Привіт); // SyntaxError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "ReferenceError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Виникає при зверненні до неоголошеної змінної."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>console.log(x); // ReferenceError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "TypeError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Операція виконується над значенням неправильного типу."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>null.toString(); // TypeError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "RangeError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Значення виходить за допустимий діапазон."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>new Array(-1); // RangeError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "EvalError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Помилка, пов’язана з некоректним використанням "
-                  },
-                  {
-                    "text": "eval",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>eval(\"let a = ;\"); // EvalError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "URIError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Некоректне використання функцій роботи з URI, наприклад "
-                  },
-                  {
-                    "text": "decodeURI",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>decodeURI(\"%\"); // URIError<br>",
-                    "code": true
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Як обробляти помилки?"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовується конструкція "
-                  },
-                  {
-                    "text": "try...catch",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "try {\n  JSON.parse('Некоректний JSON');\n} catch (error) {\n  console.error(error.message);\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "90. Types of errors in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Types of Errors in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript has several error types that may occur during code execution:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Error Type",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Description",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Example",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "SyntaxError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Occurs when the code contains invalid syntax."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>console.log(\"Hello); // SyntaxError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "ReferenceError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Occurs when accessing an undeclared variable."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>console.log(x); // ReferenceError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "TypeError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "An operation is performed on a value of the wrong type."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>null.toString(); // TypeError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "RangeError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "A value is outside the allowed range."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>new Array(-1); // RangeError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "EvalError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Related to incorrect use of "
-                  },
-                  {
-                    "text": "eval",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>eval(\"let a = ;\"); // EvalError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "URIError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Incorrect use of URI handling functions like "
-                  },
-                  {
-                    "text": "decodeURI",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>decodeURI(\"%\"); // URIError<br>",
-                    "code": true
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "How to handle errors?"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Use the "
-                  },
-                  {
-                    "text": "try...catch",
-                    "code": true
-                  },
-                  {
-                    "text": " statement:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "try {\n  JSON.parse('Invalid JSON');\n} catch (error) {\n  console.error(error.message);\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "90. Typy błędów w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Typy błędów w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "W JavaScript występuje kilka typów błędów podczas wykonywania kodu:"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Typ błędu",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Opis",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "Przykład",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "SyntaxError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Błąd składni uniemożliwiający wykonanie kodu."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>console.log(\"Cześć); // SyntaxError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "ReferenceError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Odwołanie do niezadeklarowanej zmiennej."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>console.log(x); // ReferenceError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "TypeError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Operacja na wartości o nieprawidłowym typie."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>null.toString(); // TypeError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "RangeError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Wartość poza dozwolonym zakresem."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>new Array(-1); // RangeError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "EvalError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Nieprawidłowe użycie funkcji "
-                  },
-                  {
-                    "text": "eval",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>eval(\"let a = ;\"); // EvalError<br>",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "URIError",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Błędne użycie funkcji URI, np. "
-                  },
-                  {
-                    "text": "decodeURI",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "javascript<br>decodeURI(\"%\"); // URIError<br>",
-                    "code": true
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Jak obsługiwać błędy?"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Stosuje się konstrukcję "
-                  },
-                  {
-                    "text": "try...catch",
-                    "code": true
-                  },
-                  {
-                    "text": ":"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "try {\n  JSON.parse('Niepoprawny JSON');\n} catch (error) {\n  console.error(error.message);\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 91,
-    "translations": {
-      "uk": {
-        "question": "91. Різниця між typeof і instanceof?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Різниця між "
-              },
-              {
-                "text": "typeof",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "instanceof",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Критерій",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "typeof",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "instanceof",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Призначення",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Повертає тип значення у вигляді рядка."
-                  }
-                ],
-                [
-                  {
-                    "text": "Перевіряє, чи є об’єкт екземпляром конструктора або класу."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Результат",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Рядок з типом ("
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "object",
-                    "code": true
-                  },
-                  {
-                    "text": ", тощо)."
-                  }
-                ],
-                [
-                  {
-                    "text": "Повертає "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": " або "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Сфера застосування",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Визначення типів даних, зокрема примітивів."
-                  }
-                ],
-                [
-                  {
-                    "text": "Перевірка належності об’єкта до прототипного ланцюга."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Обмеження",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Масиви і "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " повертають "
-                  },
-                  {
-                    "text": "object",
-                    "code": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Не працює з примітивами."
-                  }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "91. Difference between typeof and instanceof?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference between "
-              },
-              {
-                "text": "typeof",
-                "code": true
-              },
-              {
-                "text": " and "
-              },
-              {
-                "text": "instanceof",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Criteria",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "typeof",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "instanceof",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Purpose",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Returns the type of a value as a string."
-                  }
-                ],
-                [
-                  {
-                    "text": "Checks whether an object is an instance of a constructor or class."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Result",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "String type ("
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "object",
-                    "code": true
-                  },
-                  {
-                    "text": ", etc)."
-                  }
-                ],
-                [
-                  {
-                    "text": "Returns "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": " or "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Use case",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Identifying data types, mainly primitives."
-                  }
-                ],
-                [
-                  {
-                    "text": "Checking prototype chain membership."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Limitations",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Arrays and "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " return "
-                  },
-                  {
-                    "text": "object",
-                    "code": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Does not work with primitive values."
-                  }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "91. Różnica między typeof a instanceof?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnica między "
-              },
-              {
-                "text": "typeof",
-                "code": true
-              },
-              {
-                "text": " a "
-              },
-              {
-                "text": "instanceof",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Kryterium",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "typeof",
-                  "bold": true
-                }
-              ],
-              [
-                {
-                  "text": "instanceof",
-                  "bold": true
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Przeznaczenie",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Zwraca typ wartości jako string."
-                  }
-                ],
-                [
-                  {
-                    "text": "Sprawdza, czy obiekt jest instancją konstruktora lub klasy."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Wynik",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Typ w postaci stringa ("
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "object",
-                    "code": true
-                  },
-                  {
-                    "text": ", itd)."
-                  }
-                ],
-                [
-                  {
-                    "text": "Zwraca "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": " lub "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Zastosowanie",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Określanie typów danych, głównie prymitywów."
-                  }
-                ],
-                [
-                  {
-                    "text": "Sprawdzanie łańcucha prototypów obiektu."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Ograniczenia",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Tablice i "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " zwracają "
-                  },
-                  {
-                    "text": "object",
-                    "code": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Nie działa z prymitywami."
-                  }
-                ]
-              ]
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 92,
-    "translations": {
-      "uk": {
-        "question": "92. JavaScript статично чи динамічно типізована мова?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript — це динамічно типізована мова програмування.",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Що це означає?"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Тип визначається під час виконання:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Тип змінної може змінюватися залежно від значення."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Тип не вказується при оголошенні змінної."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let value = 42;\nvalue = 'Привіт';\nvalue = true;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Немає перевірки типів під час компіляції:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Помилки типів з’являються лише під час виконання."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let num = 42;\nnum.toUpperCase();"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Автоматичне приведення типів:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "JavaScript автоматично змінює типи у виразах."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "'5' - 2;\n'5' + 2;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Висновок:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript є динамічно типізованою мовою. Для статичної типізації використовують TypeScript."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "92. Is JavaScript statically or dynamically typed?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript is a dynamically typed programming language.",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "What does it mean?"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Types are determined at runtime:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "A variable can change its type based on the assigned value."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "No type declaration is required."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let value = 42;\nvalue = 'Hello';\nvalue = true;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "No compile-time type checking:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Type errors appear only at runtime."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let num = 42;\nnum.toUpperCase();"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Automatic type coercion:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "JavaScript automatically converts types in expressions."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "'5' - 2;\n'5' + 2;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Conclusion:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript is dynamically typed. TypeScript adds static typing on top of JavaScript."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "92. Czy JavaScript jest językiem statycznie czy dynamicznie typowanym?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JavaScript jest językiem programowania dynamicznie typowanym.",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Co to oznacza?"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Typy są określane w czasie wykonywania:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zmienna może zmieniać typ w zależności od wartości."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Nie trzeba deklarować typu zmiennej."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let value = 42;\nvalue = 'Cześć';\nvalue = true;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Brak sprawdzania typów podczas kompilacji:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Błędy typów pojawiają się dopiero w czasie wykonania."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "let num = 42;\nnum.toUpperCase();"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Automatyczna konwersja typów:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "JavaScript automatycznie konwertuje typy w wyrażeniach."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "'5' - 2;\n'5' + 2;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wniosek:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript jest dynamicznie typowany. TypeScript dodaje statyczne typowanie."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 93,
-    "translations": {
-      "uk": {
-        "question": "93. Що таке регулярне вираження (Regular Expression)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Регулярне вираження (або "
-              },
-              {
-                "text": "Regex",
-                "bold": true
-              },
-              {
-                "text": ") — це шаблон для пошуку, співставлення та обробки тексту в рядках."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні можливості:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Пошук тексту:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Виявлення підрядків за шаблоном."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Заміна тексту:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Заміна знайдених фрагментів іншим текстом."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перевірка відповідності:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Перевірка, чи відповідає рядок шаблону."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const regex = /hello/;\nconst text = 'hello world';\nregex.test(text); // true\ntext.match(regex); // ['hello']"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Regex — потужний, але складний інструмент. Надмірно складні шаблони ускладнюють підтримку коду."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "93. What is a Regular Expression?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "A regular expression (or "
-              },
-              {
-                "text": "Regex",
-                "bold": true
-              },
-              {
-                "text": ") is a pattern used for searching, matching, and manipulating text."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Core capabilities:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Text search:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Finding substrings that match a pattern."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Text replacement:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Replacing matched text with another value."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Validation:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Checking whether a string matches a pattern."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Example:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const regex = /hello/;\nconst text = 'hello world';\nregex.test(text); // true\ntext.match(regex); // ['hello']"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Regular expressions are powerful but can reduce readability if overused or poorly written."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "93. Czym jest wyrażenie regularne (Regular Expression)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Wyrażenie regularne (czyli "
-              },
-              {
-                "text": "Regex",
-                "bold": true
-              },
-              {
-                "text": ") to wzorzec służący do wyszukiwania, dopasowywania i przetwarzania tekstu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne możliwości:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wyszukiwanie tekstu:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Odnajdywanie fragmentów zgodnych ze wzorcem."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zamiana tekstu:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zastępowanie dopasowanych fragmentów."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Walidacja:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Sprawdzanie zgodności tekstu ze wzorcem."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykład:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const regex = /hello/;\nconst text = 'hello world';\nregex.test(text); // true\ntext.match(regex); // ['hello']"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Regex to potężne narzędzie, ale zbyt złożone wyrażenia utrudniają utrzymanie kodu."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 94,
-    "translations": {
-      "uk": {
-        "question": "94. Що таке рекурсія?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Рекурсія — це техніка програмування, за якої функція викликає саму себе для розв’язання задачі шляхом поділу її на простіші підзадачі."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні компоненти рекурсії:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Базовий випадок (Base Case):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Умова, що зупиняє рекурсивні виклики."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Без нього виникає переповнення стека викликів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Рекурсивний випадок (Recursive Case):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Виклик функції з меншими або спрощеними даними."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад:"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Обчислення факторіала ",
-                "bold": false
-              },
-              {
-                "text": "n!",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function factorial(n) {\n  if (n === 0) return 1;\n  return n * factorial(n - 1);\n}\n\nfactorial(5); // 120"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Переваги:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Добре підходить для задач з ієрархічною структурою (дерева, графи)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Недоліки:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Витрачає більше пам’яті через стек викликів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Легко допустити помилку в базовому випадку."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "94. What is recursion?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Recursion is a programming technique where a function calls itself to solve a problem by breaking it into smaller subproblems."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Core components:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Base case:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stops further recursive calls."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Without it, a stack overflow occurs."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Recursive case:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Function calls itself with reduced input."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Example:"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Factorial calculation ",
-                "bold": false
-              },
-              {
-                "text": "n!",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function factorial(n) {\n  if (n === 0) return 1;\n  return n * factorial(n - 1);\n}\n\nfactorial(5); // 120"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Pros:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Clear solution for hierarchical problems like trees or graphs."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Cons:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Higher memory usage due to call stack."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Risk of stack overflow if implemented incorrectly."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "94. Czym jest rekurencja?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Rekurencja to technika programowania, w której funkcja wywołuje samą siebie, dzieląc problem na mniejsze podproblemy."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne elementy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przypadek bazowy:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zatrzymuje dalsze wywołania rekurencyjne."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Brak prowadzi do przepełnienia stosu."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przypadek rekurencyjny:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wywołanie funkcji z mniejszymi danymi."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykład:"
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Obliczanie silni ",
-                "bold": false
-              },
-              {
-                "text": "n!",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function factorial(n) {\n  if (n === 0) return 1;\n  return n * factorial(n - 1);\n}\n\nfactorial(5); // 120"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zalety:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Czytelna dla problemów o strukturze hierarchicznej."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Wady:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Większe zużycie pamięci."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ryzyko błędów i przepełnienia stosu."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 95,
-    "translations": {
-      "uk": {
-        "question": "95. Що таке поліфіл (polyfill)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Поліфіл (polyfill) — це код, який додає підтримку сучасних можливостей JavaScript у середовищах, де вони відсутні."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Навіщо потрібен поліфіл?"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Забезпечує роботу коду в старих браузерах."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Гарантує зворотну сумісність сучасного API."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад поліфіла для "
-              },
-              {
-                "text": "Array.prototype.includes",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "if (!Array.prototype.includes) {\n  Array.prototype.includes = function (value) {\n    return this.indexOf(value) !== -1;\n  };\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Обмеження:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Збільшує розмір бандла."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Може працювати повільніше за нативну реалізацію."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "95. What is a polyfill?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "A polyfill is code that provides modern JavaScript features in environments where they are not natively supported."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Why use a polyfill?"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ensures compatibility with older browsers."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Allows use of modern APIs without breaking legacy support."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Polyfill example for "
-              },
-              {
-                "text": "Array.prototype.includes",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "if (!Array.prototype.includes) {\n  Array.prototype.includes = function (value) {\n    return this.indexOf(value) !== -1;\n  };\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Limitations:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Increases bundle size."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "May be slower than native implementations."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "95. Czym jest polyfill?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Polyfill to kod, który zapewnia nowoczesne funkcje JavaScript w środowiskach, które ich nie obsługują."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Po co stosować polyfill?"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zapewnia zgodność ze starszymi przeglądarkami."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Umożliwia użycie nowoczesnych API."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykład polyfilla dla "
-              },
-              {
-                "text": "Array.prototype.includes",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "if (!Array.prototype.includes) {\n  Array.prototype.includes = function (value) {\n    return this.indexOf(value) !== -1;\n  };\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Ograniczenia:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zwiększa rozmiar kodu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Może działać wolniej niż implementacja natywna."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 96,
-    "translations": {
-      "uk": {
-        "question": "96. Що таке switch/case? Правила використання switch/case?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "switch/case",
-                "code": true
-              },
-              {
-                "text": " — це умовна конструкція в JavaScript для вибору однієї з кількох гілок виконання залежно від значення виразу."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Синтаксис:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "switch (expression) {\n  case value1:\n    break;\n  case value2:\n    break;\n  default:\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Як працює "
-              },
-              {
-                "text": "switch/case",
-                "code": true
-              },
-              {
-                "text": ":"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Вираз обчислюється один раз."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Порівняння відбувається за допомогою строгої рівності."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Без break виконуються всі наступні case."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Правила використання:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Порівняння виконується через "
-                  },
-                  {
-                    "text": "===",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовуйте "
-                  },
-                  {
-                    "text": "break",
-                    "code": true
-                  },
-                  {
-                    "text": " для запобігання fall-through."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовуйте "
-                  },
-                  {
-                    "text": "default",
-                    "code": true
-                  },
-                  {
-                    "text": " для обробки всіх інших випадків."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "96. What is switch/case? Rules for using switch/case?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "switch/case",
-                "code": true
-              },
-              {
-                "text": " is a conditional statement in JavaScript that selects one execution path based on an expression value."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Syntax:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "switch (expression) {\n  case value1:\n    break;\n  case value2:\n    break;\n  default:\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "How "
-              },
-              {
-                "text": "switch/case",
-                "code": true
-              },
-              {
-                "text": " works:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The expression is evaluated once."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Comparison uses strict equality."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Without break, execution falls through."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Usage rules:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Comparison is done with "
-                  },
-                  {
-                    "text": "===",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Always use "
-                  },
-                  {
-                    "text": "break",
-                    "code": true
-                  },
-                  {
-                    "text": " to avoid fall-through."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Use "
-                  },
-                  {
-                    "text": "default",
-                    "code": true
-                  },
-                  {
-                    "text": " to handle unmatched cases."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "96. Czym jest switch/case? Zasady użycia switch/case?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "switch/case",
-                "code": true
-              },
-              {
-                "text": " to instrukcja warunkowa w JavaScript służąca do wyboru jednej z wielu ścieżek wykonania."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Składnia:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "switch (expression) {\n  case value1:\n    break;\n  case value2:\n    break;\n  default:\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Jak działa "
-              },
-              {
-                "text": "switch/case",
-                "code": true
-              },
-              {
-                "text": ":"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wyrażenie jest obliczane jeden raz."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Porównanie używa ścisłej równości."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Brak break powoduje przejście do kolejnych case."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zasady użycia:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Porównanie odbywa się przez "
-                  },
-                  {
-                    "text": "===",
-                    "code": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Stosuj "
-                  },
-                  {
-                    "text": "break",
-                    "code": true
-                  },
-                  {
-                    "text": " aby uniknąć fall-through."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Używaj "
-                  },
-                  {
-                    "text": "default",
-                    "code": true
-                  },
-                  {
-                    "text": " dla pozostałych przypadków."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 97,
-    "translations": {
-      "uk": {
-        "question": "97. Типи функцій щодо можливості приймати інші функції?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "У JavaScript функції класифікують за здатністю приймати або повертати інші функції."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функція вищого порядку (Higher-Order Function)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Приймає інші функції як аргументи."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Або повертає функцію."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Колбек-функція (Callback Function)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Передається як аргумент та викликається іншою функцією."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Анонімна функція (Anonymous Function)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Функція без імені, часто використовується як колбек."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функція-замикання (Closure)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Зберігає доступ до змінних зовнішнього лексичного оточення."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "97. Types of functions based on their ability to accept other functions?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "In JavaScript, functions are classified by whether they can accept or return other functions."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Higher-Order Function",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Accepts functions as arguments."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Or returns a function."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Callback Function",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Passed as an argument and executed by another function."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Anonymous Function",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "A function without a name, commonly used as a callback."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Closure",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "A function that retains access to variables from its lexical scope."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "97. Typy funkcji ze względu na możliwość przyjmowania innych funkcji?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "W JavaScript funkcje klasyfikuje się według tego, czy mogą przyjmować lub zwracać inne funkcje."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcja wyższego rzędu (Higher-Order Function)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przyjmuje funkcje jako argumenty."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Lub zwraca funkcję."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcja zwrotna (Callback Function)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przekazywana jako argument i wywoływana przez inną funkcję."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcja anonimowa (Anonymous Function)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Funkcja bez nazwy, często używana jako callback."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Domknięcie (Closure)",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zachowuje dostęp do zmiennych z zewnętrznego zakresu leksykalnego."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 98,
-    "translations": {
-      "uk": {
-        "question": "98. Що таке вирази (expression) та інструкції (statement) у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Вирази (Expression) та Інструкції (Statement) у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Вирази (Expression)"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Вираз",
-                    "bold": true
-                  },
-                  {
-                    "text": " - це будь-яка одиниця коду, яка обчислюється та повертає значення. Вирази можуть бути частиною інструкцій."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклади виразів:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "5 + 3;\n'x' + 'y';\nMath.max(10, 20);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Особливості:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Завжди повертають значення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Можуть використовуватись у контексті:"
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Присвоєння (let result = 5 + 3;)."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Умови (if (x > 0))."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Аргументи функцій (console.log(x + y))."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Інструкції (Statement)"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Інструкція",
-                    "bold": true
-                  },
-                  {
-                    "text": " - це завершений фрагмент коду, що виконує дію та не обов’язково повертає значення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Керує потоком виконання програми."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклади інструкцій:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "let a = 5;\nif (a > 0) {\n  console.log(a);\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основна відмінність"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Характеристика"
-                }
-              ],
-              [
-                {
-                  "text": "Вираз"
-                }
-              ],
-              [
-                {
-                  "text": "Інструкція"
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": "Результат",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Повертає значення."
-                  }
-                ],
-                [
-                  {
-                    "text": "Може не повертати значення."
-                  }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "98. What are expressions and statements in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Expressions and Statements in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Expressions"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Expression",
-                    "bold": true
-                  },
-                  {
-                    "text": " is any piece of code that is evaluated and returns a value. Expressions can be part of statements."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Examples:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "5 + 3;\n'x' + 'y';\nMath.max(10, 20);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Statements"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Statement",
-                    "bold": true
-                  },
-                  {
-                    "text": " performs an action and does not necessarily return a value."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "let a = 5;\nif (a > 0) {\n  console.log(a);\n}"
-          }
-        ]
-      },
-      "pl": {
-        "question": "98. Czym są wyrażenia (expression) i instrukcje (statement) w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Wyrażenia i instrukcje w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Wyrażenia"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wyrażenie",
-                    "bold": true
-                  },
-                  {
-                    "text": " to fragment kodu, który jest obliczany i zwraca wartość. Może być częścią instrukcji."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykłady:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "5 + 3;\n'x' + 'y';\nMath.max(10, 20);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Instrukcje"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Instrukcja",
-                    "bold": true
-                  },
-                  {
-                    "text": " wykonuje działanie i nie musi zwracać wartości."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "let a = 5;\nif (a > 0) {\n  console.log(a);\n}"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 99,
-    "translations": {
-      "uk": {
-        "question": "99. Різниця між .some() та .every()?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Порівняння методів .some() та .every()"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Метод"
-                }
-              ],
-              [
-                {
-                  "text": "Опис"
-                }
-              ],
-              [
-                {
-                  "text": "Повертає"
-                }
-              ],
-              [
-                {
-                  "text": "Приклад"
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": ".some()",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Перевіряє, чи хоча б один елемент масиву відповідає умові."
-                  }
-                ],
-                [
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": ", якщо хоча б один елемент відповідає умові. Інакше – "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "[1, 2, 3].some(x => x > 2)",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": ".every()",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Перевіряє, чи всі елементи масиву відповідають умові."
-                  }
-                ],
-                [
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": ", якщо всі елементи відповідають умові. Інакше – "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "[1, 2, 3].every(x => x > 0)",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 3,
-            "children": [
-              {
-                "text": "Основні відмінності:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": ".some()",
-                    "bold": true
-                  },
-                  {
-                    "text": " зупиняється після знаходження першого відповідного елемента."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": ".every()",
-                    "bold": true
-                  },
-                  {
-                    "text": " зупиняється після знаходження першого невідповідного елемента."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "99. What is the difference between .some() and .every()?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Comparison of .some() and .every() methods"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Method"
-                }
-              ],
-              [
-                {
-                  "text": "Description"
-                }
-              ],
-              [
-                {
-                  "text": "Returns"
-                }
-              ],
-              [
-                {
-                  "text": "Example"
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": ".some()",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Checks if at least one element in the array satisfies the condition."
-                  }
-                ],
-                [
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": " if at least one element satisfies the condition. Otherwise – "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "[1, 2, 3].some(x => x > 2)",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": ".every()",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Checks if all elements in the array satisfy the condition."
-                  }
-                ],
-                [
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": " if all elements satisfy the condition. Otherwise – "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "[1, 2, 3].every(x => x > 0)",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 3,
-            "children": [
-              {
-                "text": "Key differences:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": ".some()",
-                    "bold": true
-                  },
-                  {
-                    "text": " stops after finding the first matching element."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": ".every()",
-                    "bold": true
-                  },
-                  {
-                    "text": " stops after finding the first non-matching element."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "99. Jaka jest różnica między .some() a .every()?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Porównanie metod .some() i .every()"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [
-                {
-                  "text": "Metoda"
-                }
-              ],
-              [
-                {
-                  "text": "Opis"
-                }
-              ],
-              [
-                {
-                  "text": "Zwraca"
-                }
-              ],
-              [
-                {
-                  "text": "Przykład"
-                }
-              ]
-            ],
-            "rows": [
-              [
-                [
-                  {
-                    "text": ".some()",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Sprawdza, czy co najmniej jeden element tablicy spełnia warunek."
-                  }
-                ],
-                [
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": ", jeśli co najmniej jeden element spełnia warunek. W przeciwnym razie – "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "[1, 2, 3].some(x => x > 2)",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": ".every()",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Sprawdza, czy wszystkie elementy tablicy spełniają warunek."
-                  }
-                ],
-                [
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": ", jeśli wszystkie elementy spełniają warunek. W przeciwnym razie – "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ],
-                [
-                  {
-                    "text": "[1, 2, 3].every(x => x > 0)",
-                    "code": true
-                  },
-                  {
-                    "text": " → "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 3,
-            "children": [
-              {
-                "text": "Kluczowe różnice:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": ".some()",
-                    "bold": true
-                  },
-                  {
-                    "text": " zatrzymuje się po znalezieniu pierwszego pasującego elementu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": ".every()",
-                    "bold": true
-                  },
-                  {
-                    "text": " zatrzymuje się po znalezieniu pierwszego niespełniającego warunku elementu."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 100,
-    "translations": {
-      "uk": {
-        "question": "100. Як згенерувати випадкове число у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "За допомогою використання "
-              },
-              {
-                "text": "Math.random()",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Метод "
-                  },
-                  {
-                    "text": "Math.random()",
-                    "code": true
-                  },
-                  {
-                    "text": " повертає випадкове число в діапазоні від "
-                  },
-                  {
-                    "text": "0",
-                    "code": true
-                  },
-                  {
-                    "text": " (включно) до "
-                  },
-                  {
-                    "text": "1",
-                    "code": true
-                  },
-                  {
-                    "text": " (не включно)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклади:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Випадкове число від `0` до `1`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const random = Math.random();\nconsole.log(random);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Випадкове число в діапазоні від `0` до `10`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const random = Math.random() * 10;\nconsole.log(random);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ціле число в діапазоні від `0` до `10`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const randomInt = Math.floor(Math.random() * 11);\nconsole.log(randomInt);"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "100. How to generate a random number in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Using "
-              },
-              {
-                "text": "Math.random()",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The "
-                  },
-                  {
-                    "text": "Math.random()",
-                    "code": true
-                  },
-                  {
-                    "text": " method returns a random number in the range from "
-                  },
-                  {
-                    "text": "0",
-                    "code": true
-                  },
-                  {
-                    "text": " (inclusive) to "
-                  },
-                  {
-                    "text": "1",
-                    "code": true
-                  },
-                  {
-                    "text": " (exclusive)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Examples:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Random number between `0` and `1`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const random = Math.random();\nconsole.log(random);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Random number between `0` and `10`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const random = Math.random() * 10;\nconsole.log(random);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Integer number between `0` and `10`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const randomInt = Math.floor(Math.random() * 11);\nconsole.log(randomInt);"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "100. Jak wygenerować liczbę losową w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Za pomocą "
-              },
-              {
-                "text": "Math.random()",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Metoda "
-                  },
-                  {
-                    "text": "Math.random()",
-                    "code": true
-                  },
-                  {
-                    "text": " zwraca liczbę losową z zakresu od "
-                  },
-                  {
-                    "text": "0",
-                    "code": true
-                  },
-                  {
-                    "text": " (włącznie) do "
-                  },
-                  {
-                    "text": "1",
-                    "code": true
-                  },
-                  {
-                    "text": " (wyłącznie)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykłady:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Liczba losowa od `0` do `1`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const random = Math.random();\nconsole.log(random);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Liczba losowa z zakresu `0` do `10`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const random = Math.random() * 10;\nconsole.log(random);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Liczba całkowita z zakresu `0` do `10`:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const randomInt = Math.floor(Math.random() * 11);\nconsole.log(randomInt);"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 101,
-    "translations": {
-      "uk": {
-        "question": "101. Типи операторів у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Типи операторів у JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Оператори в JavaScript використовуються для виконання арифметичних, логічних, порівняльних та інших операцій."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні типи операторів:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Арифметичні",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "+, -, *, /, %, **",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Присвоєння",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "=, +=, -=, *=, /=, %=",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Порівняння",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "==, !=, ===, !==, <, >, <=, >=",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Логічні",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "&&, ||, !",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Тернарний",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "condition ? a : b",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "101. Types of operators in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Types of operators in JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Operators in JavaScript are used to perform arithmetic, logical, comparison, and other operations."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Main operator types:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Arithmetic",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "+, -, *, /, %, **",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Assignment",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "=, +=, -=, *=, /=, %=",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Comparison",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "==, !=, ===, !==, <, >, <=, >=",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Logical",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "&&, ||, !",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ternary",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "condition ? a : b",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "101. Typy operatorów w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Typy operatorów w JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Operatory w JavaScript służą do wykonywania operacji arytmetycznych, logicznych i porównań."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne typy operatorów:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Arytmetyczne",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "+, -, *, /, %, **",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przypisania",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "=, +=, -=, *=, /=, %=",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Porównania",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "==, !=, ===, !==, <, >, <=, >=",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Logiczne",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "&&, ||, !",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Trójargumentowy",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "condition ? a : b",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 102,
-    "translations": {
-      "uk": {
-        "question": "102. Яка різниця між параметром та аргументом функції?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Різниця:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Параметр",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це змінна, оголошена у визначенні функції. Вона приймає значення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Аргумент",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це фактичне значення, яке передається функції під час виклику."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function add(a, b) {\n  // a, b — параметри\n  return a + b;\n}\n\nadd(2, 3); // 2, 3 — аргументи"
-          }
-        ]
-      },
-      "en": {
-        "question": "102. What is the difference between a function parameter and an argument?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Parameter",
-                    "bold": true
-                  },
-                  {
-                    "text": " is a variable defined in the function declaration. It receives a value."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Argument",
-                    "bold": true
-                  },
-                  {
-                    "text": " is the actual value passed to the function when it is called."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Example:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function add(a, b) {\n  // a, b are parameters\n  return a + b;\n}\n\nadd(2, 3); // 2, 3 are arguments"
-          }
-        ]
-      },
-      "pl": {
-        "question": "102. Jaka jest różnica między parametrem a argumentem funkcji?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnica:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Parametr",
-                    "bold": true
-                  },
-                  {
-                    "text": " to zmienna zdefiniowana w deklaracji funkcji. Odbiera wartość."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Argument",
-                    "bold": true
-                  },
-                  {
-                    "text": " to rzeczywista wartość przekazywana do funkcji podczas jej wywołania."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykład:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function add(a, b) {\n  // a, b to parametry\n  return a + b;\n}\n\nadd(2, 3); // 2, 3 to argumenty"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 103,
-    "translations": {
-      "uk": {
-        "question": "103. Правила завдання імен для змінних та функцій JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Іменування змінних та функцій:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Імʼя може починатися з літери, "
-                  },
-                  {
-                    "text": "_",
-                    "code": true
-                  },
-                  {
-                    "text": " або "
-                  },
-                  {
-                    "text": "$",
-                    "code": true
-                  },
-                  {
-                    "text": ", але не з цифри."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Далі дозволені літери, цифри, "
-                  },
-                  {
-                    "text": "_",
-                    "code": true
-                  },
-                  {
-                    "text": " та "
-                  },
-                  {
-                    "text": "$",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зарезервовані слова використовувати не можна (наприклад, "
-                  },
-                  {
-                    "text": "class",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "return",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Імена чутливі до регістру ("
-                  },
-                  {
-                    "text": "count",
-                    "code": true
-                  },
-                  {
-                    "text": " ≠ "
-                  },
-                  {
-                    "text": "Count",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для змінних і функцій використовується "
-                  },
-                  {
-                    "text": "camelCase",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Імена мають бути короткими, зрозумілими та описовими."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "103. Rules for naming variables and functions in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Naming variables and functions:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Names may start with a letter, "
-                  },
-                  {
-                    "text": "_",
-                    "code": true
-                  },
-                  {
-                    "text": " or "
-                  },
-                  {
-                    "text": "$",
-                    "code": true
-                  },
-                  {
-                    "text": ", but not with a digit."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Subsequent characters may include letters, digits, "
-                  },
-                  {
-                    "text": "_",
-                    "code": true
-                  },
-                  {
-                    "text": " and "
-                  },
-                  {
-                    "text": "$",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reserved words cannot be used (for example, "
-                  },
-                  {
-                    "text": "class",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "return",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Names are case-sensitive ("
-                  },
-                  {
-                    "text": "value",
-                    "code": true
-                  },
-                  {
-                    "text": " ≠ "
-                  },
-                  {
-                    "text": "Value",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Use "
-                  },
-                  {
-                    "text": "camelCase",
-                    "code": true
-                  },
-                  {
-                    "text": " for variables and functions."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Names should be meaningful and descriptive."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "103. Zasady nadawania nazw zmiennym i funkcjom w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Nazewnictwo zmiennych i funkcji:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nazwa może zaczynać się od litery, "
-                  },
-                  {
-                    "text": "_",
-                    "code": true
-                  },
-                  {
-                    "text": " lub "
-                  },
-                  {
-                    "text": "$",
-                    "code": true
-                  },
-                  {
-                    "text": ", ale nie od cyfry."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dalsze znaki mogą zawierać litery, cyfry, "
-                  },
-                  {
-                    "text": "_",
-                    "code": true
-                  },
-                  {
-                    "text": " oraz "
-                  },
-                  {
-                    "text": "$",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nie wolno używać słów zarezerwowanych (np. "
-                  },
-                  {
-                    "text": "class",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "return",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nazwy są rozróżniane wielkością liter ("
-                  },
-                  {
-                    "text": "data",
-                    "code": true
-                  },
-                  {
-                    "text": " ≠ "
-                  },
-                  {
-                    "text": "Data",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dla zmiennych i funkcji stosuje się "
-                  },
-                  {
-                    "text": "camelCase",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nazwy powinny być czytelne i opisowe."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 104,
-    "translations": {
-      "uk": {
-        "question": "104. Різниця між явним та неявним перетворенням (Implicit and Explicit Coercion)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Implicit and Explicit Coercion",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Явне перетворення (Explicit Coercion):",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Розробник явно вказує, у який тип потрібно перетворити значення, використовуючи функції або оператори."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклади:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "String(123); // \"123\"\nNumber('456'); // 456\nBoolean(0); // false"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Неявне перетворення (Implicit Coercion):",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript автоматично змінює типи даних залежно від контексту виконання."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклади:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "123 + 'abc'; // \"123abc\"\n'5' - 1; // 4\n!''; // true"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Різниця:",
-                    "bold": true
-                  },
-                  {
-                    "text": " явне перетворення є контрольованим і передбачуваним, тоді як неявне може призводити до помилок."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "104. What is the difference between implicit and explicit type coercion?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Implicit and Explicit Coercion",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Explicit coercion:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The developer explicitly converts a value to another type using functions or operators."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Examples:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "String(123); // \"123\"\nNumber('456'); // 456\nBoolean(0); // false"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Implicit coercion:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript automatically converts types based on the execution context."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Examples:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "123 + 'abc'; // \"123abc\"\n'5' - 1; // 4\n!''; // true"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Difference:",
-                    "bold": true
-                  },
-                  {
-                    "text": " explicit coercion is predictable and controlled, while implicit coercion can cause unexpected results."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "104. Jaka jest różnica między niejawną a jawną konwersją typów?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Implicit and Explicit Coercion",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jawna konwersja (Explicit Coercion):",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Programista jawnie określa, na jaki typ ma zostać przekonwertowana wartość."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykłady:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "String(123); // \"123\"\nNumber('456'); // 456\nBoolean(0); // false"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Niejawna konwersja (Implicit Coercion):",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript automatycznie zmienia typy danych w zależności od kontekstu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykłady:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "123 + 'abc'; // \"123abc\"\n'5' - 1; // 4\n!''; // true"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Różnica:",
-                    "bold": true
-                  },
-                  {
-                    "text": " jawna konwersja jest kontrolowana, a niejawna może prowadzić do nieoczekiwanych rezultatów."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 105,
-    "translations": {
-      "uk": {
-        "question": "105. Навіщо застосовується метод Array.from()?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Array.from() створює новий масив із:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Масивоподібних об’єктів:",
-                    "bold": true
-                  },
-                  {
-                    "text": " об’єкти з властивістю length (наприклад, arguments або NodeList)."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const nodeList = document.querySelectorAll('div');\nconst array = Array.from(nodeList);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ітерабельних об’єктів:",
-                    "bold": true
-                  },
-                  {
-                    "text": " об’єкти, які можна ітерувати (Map, Set, строки)."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const set = new Set([1, 2, 3]);\nconst array = Array.from(set);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "З трансформацією:",
-                    "bold": true
-                  },
-                  {
-                    "text": " другий аргумент задає callback для перетворення елементів."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const array = Array.from([1, 2, 3], x => x * 2);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Призначення:",
-                    "bold": true
-                  },
-                  {
-                    "text": " створення масивів з ітерабельних або масивоподібних структур з можливістю трансформації."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "105. What is the Array.from() method used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Array.from() creates a new array from:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Array-like objects:",
-                    "bold": true
-                  },
-                  {
-                    "text": " objects with a length property such as arguments or NodeList."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const nodeList = document.querySelectorAll('div');\nconst array = Array.from(nodeList);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Iterable objects:",
-                    "bold": true
-                  },
-                  {
-                    "text": " objects that can be iterated like Map, Set, or strings."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const set = new Set([1, 2, 3]);\nconst array = Array.from(set);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "With transformation:",
-                    "bold": true
-                  },
-                  {
-                    "text": " the second argument is a callback to transform elements."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const array = Array.from([1, 2, 3], x => x * 2);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Purpose:",
-                    "bold": true
-                  },
-                  {
-                    "text": " convenient creation of arrays from non-array data sources with optional mapping."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "105. Do czego służy metoda Array.from()?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Array.from() tworzy nową tablicę z:",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiektów tablicopodobnych:",
-                    "bold": true
-                  },
-                  {
-                    "text": " obiektów z właściwością length, np. arguments lub NodeList."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const nodeList = document.querySelectorAll('div');\nconst array = Array.from(nodeList);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiektów iterowalnych:",
-                    "bold": true
-                  },
-                  {
-                    "text": " takich jak Map, Set czy stringi."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const set = new Set([1, 2, 3]);\nconst array = Array.from(set);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Z transformacją:",
-                    "bold": true
-                  },
-                  {
-                    "text": " drugi argument to funkcja mapująca elementy."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const array = Array.from([1, 2, 3], x => x * 2);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zastosowanie:",
-                    "bold": true
-                  },
-                  {
-                    "text": " wygodne tworzenie tablic z nietypowych źródeł danych i ich przekształcanie."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 106,
-    "translations": {
-      "uk": {
-        "question": "106. Назвіть способи перетворення масиву на об'єкт?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Способи перетворення:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object.assign()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Копіює масив у обʼєкт, де індекси стають ключами."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1, 2, 3];\nconst obj = Object.assign({}, arr);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ручна ітерація",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Заповнення обʼєкта в циклі."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1, 2, 3];\nconst obj = {};\narr.forEach((v, i) => obj[i] = v);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "reduce()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Акумуляція значень у обʼєкт."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = ['a','b','c'];\nconst obj = arr.reduce((acc,v,i)=>{\n  acc[i]=v; return acc;\n},{});"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object.fromEntries()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Перетворення масиву пар [key, value] в обʼєкт."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [['a',1],['b',2]];\nconst obj = Object.fromEntries(arr);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Spread-оператор",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Розгортання масиву в обʼєкт."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1,2,3];\nconst obj = { ...arr };"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "106. What are the ways to convert an array into an object?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Conversion methods:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object.assign()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Copies array elements into an object using indexes as keys."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1, 2, 3];\nconst obj = Object.assign({}, arr);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Manual iteration",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Looping through the array and assigning values."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1,2,3];\nconst obj = {};\narr.forEach((v,i)=>obj[i]=v);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "reduce()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Builds an object by accumulating values."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = ['a','b','c'];\nconst obj = arr.reduce((acc,v,i)=>{\n  acc[i]=v; return acc;\n},{});"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object.fromEntries()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Converts an array of [key, value] pairs into an object."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [['a',1],['b',2]];\nconst obj = Object.fromEntries(arr);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Spread operator",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Spreads array elements into an object."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1,2,3];\nconst obj = { ...arr };"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "106. Jakie są sposoby konwersji tablicy na obiekt?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Metody konwersji:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object.assign()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Kopiuje elementy tablicy do obiektu, używając indeksów jako kluczy."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1, 2, 3];\nconst obj = Object.assign({}, arr);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Iteracja ręczna",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przypisywanie wartości w pętli."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1,2,3];\nconst obj = {};\narr.forEach((v,i)=>obj[i]=v);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "reduce()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Tworzy obiekt poprzez akumulację."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = ['a','b','c'];\nconst obj = arr.reduce((acc,v,i)=>{\n  acc[i]=v; return acc;\n},{});"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Object.fromEntries()",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Konwertuje tablicę par [klucz, wartość] na obiekt."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [['a',1],['b',2]];\nconst obj = Object.fromEntries(arr);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Operator spread",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Rozwija tablicę do postaci obiektu."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const arr = [1,2,3];\nconst obj = { ...arr };"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 107,
-    "translations": {
-      "uk": {
-        "question": "107. Різниця між Object та Map?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Ключові відмінності між Object і Map:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Типи ключів",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": лише рядки або символи."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": будь-які типи ключів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Порядок зберігання",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": не гарантований."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": у порядку додавання."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Продуктивність",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": краще для частих CRUD-операцій."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": гірше масштабується."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ітерація",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": через Object.keys/values/entries."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": має власні ітератори."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Розмір",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": через Object.keys().length."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": властивість size."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Прототип",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": можливі конфлікти ключів."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": без конфліктів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "107. What is the difference between Object and Map?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Key differences between Object and Map:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Key types",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": strings or symbols only."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": any key type."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Insertion order",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": not guaranteed."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": preserved."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Performance",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": optimized for frequent operations."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": slower at scale."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Iteration",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": via Object.keys/values/entries."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": built-in iterators."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Size",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": Object.keys().length."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": size property."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prototype",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": possible key conflicts."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": no conflicts."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "107. Jaka jest różnica między Object a Map?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Kluczowe różnice między Object i Map:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Typy kluczy",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": tylko stringi lub symbole."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": dowolne typy kluczy."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kolejność",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": niegwarantowana."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": zachowana."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wydajność",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": lepsza dla częstych operacji."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": gorzej się skaluje."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Iteracja",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": przez Object.keys/values/entries."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": wbudowane iteratory."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Rozmiar",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": Object.keys().length."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": właściwość size."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prototyp",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Object",
-                            "code": true
-                          },
-                          {
-                            "text": ": możliwe konflikty kluczy."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Map",
-                            "code": true
-                          },
-                          {
-                            "text": ": brak konfliktów."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 108,
-    "translations": {
-      "uk": {
-        "question": "108. Що таке карірування (currying)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "currying",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Карірування (currying) — це техніка функціонального програмування, за якої функція з кількома аргументами перетворюється на ланцюжок функцій, кожна з яких приймає один аргумент."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Оригінальна функція:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function add(a, b) {\n  return a + b;\n}\nadd(2, 3);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Карірована версія:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function curriedAdd(a) {\n  return function (b) {\n    return a + b;\n  };\n}\ncurriedAdd(2)(3);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Переваги:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Гнучкість: дозволяє створювати частково застосовані функції."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const add5 = curriedAdd(5);\nadd5(10);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Читабельність і повторне використання:",
-                    "bold": true
-                  },
-                  {
-                    "text": " код стає більш модульним."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Композиція:",
-                    "bold": true
-                  },
-                  {
-                    "text": " добре поєднується з функціональними підходами."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "ES6 приклад:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const curriedMultiply = a => b => a * b;\ncurriedMultiply(4)(5);"
-          }
-        ]
-      },
-      "en": {
-        "question": "108. What is currying?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "currying",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Currying is a functional programming technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Example:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Original function:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function add(a, b) {\n  return a + b;\n}\nadd(2, 3);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Curried version:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function curriedAdd(a) {\n  return function (b) {\n    return a + b;\n  };\n}\ncurriedAdd(2)(3);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Benefits:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Flexibility: allows partial application of functions."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const add5 = curriedAdd(5);\nadd5(10);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Readability and reuse:",
-                    "bold": true
-                  },
-                  {
-                    "text": " promotes modular code."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Composition:",
-                    "bold": true
-                  },
-                  {
-                    "text": " works well with functional pipelines."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "ES6 example:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const curriedMultiply = a => b => a * b;\ncurriedMultiply(4)(5);"
-          }
-        ]
-      },
-      "pl": {
-        "question": "108. Czym jest curryowanie (currying)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "currying",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Curryowanie to technika programowania funkcyjnego, w której funkcja przyjmująca wiele argumentów jest przekształcana w sekwencję funkcji jednoargumentowych."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykład:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcja oryginalna:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function add(a, b) {\n  return a + b;\n}\nadd(2, 3);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wersja curryowana:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function curriedAdd(a) {\n  return function (b) {\n    return a + b;\n  };\n}\ncurriedAdd(2)(3);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zalety:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Elastyczność: umożliwia częściowe zastosowanie funkcji."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const add5 = curriedAdd(5);\nadd5(10);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Czytelność i ponowne użycie:",
-                    "bold": true
-                  },
-                  {
-                    "text": " sprzyja modularności kodu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kompozycja:",
-                    "bold": true
-                  },
-                  {
-                    "text": " dobrze współpracuje z innymi funkcjami."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Przykład ES6:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const curriedMultiply = a => b => a * b;\ncurriedMultiply(4)(5);"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 109,
-    "translations": {
-      "uk": {
-        "question": "109. Навіщо використовують метод Object.seal()?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Object.seal() використовується для обмеження змін у структурі об'єкта.",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Заборона додавання і видалення властивостей:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Нові властивості не можна додати, існуючі не можна видалити."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const obj = { a: 1 };\nObject.seal(obj);\nobj.b = 2;\ndelete obj.a;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зміна значень дозволена:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Значення існуючих властивостей можна змінювати."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "obj.a = 10;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Перевірка статусу:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Використовується ",
-                            "children": []
-                          },
-                          {
-                            "text": "Object.isSealed()",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Object.isSealed(obj);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Заборона зміни дескрипторів:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Неможливо змінити ",
-                            "children": []
-                          },
-                          {
-                            "text": "writable",
-                            "code": true
-                          },
-                          {
-                            "text": ", ",
-                            "children": []
-                          },
-                          {
-                            "text": "configurable",
-                            "code": true
-                          },
-                          {
-                            "text": " або ",
-                            "children": []
-                          },
-                          {
-                            "text": "enumerable",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "109. What is Object.seal() used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Object.seal() is used to restrict changes to an object’s structure.",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prevents adding and removing properties:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "New properties cannot be added and existing ones cannot be removed."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const obj = { a: 1 };\nObject.seal(obj);\nobj.b = 2;\ndelete obj.a;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Allows value changes:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Values of existing properties can be changed."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "obj.a = 10;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Seal status check:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Checked via ",
-                            "children": []
-                          },
-                          {
-                            "text": "Object.isSealed()",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Object.isSealed(obj);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prevents descriptor changes:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Property descriptors cannot be modified."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "109. Do czego służy metoda Object.seal()?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Object.seal() służy do ograniczenia zmian w strukturze obiektu.",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zakaz dodawania i usuwania właściwości:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Nie można dodawać ani usuwać właściwości."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const obj = { a: 1 };\nObject.seal(obj);\nobj.b = 2;\ndelete obj.a;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Możliwość zmiany wartości:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Wartości istniejących właściwości można zmieniać."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "obj.a = 10;"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Sprawdzenie statusu:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Za pomocą ",
-                            "children": []
-                          },
-                          {
-                            "text": "Object.isSealed()",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "Object.isSealed(obj);"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Blokada zmian deskryptorów:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Nie można zmieniać deskryptorów właściwości."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 110,
-    "translations": {
-      "uk": {
-        "question": "110. Навіщо використовується властивість .dataset?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": ".dataset",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "dataset",
-                    "code": true
-                  },
-                  {
-                    "text": " використовується для доступу до HTML-атрибутів, що починаються з "
-                  },
-                  {
-                    "text": "data-",
-                    "code": true
-                  },
-                  {
-                    "text": ", та зберігання кастомних даних у DOM-елементах."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Особливості:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Доступ до даних:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Атрибути data- доступні як властивості обʼєкта."
-                          },
-                          {
-                            "type": "code",
-                            "language": "html",
-                            "content": "<div id=\"el\" data-id=\"123\" data-name=\"test\"></div>"
-                          }
-                        ]
-                      }
-                    ]
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const el = document.getElementById('el');\nel.dataset.id; // \"123\"\nel.dataset.name; // \"test\""
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Створення та оновлення:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "el.dataset.newAttr = 'value';\nel.dataset.id = '456';"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Іменування:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "data-user-id",
-                            "code": true
-                          },
-                          {
-                            "text": " → "
-                          },
-                          {
-                            "text": "dataset.userId",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Видалення:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "delete el.dataset.newAttr;"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "110. What is the .dataset property used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": ".dataset",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "dataset",
-                    "code": true
-                  },
-                  {
-                    "text": " provides access to HTML attributes that start with "
-                  },
-                  {
-                    "text": "data-",
-                    "code": true
-                  },
-                  {
-                    "text": " and allows storing custom data on DOM elements."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Key features:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Data access:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "data- attributes are доступні as object properties."
-                          },
-                          {
-                            "type": "code",
-                            "language": "html",
-                            "content": "<div id=\"el\" data-id=\"123\" data-name=\"test\"></div>"
-                          }
-                        ]
-                      }
-                    ]
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const el = document.getElementById('el');\nel.dataset.id;\nel.dataset.name;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Create and update:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "el.dataset.newAttr = 'value';\nel.dataset.id = '456';"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Naming convention:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "data-user-id",
-                            "code": true
-                          },
-                          {
-                            "text": " → "
-                          },
-                          {
-                            "text": "dataset.userId",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Deletion:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "delete el.dataset.newAttr;"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "110. Do czego służy właściwość .dataset?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": ".dataset",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "dataset",
-                    "code": true
-                  },
-                  {
-                    "text": " służy do pracy z atrybutami HTML zaczynającymi się od "
-                  },
-                  {
-                    "text": "data-",
-                    "code": true
-                  },
-                  {
-                    "text": " oraz do przechowywania danych w elementach DOM."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Cechy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dostęp do danych:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Atrybuty data- są dostępne jako właściwości obiektu."
-                          },
-                          {
-                            "type": "code",
-                            "language": "html",
-                            "content": "<div id=\"el\" data-id=\"123\" data-name=\"test\"></div>"
-                          }
-                        ]
-                      }
-                    ]
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const el = document.getElementById('el');\nel.dataset.id;\nel.dataset.name;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tworzenie i aktualizacja:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "el.dataset.newAttr = 'value';\nel.dataset.id = '456';"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nazewnictwo:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "data-user-id",
-                            "code": true
-                          },
-                          {
-                            "text": " → "
-                          },
-                          {
-                            "text": "dataset.userId",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Usuwanie:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "delete el.dataset.newAttr;"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 111,
-    "translations": {
-      "uk": {
-        "question": "111. Як можна обмінюватися кодом між файлами?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Обмін кодом між файлами в JavaScript здійснюється через механізми модулів."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ES Modules (ESM):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Сучасний стандарт імпорту та експорту коду."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Експорт:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "export const add = (a, b) => a + b;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Імпорт:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "import { add } from './math.js';"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "CommonJS:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Використовується переважно в Node.js."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Експорт:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "module.exports = { add };"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Імпорт:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const { add } = require('./math');"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Глобальні скрипти:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Застарілий підхід через <script> у HTML."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "111. How can code be shared between files?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Code sharing in JavaScript is done using module systems."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ES Modules (ESM):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Modern standard for importing and exporting code."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Export:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "export const add = (a, b) => a + b;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Import:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "import { add } from './math.js';"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "CommonJS:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Used mainly in Node.js."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Export:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "module.exports = { add };"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Import:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const { add } = require('./math');"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Global scripts:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Legacy approach using <script> tags."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "111. Jak można współdzielić kod między plikami?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "W JavaScript wymiana kodu między plikami odbywa się za pomocą modułów."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ES Modules (ESM):",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Nowoczesny standard importu i eksportu kodu."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Eksport:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "export const add = (a, b) => a + b;"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Import:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "import { add } from './math.js';"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "CommonJS:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Stosowany głównie w Node.js."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Eksport:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "module.exports = { add };"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Import:",
-                            "bold": true
-                          },
-                          {
-                            "type": "code",
-                            "language": "javascript",
-                            "content": "const { add } = require('./math');"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Skrypty globalne:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Przestarzały sposób z użyciem znaczników <script>."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 112,
-    "translations": {
-      "uk": {
-        "question": "112. Як працює «складальник сміття» в JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Garbage Collector",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Складальник сміття (Garbage Collector, GC)",
-                    "bold": true
-                  },
-                  {
-                    "text": " автоматично керує памʼяттю, видаляючи обʼєкти, до яких більше немає посилань."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Принцип роботи:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Виділення памʼяті:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Обʼєкти створюються в "
-                          },
-                          {
-                            "text": "heap",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Пошук недосяжних обʼєктів:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "GC визначає обʼєкти без активних посилань."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Очищення памʼяті:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Недосяжні обʼєкти видаляються."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основний алгоритм:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mark-and-Sweep",
-                    "code": true
-                  },
-                  {
-                    "text": " — маркування досяжних обʼєктів і очищення решти."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "112. How does the garbage collector work in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Garbage Collector",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Garbage Collector (GC)",
-                    "bold": true
-                  },
-                  {
-                    "text": " automatically manages memory by freeing objects that are no longer reachable."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "How it works:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Memory allocation:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Objects are allocated in the "
-                          },
-                          {
-                            "text": "heap",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reachability check:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "GC finds objects without references."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Memory cleanup:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Unreachable objects are removed."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Main algorithm:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mark-and-Sweep",
-                    "code": true
-                  },
-                  {
-                    "text": " algorithm marks reachable objects and sweeps the rest."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "112. Jak działa garbage collector w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Garbage Collector",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Garbage Collector (GC)",
-                    "bold": true
-                  },
-                  {
-                    "text": " automatycznie zarządza pamięcią, usuwając obiekty bez aktywnych referencji."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zasada działania:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Alokacja pamięci:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Obiekty są przechowywane w "
-                          },
-                          {
-                            "text": "heap",
-                            "code": true
-                          },
-                          {
-                            "text": "."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Sprawdzanie osiągalności:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "GC wykrywa obiekty bez referencji."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Czyszczenie pamięci:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Nieosiągalne obiekty są usuwane."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główny algorytm:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mark-and-Sweep",
-                    "code": true
-                  },
-                  {
-                    "text": " — oznaczanie i usuwanie obiektów."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 113,
-    "translations": {
-      "uk": {
-        "question": "113. Що таке витоки пам'яті?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Memory Leaks",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Витоки памʼяті (Memory Leaks)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це ситуація, коли памʼять більше не використовується, але не звільняється, оскільки на неї зберігаються посилання."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні причини:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Глобальні змінні:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function leak() {\n  globalVar = 'leak';\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Замикання:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function createLeak() {\n  let data = new Array(1000000);\n  return () => data;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "DOM-елементи:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "let el = document.getElementById('x');\nel.remove();"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "113. What are memory leaks?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Memory Leaks",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Memory leaks",
-                    "bold": true
-                  },
-                  {
-                    "text": " occur when memory is no longer needed but is not released because references still exist."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Common causes:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Global variables:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function leak() {\n  globalVar = 'leak';\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Closures:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function createLeak() {\n  let data = new Array(1000000);\n  return () => data;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Detached DOM nodes:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "let el = document.getElementById('x');\nel.remove();"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "113. Czym są wycieki pamięci?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Memory Leaks",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wycieki pamięci",
-                    "bold": true
-                  },
-                  {
-                    "text": " występują, gdy pamięć nie jest już używana, ale nie zostaje zwolniona z powodu istniejących referencji."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne przyczyny:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zmienne globalne:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function leak() {\n  globalVar = 'leak';\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Domknięcia (closures):",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function createLeak() {\n  let data = new Array(1000000);\n  return () => data;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Oderwane elementy DOM:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "let el = document.getElementById('x');\nel.remove();"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 114,
-    "translations": {
-      "uk": {
-        "question": "114. Як працює контекст виконання (execution context) у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Execution context",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Контекст виконання — це середовище, у якому виконується код. Він визначає доступні змінні, значення this та порядок виконання."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Глобальний контекст:",
-                    "bold": true
-                  },
-                  {
-                    "text": " створюється під час запуску скрипта. У браузері це ",
-                    "children": []
-                  },
-                  {
-                    "text": "window",
-                    "code": true
-                  },
-                  {
-                    "text": " або ",
-                    "children": []
-                  },
-                  {
-                    "text": "globalThis",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функціональний контекст:",
-                    "bold": true
-                  },
-                  {
-                    "text": " створюється при кожному виклику функції та містить локальні змінні, аргументи і ",
-                    "children": []
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Модульний контекст:",
-                    "bold": true
-                  },
-                  {
-                    "text": " ізольований від глобального, кожен модуль має власний контекст."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "this",
-                "code": true
-              },
-              {
-                "text": " залежить від способу виклику функції. У стрілкових функціях "
-              },
-              {
-                "text": "this",
-                "code": true
-              },
-              {
-                "text": " береться з зовнішнього контексту."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function foo() {\n  console.log(this);\n}\n\nconst obj = {\n  method() {\n    console.log(this);\n    const inner = () => console.log(this);\n    inner();\n  }\n};\n\nfoo();\nobj.method();"
-          }
-        ]
-      },
-      "en": {
-        "question": "114. How does execution context work in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Execution context",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Execution context is the environment in which JavaScript code is executed. It defines variables, this, and execution order."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Global context:",
-                    "bold": true
-                  },
-                  {
-                    "text": " created when the script starts. In browsers it is ",
-                    "children": []
-                  },
-                  {
-                    "text": "window",
-                    "code": true
-                  },
-                  {
-                    "text": " or ",
-                    "children": []
-                  },
-                  {
-                    "text": "globalThis",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Function context:",
-                    "bold": true
-                  },
-                  {
-                    "text": " created on each function call and contains local variables, arguments, and ",
-                    "children": []
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Module context:",
-                    "bold": true
-                  },
-                  {
-                    "text": " isolated from the global scope. Each module has its own context."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "this",
-                "code": true
-              },
-              {
-                "text": " depends on how a function is called. Arrow functions inherit "
-              },
-              {
-                "text": "this",
-                "code": true
-              },
-              {
-                "text": " from the surrounding context."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function foo() {\n  console.log(this);\n}\n\nconst obj = {\n  method() {\n    console.log(this);\n    const inner = () => console.log(this);\n    inner();\n  }\n};\n\nfoo();\nobj.method();"
-          }
-        ]
-      },
-      "pl": {
-        "question": "114. Jak działa kontekst wykonania (execution context) w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Execution context",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kontekst wykonania to środowisko, w którym wykonywany jest kod JavaScript. Określa zmienne, this oraz kolejność wykonania."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kontekst globalny:",
-                    "bold": true
-                  },
-                  {
-                    "text": " tworzony przy starcie skryptu. W przeglądarce jest to ",
-                    "children": []
-                  },
-                  {
-                    "text": "window",
-                    "code": true
-                  },
-                  {
-                    "text": " lub ",
-                    "children": []
-                  },
-                  {
-                    "text": "globalThis",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kontekst funkcji:",
-                    "bold": true
-                  },
-                  {
-                    "text": " tworzony przy każdym wywołaniu funkcji i zawiera zmienne lokalne, argumenty oraz ",
-                    "children": []
-                  },
-                  {
-                    "text": "this",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kontekst modułu:",
-                    "bold": true
-                  },
-                  {
-                    "text": " odizolowany od globalnego. Każdy moduł ma własny kontekst."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "this",
-                "code": true
-              },
-              {
-                "text": " zależy od sposobu wywołania funkcji. Funkcje strzałkowe dziedziczą "
-              },
-              {
-                "text": "this",
-                "code": true
-              },
-              {
-                "text": " z kontekstu zewnętrznego."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function foo() {\n  console.log(this);\n}\n\nconst obj = {\n  method() {\n    console.log(this);\n    const inner = () => console.log(this);\n    inner();\n  }\n};\n\nfoo();\nobj.method();"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 115,
-    "translations": {
-      "uk": {
-        "question": "115. Різниця між примітивом та об'єктом?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Примітиви та об'єкти в JavaScript відрізняються за сутністю, поведінкою та способом зберігання даних."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Примітиви:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Типи:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "bigint",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "boolean",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "symbol",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Незмінність:",
-                    "bold": true
-                  },
-                  {
-                    "text": " значення примітивів незмінні (immutable)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Передача за значенням:",
-                    "bold": true
-                  },
-                  {
-                    "text": " копіюється саме значення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обгортки:",
-                    "bold": true
-                  },
-                  {
-                    "text": " доступ до властивостей можливий через тимчасові обʼєкти-обгортки."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "let a = 10;\nlet b = a;\nb = 20;\nconsole.log(a);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Об'єкти:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Типи:",
-                    "bold": true
-                  },
-                  {
-                    "text": " усе, що не є примітивом."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Змінність:",
-                    "bold": true
-                  },
-                  {
-                    "text": " дані можна змінювати."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Передача за посиланням:",
-                    "bold": true
-                  },
-                  {
-                    "text": " копіюється посилання."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Властивості та методи:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "let o1 = { x: 10 };\nlet o2 = o1;\no2.x = 20;\nconsole.log(o1.x);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Примітиви зберігають значення, обʼєкти — посилання."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "115. What is the difference between a primitive and an object?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Primitives and objects in JavaScript differ in nature, behavior, and how data is stored."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Primitives:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Types:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "bigint",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "boolean",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "symbol",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Immutability:",
-                    "bold": true
-                  },
-                  {
-                    "text": " primitive values cannot be changed."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Passed by value:",
-                    "bold": true
-                  },
-                  {
-                    "text": " the value itself is copied."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wrappers:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "let a = 10;\nlet b = a;\nb = 20;\nconsole.log(a);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Objects:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Types:",
-                    "bold": true
-                  },
-                  {
-                    "text": " everything that is not a primitive."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mutable:",
-                    "bold": true
-                  },
-                  {
-                    "text": " object data can be changed."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Passed by reference:",
-                    "bold": true
-                  },
-                  {
-                    "text": " references are copied."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Properties and methods:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "let o1 = { x: 10 };\nlet o2 = o1;\no2.x = 20;\nconsole.log(o1.x);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Primitives store values, objects store references."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "115. Jaka jest różnica między prymitywem a obiektem?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Prymitywy i obiekty w JavaScript różnią się naturą, zachowaniem oraz sposobem przechowywania danych."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Prymitywy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Typy:",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  {
-                    "text": "string",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "number",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "bigint",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "boolean",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "symbol",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": ", "
-                  },
-                  {
-                    "text": "undefined",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Niezmienność:",
-                    "bold": true
-                  },
-                  {
-                    "text": " wartości prymitywne są niezmienne."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przekazywane przez wartość:",
-                    "bold": true
-                  },
-                  {
-                    "text": " kopiowana jest wartość."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Obiekty:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Typy:",
-                    "bold": true
-                  },
-                  {
-                    "text": " wszystko, co nie jest prymitywem."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zmienność:",
-                    "bold": true
-                  },
-                  {
-                    "text": " dane można modyfikować."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przekazywane przez referencję:",
-                    "bold": true
-                  },
-                  {
-                    "text": " kopiowana jest referencja."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prymitywy przechowują wartości, obiekty przechowują referencje."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 116,
-    "translations": {
-      "uk": {
-        "question": "116. Що означає текст max call stack size exceeded у консолі?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Maximum call stack size exceeded",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Це помилка переповнення стеку викликів, яка виникає через занадто глибоку або нескінченну послідовність викликів функцій."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні причини:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Нескінченна рекурсія:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function recurse() {\n  recurse();\n}\nrecurse();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Взаємні виклики функцій:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function a() { b(); }\nfunction b() { a(); }\na();"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Як виправити:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Додати базову умову в рекурсії або замінити її на ітерацію."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "116. What does “Maximum call stack size exceeded” mean?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Maximum call stack size exceeded",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "This error occurs when the call stack overflows due to too many nested or infinite function calls."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Common causes:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Infinite recursion:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function recurse() {\n  recurse();\n}\nrecurse();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mutual recursive calls:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function a() { b(); }\nfunction b() { a(); }\na();"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "How to fix:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Add a termination condition or replace recursion with iteration."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "116. Co oznacza komunikat „Maximum call stack size exceeded”?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Maximum call stack size exceeded",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Błąd ten oznacza przepełnienie stosu wywołań spowodowane zbyt głębokimi lub nieskończonymi wywołaniami funkcji."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne przyczyny:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nieskończona rekurencja:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function recurse() {\n  recurse();\n}\nrecurse();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wzajemne wywołania funkcji:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function a() { b(); }\nfunction b() { a(); }\na();"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Jak naprawić:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dodać warunek zakończenia lub użyć iteracji zamiast rekurencji."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 117,
-    "translations": {
-      "uk": {
-        "question": "117. Як реалізувати відкладене завантаження зображень?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "lazy loading",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відкладене завантаження зображень оптимізує сторінку, підвантажуючи зображення лише коли вони з’являються в області перегляду."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Методи реалізації:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "HTML-атрибут loading=\"lazy\"",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Найпростіший варіант для сучасних браузерів."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Intersection Observer API",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Дозволяє точно контролювати момент завантаження через JavaScript."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Бібліотеки",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Lazysizes"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Lozad.js"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "117. How can lazy loading of images be implemented?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "lazy loading",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Lazy loading improves page performance by loading images only when they enter the viewport."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Implementation methods:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "HTML loading=\"lazy\" attribute",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "The simplest approach supported by modern browsers."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Intersection Observer API",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Provides fine-grained control over when images are loaded using JavaScript."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Libraries",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Lazysizes"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Lozad.js"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "117. Jak zaimplementować leniwe ładowanie obrazów?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "lazy loading",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Leniwe ładowanie poprawia wydajność strony, ładując obrazy dopiero wtedy, gdy pojawią się w obszarze widoku."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Metody implementacji:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Atrybut HTML loading=\"lazy\"",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Najprostsze rozwiązanie obsługiwane przez nowoczesne przeglądarki."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Intersection Observer API",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Umożliwia precyzyjną kontrolę momentu ładowania obrazów w JavaScript."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Biblioteki",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Lazysizes"
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Lozad.js"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 118,
-    "translations": {
-      "uk": {
-        "question": "118. Чим відрізняються події input та change?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "input VS change",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "input",
-                    "code": true
-                  },
-                  {
-                    "text": " і "
-                  },
-                  {
-                    "text": "change",
-                    "code": true
-                  },
-                  {
-                    "text": " — це події JavaScript для відстеження змін у полях форми з різною логікою спрацювання."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Подія input:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Спрацьовує при кожній зміні значення елемента."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Реагує миттєво під час введення або видалення символів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Працює з "
-                  },
-                  {
-                    "text": "<input>",
-                    "code": true
-                  },
-                  {
-                    "text": " та "
-                  },
-                  {
-                    "text": "<textarea>",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Подія change:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Спрацьовує після підтвердження зміни значення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для текстових полів — після втрати фокусу."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для "
-                  },
-                  {
-                    "text": "<select>",
-                    "code": true
-                  },
-                  {
-                    "text": " — одразу після вибору."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "118. What is the difference between input and change events?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "input VS change",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "input",
-                    "code": true
-                  },
-                  {
-                    "text": " and "
-                  },
-                  {
-                    "text": "change",
-                    "code": true
-                  },
-                  {
-                    "text": " are JavaScript events that track form value changes with different timing."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "input event:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Fires on every value change."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Triggers immediately while typing."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Works with "
-                  },
-                  {
-                    "text": "<input>",
-                    "code": true
-                  },
-                  {
-                    "text": " and "
-                  },
-                  {
-                    "text": "<textarea>",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "change event:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Fires only after the change is confirmed."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "For text fields — after losing focus."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "For "
-                  },
-                  {
-                    "text": "<select>",
-                    "code": true
-                  },
-                  {
-                    "text": " — immediately after selection."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "118. Czym różnią się zdarzenia input i change?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "input VS change",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "input",
-                    "code": true
-                  },
-                  {
-                    "text": " i "
-                  },
-                  {
-                    "text": "change",
-                    "code": true
-                  },
-                  {
-                    "text": " to zdarzenia JavaScript reagujące na zmiany pól formularza w różnym momencie."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zdarzenie input:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Uruchamia się przy każdej zmianie wartości."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reaguje natychmiast podczas pisania."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Działa z "
-                  },
-                  {
-                    "text": "<input>",
-                    "code": true
-                  },
-                  {
-                    "text": " oraz "
-                  },
-                  {
-                    "text": "<textarea>",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zdarzenie change:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Uruchamia się po zatwierdzeniu zmiany."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dla pól tekstowych — po utracie fokusu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dla "
-                  },
-                  {
-                    "text": "<select>",
-                    "code": true
-                  },
-                  {
-                    "text": " — po wybraniu opcji."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 119,
-    "translations": {
-      "uk": {
-        "question": "119. Чому typeof null повертає об'єкт?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "typeof null",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "typeof null",
-                    "code": true
-                  },
-                  {
-                    "text": " повертає "
-                  },
-                  {
-                    "text": "\"object\"",
-                    "code": true
-                  },
-                  {
-                    "text": " через помилку, допущену в ранніх версіях JavaScript, яка збережена заради зворотної сумісності."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Пояснення:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Технічна причина:",
-                    "bold": true
-                  },
-                  {
-                    "text": " У ранній реалізації JavaScript значення зберігались із бітовими тегами. Значення "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " мало той самий тег, що й об'єкти, через що "
-                  },
-                  {
-                    "text": "typeof null",
-                    "code": true
-                  },
-                  {
-                    "text": " повертає "
-                  },
-                  {
-                    "text": "\"object\"",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Чому не виправили:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Виправлення зламало б величезну кількість існуючого коду."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Як перевірити, чи значення є "
-              },
-              {
-                "text": "null",
-                "code": true
-              },
-              {
-                "text": ":"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовуй явну перевірку:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "value === null; // true, якщо value є null"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Висновок:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Це історичний дефект мови, який потрібно враховувати."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "119. Why does typeof null return an object?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "typeof null",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "typeof null",
-                    "code": true
-                  },
-                  {
-                    "text": " returns "
-                  },
-                  {
-                    "text": "\"object\"",
-                    "code": true
-                  },
-                  {
-                    "text": " due to a bug in early JavaScript versions preserved for backward compatibility."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Explanation:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Technical reason:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Early JavaScript used bit-level tags for values. "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " shared the same tag as objects, so "
-                  },
-                  {
-                    "text": "typeof null",
-                    "code": true
-                  },
-                  {
-                    "text": " returns "
-                  },
-                  {
-                    "text": "\"object\"",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Why it was not fixed:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Changing it would break a massive amount of existing code."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "How to check for "
-              },
-              {
-                "text": "null",
-                "code": true
-              },
-              {
-                "text": ":"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Use an explicit check:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "value === null; // true if value is null"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Conclusion:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "This is a historical language artifact that must be accounted for."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "119. Dlaczego typeof null zwraca obiekt?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "typeof null",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "typeof null",
-                    "code": true
-                  },
-                  {
-                    "text": " zwraca "
-                  },
-                  {
-                    "text": "\"object\"",
-                    "code": true
-                  },
-                  {
-                    "text": " z powodu błędu z wczesnych wersji JavaScript zachowanego dla kompatybilności wstecznej."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Wyjaśnienie:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przyczyna techniczna:",
-                    "bold": true
-                  },
-                  {
-                    "text": " We wczesnej implementacji JavaScript wartości miały znaczniki bitowe. "
-                  },
-                  {
-                    "text": "null",
-                    "code": true
-                  },
-                  {
-                    "text": " miał ten sam znacznik co obiekty, dlatego "
-                  },
-                  {
-                    "text": "typeof null",
-                    "code": true
-                  },
-                  {
-                    "text": " zwraca "
-                  },
-                  {
-                    "text": "\"object\"",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dlaczego nie poprawiono:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Zmiana złamałaby ogromną ilość istniejącego kodu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Jak sprawdzić, czy wartość to "
-              },
-              {
-                "text": "null",
-                "code": true
-              },
-              {
-                "text": ":"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Użyj jawnego porównania:"
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "value === null; // true, jeśli value to null"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Wniosek:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "To historyczny defekt języka, który należy brać pod uwagę."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 120,
-    "translations": {
-      "uk": {
-        "question": "120. Навіщо потрібний конструктор Proxy?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Конструктор "
-                  },
-                  {
-                    "text": "Proxy",
-                    "code": true
-                  },
-                  {
-                    "text": " у JavaScript дозволяє перехоплювати та змінювати стандартну поведінку об'єктів під час виконання операцій над ними."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Як працює Proxy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Цільовий об'єкт:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Об'єкт, над яким виконуються операції."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обробник (handler):",
-                    "bold": true
-                  },
-                  {
-                    "text": " Об'єкт з пастками ("
-                  },
-                  {
-                    "text": "traps",
-                    "code": true
-                  },
-                  {
-                    "text": "), які перехоплюють операції."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Синтаксис:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const proxy = new Proxy(target, handler);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Навіщо використовують Proxy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Валідація даних:",
-                    "bold": true
-                  },
-                  {
-                    "text": " контроль значень при читанні та записі."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Контроль доступу:",
-                    "bold": true
-                  },
-                  {
-                    "text": " обмеження або маскування властивостей."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Логування:",
-                    "bold": true
-                  },
-                  {
-                    "text": " відстеження дій з об'єктом."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Лінива ініціалізація:",
-                    "bold": true
-                  },
-                  {
-                    "text": " виконання логіки при першому доступі."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "120. Why is the Proxy constructor needed?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The "
-                  },
-                  {
-                    "text": "Proxy",
-                    "code": true
-                  },
-                  {
-                    "text": " constructor in JavaScript allows intercepting and redefining fundamental operations on objects."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "How Proxy works:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Target object:",
-                    "bold": true
-                  },
-                  {
-                    "text": " The object being proxied."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Handler:",
-                    "bold": true
-                  },
-                  {
-                    "text": " An object containing traps ("
-                  },
-                  {
-                    "text": "traps",
-                    "code": true
-                  },
-                  {
-                    "text": ") that intercept operations."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Syntax:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const proxy = new Proxy(target, handler);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Why use Proxy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Data validation:",
-                    "bold": true
-                  },
-                  {
-                    "text": " enforcing rules on access and assignment."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Access control:",
-                    "bold": true
-                  },
-                  {
-                    "text": " restricting or modifying property access."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Logging:",
-                    "bold": true
-                  },
-                  {
-                    "text": " tracking interactions with objects."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Lazy behavior:",
-                    "bold": true
-                  },
-                  {
-                    "text": " executing logic on first access."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "120. Do czego służy konstruktor Proxy?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Konstruktor "
-                  },
-                  {
-                    "text": "Proxy",
-                    "code": true
-                  },
-                  {
-                    "text": " w JavaScript umożliwia przechwytywanie i modyfikowanie podstawowych operacji na obiektach."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Jak działa Proxy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obiekt docelowy:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Obiekt, na którym wykonywane są operacje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Handler:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Obiekt zawierający pułapki ("
-                  },
-                  {
-                    "text": "traps",
-                    "code": true
-                  },
-                  {
-                    "text": "), które przechwytują operacje."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Składnia:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "const proxy = new Proxy(target, handler);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zastosowanie Proxy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Walidacja danych:",
-                    "bold": true
-                  },
-                  {
-                    "text": " kontrola wartości przy odczycie i zapisie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Kontrola dostępu:",
-                    "bold": true
-                  },
-                  {
-                    "text": " ograniczanie dostępu do właściwości."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Logowanie:",
-                    "bold": true
-                  },
-                  {
-                    "text": " śledzenie operacji na obiekcie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Leniwa inicjalizacja:",
-                    "bold": true
-                  },
-                  {
-                    "text": " wykonywanie logiki przy pierwszym dostępie."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 121,
-    "translations": {
-      "uk": {
-        "question": "121. Що таке хвостова рекурсія (tail recursion)? Оптимізація рекурсії?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Хвостова рекурсія:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Хвостова рекурсія (tail recursion) — це рекурсія, у якій рекурсивний виклик є останньою операцією у функції."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Без хвостової рекурсії:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function factorial(n) {\n  if (n === 0) return 1;\n  return n * factorial(n - 1);\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "З хвостовою рекурсією:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function factorialTail(n, acc = 1) {\n  if (n === 0) return acc;\n  return factorialTail(n - 1, acc * n);\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Оптимізація хвостової рекурсії:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tail Call Optimization (TCO) дозволяє не створювати нові фрейми стеку для хвостових викликів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Переваги:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Менше використання пам’яті."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відсутність переповнення стеку."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Підтримка в JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ES6 формально описує TCO, але більшість рушіїв JavaScript її не реалізують."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "121. What is tail recursion? Recursion optimization?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Tail recursion:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tail recursion is a form of recursion where the recursive call is the last operation in a function."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Without tail recursion:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function factorial(n) {\n  if (n === 0) return 1;\n  return n * factorial(n - 1);\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "With tail recursion:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function factorialTail(n, acc = 1) {\n  if (n === 0) return acc;\n  return factorialTail(n - 1, acc * n);\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Tail call optimization:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tail Call Optimization (TCO) reuses the current stack frame instead of creating a new one."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Benefits:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Lower memory usage."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Avoids stack overflow errors."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "JavaScript support:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Although specified in ES6, TCO is not implemented in most JavaScript engines."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "121. Czym jest rekurencja ogonowa? Optymalizacja rekurencji?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Rekurencja ogonowa:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Rekurencja ogonowa to rekurencja, w której wywołanie rekurencyjne jest ostatnią operacją funkcji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Bez rekurencji ogonowej:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function factorial(n) {\n  if (n === 0) return 1;\n  return n * factorial(n - 1);\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Z rekurencją ogonową:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function factorialTail(n, acc = 1) {\n  if (n === 0) return acc;\n  return factorialTail(n - 1, acc * n);\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Optymalizacja rekurencji ogonowej:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Tail Call Optimization (TCO) eliminuje tworzenie nowych ramek stosu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Korzyści:",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mniejsze zużycie pamięci."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Brak przepełnienia stosu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Wsparcie w JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Mimo że ES6 opisuje TCO, większość silników JavaScript go nie obsługuje."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 122,
-    "translations": {
-      "uk": {
-        "question": "122. Що таке і як працює debounce() та throttle() в JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "debounce() та throttle()",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "debounce",
-                    "code": true
-                  },
-                  {
-                    "text": " — техніка, що відкладає виконання функції до завершення паузи між викликами."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Як працює debounce:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Кожен виклик скидає таймер."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функція виконується лише після затримки."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function debounce(fn, delay) {\n  let t;\n  return (...args) => {\n    clearTimeout(t);\n    t = setTimeout(() => fn(...args), delay);\n  };\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "throttle:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "throttle",
-                    "code": true
-                  },
-                  {
-                    "text": " — техніка, що обмежує виконання функції фіксованим інтервалом."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function throttle(fn, limit) {\n  let last = 0;\n  return (...args) => {\n    const now = Date.now();\n    if (now - last >= limit) {\n      last = now;\n      fn(...args);\n    }\n  };\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Висновок:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "debounce",
-                    "code": true
-                  },
-                  {
-                    "text": " — один виклик після серії подій."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "throttle",
-                    "code": true
-                  },
-                  {
-                    "text": " — регулярне виконання з обмеженням частоти."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "122. What are debounce() and throttle() and how do they work in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "debounce() and throttle()",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "debounce",
-                    "code": true
-                  },
-                  {
-                    "text": " delays function execution until calls stop for a given time."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "How debounce works:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Each call resets the timer."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Function runs after the delay ends."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function debounce(fn, delay) {\n  let t;\n  return (...args) => {\n    clearTimeout(t);\n    t = setTimeout(() => fn(...args), delay);\n  };\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "throttle:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "throttle",
-                    "code": true
-                  },
-                  {
-                    "text": " limits function execution to once per time interval."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function throttle(fn, limit) {\n  let last = 0;\n  return (...args) => {\n    const now = Date.now();\n    if (now - last >= limit) {\n      last = now;\n      fn(...args);\n    }\n  };\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Conclusion:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "debounce",
-                    "code": true
-                  },
-                  {
-                    "text": " for single execution after bursts."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "throttle",
-                    "code": true
-                  },
-                  {
-                    "text": " for controlled periodic execution."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "122. Czym są debounce() i throttle() oraz jak działają w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "debounce() i throttle()",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "debounce",
-                    "code": true
-                  },
-                  {
-                    "text": " opóźnia wykonanie funkcji do momentu zakończenia serii wywołań."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Jak działa debounce:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Każde wywołanie resetuje timer."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcja uruchamia się po upływie opóźnienia."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function debounce(fn, delay) {\n  let t;\n  return (...args) => {\n    clearTimeout(t);\n    t = setTimeout(() => fn(...args), delay);\n  };\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "throttle:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "throttle",
-                    "code": true
-                  },
-                  {
-                    "text": " ogranicza częstotliwość wykonywania funkcji."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "javascript",
-            "content": "function throttle(fn, limit) {\n  let last = 0;\n  return (...args) => {\n    const now = Date.now();\n    if (now - last >= limit) {\n      last = now;\n      fn(...args);\n    }\n  };\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Wniosek:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "debounce",
-                    "code": true
-                  },
-                  {
-                    "text": " jedno wywołanie po serii zdarzeń."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "throttle",
-                    "code": true
-                  },
-                  {
-                    "text": " regularne wywołania z limitem."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 123,
-    "translations": {
-      "uk": {
-        "question": "123. Як у JavaScript працюють декоратори? Як вони можуть бути використані для модифікації поведінки класів та методів?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Як працюють декоратори в JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Декоратори — це функції, які застосовуються до класів, методів або властивостей для зміни їхньої поведінки без зміни вихідного коду."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Синтаксис:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовується символ ",
-                    "text2": ""
-                  },
-                  {
-                    "text": "@",
-                    "code": true
-                  },
-                  {
-                    "text": " перед ім’ям декоратора."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "@decorator\nclass MyClass {}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Важливо:",
-                    "bold": true
-                  },
-                  {
-                    "text": " декоратори не повністю підтримуються нативно і зазвичай потребують Babel або TypeScript."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Використання декораторів:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для класів:",
-                    "bold": true
-                  },
-                  {
-                    "text": " розширення або модифікація класу."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function addFlag(target) {\n  target.prototype.flag = true;\n}\n\n@addFlag\nclass Example {}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для методів:",
-                    "bold": true
-                  },
-                  {
-                    "text": " перехоплення викликів або додавання логіки."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function log(target, key, descriptor) {\n  const original = descriptor.value;\n  descriptor.value = function (...args) {\n    console.log(key, args);\n    return original.apply(this, args);\n  };\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Висновок:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Декоратори — інструмент метапрограмування для централізованої модифікації поведінки."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "123. How do decorators work in JavaScript? How can they modify class and method behavior?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "How decorators work in JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Decorators are functions applied to classes or class members to modify behavior without changing source code."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Syntax:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "They use the ",
-                    "text2": ""
-                  },
-                  {
-                    "text": "@",
-                    "code": true
-                  },
-                  {
-                    "text": " symbol before a decorator name."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "@decorator\nclass MyClass {}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Note:",
-                    "bold": true
-                  },
-                  {
-                    "text": " decorators usually require Babel or TypeScript."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Decorator usage:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Class decorators:",
-                    "bold": true
-                  },
-                  {
-                    "text": " extend or alter class behavior."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Method decorators:",
-                    "bold": true
-                  },
-                  {
-                    "text": " wrap or intercept method calls."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Conclusion:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Decorators enable clean, reusable behavior injection via metaprogramming."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "123. Jak działają dekoratory w JavaScript? Jak modyfikują zachowanie klas i metod?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Jak działają dekoratory w JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dekoratory to funkcje używane do modyfikacji klas lub ich elementów bez zmiany kodu źródłowego."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Składnia:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Używany jest symbol ",
-                    "text2": ""
-                  },
-                  {
-                    "text": "@",
-                    "code": true
-                  },
-                  {
-                    "text": " przed nazwą dekoratora."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "@decorator\nclass MyClass {}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Uwaga:",
-                    "bold": true
-                  },
-                  {
-                    "text": " dekoratory zwykle wymagają TypeScript lub Babel."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zastosowanie dekoratorów:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dekoratory klas:",
-                    "bold": true
-                  },
-                  {
-                    "text": " rozszerzanie funkcjonalności klas."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dekoratory metod:",
-                    "bold": true
-                  },
-                  {
-                    "text": " przechwytywanie wywołań metod."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Wniosek:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dekoratory to narzędzie metaprogramowania do centralnej modyfikacji zachowania."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 124,
-    "translations": {
-      "uk": {
-        "question": "124. Як можна створити об'єкти з приватними властивостями та методами JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Методи створення об'єктів із приватними властивостями та методами в JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "WeakMap:",
-                    "bold": true
-                  },
-                  {
-                    "text": " забезпечує справжню приватність, недоступну зовні."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const priv = new WeakMap();\nclass A {\n  constructor(v) { priv.set(this, v); }\n  get() { return priv.get(this); }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Приватні поля #:",
-                    "bold": true
-                  },
-                  {
-                    "text": " нативна підтримка приватних властивостей у класах."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "class A {\n  #x;\n  constructor(v) { this.#x = v; }\n  get() { return this.#x; }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Замикання:",
-                    "bold": true
-                  },
-                  {
-                    "text": " приватність через область видимості функції."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function A(v) {\n  let x = v;\n  return { get: () => x };\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Symbol:",
-                    "bold": true
-                  },
-                  {
-                    "text": " часткова приватність через унікальний ключ."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const k = Symbol();\nclass A {\n  constructor(v) { this[k] = v; }\n  get() { return this[k]; }\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "124. How can objects with private properties and methods be created in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Ways to create objects with private properties and methods in JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "WeakMap:",
-                    "bold": true
-                  },
-                  {
-                    "text": " provides true runtime privacy."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const priv = new WeakMap();\nclass A {\n  constructor(v) { priv.set(this, v); }\n  get() { return priv.get(this); }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Private fields #:",
-                    "bold": true
-                  },
-                  {
-                    "text": " native class-level privacy."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "class A {\n  #x;\n  constructor(v) { this.#x = v; }\n  get() { return this.#x; }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Closures:",
-                    "bold": true
-                  },
-                  {
-                    "text": " privacy via lexical scope."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function A(v) {\n  let x = v;\n  return { get: () => x };\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Symbol:",
-                    "bold": true
-                  },
-                  {
-                    "text": " partial privacy using unique keys."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const k = Symbol();\nclass A {\n  constructor(v) { this[k] = v; }\n  get() { return this[k]; }\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "124. Jak tworzyć obiekty z prywatnymi właściwościami i metodami w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Sposoby tworzenia obiektów z prywatnymi właściwościami i metodami w JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "WeakMap:",
-                    "bold": true
-                  },
-                  {
-                    "text": " zapewnia pełną prywatność w czasie wykonania."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const priv = new WeakMap();\nclass A {\n  constructor(v) { priv.set(this, v); }\n  get() { return priv.get(this); }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pola prywatne #:",
-                    "bold": true
-                  },
-                  {
-                    "text": " natywna prywatność w klasach."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "class A {\n  #x;\n  constructor(v) { this.#x = v; }\n  get() { return this.#x; }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Domknięcia:",
-                    "bold": true
-                  },
-                  {
-                    "text": " prywatność przez zakres funkcji."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "function A(v) {\n  let x = v;\n  return { get: () => x };\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Symbol:",
-                    "bold": true
-                  },
-                  {
-                    "text": " częściowa prywatność dzięki unikalnym kluczom."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "const k = Symbol();\nclass A {\n  constructor(v) { this[k] = v; }\n  get() { return this[k]; }\n}"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 125,
-    "translations": {
-      "uk": {
-        "question": "125. Методи перехоплення та обробки помилок у JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Методи перехоплення та обробки помилок у JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "try...catch:",
-                    "bold": true
-                  },
-                  {
-                    "text": " перехоплення синхронних помилок."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "try {\n  JSON.parse('bad');\n} catch (e) {\n  console.error(e.message);\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "async/await + try...catch:",
-                    "bold": true
-                  },
-                  {
-                    "text": " обробка помилок асинхронного коду."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "async function f() {\n  try {\n    await fetch('/api');\n  } catch (e) {\n    console.error(e);\n  }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Promise.catch:",
-                    "bold": true
-                  },
-                  {
-                    "text": " перехоплення помилок у Promise."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "fetch('/api').catch(err => console.error(err));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "window.onerror:",
-                    "bold": true
-                  },
-                  {
-                    "text": " глобальний перехоплювач помилок."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "unhandledrejection:",
-                    "bold": true
-                  },
-                  {
-                    "text": " необроблені Promise-відхилення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Custom Error:",
-                    "bold": true
-                  },
-                  {
-                    "text": " власні типи помилок."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "125. Error handling and interception methods in JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Error handling and interception methods in JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "try...catch:",
-                    "bold": true
-                  },
-                  {
-                    "text": " handles synchronous errors."
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "try {\n  JSON.parse('bad');\n} catch (e) {\n  console.error(e.message);\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "async/await + try...catch:",
-                    "bold": true
-                  },
-                  {
-                    "text": " async error handling."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Promise.catch:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Promise error interception."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "window.onerror:",
-                    "bold": true
-                  },
-                  {
-                    "text": " global error handler."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "unhandledrejection:",
-                    "bold": true
-                  },
-                  {
-                    "text": " unhandled Promise rejections."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Custom Error:",
-                    "bold": true
-                  },
-                  {
-                    "text": " domain-specific errors."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "125. Metody przechwytywania i obsługi błędów w JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Metody przechwytywania i obsługi błędów w JavaScript:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "try...catch:",
-                    "bold": true
-                  },
-                  {
-                    "text": " obsługa błędów synchronicznych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "async/await + try...catch:",
-                    "bold": true
-                  },
-                  {
-                    "text": " obsługa błędów asynchronicznych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Promise.catch:",
-                    "bold": true
-                  },
-                  {
-                    "text": " obsługa błędów Promise."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "window.onerror:",
-                    "bold": true
-                  },
-                  {
-                    "text": " globalny handler błędów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "unhandledrejection:",
-                    "bold": true
-                  },
-                  {
-                    "text": " nieobsłużone odrzucenia Promise."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Custom Error:",
-                    "bold": true
-                  },
-                  {
-                    "text": " własne typy błędów."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "javascript",
-    "order": 126,
-    "translations": {
-      "uk": {
-        "question": "126. За який проміжок часу була створена мова програмування JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Мова програмування JavaScript була створена за рекордно короткий час — лише "
-                  },
-                  {
-                    "text": "10 днів",
-                    "bold": true
-                  },
-                  {
-                    "text": " у травні 1995 року."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Автор мови — "
-                  },
-                  {
-                    "text": "Брендан Айх",
-                    "bold": true
-                  },
-                  {
-                    "text": ", який працював у компанії "
-                  },
-                  {
-                    "text": "Netscape",
-                    "bold": true
-                  },
-                  {
-                    "text": ". Початково мова називалась "
-                  },
-                  {
-                    "text": "Mocha",
-                    "bold": true
-                  },
-                  {
-                    "text": ", згодом "
-                  },
-                  {
-                    "text": "LiveScript",
-                    "bold": true
-                  },
-                  {
-                    "text": ", і лише пізніше отримала назву JavaScript."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "126. How long did it take to create the JavaScript programming language?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The JavaScript programming language was created in an extremely short time — only "
-                  },
-                  {
-                    "text": "10 days",
-                    "bold": true
-                  },
-                  {
-                    "text": " in May 1995."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Its creator, "
-                  },
-                  {
-                    "text": "Brendan Eich",
-                    "bold": true
-                  },
-                  {
-                    "text": ", was working at "
-                  },
-                  {
-                    "text": "Netscape",
-                    "bold": true
-                  },
-                  {
-                    "text": " at the time. The language was originally called "
-                  },
-                  {
-                    "text": "Mocha",
-                    "bold": true
-                  },
-                  {
-                    "text": ", then "
-                  },
-                  {
-                    "text": "LiveScript",
-                    "bold": true
-                  },
-                  {
-                    "text": ", before being renamed JavaScript."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "126. Ile czasu zajęło stworzenie języka programowania JavaScript?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Język programowania JavaScript został stworzony w rekordowo krótkim czasie — zaledwie "
-                  },
-                  {
-                    "text": "10 dni",
-                    "bold": true
-                  },
-                  {
-                    "text": " w maju 1995 roku."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Autorem języka jest "
-                  },
-                  {
-                    "text": "Brendan Eich",
-                    "bold": true
-                  },
-                  {
-                    "text": ", pracujący w firmie "
-                  },
-                  {
-                    "text": "Netscape",
-                    "bold": true
-                  },
-                  {
-                    "text": ". Początkowo język nosił nazwę "
-                  },
-                  {
-                    "text": "Mocha",
-                    "bold": true
-                  },
-                  {
-                    "text": ", następnie "
-                  },
-                  {
-                    "text": "LiveScript",
-                    "bold": true
-                  },
-                  {
-                    "text": ", aż ostatecznie przyjął nazwę JavaScript."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  }
-]
diff --git a/json/05-react.json b/json/05-react.json
deleted file mode 100644
index 41a82a50..00000000
--- a/json/05-react.json
+++ /dev/null
@@ -1,25165 +0,0 @@
-[
-  {
-    "category": "react",
-    "order": 1,
-    "translations": {
-      "uk": {
-        "question": "1. Що таке React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React",
-                "bold": true
-              },
-              {
-                "text": " — це JavaScript-бібліотека для створення користувацьких інтерфейсів. Основні характеристики:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Компонентний підхід:",
-                    "bold": true
-                  },
-                  {
-                    "text": " UI розбивається на незалежні компоненти, які можна повторно використовувати."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Virtual DOM:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Оптимізує оновлення інтерфейсу, зменшуючи кількість операцій з реальним DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Декларативність:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Ви описуєте бажаний стан UI, а React самостійно приводить його у відповідність."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Однонаправлений потік даних:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Дані передаються від батьківських компонентів до дочірніх через props."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React був створений Facebook і широко застосовується для розробки SPA."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "1. What is React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React",
-                "bold": true
-              },
-              {
-                "text": " is a JavaScript library for building user interfaces. Key characteristics:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Component-based approach:",
-                    "bold": true
-                  },
-                  {
-                    "text": " The UI is split into reusable, independent components."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Virtual DOM:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Improves performance by minimizing direct updates to the real DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Declarative nature:",
-                    "bold": true
-                  },
-                  {
-                    "text": " You describe how the UI should look for a given state, and React handles the updates."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "One-way data flow:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Data flows from parent to child components via props."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React was created by Facebook and is widely used for building Single Page Applications."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "1. Czym jest React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React",
-                "bold": true
-              },
-              {
-                "text": " to biblioteka JavaScript służąca do tworzenia interfejsów użytkownika. Główne cechy:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Podejście komponentowe:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Interfejs jest podzielony na niezależne, wielokrotnego użytku komponenty."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Virtual DOM:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Zwiększa wydajność poprzez ograniczenie operacji na rzeczywistym DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Deklaratywność:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Opisujesz docelowy wygląd UI, a React sam dba o aktualizacje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Jednokierunkowy przepływ danych:",
-                    "bold": true
-                  },
-                  {
-                    "text": " Dane są przekazywane z komponentów nadrzędnych do podrzędnych przez props."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React został stworzony przez Facebook i jest szeroko używany do tworzenia aplikacji SPA."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 2,
-    "translations": {
-      "uk": {
-        "question": "2. Перерахуйте особливості React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Компонентний підхід:", "bold": true },
-                  {
-                    "text": " Код розділений на багаторазові, незалежні компоненти."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Віртуальний DOM:", "bold": true },
-                  {
-                    "text": " Швидке оновлення інтерфейсу без прямої роботи з реальним DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Односпрямований потік даних:", "bold": true },
-                  { "text": " Дані передаються зверху вниз через props." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JSX:", "bold": true },
-                  { "text": " Синтаксичне розширення JavaScript для опису UI." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Стан і життєвий цикл:", "bold": true },
-                  {
-                    "text": " Компоненти керують власним станом і фазами життя."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Hooks:", "bold": true },
-                  {
-                    "text": " Робота зі станом і side effects у функціональних компонентах."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Екосистема:", "bold": true },
-                  {
-                    "text": " Інтеграція з бібліотеками на кшталт React Router і Redux."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO-френдлі:", "bold": true },
-                  { "text": " Підтримка SSR через Next.js." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Мобільна розробка:", "bold": true },
-                  {
-                    "text": " React Native для створення мобільних застосунків."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відкритий код:", "bold": true },
-                  { "text": " Активна спільнота та публічна розробка." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "2. List the key features of React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Component-based approach:", "bold": true },
-                  {
-                    "text": " Code is split into reusable, independent components."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Virtual DOM:", "bold": true },
-                  {
-                    "text": " Fast UI updates without direct manipulation of the real DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "One-way data flow:", "bold": true },
-                  { "text": " Data flows top-down via props." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JSX:", "bold": true },
-                  { "text": " JavaScript syntax extension for describing UI." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "State and lifecycle:", "bold": true },
-                  {
-                    "text": " Components manage their own state and lifecycle phases."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Hooks:", "bold": true },
-                  {
-                    "text": " Enable state and side effects in functional components."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ecosystem:", "bold": true },
-                  {
-                    "text": " Integration with libraries like React Router and Redux."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO-friendly:", "bold": true },
-                  { "text": " Server-side rendering via Next.js." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mobile development:", "bold": true },
-                  { "text": " React Native for building mobile apps." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Open source:", "bold": true },
-                  { "text": " Actively maintained by the community." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "2. Wymień główne cechy React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podejście komponentowe:", "bold": true },
-                  {
-                    "text": " Kod podzielony na niezależne, wielokrotnego użytku komponenty."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Virtual DOM:", "bold": true },
-                  {
-                    "text": " Szybkie aktualizacje interfejsu bez bezpośredniej pracy z DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jednokierunkowy przepływ danych:", "bold": true },
-                  { "text": " Dane przekazywane z góry na dół przez props." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JSX:", "bold": true },
-                  { "text": " Rozszerzenie składni JavaScript do opisu UI." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Stan i cykl życia:", "bold": true },
-                  {
-                    "text": " Komponenty zarządzają własnym stanem i cyklem życia."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Hooks:", "bold": true },
-                  {
-                    "text": " Obsługa stanu i efektów ubocznych w komponentach funkcyjnych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ekosystem:", "bold": true },
-                  {
-                    "text": " Wsparcie dla bibliotek takich jak React Router i Redux."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO-friendly:", "bold": true },
-                  { "text": " Renderowanie po stronie serwera dzięki Next.js." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tworzenie aplikacji mobilnych:", "bold": true },
-                  { "text": " React Native do budowy aplikacji mobilnych." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Open source:", "bold": true },
-                  { "text": " Aktywne wsparcie społeczności." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 3,
-    "translations": {
-      "uk": {
-        "question": "3. Які основні функції React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні функції React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Декларативний підхід:", "bold": true },
-                  {
-                    "text": " Описує, як має виглядати UI, а React сам оптимізує оновлення DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Компонентна структура:", "bold": true },
-                  {
-                    "text": " Побудова додатка з незалежних, багаторазових компонентів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Віртуальний DOM:", "bold": true },
-                  {
-                    "text": " Ефективне оновлення реального DOM для підвищення продуктивності."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Односпрямований потік даних:", "bold": true },
-                  {
-                    "text": " Передача даних від батьківських компонентів до дочірніх через props."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Хуки (Hooks):", "bold": true },
-                  {
-                    "text": " Використання стану та життєвого циклу у функціональних компонентах."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JSX:", "bold": true },
-                  {
-                    "text": " Розширення JavaScript для опису UI у синтаксисі, схожому на HTML."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Native:", "bold": true },
-                  {
-                    "text": " Створення нативних мобільних додатків на базі React."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Екосистема:", "bold": true },
-                  {
-                    "text": " Набір бібліотек і інструментів, таких як React Router, Redux, Context API."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Підтримка SSR:", "bold": true },
-                  {
-                    "text": " Серверний рендеринг для покращення SEO та швидкого старту."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Управління станом:", "bold": true },
-                  { "text": " useState, Context API, Redux та інші рішення." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ці можливості формують основу React як бібліотеки для сучасних інтерфейсів."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "3. What are the main functions of React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Core functions of React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Declarative approach:", "bold": true },
-                  {
-                    "text": " Describes how the UI should look, while React handles DOM updates."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Component architecture:", "bold": true },
-                  {
-                    "text": " Applications are built from reusable, independent components."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Virtual DOM:", "bold": true },
-                  {
-                    "text": " Efficient updates to the real DOM to improve performance."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "One-way data flow:", "bold": true },
-                  {
-                    "text": " Data flows from parent to child components via props."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hooks:", "bold": true },
-                  {
-                    "text": " Enable state and lifecycle logic in functional components."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JSX:", "bold": true },
-                  {
-                    "text": " JavaScript extension for describing UI using HTML-like syntax."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Native:", "bold": true },
-                  {
-                    "text": " Building native mobile applications using React principles."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ecosystem:", "bold": true },
-                  {
-                    "text": " Libraries and tools such as React Router, Redux, and Context API."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SSR support:", "bold": true },
-                  {
-                    "text": " Server-side rendering for better SEO and faster initial load."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "State management:", "bold": true },
-                  {
-                    "text": " useState, Context API, Redux, and other solutions."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "These functions define React as a flexible UI library."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "3. Jakie są główne funkcje React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne funkcje React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podejście deklaratywne:", "bold": true },
-                  { "text": " Opisuje wygląd UI, a React sam aktualizuje DOM." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Struktura komponentowa:", "bold": true },
-                  {
-                    "text": " Aplikacje budowane są z niezależnych, wielokrotnego użytku komponentów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Virtual DOM:", "bold": true },
-                  {
-                    "text": " Wydajne aktualizacje rzeczywistego DOM poprawiające wydajność."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jednokierunkowy przepływ danych:", "bold": true },
-                  {
-                    "text": " Dane przekazywane z komponentów nadrzędnych do podrzędnych przez props."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hooki:", "bold": true },
-                  {
-                    "text": " Obsługa stanu i cyklu życia w komponentach funkcyjnych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JSX:", "bold": true },
-                  {
-                    "text": " Rozszerzenie JavaScript do opisu UI w składni podobnej do HTML."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Native:", "bold": true },
-                  { "text": " Tworzenie natywnych aplikacji mobilnych." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ekosystem:", "bold": true },
-                  {
-                    "text": " Biblioteki i narzędzia takie jak React Router, Redux, Context API."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wsparcie SSR:", "bold": true },
-                  {
-                    "text": " Renderowanie po stronie serwera dla SEO i szybkiego startu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zarządzanie stanem:", "bold": true },
-                  {
-                    "text": " useState, Context API, Redux i inne rozwiązania."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Funkcje te definiują React jako nowoczesną bibliotekę UI."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 4,
-    "translations": {
-      "uk": {
-        "question": "4. Які ключові переваги використання React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ключові переваги використання React" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Швидкість", "bold": true },
-                  {
-                    "text": ": Virtual DOM зменшує кількість операцій з реальним DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Компонентний підхід", "bold": true },
-                  {
-                    "text": ": Повторно використовувані компоненти спрощують підтримку коду."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Одностороння передача даних", "bold": true },
-                  { "text": ": Прогнозований потік даних полегшує дебагінг." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Велика спільнота", "bold": true },
-                  { "text": ": Широка екосистема бібліотек та інструментів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Мобільна розробка", "bold": true },
-                  { "text": ": React Native для кросплатформених застосунків." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JSX", "bold": true },
-                  {
-                    "text": ": Поєднання JavaScript і HTML підвищує читабельність."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Хуки", "bold": true },
-                  { "text": ": Просте управління станом і життєвим циклом." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO-дружність", "bold": true },
-                  { "text": ": SSR через Next.js покращує індексацію." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Гнучкість", "bold": true },
-                  { "text": ": Легка інтеграція в існуючі проєкти." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React DevTools", "bold": true },
-                  { "text": ": Зручне налагодження компонентів і стану." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "4. What are the key advantages of using React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key advantages of using React" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Performance", "bold": true },
-                  { "text": ": Virtual DOM reduces direct DOM operations." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Component-based", "bold": true },
-                  { "text": ": Reusable components simplify maintenance." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "One-way data flow", "bold": true },
-                  { "text": ": Predictable data flow eases debugging." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Large community", "bold": true },
-                  { "text": ": Rich ecosystem of libraries and tools." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mobile compatibility", "bold": true },
-                  { "text": ": React Native enables cross-platform apps." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JSX", "bold": true },
-                  { "text": ": Combines JavaScript and HTML for clarity." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hooks support", "bold": true },
-                  { "text": ": Simplified state and lifecycle handling." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO-friendly", "bold": true },
-                  { "text": ": Server-side rendering with Next.js." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Flexibility", "bold": true },
-                  { "text": ": Easy integration into existing projects." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React DevTools", "bold": true },
-                  { "text": ": Efficient debugging of components and state." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "4. Jakie są kluczowe zalety korzystania z React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kluczowe zalety korzystania z React" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wydajność", "bold": true },
-                  {
-                    "text": ": Virtual DOM ogranicza operacje na prawdziwym DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podejście komponentowe", "bold": true },
-                  {
-                    "text": ": Komponenty wielokrotnego użytku ułatwiają utrzymanie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jednokierunkowy przepływ danych", "bold": true },
-                  { "text": ": Przewidywalny model ułatwia debugowanie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Duża społeczność", "bold": true },
-                  { "text": ": Bogaty ekosystem bibliotek i narzędzi." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Aplikacje mobilne", "bold": true },
-                  { "text": ": React Native dla aplikacji wieloplatformowych." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JSX", "bold": true },
-                  { "text": ": Czytelne łączenie JavaScript i HTML." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hooki", "bold": true },
-                  { "text": ": Proste zarządzanie stanem i cyklem życia." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO-friendly", "bold": true },
-                  { "text": ": Renderowanie po stronie serwera z Next.js." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Elastyczność", "bold": true },
-                  { "text": ": Łatwa integracja z innymi projektami." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React DevTools", "bold": true },
-                  { "text": ": Skuteczne narzędzie do debugowania." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 5,
-    "translations": {
-      "uk": {
-        "question": "5. Що таке JSX?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "JSX (JavaScript XML)", "bold": true },
-              {
-                "text": " — це синтаксис, який дозволяє описувати UI у вигляді XML-подібного коду всередині JavaScript. Використовується в React для опису інтерфейсу."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні особливості JSX:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "XML-подібний синтаксис:", "bold": true },
-                  { "text": " Схожий на HTML, але є частиною JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вбудований JavaScript:", "bold": true },
-                  { "text": " Вирази JavaScript вставляються через {}." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Трансляція:", "bold": true },
-                  {
-                    "text": " JSX компілюється у звичайний JavaScript за допомогою Babel."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Атрибути:", "bold": true },
-                  {
-                    "text": " Використовуються camelCase-імена, наприклад className, htmlFor."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Один кореневий елемент:", "bold": true },
-                  {
-                    "text": " JSX-вираз повинен повертати один кореневий елемент або Fragment."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Читабельний синтаксис." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Тісна інтеграція з логікою JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Зручне створення UI-компонентів." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JSX не є обовʼязковим, але практично стандартом у React-проєктах."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "5. What is JSX?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "JSX (JavaScript XML)", "bold": true },
-              {
-                "text": " is a syntax extension that allows writing UI structures using XML-like code inside JavaScript. It is used in React to describe the UI."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key features of JSX:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "XML-like syntax:", "bold": true },
-                  { "text": " Similar to HTML but embedded in JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Embedded JavaScript:", "bold": true },
-                  { "text": " JavaScript expressions are written inside {}." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Compilation:", "bold": true },
-                  {
-                    "text": " JSX is compiled into plain JavaScript using Babel."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Attributes:", "bold": true },
-                  {
-                    "text": " Uses camelCase names like className and htmlFor."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Single root element:", "bold": true },
-                  {
-                    "text": " JSX expressions must return one root element or a Fragment."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Advantages:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Readable syntax." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tight integration with JavaScript logic." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Convenient UI component creation." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JSX is optional but widely adopted in React projects."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "5. Czym jest JSX?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "JSX (JavaScript XML)", "bold": true },
-              {
-                "text": " to rozszerzenie składni umożliwiające zapisywanie struktury UI w formie podobnej do XML wewnątrz JavaScript. Jest używane w React do opisu interfejsu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne cechy JSX:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Składnia podobna do XML:", "bold": true },
-                  { "text": " Przypomina HTML, ale działa w JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wbudowany JavaScript:", "bold": true },
-                  { "text": " Wyrażenia JavaScript umieszcza się w {}." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kompilacja:", "bold": true },
-                  {
-                    "text": " JSX jest transpilowany do czystego JavaScript przez Babel."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Atrybuty:", "bold": true },
-                  {
-                    "text": " Stosowane są nazwy camelCase, np. className, htmlFor."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jeden element nadrzędny:", "bold": true },
-                  {
-                    "text": " JSX musi zwracać jeden element główny lub Fragment."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Czytelna składnia." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ścisła integracja z logiką JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Wygodne tworzenie komponentów UI." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JSX nie jest wymagany, ale powszechnie stosowany w projektach React."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 6,
-    "translations": {
-      "uk": {
-        "question": "6. Різниця між станом (state) та пропсами (props)?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Різниця між станом (state) та пропсами (props)" }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Критерій" }],
-              [{ "text": "State" }],
-              [{ "text": "Props" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Призначення", "bold": true }],
-                [{ "text": "Зберігає внутрішній стан компонента." }],
-                [
-                  {
-                    "text": "Передає дані від батьківського компонента до дочірнього."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Змінюваність", "bold": true }],
-                [{ "text": "Може змінюватися всередині компонента." }],
-                [{ "text": "Незмінні (read-only)." }]
-              ],
-              [
-                [{ "text": "Доступність", "bold": true }],
-                [{ "text": "Доступний лише в компоненті, де визначений." }],
-                [{ "text": "Доступний у дочірньому компоненті." }]
-              ],
-              [
-                [{ "text": "Ініціалізація", "bold": true }],
-                [{ "text": "Встановлюється через useState або конструктор." }],
-                [{ "text": "Передається з батьківського компонента." }]
-              ],
-              [
-                [{ "text": "Область використання", "bold": true }],
-                [{ "text": "Для динамічних даних, що змінюються." }],
-                [{ "text": "Для передачі даних між компонентами." }]
-              ],
-              [
-                [{ "text": "Хто керує?", "bold": true }],
-                [{ "text": "Поточний компонент." }],
-                [{ "text": "Батьківський компонент." }]
-              ]
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "6. What is the difference between state and props?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Difference between state and props" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Criteria" }],
-              [{ "text": "State" }],
-              [{ "text": "Props" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Purpose", "bold": true }],
-                [{ "text": "Stores internal component data." }],
-                [{ "text": "Passes data from parent to child component." }]
-              ],
-              [
-                [{ "text": "Mutability", "bold": true }],
-                [{ "text": "Can be changed within the component." }],
-                [{ "text": "Immutable (read-only)." }]
-              ],
-              [
-                [{ "text": "Accessibility", "bold": true }],
-                [{ "text": "Available only inside the owning component." }],
-                [{ "text": "Accessible in child components." }]
-              ],
-              [
-                [{ "text": "Initialization", "bold": true }],
-                [{ "text": "Initialized via useState or constructor." }],
-                [{ "text": "Defined by the parent component." }]
-              ],
-              [
-                [{ "text": "Usage scope", "bold": true }],
-                [{ "text": "For dynamic, changeable data." }],
-                [{ "text": "For passing static or dynamic data." }]
-              ],
-              [
-                [{ "text": "Who controls it?", "bold": true }],
-                [{ "text": "The component itself." }],
-                [{ "text": "The parent component." }]
-              ]
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "6. Jaka jest różnica między state a props?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Różnica między state a props" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Kryterium" }],
-              [{ "text": "State" }],
-              [{ "text": "Props" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Przeznaczenie", "bold": true }],
-                [{ "text": "Przechowuje wewnętrzny stan komponentu." }],
-                [{ "text": "Przekazuje dane z komponentu nadrzędnego." }]
-              ],
-              [
-                [{ "text": "Zmienność", "bold": true }],
-                [{ "text": "Może być zmieniany wewnątrz komponentu." }],
-                [{ "text": "Niezmienne (read-only)." }]
-              ],
-              [
-                [{ "text": "Dostępność", "bold": true }],
-                [{ "text": "Dostępny tylko w komponencie właścicielu." }],
-                [{ "text": "Dostępny w komponentach podrzędnych." }]
-              ],
-              [
-                [{ "text": "Inicjalizacja", "bold": true }],
-                [{ "text": "Ustawiany przez useState lub konstruktor." }],
-                [{ "text": "Określany przez komponent nadrzędny." }]
-              ],
-              [
-                [{ "text": "Zakres użycia", "bold": true }],
-                [{ "text": "Dla danych dynamicznych." }],
-                [{ "text": "Do przekazywania danych między komponentami." }]
-              ],
-              [
-                [{ "text": "Kto kontroluje?", "bold": true }],
-                [{ "text": "Sam komponent." }],
-                [{ "text": "Komponent nadrzędny." }]
-              ]
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 7,
-    "translations": {
-      "uk": {
-        "question": "7. Яка різниця між елементом і компонентом?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Різниця між елементом і компонентом у React:" }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Критерій" }],
-              [{ "text": "Елемент" }],
-              [{ "text": "Компонент" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Визначення", "bold": true }],
-                [{ "text": "Обʼєкт, що описує вигляд інтерфейсу." }],
-                [{ "text": "Функція або клас, який повертає React-елементи." }]
-              ],
-              [
-                [{ "text": "Тип", "bold": true }],
-                [{ "text": "Нероздільний та незмінний (immutable)." }],
-                [{ "text": "Багаторазовий, може мати стан." }]
-              ],
-              [
-                [{ "text": "Синтаксис створення", "bold": true }],
-                [{ "text": "JSX або React.createElement." }],
-                [{ "text": "Функція або клас компонента." }]
-              ],
-              [
-                [{ "text": "Призначення", "bold": true }],
-                [{ "text": "Представляє окремий вузол UI." }],
-                [{ "text": "Інкапсулює структуру та логіку UI." }]
-              ],
-              [
-                [{ "text": "Використання", "bold": true }],
-                [{ "text": "Базовий опис інтерфейсу." }],
-                [{ "text": "Побудова складних частин додатка." }]
-              ],
-              [
-                [{ "text": "Приклад", "bold": true }],
-                [{ "text": "<h1>Hello</h1>", "code": true }],
-                [
-                  {
-                    "text": "function Hello() { return <h1>Hello</h1>; }",
-                    "code": true
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Елемент є результатом, компонент є фабрикою для їх створення."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "7. What is the difference between an element and a component?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference between an element and a component in React:"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Criteria" }],
-              [{ "text": "Element" }],
-              [{ "text": "Component" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Definition", "bold": true }],
-                [
-                  {
-                    "text": "An object describing what the UI should look like."
-                  }
-                ],
-                [{ "text": "A function or class that returns React elements." }]
-              ],
-              [
-                [{ "text": "Type", "bold": true }],
-                [{ "text": "Immutable." }],
-                [{ "text": "Reusable and may have state." }]
-              ],
-              [
-                [{ "text": "Creation syntax", "bold": true }],
-                [{ "text": "JSX or React.createElement." }],
-                [{ "text": "Function or class component." }]
-              ],
-              [
-                [{ "text": "Purpose", "bold": true }],
-                [{ "text": "Represents a single UI node." }],
-                [{ "text": "Encapsulates UI structure and logic." }]
-              ],
-              [
-                [{ "text": "Usage", "bold": true }],
-                [{ "text": "Low-level UI description." }],
-                [{ "text": "Building complex UI with logic." }]
-              ],
-              [
-                [{ "text": "Example", "bold": true }],
-                [{ "text": "<h1>Hello</h1>", "code": true }],
-                [
-                  {
-                    "text": "function Hello() { return <h1>Hello</h1>; }",
-                    "code": true
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "An element is the result, a component is the blueprint."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "7. Jaka jest różnica między elementem a komponentem?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Różnica między elementem a komponentem w React:" }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Kryterium" }],
-              [{ "text": "Element" }],
-              [{ "text": "Komponent" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Definicja", "bold": true }],
-                [{ "text": "Obiekt opisujący wygląd interfejsu." }],
-                [{ "text": "Funkcja lub klasa zwracająca elementy React." }]
-              ],
-              [
-                [{ "text": "Typ", "bold": true }],
-                [{ "text": "Niezmienny (immutable)." }],
-                [{ "text": "Wielokrotnego użytku, może posiadać stan." }]
-              ],
-              [
-                [{ "text": "Sposób tworzenia", "bold": true }],
-                [{ "text": "JSX lub React.createElement." }],
-                [{ "text": "Komponent funkcyjny lub klasowy." }]
-              ],
-              [
-                [{ "text": "Przeznaczenie", "bold": true }],
-                [{ "text": "Pojedynczy element UI." }],
-                [{ "text": "Logika i struktura interfejsu." }]
-              ],
-              [
-                [{ "text": "Zastosowanie", "bold": true }],
-                [{ "text": "Podstawowy opis UI." }],
-                [{ "text": "Budowa złożonych części aplikacji." }]
-              ],
-              [
-                [{ "text": "Przykład", "bold": true }],
-                [{ "text": "<h1>Hello</h1>", "code": true }],
-                [
-                  {
-                    "text": "function Hello() { return <h1>Hello</h1>; }",
-                    "code": true
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Element to wynik, komponent to mechanizm jego tworzenia."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 8,
-    "translations": {
-      "uk": {
-        "question": "8. Як створити компоненти в React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "У React компоненти можна створювати двома способами:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Функціональний компонент:", "bold": true },
-                  { "text": " Функція, яка повертає React-елементи." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function Greeting(props) {\n  return <>Hello, {props.name}!</>;\n}\n\n// Використання:\n<Greeting name=\"Alice\" />;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Класовий компонент:", "bold": true },
-                  {
-                    "text": " Клас, що успадковується від React.Component і має метод render."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class Greeting extends React.Component {\n  render() {\n    return <>Hello, {this.props.name}!</>;\n  }\n}\n\n// Використання:\n<Greeting name=\"Alice\" />;"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Відмінності:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Функціональні компоненти простіші та рекомендовані за замовчуванням."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Класові компоненти використовуються рідко та вважаються застарілими."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Примітка:", "bold": true },
-              {
-                "text": " Сучасний підхід використовує функціональні компоненти з хуками."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "8. How to create components in React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "In React, components can be created in two ways:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Functional component:", "bold": true },
-                  { "text": " A function that returns React elements." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function Greeting(props) {\n  return <>Hello, {props.name}!</>;\n}\n\n// Usage:\n<Greeting name=\"Alice\" />;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Class component:", "bold": true },
-                  {
-                    "text": " A class extending React.Component with a render method."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class Greeting extends React.Component {\n  render() {\n    return <>Hello, {this.props.name}!</>;\n  }\n}\n\n// Usage:\n<Greeting name=\"Alice\" />;"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Differences:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Functional components are simpler and preferred." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Class components are mostly legacy." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Note:", "bold": true },
-              {
-                "text": " Modern React favors functional components with hooks."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "8. Jak tworzyć komponenty w React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "W React komponenty można tworzyć na dwa sposoby:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponent funkcyjny:", "bold": true },
-                  { "text": " Funkcja zwracająca elementy React." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function Greeting(props) {\n  return <>Hello, {props.name}!</>;\n}\n\n// Użycie:\n<Greeting name=\"Alice\" />;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponent klasowy:", "bold": true },
-                  {
-                    "text": " Klasa dziedzicząca po React.Component z metodą render."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class Greeting extends React.Component {\n  render() {\n    return <>Hello, {this.props.name}!</>;\n  }\n}\n\n// Użycie:\n<Greeting name=\"Alice\" />;"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Różnice:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponenty funkcyjne są prostsze i zalecane." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponenty klasowe są obecnie rzadko używane." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Uwaga:", "bold": true },
-              {
-                "text": " Współczesny React opiera się na komponentach funkcyjnych i hookach."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 9,
-    "translations": {
-      "uk": {
-        "question": "9. Що таке стан (state) у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Стан (state)", "bold": true },
-              {
-                "text": " у React — це обʼєкт для зберігання даних, що змінюються з часом і впливають на рендеринг компонента. Він робить компоненти динамічними та реактивними."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Особливості стану:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Локальний для компонента:", "bold": true },
-                  { "text": " Доступний лише в компоненті, де визначений." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Асинхронні оновлення:", "bold": true },
-                  {
-                    "text": " Оновлення стану можуть бути згруповані React для оптимізації."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ініціалізація:", "bold": true },
-                  {
-                    "text": " Через useState у функціональних або в конструкторі класових компонентів."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "У класових компонентах:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <>\n        <p>Count: {this.state.count}</p>\n        <button onClick={this.increment}>Increment</button>\n      </>\n    );\n  }\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "У функціональних компонентах (useState):" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </>\n  );\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Коротко:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "State", "bold": true },
-                  { "text": " — локальний і змінюваний." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Props", "bold": true },
-                  { "text": " — передаються ззовні та незмінні." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "9. What is state in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "State", "bold": true },
-              {
-                "text": " in React is an object used to store data that changes over time and affects component rendering. It enables components to be dynamic and reactive."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "State characteristics:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Component-local:", "bold": true },
-                  { "text": " Available only within the owning component." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Asynchronous updates:", "bold": true },
-                  { "text": " State updates may be batched by React." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Initialization:", "bold": true },
-                  { "text": " Via useState or a class constructor." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Class component example:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <>\n        <p>Count: {this.state.count}</p>\n        <button onClick={this.increment}>Increment</button>\n      </>\n    );\n  }\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Functional component (useState):" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </>\n  );\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "In short:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "State", "bold": true },
-                  { "text": " is local and mutable." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Props", "bold": true },
-                  { "text": " are external and immutable." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "9. Czym jest state w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "State", "bold": true },
-              {
-                "text": " w React to obiekt służący do przechowywania danych, które zmieniają się w czasie i wpływają na renderowanie komponentu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Cechy state:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lokalny:", "bold": true },
-                  { "text": " Dostępny tylko w danym komponencie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Aktualizacje asynchroniczne:", "bold": true },
-                  { "text": " React może grupować aktualizacje stanu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inicjalizacja:", "bold": true },
-                  {
-                    "text": " Przez useState lub konstruktor komponentu klasowego."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład komponentu klasowego:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <>\n        <p>Count: {this.state.count}</p>\n        <button onClick={this.increment}>Increment</button>\n      </>\n    );\n  }\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Komponent funkcyjny (useState):" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </>\n  );\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "W skrócie:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "State", "bold": true },
-                  { "text": " jest lokalny i zmienny." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Props", "bold": true },
-                  { "text": " są przekazywane i niezmienne." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 10,
-    "translations": {
-      "uk": {
-        "question": "10. Що таке пропси (props) в React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Пропси (props)", "bold": true },
-              {
-                "text": " в React — це обʼєкт із даними, які передаються від батьківського компонента до дочірнього. Вони використовуються для налаштування компонентів і є незмінними."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Особливості пропсів:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Передаються зверху вниз:", "bold": true },
-                  {
-                    "text": " Дані надходять від батьківського компонента до дочірнього."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Незмінні:", "bold": true },
-                  { "text": " Компонент не може змінювати отримані props." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Динамічні:", "bold": true },
-                  {
-                    "text": " Оновлюються при зміні даних у батьківському компоненті."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Використання пропсів:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Функціональний компонент:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function Welcome(props) {\n  return <>Hello, {props.name}!</>;\n}\n\n<Welcome name=\"Alice\" />;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Класовий компонент:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class Welcome extends React.Component {\n  render() {\n    return <>Hello, {this.props.name}!</>;\n  }\n}\n\n<Welcome name=\"Bob\" />;"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Деструктуризація пропсів:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Welcome({ name }) {\n  return <>Hello, {name}!</>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Значення за замовчуванням:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Welcome({ name = 'Guest' }) {\n  return <>Hello, {name}!</>;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Props забезпечують повторне використання та конфігурацію компонентів."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "10. What are props in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Props", "bold": true },
-              {
-                "text": " in React are an object containing data passed from a parent component to a child component. They are used to configure components and are immutable."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Props characteristics:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Top-down flow:", "bold": true },
-                  { "text": " Data flows from parent to child components." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Immutable:", "bold": true },
-                  { "text": " Child components cannot modify props." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dynamic:", "bold": true },
-                  { "text": " Values change when parent data changes." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Using props:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Functional component:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function Welcome(props) {\n  return <>Hello, {props.name}!</>;\n}\n\n<Welcome name=\"Alice\" />;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Class component:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class Welcome extends React.Component {\n  render() {\n    return <>Hello, {this.props.name}!</>;\n  }\n}\n\n<Welcome name=\"Bob\" />;"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Props destructuring:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Welcome({ name }) {\n  return <>Hello, {name}!</>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Default props values:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Welcome({ name = 'Guest' }) {\n  return <>Hello, {name}!</>;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Props enable configuration and reuse of React components."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "10. Czym są props w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Props", "bold": true },
-              {
-                "text": " w React to obiekt z danymi przekazywanymi z komponentu nadrzędnego do podrzędnego. Służą do konfiguracji komponentów i są niezmienne."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Cechy props:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przepływ z góry na dół:", "bold": true },
-                  { "text": " Dane przekazywane są z rodzica do dziecka." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Niezmienność:", "bold": true },
-                  { "text": " Komponent nie może modyfikować props." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dynamiczność:", "bold": true },
-                  { "text": " Aktualizują się wraz ze zmianą danych rodzica." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Użycie props:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponent funkcyjny:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function Welcome(props) {\n  return <>Hello, {props.name}!</>;\n}\n\n<Welcome name=\"Alice\" />;"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponent klasowy:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class Welcome extends React.Component {\n  render() {\n    return <>Hello, {this.props.name}!</>;\n  }\n}\n\n<Welcome name=\"Bob\" />;"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Destrukturyzacja props:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Welcome({ name }) {\n  return <>Hello, {name}!</>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wartości domyślne:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Welcome({ name = 'Guest' }) {\n  return <>Hello, {name}!</>;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Props zapewniają elastyczność i możliwość ponownego użycia komponentów."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 11,
-    "translations": {
-      "uk": {
-        "question": "11. Навіщо потрібен атрибут key при рендері списків?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Атрибут ", "bold": false },
-              { "text": "key", "code": true },
-              {
-                "text": " використовується для ідентифікації елементів у списках під час рендерингу."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Призначення:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оптимізація оновлень:", "boldItalic": true },
-                  { "text": " React використовує " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " для визначення, які елементи було змінено, додано або видалено."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Запобігання зайвим рендерам:",
-                    "boldItalic": true
-                  },
-                  { "text": " " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " дозволяє повторно використовувати незмінені елементи."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Збереження стану компонентів:",
-                    "boldItalic": true
-                  },
-                  { "text": " Правильний " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " допомагає зберігати внутрішній стан елементів списку."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Правильне використання:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Значення ", "bold": false },
-                  { "text": "key", "code": true },
-                  { "text": " має бути унікальним серед сусідніх елементів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовуйте стабільні ідентифікатори, наприклад ",
-                    "bold": false
-                  },
-                  { "text": "id", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Не рекомендується використовувати індекс масиву як ",
-                    "bold": false
-                  },
-                  { "text": "key", "code": true },
-                  { "text": " при змінному порядку елементів." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "11. Why is the key attribute needed when rendering lists?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The ", "bold": false },
-              { "text": "key", "code": true },
-              {
-                "text": " attribute is used to uniquely identify elements in a list during rendering."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Purpose:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Update optimization:", "boldItalic": true },
-                  { "text": " React uses " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " to detect which elements were changed, added, or removed."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Avoiding unnecessary re-renders:",
-                    "boldItalic": true
-                  },
-                  { "text": " " },
-                  { "text": "key", "code": true },
-                  { "text": " helps reuse unchanged elements." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Preserving component state:", "boldItalic": true },
-                  { "text": " A correct " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " allows React to preserve component state between renders."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Best practices:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "The ", "bold": false },
-                  { "text": "key", "code": true },
-                  { "text": " value must be unique among siblings." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prefer stable identifiers such as ",
-                    "bold": false
-                  },
-                  { "text": "id", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Avoid using array index as ", "bold": false },
-                  { "text": "key", "code": true },
-                  { "text": " when list order can change." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "11. Dlaczego atrybut key jest potrzebny przy renderowaniu list?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Atrybut ", "bold": false },
-              { "text": "key", "code": true },
-              {
-                "text": " służy do jednoznacznej identyfikacji elementów listy podczas renderowania."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Cel:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optymalizacja aktualizacji:", "boldItalic": true },
-                  { "text": " React używa " },
-                  { "text": "key", "code": true },
-                  { "text": " do określenia zmian w liście." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Unikanie zbędnych renderów:", "boldItalic": true },
-                  { "text": " " },
-                  { "text": "key", "code": true },
-                  { "text": " pozwala ponownie użyć niezmienionych elementów." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zachowanie stanu komponentów:",
-                    "boldItalic": true
-                  },
-                  { "text": " Poprawny " },
-                  { "text": "key", "code": true },
-                  { "text": " umożliwia zachowanie stanu między renderami." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Dobre praktyki:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wartość ", "bold": false },
-                  { "text": "key", "code": true },
-                  { "text": " musi być unikalna wśród elementów sąsiednich." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Najlepiej używać stabilnych identyfikatorów, np. ",
-                    "bold": false
-                  },
-                  { "text": "id", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nie zaleca się używania indeksu tablicy jako ",
-                    "bold": false
-                  },
-                  { "text": "key", "code": true },
-                  { "text": " przy zmiennej kolejności elementów." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 12,
-    "translations": {
-      "uk": {
-        "question": "12. Як передаються дані між компонентами у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У React передача даних відбувається відповідно до ієрархії компонентів."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Передача даних вниз (parent → child)" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Для цього використовуються ", "bold": false },
-              { "text": "props", "code": true },
-              {
-                "text": ". Батьківський компонент передає дані або функції дочірньому через атрибути."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Parent() {\n  const data = 'Hello from Parent';\n  return <Child message={data} />;\n}\n\nfunction Child({ message }) {\n  return <p>{message}</p>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Передача даних вгору (child → parent)" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Використовуються callback-функції, які передаються через props."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Parent() {\n  const handleData.ensure = data => console.log(data);\n  return <Child sendData={handleData} />;\n}\n\nfunction Child({ sendData }) {\n  return <button onClick={() => sendData('Hello from Child')}>Send</button>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Альтернативи для складних додатків:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Context API:", "bold": true },
-                  {
-                    "text": " для передачі глобальних даних без prop drilling."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Менеджери стану:", "bold": true },
-                  { "text": " Redux, Zustand, MobX для великих застосунків." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Custom Hooks:", "bold": true },
-                  { "text": " для повторного використання логіки." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "12. How is data passed between components in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "In React, data flow follows the component hierarchy." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Passing data down (parent → child)" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "This is done using ", "bold": false },
-              { "text": "props", "code": true },
-              {
-                "text": ". Parents pass data or functions to children via attributes."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Parent() {\n  const data = 'Hello from Parent';\n  return <Child message={data} />;\n}\n\nfunction Child({ message }) {\n  return <p>{message}</p>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Passing data up (child → parent)" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Achieved using callback functions passed via props." }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Parent() {\n  const handleData = data => console.log(data);\n  return <Child sendData={handleData} />;\n}\n\nfunction Child({ sendData }) {\n  return <button onClick={() => sendData('Hello from Child')}>Send</button>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Alternatives for complex apps:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Context API:", "bold": true },
-                  { "text": " for sharing global data without prop drilling." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "State managers:", "bold": true },
-                  { "text": " Redux, Zustand, MobX for large applications." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Custom Hooks:", "bold": true },
-                  { "text": " for sharing logic between components." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "12. Jak przekazywane są dane między komponentami w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W React przepływ danych odbywa się zgodnie z hierarchią komponentów."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Przekazywanie danych w dół (parent → child)" }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Do tego używa się ", "bold": false },
-              { "text": "props", "code": true },
-              { "text": ", przekazywanych jako atrybuty." }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Parent() {\n  const data = 'Hello from Parent';\n  return <Child message={data} />;\n}\n\nfunction Child({ message }) {\n  return <p>{message}</p>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Przekazywanie danych w górę (child → parent)" }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Realizowane za pomocą funkcji callback przekazywanych przez props."
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function Parent() {\n  const handleData = data => console.log(data);\n  return <Child sendData={handleData} />;\n}\n\nfunction Child({ sendData }) {\n  return <button onClick={() => sendData('Hello from Child')}>Send</button>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Alternatywy dla większych aplikacji:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Context API:", "bold": true },
-                  { "text": " do przekazywania danych globalnych." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Menedżery stanu:", "bold": true },
-                  { "text": " Redux, Zustand, MobX w dużych projektach." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Custom Hooks:", "bold": true },
-                  { "text": " do współdzielenia logiki." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 13,
-    "translations": {
-      "uk": {
-        "question": "13. Чому React використовує className замість атрибута class?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "У React використовується ", "bold": false },
-              { "text": "className", "code": true },
-              { "text": " замість ", "bold": false },
-              { "text": "class", "code": true },
-              { "text": ", оскільки ", "bold": false },
-              { "text": "class", "code": true },
-              { "text": " є зарезервованим ключовим словом у JavaScript." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Причини:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Уникнення конфліктів:", "bold": true },
-                  {
-                    "text": " class використовується для оголошення класів у JavaScript."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Сумісність з JSX:", "bold": true },
-                  {
-                    "text": " JSX є розширенням JavaScript і дотримується його правил."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відповідність DOM API:", "bold": true },
-                  {
-                    "text": " У JavaScript властивість елемента називається className."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "// Коректно\n<div className=\"container\">Hello</div>\n\n// Некоректно\n<div class=\"container\">Hello</div>"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Це обовʼязковий стандарт JSX, а не дизайнерське рішення."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "13. Why does React use className instead of class?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React uses ", "bold": false },
-              { "text": "className", "code": true },
-              { "text": " instead of ", "bold": false },
-              { "text": "class", "code": true },
-              { "text": " because ", "bold": false },
-              { "text": "class", "code": true },
-              { "text": " is a reserved keyword in JavaScript." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Reasons:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Avoiding conflicts:", "bold": true },
-                  { "text": " class is used to define JavaScript classes." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JSX compatibility:", "bold": true },
-                  { "text": " JSX follows JavaScript syntax rules." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "DOM API alignment:", "bold": true },
-                  {
-                    "text": " In JavaScript, the DOM property is called className."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "// Correct\n<div className=\"container\">Hello</div>\n\n// Incorrect\n<div class=\"container\">Hello</div>"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "This is a JSX requirement, not a stylistic choice." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "13. Dlaczego React używa className zamiast class?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React używa ", "bold": false },
-              { "text": "className", "code": true },
-              { "text": " zamiast ", "bold": false },
-              { "text": "class", "code": true },
-              { "text": ", ponieważ ", "bold": false },
-              { "text": "class", "code": true },
-              { "text": " jest słowem kluczowym w JavaScript." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Powody:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Unikanie konfliktów:", "bold": true },
-                  { "text": " class służy do definiowania klas w JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zgodność z JSX:", "bold": true },
-                  { "text": " JSX podlega regułom składni JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zgodność z DOM API:", "bold": true },
-                  { "text": " W DOM właściwość nosi nazwę className." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "// Poprawnie\n<div className=\"container\">Hello</div>\n\n// Niepoprawnie\n<div class=\"container\">Hello</div>"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "To techniczny wymóg JSX, a nie decyzja projektowa." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 14,
-    "translations": {
-      "uk": {
-        "question": "14. Які є винятки щодо іменування компонентів React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У React існують суворі правила іменування компонентів, від яких не можна відступати."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Велика літера на початку:", "bold": true },
-                  {
-                    "text": " Компоненти повинні починатися з великої літери, інакше React сприйматиме їх як HTML-теги."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CamelCase:", "bold": true },
-                  {
-                    "text": " Імена компонентів пишуться у CamelCase без розділювачів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Не співпадати з HTML-тегами:", "bold": true },
-                  {
-                    "text": " Назви не повинні повторювати стандартні HTML-елементи."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Без спеціальних символів:", "bold": true },
-                  { "text": " Заборонені дефіси, підкреслення та пробіли." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Класові компоненти:", "bold": true },
-                  {
-                    "text": " Класові компоненти також зобовʼязані починатися з великої літери."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Ці правила не рекомендації, а технічна вимога JSX." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "14. What naming constraints exist for React components?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React enforces strict naming rules for components." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Capitalized names:", "bold": true },
-                  {
-                    "text": " Components must start with an uppercase letter or they are treated as HTML tags."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CamelCase:", "bold": true },
-                  {
-                    "text": " Component names use CamelCase without separators."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "No HTML tag names:", "bold": true },
-                  {
-                    "text": " Component names must not match built-in HTML elements."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "No special characters:", "bold": true },
-                  { "text": " Hyphens, underscores, and spaces are invalid." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Class components:", "bold": true },
-                  {
-                    "text": " Class-based components follow the same capitalization rules."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "These are JSX requirements, not style preferences." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "14. Jakie ograniczenia dotyczą nazewnictwa komponentów React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React narzuca ścisłe zasady nazewnictwa komponentów." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wielka litera na początku:", "bold": true },
-                  { "text": " Komponenty muszą zaczynać się wielką literą." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CamelCase:", "bold": true },
-                  { "text": " Nazwy komponentów zapisuje się w CamelCase." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Brak nazw tagów HTML:", "bold": true },
-                  { "text": " Nazwy nie mogą pokrywać się z elementami HTML." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Bez znaków specjalnych:", "bold": true },
-                  {
-                    "text": " Niedozwolone są myślniki, podkreślenia i spacje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponenty klasowe:", "bold": true },
-                  { "text": " Również muszą zaczynać się wielką literą." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [{ "text": "Są to techniczne wymogi JSX." }]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 15,
-    "translations": {
-      "uk": {
-        "question": "15. Як писати коментарі в React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У React коментарі пишуться як у JavaScript, але в JSX діє окремий синтаксис."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Коментарі в JavaScript (поза JSX):",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "// Однорядковий коментар\n\n/*\nБагаторядковий коментар\n*/"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Коментарі всередині JSX:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent() {\n  return (\n    <>\n      {/* Коментар у JSX */}\n      <p>Hello, world!</p>\n    </>\n  );\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Коментарі в логіці компонента:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent() {\n  // Коментар у тілі функції\n  return <p>Hello</p>;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Коротко:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "У JSX використовується ", "bold": false },
-                  { "text": "{/* ... */}", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "У JavaScript ", "bold": false },
-                  { "text": "//", "code": true },
-                  { "text": " та " },
-                  { "text": "/* ... */", "code": true }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "15. How do you write comments in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React uses standard JavaScript comments, but JSX requires a special syntax."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "JavaScript comments (outside JSX):",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "// Single-line comment\n\n/*\nMulti-line comment\n*/"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Comments inside JSX:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent() {\n  return (\n    <>\n      {/* JSX comment */}\n      <p>Hello, world!</p>\n    </>\n  );\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Comments in component logic:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent() {\n  // Logic comment\n  return <p>Hello</p>;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Summary:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Use ", "bold": false },
-                  { "text": "{/* ... */}", "code": true },
-                  { "text": " inside JSX." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Use ", "bold": false },
-                  { "text": "//", "code": true },
-                  { "text": " or " },
-                  { "text": "/* ... */", "code": true },
-                  { "text": " in JavaScript." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "15. Jak pisać komentarze w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W React komentarze są takie jak w JavaScript, ale JSX wymaga specjalnej składni."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komentarze JavaScript (poza JSX):", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "javascript",
-                    "content": "// Komentarz jednoliniowy\n\n/*\nKomentarz wieloliniowy\n*/"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komentarze w JSX:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent() {\n  return (\n    <>\n      {/* Komentarz JSX */}\n      <p>Hello, world!</p>\n    </>\n  );\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komentarze w logice komponentu:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent() {\n  // Komentarz w funkcji\n  return <p>Hello</p>;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Podsumowanie:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "W JSX używaj ", "bold": false },
-                  { "text": "{/* ... */}", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "W JavaScript ", "bold": false },
-                  { "text": "//", "code": true },
-                  { "text": " oraz " },
-                  { "text": "/* ... */", "code": true }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 16,
-    "translations": {
-      "uk": {
-        "question": "16. Що таке Virtual DOM в React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Virtual DOM", "bold": true },
-              {
-                "text": " - це віртуальне представлення реального DOM, яке React використовує для ефективного оновлення інтерфейсу."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює в React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Рендеринг у Virtual DOM:", "bold": true },
-                  {
-                    "text": " При зміні стану або пропсів компонентів React оновлює Virtual DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Diffing:", "bold": true },
-                  {
-                    "text": " React порівнює новий Virtual DOM зі старою версією, визначаючи мінімальний набір змін."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оновлення реального DOM:", "bold": true },
-                  {
-                    "text": " Виявлені зміни застосовуються до реального DOM, мінімізуючи кількість маніпуляцій."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основна перевага:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Оптимізація оновлень DOM, що суттєво покращує продуктивність React-додатків."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "16. What is the Virtual DOM in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Virtual DOM", "bold": true },
-              {
-                "text": " is a virtual representation of the real DOM that React uses to efficiently update the user interface."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works in React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rendering to the Virtual DOM:", "bold": true },
-                  {
-                    "text": " When state or props change, React updates the Virtual DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Diffing:", "bold": true },
-                  {
-                    "text": " React compares the new Virtual DOM with the previous one to identify the minimal set of changes."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Updating the real DOM:", "bold": true },
-                  {
-                    "text": " The detected changes are applied to the real DOM, minimizing direct manipulations."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Main advantage:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Optimized DOM updates that significantly improve application performance."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "16. Czym jest Virtual DOM w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Virtual DOM", "bold": true },
-              {
-                "text": " to wirtualna reprezentacja rzeczywistego DOM, którą React wykorzystuje do wydajnego aktualizowania interfejsu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa w React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Renderowanie do Virtual DOM:", "bold": true },
-                  {
-                    "text": " Gdy zmienia się stan lub właściwości komponentów, React aktualizuje Virtual DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Diffing:", "bold": true },
-                  {
-                    "text": " React porównuje nowy Virtual DOM z poprzednim, określając minimalny zestaw zmian."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Aktualizacja rzeczywistego DOM:", "bold": true },
-                  {
-                    "text": " Wykryte zmiany są stosowane do rzeczywistego DOM, ograniczając liczbę operacji."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główna zaleta:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Optymalizacja aktualizacji DOM, która znacząco poprawia wydajność aplikacji."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 17,
-    "translations": {
-      "uk": {
-        "question": "17. Що таке (key) prop і яка перевага його використання в масивах елементів?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "У React prop " },
-              { "text": "key", "code": true },
-              {
-                "text": " використовується для ідентифікації кожного елемента в списках або масивах, щоб React міг ефективно керувати оновленнями при зміні структури списку."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Основні моменти щодо " },
-              { "text": "key", "code": true },
-              { "text": ":" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Унікальність:", "bold": true },
-                  { "text": " Кожен елемент повинен мати унікальний " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": ", щоб React міг коректно відстежувати зміни та зберігати стан компонентів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оптимізація рендерингу:", "bold": true },
-                  { "text": " " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " дозволяє React оновлювати лише змінені елементи DOM замість повторного рендерингу всього списку."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Природа key:", "bold": true },
-                  { "text": " Prop " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " не передається в компонент і використовується виключно React для внутрішньої ідентифікації елементів."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Переваги використання " },
-              { "text": "key", "code": true },
-              { "text": ":" }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Підвищує продуктивність рендерингу." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Запобігає помилкам при зміні порядку, додаванні або видаленні елементів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Забезпечує коректне збереження стану компонентів."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "17. What is the (key) prop and what is the benefit of using it in element arrays?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "In React, the " },
-              { "text": "key", "code": true },
-              {
-                "text": " prop is used to uniquely identify elements in lists or arrays so React can efficiently manage updates when the list changes."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Key points about " },
-              { "text": "key", "code": true },
-              { "text": ":" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Uniqueness:", "bold": true },
-                  { "text": " Each element must have a unique " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " so React can track changes and preserve component state."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Rendering optimization:", "bold": true },
-                  { "text": " Using " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " allows React to update only the changed DOM nodes instead of re-rendering the entire list."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Nature of key:", "bold": true },
-                  { "text": " The " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " prop is not passed to the component and is used internally by React only."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Benefits of using " },
-              { "text": "key", "code": true },
-              { "text": ":" }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Improves rendering performance." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Prevents bugs when items are reordered, added, or removed."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ensures correct state handling for list elements."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "17. Czym jest prop (key) i jaka jest zaleta jego użycia w tablicach elementów?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "W React prop " },
-              { "text": "key", "code": true },
-              {
-                "text": " służy do jednoznacznej identyfikacji elementów w listach lub tablicach, aby React mógł wydajnie zarządzać aktualizacjami."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Najważniejsze informacje o " },
-              { "text": "key", "code": true },
-              { "text": ":" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Unikalność:", "bold": true },
-                  { "text": " Każdy element musi mieć unikalny " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": ", aby React mógł poprawnie śledzić zmiany i zachować stan komponentów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optymalizacja renderowania:", "bold": true },
-                  { "text": " Użycie " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " pozwala Reactowi aktualizować tylko zmienione elementy DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Charakter key:", "bold": true },
-                  { "text": " Prop " },
-                  { "text": "key", "code": true },
-                  {
-                    "text": " nie jest przekazywany do komponentu i służy wyłącznie do wewnętrznych mechanizmów Reacta."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Zalety użycia " },
-              { "text": "key", "code": true },
-              { "text": ":" }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Zwiększa wydajność renderowania." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zapobiega błędom przy zmianie kolejności, dodawaniu lub usuwaniu elementów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zapewnia poprawne zarządzanie stanem elementów listy."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 18,
-    "translations": {
-      "uk": {
-        "question": "18. Що таке умовний рендеринг у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Умовний рендеринг у React — це підхід, за якого компонент відображає різний UI залежно від умов, таких як стан, пропси або інші значення."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні підходи до умовного рендерингу:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оператор if:", "bold": true },
-                  {
-                    "text": " Дозволяє явно визначити, який JSX повертати залежно від умови."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Тернарний оператор:", "bold": true },
-                  {
-                    "text": " Використовується для компактного умовного рендерингу безпосередньо в JSX."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Логічний оператор &&:", "bold": true },
-                  {
-                    "text": " Рендерить елемент лише тоді, коли умова є істинною."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги умовного рендерингу:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Динамічна зміна інтерфейсу без перезавантаження сторінки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Чітке керування логікою відображення компонентів."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "18. What is conditional rendering in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Conditional rendering in React is a technique where a component renders different UI output depending on conditions such as state or props."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Main approaches to conditional rendering:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "if statement:", "bold": true },
-                  {
-                    "text": " Allows explicit control over what JSX is returned based on a condition."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ternary operator:", "bold": true },
-                  {
-                    "text": " Commonly used for concise conditional expressions inside JSX."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Logical && operator:", "bold": true },
-                  {
-                    "text": " Renders an element only when the condition evaluates to true."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Benefits of conditional rendering:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Enables dynamic UI updates without page reloads." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Provides clear control over component display logic."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "18. Czym jest renderowanie warunkowe w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Renderowanie warunkowe w React to mechanizm, w którym komponent wyświetla różny interfejs w zależności od spełnienia określonych warunków, takich jak stan lub właściwości."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Główne podejścia do renderowania warunkowego:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Instrukcja if:", "bold": true },
-                  {
-                    "text": " Umożliwia jawne określenie, co ma zostać wyrenderowane."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Operator trójargumentowy:", "bold": true },
-                  {
-                    "text": " Stosowany do krótkich warunków bezpośrednio w JSX."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Operator logiczny &&:", "bold": true },
-                  {
-                    "text": " Renderuje element tylko wtedy, gdy warunek jest spełniony."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety renderowania warunkowego:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dynamiczne zmiany interfejsu użytkownika." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Lepsza kontrola nad logiką wyświetlania komponentów."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 19,
-    "translations": {
-      "uk": {
-        "question": "19. Що таке фрагменти (Fragments) у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Фрагменти в React",
-                "bold": true
-              },
-              {
-                "text": " — це спосіб групувати кілька елементів без додавання зайвих елементів в DOM. Вони дозволяють повернути декілька елементів з компонента без обгортки, такої як "
-              },
-              {
-                "text": "div",
-                "code": true
-              },
-              {
-                "text": ", що допомагає уникнути зайвих елементів, які можуть порушити стилі або структуру документа."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Використання:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Повернення кількох елементів з компонента без додаткової обгортки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Рендеринг списків з кількома елементами на кожен запис (з "
-                  },
-                  {
-                    "text": "key",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Збереження коректної структури таблиць або списків без зайвих обгорток."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Скорочення кількості елементів в DOM для покращення продуктивності."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Уникнення конфліктів CSS-стилів, які виникають від непотрібних обгорток."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Фрагменти дозволяють безпечно керувати компонентами, відстежувати структуру та ефективно розвивати UI без засмічування DOM."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "19. What are Fragments in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Fragments in React",
-                "bold": true
-              },
-              {
-                "text": " are a way to group multiple elements without adding extra elements to the DOM. They allow returning multiple elements from a component without a wrapper such as "
-              },
-              {
-                "text": "div",
-                "code": true
-              },
-              {
-                "text": ", which helps avoid unnecessary elements that could break styles or document structure."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Usage:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Returning multiple elements from a component without additional wrappers."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Rendering lists with multiple elements per item (with "
-                  },
-                  {
-                    "text": "key",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Maintaining correct structure in tables or lists without unnecessary wrappers."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reducing the number of elements in the DOM for improved performance."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Avoiding CSS style conflicts that arise from unnecessary wrappers."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Fragments allow safe component management, structure tracking, and efficient UI development without cluttering the DOM."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "19. Czym są fragmenty (Fragments) w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Fragmenty w React",
-                "bold": true
-              },
-              {
-                "text": " to sposób grupowania wielu elementów bez dodawania dodatkowych elementów do DOM. Pozwalają zwrócić wiele elementów z komponentu bez opakowania, takiego jak "
-              },
-              {
-                "text": "div",
-                "code": true
-              },
-              {
-                "text": ", co pomaga uniknąć niepotrzebnych elementów, które mogą naruszić style lub strukturę dokumentu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zastosowanie:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zwracanie wielu elementów z komponentu bez dodatkowych opakowań."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Renderowanie list z wieloma elementami na pozycję (z "
-                  },
-                  {
-                    "text": "key",
-                    "code": true
-                  },
-                  {
-                    "text": ")."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zachowanie prawidłowej struktury tabel lub list bez zbędnych opakowań."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zmniejszenie liczby elementów w DOM w celu poprawy wydajności."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Unikanie konfliktów stylów CSS wynikających z niepotrzebnych opakowań."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Fragmenty umożliwiają bezpieczne zarządzanie komponentami, śledzenie struktury i efektywny rozwój interfejsu użytkownika bez zaśmiecania DOM."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 20,
-    "translations": {
-      "uk": {
-        "question": "20. Що таке узгодження (Reconciliation)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reconciliation", "bold": true },
-              {
-                "text": " — це внутрішній процес у React, за допомогою якого він визначає мінімальний набір змін для оновлення реального DOM відповідно до нового стану віртуального DOM."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює reconciliation:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Порівняння віртуальних DOM:", "bold": true },
-                  {
-                    "text": " React порівнює попереднє дерево Virtual DOM з новим після змін стану або пропсів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Diffing:", "bold": true },
-                  {
-                    "text": " Визначаються лише ті вузли, які були змінені, додані або видалені."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оновлення реального DOM:", "bold": true },
-                  {
-                    "text": " React застосовує лише необхідні зміни, уникаючи повного перерендеру."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ключові принципи:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Порівняння за типами елементів:", "bold": true },
-                  {
-                    "text": " вузли одного типу оновлюються, а не замінюються."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Використання key:", "bold": true },
-                  {
-                    "text": " ключі допомагають коректно зіставляти елементи списків між рендерами."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "20. What is Reconciliation?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reconciliation", "bold": true },
-              {
-                "text": " is the internal React process used to determine the minimal set of changes needed to update the real DOM based on the new Virtual DOM."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How reconciliation works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Virtual DOM comparison:", "bold": true },
-                  {
-                    "text": " React compares the previous Virtual DOM tree with the new one after state or props changes."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Diffing:", "bold": true },
-                  {
-                    "text": " Only the changed, added, or removed nodes are identified."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Real DOM update:", "bold": true },
-                  {
-                    "text": " React applies only the necessary updates, avoiding full re-renders."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key principles:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Element type comparison:", "bold": true },
-                  {
-                    "text": " nodes of the same type are updated rather than replaced."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Use of keys:", "bold": true },
-                  {
-                    "text": " keys help correctly match list elements between renders."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "20. Czym jest uzgadnianie (Reconciliation)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reconciliation", "bold": true },
-              {
-                "text": " to wewnętrzny proces w React, który służy do określenia minimalnych zmian potrzebnych do zsynchronizowania rzeczywistego DOM z Virtual DOM."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa reconciliation:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Porównanie Virtual DOM:", "bold": true },
-                  {
-                    "text": " React porównuje poprzednie i nowe drzewo Virtual DOM po zmianach stanu lub właściwości."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Diffing:", "bold": true },
-                  {
-                    "text": " Identyfikowane są tylko zmienione, dodane lub usunięte elementy."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Aktualizacja DOM:", "bold": true },
-                  {
-                    "text": " React wprowadza jedynie niezbędne zmiany, unikając pełnego renderowania."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kluczowe zasady:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Porównanie typów elementów:", "bold": true },
-                  {
-                    "text": " elementy tego samego typu są aktualizowane, a nie zastępowane."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Użycie kluczy:", "bold": true },
-                  {
-                    "text": " klucze umożliwiają poprawne dopasowanie elementów list."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 21,
-    "translations": {
-      "uk": {
-        "question": "21. Як оновити стан компонента?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "У React стан компонента оновлюється за допомогою " },
-              { "text": "setState", "code": true },
-              { "text": " у класових компонентах або " },
-              { "text": "useState", "code": true },
-              { "text": " у функціональних компонентах." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Класові компоненти:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Стан оновлюється через " },
-              { "text": "this.setState()", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Функціональні компоненти:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Стан оновлюється через функцію, отриману з " },
-              { "text": "useState", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Важливі зауваження:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Асинхронність:", "bold": true },
-                  {
-                    "text": " оновлення стану відбувається асинхронно, тому для залежності від попереднього значення слід використовувати функціональний підхід."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Заборона прямої мутації:", "bold": true },
-                  {
-                    "text": " пряме змінення стану не викликає повторного рендерингу."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "21. How do you update component state?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "In React, component state is updated using " },
-              { "text": "setState", "code": true },
-              { "text": " in class components or " },
-              { "text": "useState", "code": true },
-              { "text": " in functional components." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Class components:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "State is updated via " },
-              { "text": "this.setState()", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Functional components:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "State is updated using the setter function returned by "
-              },
-              { "text": "useState", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Important notes:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Asynchronous updates:", "bold": true },
-                  {
-                    "text": " state updates are asynchronous, so functional updates should be used when relying on previous state."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "No direct mutation:", "bold": true },
-                  {
-                    "text": " directly modifying state does not trigger re-rendering."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "21. Jak aktualizować stan komponentu?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "W React stan komponentu aktualizuje się za pomocą " },
-              { "text": "setState", "code": true },
-              { "text": " w komponentach klasowych lub " },
-              { "text": "useState", "code": true },
-              { "text": " w komponentach funkcyjnych." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Komponenty klasowe:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Stan jest aktualizowany przez " },
-              { "text": "this.setState()", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Komponenty funkcyjne:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Stan jest aktualizowany za pomocą funkcji zwróconej przez "
-              },
-              { "text": "useState", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ważne uwagi:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Asynchroniczność:", "bold": true },
-                  {
-                    "text": " aktualizacje stanu są asynchroniczne, dlatego należy stosować aktualizacje funkcyjne."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Brak bezpośredniej mutacji:", "bold": true },
-                  {
-                    "text": " bezpośrednia zmiana stanu nie powoduje ponownego renderowania."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 22,
-    "translations": {
-      "uk": {
-        "question": "22. Що таке вбудовані умовні вирази?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Вбудовані умовні вирази",
-                "bold": true
-              },
-              {
-                "text": " в React — це механізми, що дозволяють вбудовувати умови безпосередньо в JSX для умовного рендерингу елементів або компонентів. Це робить код компактнішим, читабельнішим і зручнішим для розуміння."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Основні методи:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Тернарний оператор",
-                    "bold": true
-                  },
-                  {
-                    "text": " — найпоширеніший спосіб умовного рендерингу. Синтаксис: "
-                  },
-                  {
-                    "text": "condition ? expressionTrue : expressionFalse",
-                    "code": true
-                  },
-                  {
-                    "text": ". Відображає один елемент, якщо умова істинна, інший — якщо хибна."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Логічний оператор AND (&&)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — дозволяє рендерити елемент лише якщо умова "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": ". Якщо умова "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": ", нічого не буде відображено."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Оператор IF перед поверненням JSX",
-                    "bold": true
-                  },
-                  {
-                    "text": " — для складних умов використовуються звичайні "
-                  },
-                  {
-                    "text": "if/else",
-                    "code": true
-                  },
-                  {
-                    "text": " конструкції перед поверненням JSX. Дозволяє виконати декілька умовних дій перед рендерингом."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Логічний оператор OR (||)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — рендерит альтернативний елемент, якщо перша умова не виконується. Корисна для значень за замовчуванням."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Inline функції",
-                    "bold": true
-                  },
-                  {
-                    "text": " — складна логіка умов можна винести в окремі функції для кращої читаємості коду."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Переваги вбудованих умовних виразів:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Компактний і читабельний код — умови вбудовані безпосередньо в JSX без зайвих рівнів вкладеності."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зменшується кількість допоміжних змінних — не потрібно створювати додаткові "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " або "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": " для зберігання умовного вмісту."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Динамічний рендеринг — легко переключатися між різними компонентами на основі стану."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Важливі обмеження:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "В React не можна використовувати інструкції "
-                  },
-                  {
-                    "text": "if",
-                    "code": true
-                  },
-                  {
-                    "text": " безпосередньо всередину JSX. Вони повинні перебувати поза JSX-блоком або скоротаним до тернарного оператора."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Не використовуйте циклові конструкції "
-                  },
-                  {
-                    "text": "for",
-                    "code": true
-                  },
-                  {
-                    "text": " у JSX — натомість використовуйте "
-                  },
-                  {
-                    "text": "map()",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Уникайте складних умовних виразів у JSX — розділяйте складну логіку на окремі функції для читаємості."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "22. What are inline conditional expressions?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Inline conditional expressions",
-                "bold": true
-              },
-              {
-                "text": " in React are mechanisms that allow embedding conditions directly in JSX for conditional rendering of elements or components. This makes code more compact, readable, and easier to understand."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Main methods:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ternary operator",
-                    "bold": true
-                  },
-                  {
-                    "text": " — the most common way for conditional rendering. Syntax: "
-                  },
-                  {
-                    "text": "condition ? expressionTrue : expressionFalse",
-                    "code": true
-                  },
-                  {
-                    "text": ". Displays one element if condition is true, another if false."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Logical AND operator (&&)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — allows rendering an element only if the condition is "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": ". If condition is "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": ", nothing is displayed."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "IF statement before returning JSX",
-                    "bold": true
-                  },
-                  {
-                    "text": " — for complex conditions, regular "
-                  },
-                  {
-                    "text": "if/else",
-                    "code": true
-                  },
-                  {
-                    "text": " constructs are used before returning JSX. Allows multiple conditional actions before rendering."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Logical OR operator (||)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — renders alternative element if first condition fails. Useful for default values."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Inline functions",
-                    "bold": true
-                  },
-                  {
-                    "text": " — complex condition logic can be extracted to separate functions for better code readability."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Benefits of inline conditional expressions:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Compact and readable code — conditions are embedded directly in JSX without excessive nesting."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Reduced auxiliary variables — no need to create additional "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " or "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": " for storing conditional content."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dynamic rendering — easily switch between different components based on state."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Important limitations:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "In React, you cannot use "
-                  },
-                  {
-                    "text": "if",
-                    "code": true
-                  },
-                  {
-                    "text": " statements directly inside JSX. They must be outside JSX blocks or reduced to ternary operator."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Do not use loop constructs like "
-                  },
-                  {
-                    "text": "for",
-                    "code": true
-                  },
-                  {
-                    "text": " in JSX — use "
-                  },
-                  {
-                    "text": "map()",
-                    "code": true
-                  },
-                  {
-                    "text": " instead."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Avoid complex conditional expressions in JSX — extract complex logic into separate functions for readability."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "22. Czym są wbudowane wyrażenia warunkowe?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wbudowane wyrażenia warunkowe",
-                "bold": true
-              },
-              {
-                "text": " w React to mechanizmy, które pozwalają osadzać warunki bezpośrednio w JSX do warunkowego renderowania elementów lub komponentów. Czyni to kod bardziej zwartym, czytelnym i łatwym do zrozumienia."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Główne metody:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Operator warunkowy (ternarny)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — najczęstszy sposób warunkowego renderowania. Składnia: "
-                  },
-                  {
-                    "text": "condition ? expressionTrue : expressionFalse",
-                    "code": true
-                  },
-                  {
-                    "text": ". Wyświetla jeden element, jeśli warunek jest prawdziwy, drugi, jeśli fałszywy."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Operator logiczny AND (&&)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — pozwala renderować element tylko wtedy, gdy warunek to "
-                  },
-                  {
-                    "text": "true",
-                    "code": true
-                  },
-                  {
-                    "text": ". Jeśli warunek to "
-                  },
-                  {
-                    "text": "false",
-                    "code": true
-                  },
-                  {
-                    "text": ", nic nie jest wyświetlane."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Instrukcja IF przed zwróceniem JSX",
-                    "bold": true
-                  },
-                  {
-                    "text": " — dla złożonych warunków używane są regularne konstrukcje "
-                  },
-                  {
-                    "text": "if/else",
-                    "code": true
-                  },
-                  {
-                    "text": " przed zwróceniem JSX. Umożliwia wielokrotne działania warunkowe przed renderowaniem."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Operator logiczny OR (||)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — renderuje alternatywny element, jeśli pierwszy warunek nie zostanie spełniony. Przydatny do wartości domyślnych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Funkcje wbudowane",
-                    "bold": true
-                  },
-                  {
-                    "text": " — złożoną logikę warunków można wyodrębnić do oddzielnych funkcji dla lepszej czytelności kodu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Zalety wbudowanych wyrażeń warunkowych:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zwarty i czytelny kod — warunki osadzone bezpośrednio w JSX bez nadmiernego zagnieżdżenia."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zmniejszona liczba zmiennych pomocniczych — nie ma potrzeby tworzenia dodatkowych "
-                  },
-                  {
-                    "text": "let",
-                    "code": true
-                  },
-                  {
-                    "text": " lub "
-                  },
-                  {
-                    "text": "const",
-                    "code": true
-                  },
-                  {
-                    "text": " do przechowywania warunkowej zawartości."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Dynamiczne renderowanie — łatwe przełączanie między różnymi komponentami na podstawie stanu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Ważne ograniczenia:"
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "W React nie można używać instrukcji "
-                  },
-                  {
-                    "text": "if",
-                    "code": true
-                  },
-                  {
-                    "text": " bezpośrednio wewnątrz JSX. Muszą się znajdować poza blokami JSX lub być zredukowane do operatora ternarnego."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nie używaj konstrukcji pętli takich jak "
-                  },
-                  {
-                    "text": "for",
-                    "code": true
-                  },
-                  {
-                    "text": " w JSX — użyj zamiast tego "
-                  },
-                  {
-                    "text": "map()",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Unikaj złożonych wyrażeń warunkowych w JSX — wyodrębnij złożoną logikę do oddzielnych funkcji w celu poprawy czytelności."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 23,
-    "translations": {
-      "uk": {
-        "question": "23. Яка різниця між обробкою подій HTML і React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Різниця між обробкою подій у HTML та React:" }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Критерій" }],
-              [{ "text": "HTML" }],
-              [{ "text": "React" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Синтаксис подій", "bold": true }],
-                [
-                  { "text": "Атрибут у нижньому регістрі: " },
-                  { "text": "onclick", "code": true }
-                ],
-                [{ "text": "camelCase: " }, { "text": "onClick", "code": true }]
-              ],
-              [
-                [{ "text": "Передача обробника", "bold": true }],
-                [{ "text": "Рядок або глобальна функція" }],
-                [{ "text": "Посилання на функцію компонента" }]
-              ],
-              [
-                [{ "text": "Керування слухачами", "bold": true }],
-                [
-                  { "text": "Через " },
-                  { "text": "addEventListener", "code": true }
-                ],
-                [{ "text": "Автоматично через Virtual DOM" }]
-              ],
-              [
-                [{ "text": "Контекст this", "bold": true }],
-                [{ "text": "Потрібен ручний контроль" }],
-                [{ "text": "У функціональних компонентах проблем немає" }]
-              ],
-              [
-                [{ "text": "Стандартна поведінка", "bold": true }],
-                [
-                  { "text": "Через " },
-                  { "text": "return false", "code": true }
-                ],
-                [
-                  { "text": "Через " },
-                  { "text": "event.preventDefault()", "code": true }
-                ]
-              ],
-              [
-                [{ "text": "Події", "bold": true }],
-                [{ "text": "Нативні DOM-події" }],
-                [{ "text": "SyntheticEvent (нормалізація)" }]
-              ]
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "23. What is the difference between HTML and React event handling?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Differences between event handling in HTML and React:"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Criterion" }],
-              [{ "text": "HTML" }],
-              [{ "text": "React" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Event syntax", "bold": true }],
-                [
-                  { "text": "Lowercase attribute: " },
-                  { "text": "onclick", "code": true }
-                ],
-                [{ "text": "camelCase: " }, { "text": "onClick", "code": true }]
-              ],
-              [
-                [{ "text": "Handler passing", "bold": true }],
-                [{ "text": "String or global function" }],
-                [{ "text": "Function reference" }]
-              ],
-              [
-                [{ "text": "Listener management", "bold": true }],
-                [
-                  { "text": "Via " },
-                  { "text": "addEventListener", "code": true }
-                ],
-                [{ "text": "Managed by Virtual DOM" }]
-              ],
-              [
-                [{ "text": "this context", "bold": true }],
-                [{ "text": "Manual binding required" }],
-                [{ "text": "No issue in functional components" }]
-              ],
-              [
-                [{ "text": "Default behavior", "bold": true }],
-                [
-                  { "text": "Using " },
-                  { "text": "return false", "code": true }
-                ],
-                [
-                  { "text": "Using " },
-                  { "text": "event.preventDefault()", "code": true }
-                ]
-              ],
-              [
-                [{ "text": "Events", "bold": true }],
-                [{ "text": "Native DOM events" }],
-                [{ "text": "SyntheticEvent wrapper" }]
-              ]
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "23. Jaka jest różnica między obsługą zdarzeń w HTML i React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Różnice między obsługą zdarzeń w HTML i React:" }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Kryterium" }],
-              [{ "text": "HTML" }],
-              [{ "text": "React" }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Składnia zdarzeń", "bold": true }],
-                [
-                  { "text": "Atrybut małymi literami: " },
-                  { "text": "onclick", "code": true }
-                ],
-                [{ "text": "camelCase: " }, { "text": "onClick", "code": true }]
-              ],
-              [
-                [{ "text": "Przekazywanie handlera", "bold": true }],
-                [{ "text": "Łańcuch znaków lub funkcja globalna" }],
-                [{ "text": "Referencja do funkcji komponentu" }]
-              ],
-              [
-                [{ "text": "Zarządzanie listenerami", "bold": true }],
-                [
-                  { "text": "Przez " },
-                  { "text": "addEventListener", "code": true }
-                ],
-                [{ "text": "Automatycznie przez Virtual DOM" }]
-              ],
-              [
-                [{ "text": "Kontekst this", "bold": true }],
-                [{ "text": "Wymaga ręcznego bindowania" }],
-                [{ "text": "Brak problemu w komponentach funkcyjnych" }]
-              ],
-              [
-                [{ "text": "Domyślne zachowanie", "bold": true }],
-                [
-                  { "text": "Za pomocą " },
-                  { "text": "return false", "code": true }
-                ],
-                [
-                  { "text": "Za pomocą " },
-                  { "text": "event.preventDefault()", "code": true }
-                ]
-              ],
-              [
-                [{ "text": "Zdarzenia", "bold": true }],
-                [{ "text": "Natywne zdarzenia DOM" }],
-                [{ "text": "SyntheticEvent (normalizacja)" }]
-              ]
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 24,
-    "translations": {
-      "uk": {
-        "question": "24. Що таке синтетичні події в React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Синтетичні події (Synthetic Events)", "bold": true },
-              {
-                "text": " — це обгортки над нативними DOM-подіями в React, які забезпечують єдиний інтерфейс роботи з подіями у всіх браузерах."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні характеристики:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Кросбраузерність:", "bold": true },
-                  { "text": " однакова поведінка подій у різних браузерах." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оптимізація:", "bold": true },
-                  {
-                    "text": " використання пулу обʼєктів для зменшення витрат памʼяті."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Стандартний інтерфейс:", "bold": true },
-                  { "text": " підтримує методи " },
-                  { "text": "preventDefault()", "code": true },
-                  { "text": " та " },
-                  { "text": "stopPropagation()", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "24. What are synthetic events in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Synthetic Events", "bold": true },
-              {
-                "text": " are wrappers around native DOM events in React that provide a consistent event interface across all browsers."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key characteristics:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Cross-browser consistency:", "bold": true },
-                  { "text": " uniform behavior across different browsers." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optimization:", "bold": true },
-                  { "text": " object pooling to reduce memory allocations." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Standard interface:", "bold": true },
-                  { "text": " supports methods like " },
-                  { "text": "preventDefault()", "code": true },
-                  { "text": " and " },
-                  { "text": "stopPropagation()", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "24. Czym są zdarzenia syntetyczne w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zdarzenia syntetyczne (Synthetic Events)",
-                "bold": true
-              },
-              {
-                "text": " to obiekty opakowujące natywne zdarzenia DOM w React, zapewniające jednolity interfejs obsługi zdarzeń we wszystkich przeglądarkach."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne cechy:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zgodność międzyprzeglądarkowa:", "bold": true },
-                  { "text": " jednolite zachowanie zdarzeń." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optymalizacja:", "bold": true },
-                  {
-                    "text": " wykorzystanie puli obiektów w celu oszczędzania pamięci."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Standardowy interfejs:", "bold": true },
-                  { "text": " obsługa metod " },
-                  { "text": "preventDefault()", "code": true },
-                  { "text": " oraz " },
-                  { "text": "stopPropagation()", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 25,
-    "translations": {
-      "uk": {
-        "question": "25. Як обробляти події в React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "В React обробка подій схожа на звичайний JavaScript, але використовує синтетичні події та декларативний підхід через JSX."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні принципи:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Синтетичні події:", "bold": true },
-                  { "text": " всі події обгорнуті в " },
-                  { "text": "SyntheticEvent", "bold": true },
-                  { "text": " для кросбраузерної сумісності." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "camelCase:", "bold": true },
-                  { "text": " події оголошуються як " },
-                  { "text": "onClick", "code": true },
-                  { "text": ", а не " },
-                  { "text": "onclick", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Передача функцій:", "bold": true },
-                  { "text": " обробник передається як посилання на функцію." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Особливості:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Не використовується " },
-                  { "text": "addEventListener", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Контекст " },
-                  { "text": "this", "code": true },
-                  { "text": " у класових компонентах потребує привʼязки." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "25. How are events handled in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In React, event handling is similar to standard JavaScript but uses synthetic events and a declarative JSX-based approach."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Core principles:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Synthetic events:", "bold": true },
-                  { "text": " all events are wrapped in " },
-                  { "text": "SyntheticEvent", "bold": true },
-                  { "text": " for cross-browser consistency." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "camelCase:", "bold": true },
-                  { "text": " events use " },
-                  { "text": "onClick", "code": true },
-                  { "text": " instead of " },
-                  { "text": "onclick", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Function handlers:", "bold": true },
-                  { "text": " handlers are passed as function references." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Notes:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "No need for " },
-                  { "text": "addEventListener", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "The " },
-                  { "text": "this", "code": true },
-                  { "text": " context must be bound in class components." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "25. Jak obsługiwać zdarzenia w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W React obsługa zdarzeń jest podobna do JavaScript, ale opiera się na zdarzeniach syntetycznych i deklaratywnym JSX."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne zasady:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zdarzenia syntetyczne:", "bold": true },
-                  { "text": " wszystkie zdarzenia są opakowane w " },
-                  { "text": "SyntheticEvent", "bold": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "camelCase:", "bold": true },
-                  { "text": " używa się " },
-                  { "text": "onClick", "code": true },
-                  { "text": " zamiast " },
-                  { "text": "onclick", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Funkcje obsługi:", "bold": true },
-                  { "text": " przekazywane jako referencje." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Uwagi:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Nie używa się " },
-                  { "text": "addEventListener", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kontekst " },
-                  { "text": "this", "code": true },
-                  { "text": " w komponentach klasowych wymaga bindowania." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 26,
-    "translations": {
-      "uk": {
-        "question": "26. Що таке події вказівника (Pointer Events)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pointer Events", "bold": true },
-              {
-                "text": " — це уніфікований API для обробки подій миші, сенсорного екрана та стилуса в React."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні події:" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Подія", "bold": true }],
-              [{ "text": "Опис", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "onPointerDown", "bold": true }],
-                [{ "text": "Спрацьовує при натисканні вказівника." }]
-              ],
-              [
-                [{ "text": "onPointerUp", "bold": true }],
-                [{ "text": "Спрацьовує при відпусканні вказівника." }]
-              ],
-              [
-                [{ "text": "onPointerMove", "bold": true }],
-                [{ "text": "Викликається при русі вказівника." }]
-              ],
-              [
-                [{ "text": "onPointerEnter", "bold": true }],
-                [{ "text": "Коли вказівник входить у межі елемента." }]
-              ],
-              [
-                [{ "text": "onPointerLeave", "bold": true }],
-                [{ "text": "Коли вказівник залишає елемент." }]
-              ],
-              [
-                [{ "text": "onPointerCancel", "bold": true }],
-                [{ "text": "Коли подію скасовано браузером." }]
-              ]
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "26. What are Pointer Events?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pointer Events", "bold": true },
-              {
-                "text": " are a unified API for handling mouse, touch, and pen input events in React."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Main events:" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Event", "bold": true }],
-              [{ "text": "Description", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "onPointerDown", "bold": true }],
-                [{ "text": "Fires when a pointer is pressed." }]
-              ],
-              [
-                [{ "text": "onPointerUp", "bold": true }],
-                [{ "text": "Fires when a pointer is released." }]
-              ],
-              [
-                [{ "text": "onPointerMove", "bold": true }],
-                [{ "text": "Triggered when the pointer moves." }]
-              ],
-              [
-                [{ "text": "onPointerEnter", "bold": true }],
-                [{ "text": "When the pointer enters an element." }]
-              ],
-              [
-                [{ "text": "onPointerLeave", "bold": true }],
-                [{ "text": "When the pointer leaves an element." }]
-              ],
-              [
-                [{ "text": "onPointerCancel", "bold": true }],
-                [{ "text": "When the browser cancels the event." }]
-              ]
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "26. Czym są zdarzenia wskaźnika (Pointer Events)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pointer Events", "bold": true },
-              {
-                "text": " to zunifikowane API do obsługi zdarzeń myszy, dotyku i rysika w React."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne zdarzenia:" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Zdarzenie", "bold": true }],
-              [{ "text": "Opis", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "onPointerDown", "bold": true }],
-                [{ "text": "Wywoływane przy naciśnięciu wskaźnika." }]
-              ],
-              [
-                [{ "text": "onPointerUp", "bold": true }],
-                [{ "text": "Wywoływane przy zwolnieniu wskaźnika." }]
-              ],
-              [
-                [{ "text": "onPointerMove", "bold": true }],
-                [{ "text": "Wywoływane podczas ruchu wskaźnika." }]
-              ],
-              [
-                [{ "text": "onPointerEnter", "bold": true }],
-                [{ "text": "Gdy wskaźnik wchodzi w element." }]
-              ],
-              [
-                [{ "text": "onPointerLeave", "bold": true }],
-                [{ "text": "Gdy wskaźnik opuszcza element." }]
-              ],
-              [
-                [{ "text": "onPointerCancel", "bold": true }],
-                [{ "text": "Gdy zdarzenie zostaje anulowane." }]
-              ]
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 27,
-    "translations": {
-      "uk": {
-        "question": "27. Коли використовувати компонент класу замість функціонального компонента?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Класові компоненти історично використовувалися у випадках, коли функціональні компоненти не мали необхідних можливостей."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Стан компонента:", "bold": true },
-                  {
-                    "text": " раніше лише класи підтримували локальний стан. Сьогодні це вирішується хуками."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Методи життєвого циклу:", "bold": true },
-                  {
-                    "text": " класи надавали доступ до lifecycle-методів, які зараз замінені хуком "
-                  },
-                  { "text": "useEffect", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Застарілий код:", "bold": true },
-                  {
-                    "text": " підтримка існуючих проєктів, написаних на класах."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У нових проєктах класові компоненти не рекомендуються. Функціональні компоненти з хуками є стандартом."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "27. When should you use a class component instead of a functional component?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Class components were historically used when functional components lacked certain capabilities."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Component state:", "bold": true },
-                  {
-                    "text": " only class components supported state before hooks."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lifecycle methods:", "bold": true },
-                  {
-                    "text": " classes exposed lifecycle APIs now replaced by "
-                  },
-                  { "text": "useEffect", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Legacy code:", "bold": true },
-                  {
-                    "text": " maintaining older React codebases."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "For new development, functional components with hooks are the recommended approach."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "27. Kiedy używać komponentu klasowego zamiast funkcyjnego?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Komponenty klasowe były używane, gdy komponenty funkcyjne nie oferowały wymaganej funkcjonalności."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Stan komponentu:", "bold": true },
-                  {
-                    "text": " wcześniej dostępny tylko w komponentach klasowych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Metody cyklu życia:", "bold": true },
-                  {
-                    "text": " obecnie zastąpione przez hook "
-                  },
-                  { "text": "useEffect", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Starszy kod:", "bold": true },
-                  {
-                    "text": " utrzymanie istniejących aplikacji."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W nowych projektach zaleca się używanie komponentów funkcyjnych z hookami."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 28,
-    "translations": {
-      "uk": {
-        "question": "28. Що таке компоненти без стану (stateless components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Компоненти без стану (stateless components) — це компоненти, які не зберігають власний стан і працюють виключно з даними, отриманими через props."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Особливості:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відсутність стану:", "bold": true },
-                  { "text": " не використовують внутрішній state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Орієнтація на props:", "bold": true },
-                  { "text": " рендерять UI виключно на основі вхідних даних." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Передбачуваність:", "bold": true },
-                  {
-                    "text": " однакові props завжди дають однаковий результат."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "28. What are stateless components?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Stateless components are components that do not manage their own state and rely entirely on props to render UI."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key characteristics:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "No internal state:", "bold": true },
-                  { "text": " they do not use component state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Props-driven:", "bold": true },
-                  { "text": " UI output depends solely on input props." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Predictability:", "bold": true },
-                  { "text": " same props always produce the same output." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "28. Czym są komponenty bezstanowe (stateless components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Komponenty bezstanowe to komponenty, które nie przechowują własnego stanu i renderują interfejs wyłącznie na podstawie propsów."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Cechy charakterystyczne:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Brak stanu:", "bold": true },
-                  { "text": " nie korzystają z wewnętrznego state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Oparte na propsach:", "bold": true },
-                  { "text": " renderują UI na podstawie danych wejściowych." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przewidywalność:", "bold": true },
-                  { "text": " te same propsy dają ten sam wynik." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 29,
-    "translations": {
-      "uk": {
-        "question": "29. Що таке компоненти стану (stateful components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Компоненти стану (stateful components)",
-                "bold": true
-              },
-              {
-                "text": " — це компоненти, які зберігають і керують власним внутрішнім станом, що може змінюватися з часом і впливати на рендеринг."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Особливості:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Власний стан:", "bold": true },
-                  { "text": " зберігають дані у state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оновлення стану:", "bold": true },
-                  {
-                    "text": " зміни стану викликають повторний рендеринг компонента."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Динамічність:", "bold": true },
-                  { "text": " UI змінюється залежно від поточного стану." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "29. What are stateful components?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Stateful components", "bold": true },
-              {
-                "text": " are components that manage their own internal state, which can change over time and affect rendering."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key characteristics:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Internal state:", "bold": true },
-                  { "text": " they store data inside component state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "State updates:", "bold": true },
-                  { "text": " state changes trigger re-rendering." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dynamic behavior:", "bold": true },
-                  { "text": " UI output depends on current state." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "29. Czym są komponenty stanowe (stateful components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Komponenty stanowe (stateful components)",
-                "bold": true
-              },
-              {
-                "text": " to komponenty, które przechowują i zarządzają własnym stanem, wpływającym na renderowanie."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Cechy:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Własny stan:", "bold": true },
-                  { "text": " dane są przechowywane w state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Aktualizacja stanu:", "bold": true },
-                  { "text": " zmiany stanu powodują ponowne renderowanie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dynamiczność:", "bold": true },
-                  { "text": " interfejs reaguje na zmiany stanu." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 30,
-    "translations": {
-      "uk": {
-        "question": "30. Що таке чисті компоненти (Pure Components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Чисті компоненти (Pure Components)", "bold": true },
-              {
-                "text": " — це класові компоненти React, які оптимізують рендеринг за допомогою поверхневого порівняння пропсів і стану."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ключова ідея:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Компонент перерендерюється лише тоді, коли змінюються пропси або стан за результатом shallow comparison."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Особливості:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Авто-оптимізація:", "bold": true },
-                  {
-                    "text": " реалізує shouldComponentUpdate з поверхневим порівнянням."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Обмеження:", "bold": true },
-                  {
-                    "text": " не відстежує глибокі зміни у вкладених обʼєктах."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "30. What are Pure Components?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pure Components", "bold": true },
-              {
-                "text": " are React class components that optimize rendering by performing a shallow comparison of props and state."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Core idea:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The component re-renders only when props or state change based on shallow comparison."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key points:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automatic optimization:", "bold": true },
-                  { "text": " includes a built-in shouldComponentUpdate." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Limitation:", "bold": true },
-                  {
-                    "text": " does not detect deep mutations in objects or arrays."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "30. Czym są czyste komponenty (Pure Components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Czyste komponenty (Pure Components)", "bold": true },
-              {
-                "text": " to komponenty klasowe React, które optymalizują renderowanie poprzez płytkie porównanie propsów i stanu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główna idea:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Komponent renderuje się ponownie tylko wtedy, gdy zmienią się propsy lub stan."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Cechy:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automatyczna optymalizacja:", "bold": true },
-                  { "text": " wbudowane shouldComponentUpdate." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ograniczenia:", "bold": true },
-                  {
-                    "text": " brak wykrywania głębokich zmian w strukturach danych."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 31,
-    "translations": {
-      "uk": {
-        "question": "31. Що таке компоненти вищого порядку (Higher-Order Components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Компоненти вищого порядку (Higher-Order Components)",
-                "bold": true
-              },
-              {
-                "text": " — це функції, які приймають компонент і повертають новий компонент, розширюючи або модифікуючи його поведінку."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні характеристики:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Функція над компонентом:", "bold": true },
-                  { "text": " приймає компонент як аргумент." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Повертає новий компонент:", "bold": true },
-                  { "text": " додає логіку або пропси." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Повторне використання логіки:", "bold": true },
-                  { "text": " дозволяє уникати дублювання коду." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У сучасному React HOC застосовуються рідше, оскільки більшість сценаріїв ефективніше вирішуються хуками."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "31. What are Higher-Order Components?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Higher-Order Components", "bold": true },
-              {
-                "text": " are functions that take a component as input and return a new component with enhanced behavior."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key characteristics:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Component wrapper:", "bold": true },
-                  { "text": " accepts a component as an argument." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Returns a new component:", "bold": true },
-                  { "text": " injects additional logic or props." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Logic reuse:", "bold": true },
-                  { "text": " enables sharing behavior across components." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In modern React applications, HOCs are often replaced by hooks."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "31. Czym są komponenty wyższego rzędu (Higher-Order Components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Komponenty wyższego rzędu (Higher-Order Components)",
-                "bold": true
-              },
-              {
-                "text": " to funkcje, które przyjmują komponent i zwracają nowy komponent z rozszerzoną funkcjonalnością."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Cechy charakterystyczne:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Funkcja nad komponentem:", "bold": true },
-                  { "text": " przyjmuje komponent jako argument." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Nowy komponent:", "bold": true },
-                  { "text": " dodaje logikę lub propsy." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wielokrotne użycie logiki:", "bold": true },
-                  { "text": " umożliwia współdzielenie zachowania." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W nowoczesnym React HOC są często zastępowane przez hooki."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 32,
-    "translations": {
-      "uk": {
-        "question": "32. Що таке children prop?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "children",
-                "code": true
-              },
-              {
-                "text": " — це спеціальний пропс у React, який містить вкладений вміст, переданий між відкриваючим і закриваючим тегами компонента."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ключові властивості:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Гнучкість:", "bold": true },
-                  {
-                    "text": " може містити текст, JSX, компоненти або функції."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Композиція:", "bold": true },
-                  { "text": " дозволяє створювати компоненти-обгортки." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Повторне використання:", "bold": true },
-                  { "text": " один компонент може відображати різний вміст." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "32. What is the children prop?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "children",
-                "code": true
-              },
-              {
-                "text": " is a special React prop that contains the nested content passed between a component’s opening and closing tags."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key properties:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Flexibility:", "bold": true },
-                  {
-                    "text": " can contain text, JSX, components, or functions."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Composition:", "bold": true },
-                  { "text": " enables wrapper and layout components." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Reusability:", "bold": true },
-                  {
-                    "text": " the same component can render different content."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "32. Czym jest prop children?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "children",
-                "code": true
-              },
-              {
-                "text": " to specjalny props w React, który zawiera zagnieżdżoną treść przekazaną między znacznikami komponentu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kluczowe cechy:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Elastyczność:", "bold": true },
-                  {
-                    "text": " może zawierać tekst, JSX, komponenty lub funkcje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kompozycja:", "bold": true },
-                  { "text": " umożliwia tworzenie komponentów opakowujących." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wielokrotne użycie:", "bold": true },
-                  { "text": " jeden komponent może renderować różną treść." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 33,
-    "translations": {
-      "uk": {
-        "question": "33. Що таке портал (Portal)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Портал (Portal)", "bold": true },
-              {
-                "text": " — це механізм у React, який дозволяє рендерити елементи в DOM-вузол поза ієрархією батьківського компонента."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ключові моменти:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Рендеринг поза деревом DOM:", "bold": true },
-                  { "text": " елемент фізично знаходиться в іншому DOM-вузлі." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Збереження React-ієрархії:", "bold": true },
-                  {
-                    "text": " події поширюються відповідно до дерева компонентів React."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "33. What is a Portal?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "A Portal", "bold": true },
-              {
-                "text": " is a React feature that allows rendering children into a DOM node outside the parent component’s DOM hierarchy."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key points:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Out-of-tree rendering:", "bold": true },
-                  { "text": " the element is mounted elsewhere in the DOM." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Preserved React hierarchy:", "bold": true },
-                  {
-                    "text": " event bubbling follows the React component tree."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "33. Czym jest portal (Portal)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Portal", "bold": true },
-              {
-                "text": " to mechanizm w React umożliwiający renderowanie elementów w węźle DOM poza hierarchią komponentu nadrzędnego."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Najważniejsze cechy:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Renderowanie poza drzewem DOM:", "bold": true },
-                  { "text": " element znajduje się w innym miejscu w DOM." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zachowana hierarchia React:", "bold": true },
-                  { "text": " obsługa zdarzeń zgodna z drzewem komponentów." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 34,
-    "translations": {
-      "uk": {
-        "question": "34. Як працюють портали (Portals) в React, і які їх переваги та основні застосування в UI-розробці?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Портали (Portals)", "bold": true },
-              {
-                "text": " дозволяють рендерити елементи в інший DOM-вузол поза стандартною ієрархією батьківського компонента."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працюють:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React використовує метод "
-              },
-              { "text": "ReactDOM.createPortal", "code": true },
-              {
-                "text": ", який рендерить JSX у вказаний DOM-контейнер, зберігаючи при цьому React-ієрархію та обробку подій."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Коректне накладання елементів поверх UI." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відсутність проблем із overflow та z-index." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Збереження контексту та подій React." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні застосування:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Модальні вікна." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Tooltips і popovers." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Контекстні меню." }]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "34. How do Portals work in React, and what are their benefits and main UI use cases?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Portals", "bold": true },
-              {
-                "text": " allow rendering elements into a DOM node outside the parent component’s DOM hierarchy."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How they work:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React uses "
-              },
-              { "text": "ReactDOM.createPortal", "code": true },
-              {
-                "text": " to mount JSX into a target DOM node while preserving React context and event bubbling."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Benefits:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Proper layering of UI elements." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Avoids overflow and z-index issues." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Preserves React state and events." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Common use cases:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              { "type": "listItem", "children": [{ "text": "Modals." }] },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Tooltips and popovers." }]
-              },
-              { "type": "listItem", "children": [{ "text": "Context menus." }] }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "34. Jak działają portale (Portals) w React i jakie są ich zalety oraz główne zastosowania w UI?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Portale (Portals)", "bold": true },
-              {
-                "text": " umożliwiają renderowanie elementów w węźle DOM poza hierarchią komponentu nadrzędnego."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działają:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React używa metody "
-              },
-              { "text": "ReactDOM.createPortal", "code": true },
-              {
-                "text": ", aby renderować JSX w docelowym węźle DOM z zachowaniem kontekstu i zdarzeń React."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Poprawne nakładanie elementów UI." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Brak problemów z overflow i z-index." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Zachowanie stanu i zdarzeń React." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne zastosowania:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              { "type": "listItem", "children": [{ "text": "Okna modalne." }] },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Tooltipy i popovery." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Menu kontekstowe." }]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 35,
-    "translations": {
-      "uk": {
-        "question": "35. Методи життєвого циклу компонента у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Методи життєвого циклу",
-                "bold": true
-              },
-              {
-                "text": " використовуються в класових компонентах React для керування етапами існування компонента: створення, оновлення та видалення."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні фази:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Монтування:", "bold": true },
-                  { "text": " constructor, render, componentDidMount." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оновлення:", "bold": true },
-                  {
-                    "text": " shouldComponentUpdate, render, componentDidUpdate."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Розмонтування:", "bold": true },
-                  { "text": " componentWillUnmount." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Обробка помилок:", "bold": true },
-                  { "text": " getDerivedStateFromError, componentDidCatch." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У сучасному React ці методи переважно замінюються хуками у функціональних компонентах."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "35. What are component lifecycle methods in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Lifecycle methods",
-                "bold": true
-              },
-              {
-                "text": " are used in React class components to control different stages of a component’s life: creation, update, and removal."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Main phases:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mounting:", "bold": true },
-                  { "text": " constructor, render, componentDidMount." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Updating:", "bold": true },
-                  {
-                    "text": " shouldComponentUpdate, render, componentDidUpdate."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Unmounting:", "bold": true },
-                  { "text": " componentWillUnmount." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Error handling:", "bold": true },
-                  { "text": " getDerivedStateFromError, componentDidCatch." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In modern React, these lifecycle methods are mostly replaced by hooks."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "35. Jakie są metody cyklu życia komponentu w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Metody cyklu życia",
-                "bold": true
-              },
-              {
-                "text": " są używane w komponentach klasowych React do zarządzania etapami życia komponentu: tworzeniem, aktualizacją i usuwaniem."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne fazy:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Montowanie:", "bold": true },
-                  { "text": " constructor, render, componentDidMount." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Aktualizacja:", "bold": true },
-                  {
-                    "text": " shouldComponentUpdate, render, componentDidUpdate."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Odmontowanie:", "bold": true },
-                  { "text": " componentWillUnmount." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Obsługa błędów:", "bold": true },
-                  { "text": " getDerivedStateFromError, componentDidCatch." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W nowoczesnym React metody te są w większości zastępowane przez hooki."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 36,
-    "translations": {
-      "uk": {
-        "question": "36. Що робить метод shouldComponentUpdate?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "shouldComponentUpdate",
-                "code": true
-              },
-              {
-                "text": " — це метод життєвого циклу в класових компонентах React, який визначає, чи потрібно виконувати повторний рендер компонента."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Повертає true:", "bold": true },
-                  { "text": " компонент буде перерендерений." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Повертає false:", "bold": true },
-                  {
-                    "text": " рендер пропускається, навіть якщо props або state змінилися."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "36. What does shouldComponentUpdate do?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "shouldComponentUpdate",
-                "code": true
-              },
-              {
-                "text": " is a lifecycle method in React class components that decides whether the component should re-render."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Returns true:", "bold": true },
-                  { "text": " the component re-renders." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Returns false:", "bold": true },
-                  {
-                    "text": " rendering is skipped even if props or state change."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "36. Co robi metoda shouldComponentUpdate?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "shouldComponentUpdate",
-                "code": true
-              },
-              {
-                "text": " to metoda cyklu życia w komponentach klasowych React, która decyduje, czy komponent powinien zostać ponownie wyrenderowany."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zwraca true:", "bold": true },
-                  { "text": " komponent zostanie wyrenderowany ponownie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zwraca false:", "bold": true },
-                  {
-                    "text": " renderowanie zostaje pominięte mimo zmian propsów lub stanu."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 37,
-    "translations": {
-      "uk": {
-        "question": "37. Як виконати код перед видаленням компонента з дерева?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Щоб виконати код перед видаленням компонента з дерева в React, використовують такі підходи:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Класові компоненти:", "bold": true },
-                  { "text": " " },
-                  { "text": "componentWillUnmount", "code": true },
-                  {
-                    "text": "Для класових компонентів є метод життєвого циклу componentWillUnmount, який викликається перед видаленням компонента."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class MyComponent extends React.Component {\n  componentWillUnmount() {\n    console.log('Компонент буде видалено');\n  }\n\n  render() {\n    return <div>Мій компонент</div>;\n  }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Функціональні компоненти:", "bold": true },
-                  { "text": " " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " з очищенням" },
-                  {
-                    "text": "У функціональних компонентах очищення можна зробити в useEffect, повернувши функцію, яка виконається перед видаленням компонента."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import { useEffect } from 'react';\n\nfunction MyComponent() {\n  useEffect(() => {\n    return () => {\n      console.log('Компонент буде видалено');\n    };\n  }, []);\n\n  return <div>Мій компонент</div>;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Обробка перед закриттям сторінки (beforeunload)",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Якщо потрібно виконати код перед закриттям вкладки або перезавантаженням сторінки:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "useEffect(() => {\n  const handleUnload = () => {\n    console.log('Сторінка закривається');\n  };\n\n  window.addEventListener('beforeunload', handleUnload);\n  return () => window.removeEventListener('beforeunload', handleUnload);\n}, []);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Висновок" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "componentWillUnmount", "code": true },
-                  { "text": " – для класових компонентів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useEffect", "code": true },
-                  { "text": " із " },
-                  { "text": "return", "code": true },
-                  { "text": " – для функціональних." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "beforeunload", "code": true },
-                  {
-                    "text": " – для випадків, коли потрібно реагувати на вихід із сторінки."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "37. How to run code before a component is removed from the tree?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "To execute code before a component is removed from the React tree, the following approaches are used:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Class components:", "bold": true },
-                  { "text": " " },
-                  { "text": "componentWillUnmount", "code": true },
-                  {
-                    "text": "Class components provide the componentWillUnmount lifecycle method, which is called right before the component is removed."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class MyComponent extends React.Component {\n  componentWillUnmount() {\n    console.log('Component will be removed');\n  }\n\n  render() {\n    return <div>My component</div>;\n  }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Function components:", "bold": true },
-                  { "text": " " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " with cleanup" },
-                  {
-                    "text": "In function components, cleanup logic is implemented in useEffect by returning a function that runs before unmount."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import { useEffect } from 'react';\n\nfunction MyComponent() {\n  useEffect(() => {\n    return () => {\n      console.log('Component will be removed');\n    };\n  }, []);\n\n  return <div>My component</div>;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Handling page unload (beforeunload)",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "If code must be executed before closing or reloading the page:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "useEffect(() => {\n  const handleUnload = () => {\n    console.log('Page is closing');\n  };\n\n  window.addEventListener('beforeunload', handleUnload);\n  return () => window.removeEventListener('beforeunload', handleUnload);\n}, []);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Conclusion" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "componentWillUnmount", "code": true },
-                  { "text": " for class components." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useEffect", "code": true },
-                  { "text": " with " },
-                  { "text": "return", "code": true },
-                  { "text": " for function components." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "beforeunload", "code": true },
-                  { "text": " for reacting to page exit." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "37. Jak wykonać kod przed usunięciem komponentu z drzewa?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Aby wykonać kod przed usunięciem komponentu z drzewa React, stosuje się następujące podejścia:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponenty klasowe:", "bold": true },
-                  { "text": " " },
-                  { "text": "componentWillUnmount", "code": true },
-                  {
-                    "text": "Dla komponentów klasowych dostępna jest metoda cyklu życia componentWillUnmount, wywoływana tuż przed usunięciem komponentu."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class MyComponent extends React.Component {\n  componentWillUnmount() {\n    console.log('Komponent zostanie usunięty');\n  }\n\n  render() {\n    return <div>Mój komponent</div>;\n  }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponenty funkcyjne:", "bold": true },
-                  { "text": " " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " z czyszczeniem" },
-                  {
-                    "text": "W komponentach funkcyjnych logikę czyszczenia implementuje się w useEffect, zwracając funkcję wywoływaną przed odmontowaniem."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import { useEffect } from 'react';\n\nfunction MyComponent() {\n  useEffect(() => {\n    return () => {\n      console.log('Komponent zostanie usunięty');\n    };\n  }, []);\n\n  return <div>Mój komponent</div>;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obsługa zamykania strony (beforeunload)",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Jeśli konieczne jest wykonanie kodu przed zamknięciem karty lub przeładowaniem strony:"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "useEffect(() => {\n  const handleUnload = () => {\n    console.log('Strona jest zamykana');\n  };\n\n  window.addEventListener('beforeunload', handleUnload);\n  return () => window.removeEventListener('beforeunload', handleUnload);\n}, []);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wniosek" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "componentWillUnmount", "code": true },
-                  { "text": " dla komponentów klasowych." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useEffect", "code": true },
-                  { "text": " z " },
-                  { "text": "return", "code": true },
-                  { "text": " dla komponentów funkcyjnych." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "beforeunload", "code": true },
-                  { "text": " do reagowania na opuszczenie strony." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 38,
-    "translations": {
-      "uk": {
-        "question": "38. Чому фрагменти (Fragment) кращі за контейнерні div?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Фрагменти (" },
-              { "text": "<React.Fragment>", "code": true },
-              { "text": " або " },
-              { "text": "<>...</>", "code": true },
-              { "text": ") кращі за контейнерні " },
-              { "text": "<div>", "code": true },
-              { "text": " у React з кількох причин:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Зменшення зайвого HTML", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Фрагменти не додають додатковий елемент у DOM, що зменшує вкладеність і спрощує структуру."
-                          },
-                          {
-                            "type": "code",
-                            "language": "jsx",
-                            "content": "<>\n  <h1>Title</h1>\n  <p>Text</p>\n</>"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Відсутність побічних ефектів стилів",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "<div>", "code": true },
-                          {
-                            "text": " може впливати на CSS і ламати верстку. Фрагменти цього не роблять."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Коректна робота з таблицями", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Фрагменти можна використовувати всередині table без порушення HTML-специфікації."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Продуктивність", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Менше DOM-вузлів означає швидший рендеринг і менше споживання памʼяті."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "38. Why are Fragments better than container divs?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Fragments (" },
-              { "text": "<React.Fragment>", "code": true },
-              { "text": " or " },
-              { "text": "<>...</>", "code": true },
-              { "text": ") are better than container " },
-              { "text": "<div>", "code": true },
-              { "text": " elements in React for several reasons:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Less unnecessary HTML", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Fragments do not add extra nodes to the DOM, keeping the markup clean."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "No styling side effects", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "<div>", "code": true },
-                          {
-                            "text": " wrappers can interfere with CSS layouts. Fragments avoid this."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Table compatibility", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Fragments can be used inside tables where div elements are invalid."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Performance", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Fewer DOM nodes result in faster rendering and lower memory usage."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "38. Dlaczego Fragmenty są lepsze niż kontenerowe divy?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Fragmenty (" },
-              { "text": "<React.Fragment>", "code": true },
-              { "text": " lub " },
-              { "text": "<>...</>", "code": true },
-              { "text": ") są lepsze niż kontenerowe " },
-              { "text": "<div>", "code": true },
-              { "text": " w React z kilku powodów:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mniej zbędnego HTML", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Fragmenty nie dodają dodatkowych elementów do DOM."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Brak efektów ubocznych stylów", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "<div>", "code": true },
-                          {
-                            "text": " może zaburzać CSS i układ strony. Fragmenty tego unikają."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zgodność z tabelami", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Fragmenty mogą być używane w tabelach, gdzie div jest niedozwolony."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wydajność", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Mniej węzłów DOM oznacza szybsze renderowanie i mniejsze zużycie pamięci."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 39,
-    "translations": {
-      "uk": {
-        "question": "39. Що таке Хуки (Hooks) в React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React Хуки (Hooks)", "bold": true },
-              {
-                "text": " – це функції, які дозволяють використовувати стан та інші можливості React без написання класів."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні типи хуків:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useState", "bold": true },
-                  {
-                    "text": " – додає стан у функціональні компоненти."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const [state, setState] = useState(initialState);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useEffect", "bold": true },
-                  {
-                    "text": " – виконує побічні ефекти у функціональних компонентах."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "useEffect(() => {\n  // side effect\n}, [dependencies]);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useContext", "bold": true },
-                  {
-                    "text": " – доступ до значень контексту без Consumer."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const value = useContext(MyContext);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useRef", "bold": true },
-                  {
-                    "text": " – зберігає посилання або значення між рендерами без зміни стану."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const myRef = useRef(initialValue);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useReducer", "bold": true },
-                  {
-                    "text": " – керування складним станом через редуктор."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const [state, dispatch] = useReducer(reducer, initialState);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useMemo", "bold": true },
-                  {
-                    "text": " – мемоізує обчислення значень."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const memoizedValue = useMemo(() => compute(a, b), [a, b]);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useCallback", "bold": true },
-                  {
-                    "text": " – мемоізує функції."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const memoizedCallback = useCallback(() => {\n  // function\n}, [dependencies]);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні переваги:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Функціональні компоненти:", "bold": true },
-                  {
-                    "text": " логіка без класів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Читабельність:", "bold": true },
-                  {
-                    "text": " логіка розділена на хуки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Повторне використання логіки:", "bold": true },
-                  {
-                    "text": " без складних ієрархій."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "39. What are Hooks in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React Hooks", "bold": true },
-              {
-                "text": " are functions that let you use state and other React features without writing classes."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Main types of hooks:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useState", "bold": true },
-                  { "text": " adds state to function components." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const [state, setState] = useState(initialState);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useEffect", "bold": true },
-                  { "text": " handles side effects." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "useEffect(() => {\n  // side effect\n}, [dependencies]);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useContext", "bold": true },
-                  { "text": " accesses context values." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const value = useContext(MyContext);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useRef", "bold": true },
-                  { "text": " stores mutable references." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const myRef = useRef(initialValue);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useReducer", "bold": true },
-                  { "text": " manages complex state." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const [state, dispatch] = useReducer(reducer, initialState);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useMemo", "bold": true },
-                  { "text": " memoizes computed values." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const memoizedValue = useMemo(() => compute(a, b), [a, b]);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useCallback", "bold": true },
-                  { "text": " memoizes functions." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const memoizedCallback = useCallback(() => {}, [dependencies]);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key benefits:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "No classes:", "bold": true },
-                  { "text": " only functions." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Better readability:", "bold": true },
-                  { "text": " logic is separated." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Reusable logic:", "bold": true },
-                  { "text": " shared via hooks." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "39. Czym są Hooki (Hooks) w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Hooki React", "bold": true },
-              {
-                "text": " to funkcje umożliwiające korzystanie ze stanu i innych możliwości React bez użycia klas."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne typy hooków:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useState", "bold": true },
-                  { "text": " dodaje stan do komponentów funkcyjnych." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const [state, setState] = useState(initialState);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useEffect", "bold": true },
-                  { "text": " obsługuje efekty uboczne." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "useEffect(() => {\n  // efekt\n}, [dependencies]);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useContext", "bold": true },
-                  { "text": " daje dostęp do kontekstu." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const value = useContext(MyContext);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useRef", "bold": true },
-                  { "text": " przechowuje referencje." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const myRef = useRef(initialValue);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useReducer", "bold": true },
-                  { "text": " zarządza złożonym stanem." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const [state, dispatch] = useReducer(reducer, initialState);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useMemo", "bold": true },
-                  { "text": " memoizuje wartości." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const memoizedValue = useMemo(() => compute(a, b), [a, b]);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useCallback", "bold": true },
-                  { "text": " memoizuje funkcje." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const memoizedCallback = useCallback(() => {}, [dependencies]);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne zalety:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponenty funkcyjne:", "bold": true },
-                  { "text": " bez klas." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Czytelność:", "bold": true },
-                  { "text": " prostsza struktura logiki." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wielokrotne użycie logiki:", "bold": true },
-                  { "text": " współdzielenie przez hooki." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 40,
-    "translations": {
-      "uk": {
-        "question": "40. Переваги Хуків (Hooks) в React?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Перевага", "bold": true }],
-              [{ "text": "Опис", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Менше коду", "bold": true }],
-                [
-                  {
-                    "text": "Хуки дозволяють уникнути класів і зменшити обсяг коду."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Краща читабельність", "bold": true }],
-                [
-                  {
-                    "text": "Логіка в хуках простіша для читання та підтримки."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Повторне використання логіки", "bold": true }],
-                [
-                  {
-                    "text": "Custom Hooks дозволяють перевикористовувати логіку між компонентами."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Спрощене управління станом", "bold": true }],
-                [
-                  { "text": "useState", "code": true },
-                  { "text": " та " },
-                  { "text": "useReducer", "code": true },
-                  { "text": " спрощують роботу зі станом." }
-                ]
-              ],
-              [
-                [{ "text": "Гнучка робота з ефектами", "bold": true }],
-                [
-                  { "text": "useEffect", "code": true },
-                  { "text": " замінює методи життєвого циклу класів." }
-                ]
-              ],
-              [
-                [{ "text": "Легша міграція", "bold": true }],
-                [
-                  {
-                    "text": "Спрощує перехід з класових компонентів на функціональні."
-                  }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "40. Advantages of Hooks in React?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Advantage", "bold": true }],
-              [{ "text": "Description", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Less code", "bold": true }],
-                [{ "text": "Hooks eliminate classes and reduce boilerplate." }]
-              ],
-              [
-                [{ "text": "Better readability", "bold": true }],
-                [{ "text": "Logic is easier to understand and maintain." }]
-              ],
-              [
-                [{ "text": "Logic reuse", "bold": true }],
-                [
-                  {
-                    "text": "Custom Hooks allow sharing logic across components."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Simpler state management", "bold": true }],
-                [
-                  { "text": "useState", "code": true },
-                  { "text": " and " },
-                  { "text": "useReducer", "code": true },
-                  { "text": " simplify state handling." }
-                ]
-              ],
-              [
-                [{ "text": "Flexible effects handling", "bold": true }],
-                [
-                  { "text": "useEffect", "code": true },
-                  { "text": " replaces class lifecycle methods." }
-                ]
-              ],
-              [
-                [{ "text": "Easier migration", "bold": true }],
-                [{ "text": "Makes moving from class components easier." }]
-              ]
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "40. Zalety Hooków (Hooks) w React?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Zaleta", "bold": true }],
-              [{ "text": "Opis", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Mniej kodu", "bold": true }],
-                [{ "text": "Hooki eliminują klasy i zmniejszają ilość kodu." }]
-              ],
-              [
-                [{ "text": "Lepsza czytelność", "bold": true }],
-                [
-                  {
-                    "text": "Logika jest prostsza do zrozumienia i utrzymania."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Ponowne użycie logiki", "bold": true }],
-                [{ "text": "Custom Hooks umożliwiają współdzielenie logiki." }]
-              ],
-              [
-                [{ "text": "Prostsze zarządzanie stanem", "bold": true }],
-                [
-                  { "text": "useState", "code": true },
-                  { "text": " oraz " },
-                  { "text": "useReducer", "code": true },
-                  { "text": " upraszczają zarządzanie stanem." }
-                ]
-              ],
-              [
-                [{ "text": "Elastyczna obsługa efektów", "bold": true }],
-                [
-                  { "text": "useEffect", "code": true },
-                  { "text": " zastępuje metody cyklu życia klas." }
-                ]
-              ],
-              [
-                [{ "text": "Łatwiejsza migracja", "bold": true }],
-                [{ "text": "Ułatwia przejście z komponentów klasowych." }]
-              ]
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 41,
-    "translations": {
-      "uk": {
-        "question": "41. Недоліки Хуків (Hooks) в React?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Недолік", "bold": true }],
-              [{ "text": "Опис", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Зайві ререндери", "bold": true }],
-                [
-                  { "text": "Неправильне використання " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " може спричиняти зайві оновлення компонента." }
-                ]
-              ],
-              [
-                [{ "text": "Розпорошена логіка", "bold": true }],
-                [
-                  { "text": "Логіка часто розділена між кількома " },
-                  { "text": "useEffect", "code": true },
-                  { "text": ", що ускладнює розуміння." }
-                ]
-              ],
-              [
-                [
-                  { "text": "Відсутність явного життєвого циклу", "bold": true }
-                ],
-                [
-                  {
-                    "text": "Хуки не мають чітких lifecycle-методів, як у класових компонентів."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Ризики оптимізації", "bold": true }],
-                [
-                  { "text": "Невірне використання " },
-                  { "text": "useCallback", "code": true },
-                  { "text": " та " },
-                  { "text": "useMemo", "code": true },
-                  { "text": " може погіршити продуктивність." }
-                ]
-              ],
-              [
-                [{ "text": "Складність у великих проєктах", "bold": true }],
-                [
-                  {
-                    "text": "У масштабних додатках хуки ускладнюють контроль стану й ефектів."
-                  }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "41. Disadvantages of Hooks in React?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Drawback", "bold": true }],
-              [{ "text": "Description", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Extra re-renders", "bold": true }],
-                [
-                  { "text": "Incorrect use of " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " can cause unnecessary re-renders." }
-                ]
-              ],
-              [
-                [{ "text": "Scattered logic", "bold": true }],
-                [
-                  { "text": "Logic may be split across multiple " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " hooks, complicating debugging." }
-                ]
-              ],
-              [
-                [{ "text": "No explicit lifecycle", "bold": true }],
-                [
-                  {
-                    "text": "Hooks do not expose clear lifecycle methods like class components."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Optimization pitfalls", "bold": true }],
-                [
-                  { "text": "Improper use of " },
-                  { "text": "useCallback", "code": true },
-                  { "text": " and " },
-                  { "text": "useMemo", "code": true },
-                  { "text": " can hurt performance." }
-                ]
-              ],
-              [
-                [{ "text": "Complexity at scale", "bold": true }],
-                [
-                  {
-                    "text": "In large applications, hooks can complicate state and side-effect management."
-                  }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "41. Wady Hooków (Hooks) w React?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Wada", "bold": true }],
-              [{ "text": "Opis", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Nadmierne renderowanie", "bold": true }],
-                [
-                  { "text": "Nieprawidłowe użycie " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " może powodować zbędne renderowania." }
-                ]
-              ],
-              [
-                [{ "text": "Rozproszona logika", "bold": true }],
-                [
-                  { "text": "Logika bywa podzielona między wiele " },
-                  { "text": "useEffect", "code": true },
-                  { "text": ", co utrudnia debugowanie." }
-                ]
-              ],
-              [
-                [{ "text": "Brak jawnego cyklu życia", "bold": true }],
-                [
-                  {
-                    "text": "Hooki nie posiadają wyraźnych metod cyklu życia jak komponenty klasowe."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Problemy z optymalizacją", "bold": true }],
-                [
-                  { "text": "Błędne użycie " },
-                  { "text": "useCallback", "code": true },
-                  { "text": " i " },
-                  { "text": "useMemo", "code": true },
-                  { "text": " może obniżyć wydajność." }
-                ]
-              ],
-              [
-                [{ "text": "Złożoność w dużych projektach", "bold": true }],
-                [
-                  {
-                    "text": "W rozbudowanych aplikacjach hooki komplikują zarządzanie stanem i efektami."
-                  }
-                ]
-              ]
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 42,
-    "translations": {
-      "uk": {
-        "question": "42. Правила (обмеження) використання Хуків (Hooks) в React?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Правило", "bold": true }],
-              [{ "text": "Опис", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Використання тільки у функціях", "bold": true }],
-                [
-                  {
-                    "text": "Хуки можна викликати лише у функціональних компонентах або в кастомних хуках."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Збереження порядку виклику", "bold": true }],
-                [
-                  { "text": "Хуки не можна викликати умовно (" },
-                  { "text": "if", "code": true },
-                  { "text": ", " },
-                  { "text": "for", "code": true },
-                  { "text": ", " },
-                  { "text": "while", "code": true },
-                  { "text": "), інакше порушиться порядок виклику." }
-                ]
-              ],
-              [
-                [{ "text": "Виклик тільки на верхньому рівні", "bold": true }],
-                [
-                  {
-                    "text": "Хуки не можна викликати всередині вкладених функцій або обробників подій."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Іменування кастомних хуків", "bold": true }],
-                [
-                  { "text": "Кастомні хуки мають починатися з " },
-                  { "text": "use", "code": true },
-                  { "text": " (наприклад, " },
-                  { "text": "useAuth", "code": true },
-                  { "text": ")." }
-                ]
-              ],
-              [
-                [{ "text": "Коректні залежності", "bold": true }],
-                [
-                  { "text": "У " },
-                  { "text": "useEffect", "code": true },
-                  { "text": ", " },
-                  { "text": "useMemo", "code": true },
-                  { "text": " та " },
-                  { "text": "useCallback", "code": true },
-                  { "text": " масив залежностей (" },
-                  { "text": "[]", "code": true },
-                  { "text": ") має бути вказаний правильно." }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "42. Rules (limitations) for using Hooks in React?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Rule", "bold": true }],
-              [{ "text": "Description", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Use only in functions", "bold": true }],
-                [
-                  {
-                    "text": "Hooks can only be called inside function components or custom hooks."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Preserve call order", "bold": true }],
-                [
-                  { "text": "Hooks must not be called conditionally (" },
-                  { "text": "if", "code": true },
-                  { "text": ", " },
-                  { "text": "for", "code": true },
-                  { "text": ", " },
-                  { "text": "while", "code": true },
-                  { "text": "), otherwise the call order breaks." }
-                ]
-              ],
-              [
-                [{ "text": "Top-level only", "bold": true }],
-                [
-                  {
-                    "text": "Hooks must not be called inside nested functions or event handlers."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Custom hook naming", "bold": true }],
-                [
-                  { "text": "Custom hooks must start with " },
-                  { "text": "use", "code": true },
-                  { "text": " (for example, " },
-                  { "text": "useAuth", "code": true },
-                  { "text": ")." }
-                ]
-              ],
-              [
-                [{ "text": "Correct dependencies", "bold": true }],
-                [
-                  { "text": "In " },
-                  { "text": "useEffect", "code": true },
-                  { "text": ", " },
-                  { "text": "useMemo", "code": true },
-                  { "text": " and " },
-                  { "text": "useCallback", "code": true },
-                  { "text": " dependency arrays (" },
-                  { "text": "[]", "code": true },
-                  { "text": ") must be specified correctly." }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "42. Zasady (ograniczenia) używania Hooków (Hooks) w React?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Zasada", "bold": true }],
-              [{ "text": "Opis", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Użycie tylko w funkcjach", "bold": true }],
-                [
-                  {
-                    "text": "Hooki można wywoływać wyłącznie w komponentach funkcyjnych lub hookach własnych."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Zachowanie kolejności wywołań", "bold": true }],
-                [
-                  { "text": "Hooków nie wolno wywoływać warunkowo (" },
-                  { "text": "if", "code": true },
-                  { "text": ", " },
-                  { "text": "for", "code": true },
-                  { "text": ", " },
-                  { "text": "while", "code": true },
-                  { "text": "), ponieważ zaburza to kolejność wywołań." }
-                ]
-              ],
-              [
-                [{ "text": "Tylko na najwyższym poziomie", "bold": true }],
-                [
-                  {
-                    "text": "Hooków nie wolno wywoływać wewnątrz zagnieżdżonych funkcji ani obsługi zdarzeń."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Nazewnictwo hooków własnych", "bold": true }],
-                [
-                  { "text": "Hooki własne muszą zaczynać się od " },
-                  { "text": "use", "code": true },
-                  { "text": " (np. " },
-                  { "text": "useAuth", "code": true },
-                  { "text": ")." }
-                ]
-              ],
-              [
-                [{ "text": "Poprawne zależności", "bold": true }],
-                [
-                  { "text": "W " },
-                  { "text": "useEffect", "code": true },
-                  { "text": ", " },
-                  { "text": "useMemo", "code": true },
-                  { "text": " oraz " },
-                  { "text": "useCallback", "code": true },
-                  { "text": " tablice zależności (" },
-                  { "text": "[]", "code": true },
-                  { "text": ") muszą być określone poprawnie." }
-                ]
-              ]
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 43,
-    "translations": {
-      "uk": {
-        "question": "43. Що таке useReducer()?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "useReducer()", "code": true },
-              {
-                "text": " – це хук у React для керування станом у функціональних компонентах. Він є альтернативою "
-              },
-              { "text": "useState()", "code": true },
-              {
-                "text": " і краще підходить для складної логіки оновлення стану."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Синтаксис:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const [state, dispatch] = useReducer(reducer, initialState);"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "reducer", "code": true },
-                  { "text": " – функція, що приймає " },
-                  { "text": "state", "code": true },
-                  { "text": " і " },
-                  { "text": "action", "code": true },
-                  { "text": " та повертає новий стан." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "initialState", "code": true },
-                  { "text": " – початковий стан." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "dispatch", "code": true },
-                  { "text": " – викликає reducer з певною дією." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Коли використовувати:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Складна логіка стану." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оновлення залежать від попереднього стану." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Потреба у централізованому dispatch." }]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "43. What is useReducer()?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "useReducer()", "code": true },
-              {
-                "text": " is a React hook used for state management in function components. It is an alternative to "
-              },
-              { "text": "useState()", "code": true },
-              {
-                "text": " and is suited for more complex state logic."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Syntax:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const [state, dispatch] = useReducer(reducer, initialState);"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "reducer", "code": true },
-                  { "text": " – a function that takes " },
-                  { "text": "state", "code": true },
-                  { "text": " and " },
-                  { "text": "action", "code": true },
-                  { "text": " and returns a new state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "initialState", "code": true },
-                  { "text": " – the initial state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "dispatch", "code": true },
-                  { "text": " – triggers state updates via actions." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "When to use:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Complex state logic." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "State updates depend on previous state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Need for centralized state transitions." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "43. Czym jest useReducer()?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "useReducer()", "code": true },
-              {
-                "text": " to hook React służący do zarządzania stanem w komponentach funkcyjnych. Jest alternatywą dla "
-              },
-              { "text": "useState()", "code": true },
-              {
-                "text": " i sprawdza się przy bardziej złożonej logice stanu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Składnia:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const [state, dispatch] = useReducer(reducer, initialState);"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "reducer", "code": true },
-                  { "text": " – funkcja przyjmująca " },
-                  { "text": "state", "code": true },
-                  { "text": " i " },
-                  { "text": "action", "code": true },
-                  { "text": " oraz zwracająca nowy stan." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "initialState", "code": true },
-                  { "text": " – stan początkowy." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "dispatch", "code": true },
-                  { "text": " – wywołuje reducer z akcją." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kiedy używać:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Złożona logika stanu." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zmiany zależne od poprzedniego stanu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Potrzeba ujednoliconego dispatch." }]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 44,
-    "translations": {
-      "uk": {
-        "question": "44. Розкажіть про хуки useCallback(), useMemo(), useImperativeHandle(), useLayoutEffect()?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useCallback()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Мемоізує функцію, щоб вона не створювалася заново при кожному рендері. Корисно при передачі колбеків у дочірні компоненти."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useMemo()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Мемоізує результат обчислень і повторно обчислюється лише при зміні залежностей."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useImperativeHandle()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Дозволяє явно контролювати API ref у дочірньому компоненті. Використовується разом із forwardRef()."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useLayoutEffect()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Працює як " },
-              { "text": "useEffect()", "code": true },
-              {
-                "text": ", але виконується синхронно після змін DOM і до відмальовування браузером."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Коли який хук використовувати?" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useCallback()", "code": true },
-                  { "text": " – мемоізація функцій." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useMemo()", "code": true },
-                  { "text": " – мемоізація обчислень." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useImperativeHandle()", "code": true },
-                  { "text": " – контроль ref дочірнього компонента." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useLayoutEffect()", "code": true },
-                  { "text": " – робота з DOM перед відображенням." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "44. Explain the hooks useCallback(), useMemo(), useImperativeHandle(), useLayoutEffect()?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useCallback()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Memoizes a function so it is not recreated on every render. Useful when passing callbacks to child components."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useMemo()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Memoizes computed values and recalculates them only when dependencies change."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useImperativeHandle()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Allows explicit control over the ref API exposed by a child component. Used with forwardRef()."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useLayoutEffect()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Works like " },
-              { "text": "useEffect()", "code": true },
-              {
-                "text": ", but runs synchronously after DOM mutations and before the browser paints."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "When to use each hook?" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useCallback()", "code": true },
-                  { "text": " – memoizing functions." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useMemo()", "code": true },
-                  { "text": " – memoizing calculations." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useImperativeHandle()", "code": true },
-                  { "text": " – controlling child refs." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useLayoutEffect()", "code": true },
-                  { "text": " – DOM measurements before paint." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "44. Opisz hooki useCallback(), useMemo(), useImperativeHandle(), useLayoutEffect()?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useCallback()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Memoizuje funkcję, aby nie była tworzona ponownie przy każdym renderze. Przydatne przy przekazywaniu callbacków."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useMemo()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Memoizuje wynik obliczeń i przelicza go tylko po zmianie zależności."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useImperativeHandle()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Pozwala jawnie kontrolować API ref udostępniane przez komponent potomny. Używany z forwardRef()."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "useLayoutEffect()" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Działa jak " },
-              { "text": "useEffect()", "code": true },
-              {
-                "text": ", ale wykonuje się synchronicznie po zmianach DOM i przed renderowaniem."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kiedy używać danego hooka?" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useCallback()", "code": true },
-                  { "text": " – memoizacja funkcji." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useMemo()", "code": true },
-                  { "text": " – memoizacja obliczeń." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useImperativeHandle()", "code": true },
-                  { "text": " – kontrola ref komponentu potomnego." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useLayoutEffect()", "code": true },
-                  { "text": " – operacje na DOM przed renderem." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 45,
-    "translations": {
-      "uk": {
-        "question": "45. Як реалізувати одноразове виконання операції під час початкового рендерингу?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для виконання операції лише один раз під час початкового рендерингу у функціональних компонентах використовують "
-              },
-              { "text": "useEffect", "code": true },
-              { "text": " з порожнім масивом залежностей (" },
-              { "text": "[]", "code": true },
-              { "text": ")." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { useEffect } from 'react';\n\nfunction MyComponent() {\n  useEffect(() => {\n    console.log('Виконається один раз після монтування');\n  }, []);\n\n  return <div>Компонент</div>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Пояснення:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Порожній масив залежностей означає виконання ефекту лише після першого рендерингу."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Підхід застосовується для ініціалізації, API-запитів або підписок."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "45. How to run an operation only once during the initial render?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "To execute an operation only once during the initial render in function components, use "
-              },
-              { "text": "useEffect", "code": true },
-              { "text": " with an empty dependency array (" },
-              { "text": "[]", "code": true },
-              { "text": ")." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { useEffect } from 'react';\n\nfunction MyComponent() {\n  useEffect(() => {\n    console.log('Runs once after mount');\n  }, []);\n\n  return <div>Component</div>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Explanation:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "An empty dependency array ensures the effect runs only after the first render."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Commonly used for initialization, API calls, and subscriptions."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "45. Jak wykonać operację tylko raz podczas początkowego renderowania?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Aby wykonać operację tylko raz podczas pierwszego renderowania komponentu funkcyjnego, użyj "
-              },
-              { "text": "useEffect", "code": true },
-              { "text": " z pustą tablicą zależności (" },
-              { "text": "[]", "code": true },
-              { "text": ")." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { useEffect } from 'react';\n\nfunction MyComponent() {\n  useEffect(() => {\n    console.log('Wykona się tylko raz po zamontowaniu');\n  }, []);\n\n  return <div>Komponent</div>;\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wyjaśnienie:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Pusta tablica zależności powoduje jednorazowe wykonanie efektu."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Stosowane do inicjalizacji, zapytań API i subskrypcji."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 46,
-    "translations": {
-      "uk": {
-        "question": "46. Що таке контекст (Context)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Контекст (Context)", "bold": true },
-              {
-                "text": " в React – це механізм для передачі даних через дерево компонентів без прокидання пропсів на кожному рівні."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює контекст:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.createContext()", "bold": true },
-                  { "text": " – створює обʼєкт контексту." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const MyContext = React.createContext(defaultValue);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Provider", "bold": true },
-                  {
-                    "text": " – компонент, який передає значення контексту всім дочірнім компонентам."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "<MyContext.Provider value={value}>\n  <Child />\n</MyContext.Provider>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Consumer", "bold": true },
-                  {
-                    "text": " – компонент для отримання значення контексту (застарілий підхід)."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useContext", "bold": true },
-                  {
-                    "text": " – хук для доступу до контексту у функціональних компонентах."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const value = useContext(MyContext);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Коли використовувати:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Глобальні дані: тема, мова, користувач." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Уникнення prop drilling." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Менше пропсів у компонентах." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Краще масштабується для глобального стану." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "46. What is Context?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Context", "bold": true },
-              {
-                "text": " in React is a mechanism for passing data through the component tree without prop drilling."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How context works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.createContext()", "bold": true },
-                  { "text": " creates a context object." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Provider", "bold": true },
-                  { "text": " supplies the context value to child components." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Consumer", "bold": true },
-                  { "text": " reads context values (legacy approach)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useContext", "bold": true },
-                  { "text": " hook to access context values." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "When to use:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Global data like theme or user." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Avoiding prop drilling." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Advantages:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Cleaner component interfaces." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Better scalability for shared state." }]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "46. Czym jest Context?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Context", "bold": true },
-              {
-                "text": " w React to mechanizm przekazywania danych przez drzewo komponentów bez przekazywania propsów."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa context:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.createContext()", "bold": true },
-                  { "text": " tworzy obiekt kontekstu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Provider", "bold": true },
-                  {
-                    "text": " udostępnia wartość kontekstu komponentom potomnym."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Consumer", "bold": true },
-                  { "text": " odbiera dane z kontekstu (podejście starsze)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "useContext", "bold": true },
-                  { "text": " hook do korzystania z kontekstu." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kiedy używać:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Dane globalne: motyw, użytkownik." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Unikanie prop drilling." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Mniej propsów w komponentach." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Lepsza skalowalność wspólnego stanu." }]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 47,
-    "translations": {
-      "uk": {
-        "question": "47. Як в React працює механізм контексту (Context) для спільної передачі даних між компонентами?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React Context", "bold": true },
-              {
-                "text": " дозволяє передавати спільні дані між компонентами без прокидання пропсів через кожен рівень дерева."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні етапи:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Створення контексту:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const MyContext = React.createContext();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Надання значення через Provider:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "<MyContext.Provider value={value}>\n  <Child />\n</MyContext.Provider>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Отримання значення:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const value = useContext(MyContext);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ключові моменти:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Уникає " },
-                  { "text": "prop drilling", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Зміна значення контексту викликає ререндер усіх споживачів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовується для глобальних даних, не локального стану."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "47. How does the React Context mechanism work for sharing data between components?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React Context", "bold": true },
-              {
-                "text": " allows sharing data across the component tree without passing props through every level."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Main steps:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Create context:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const MyContext = React.createContext();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Provide value with Provider:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "<MyContext.Provider value={value}>\n  <Child />\n</MyContext.Provider>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Consume value:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const value = useContext(MyContext);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key points:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Avoids " },
-                  { "text": "prop drilling", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "All consumers re-render when context value changes."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Best suited for global shared data." }]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "47. Jak działa mechanizm Context w React do współdzielenia danych między komponentami?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React Context", "bold": true },
-              {
-                "text": " umożliwia przekazywanie danych w drzewie komponentów bez przekazywania propsów na każdym poziomie."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne kroki:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Utworzenie kontekstu:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const MyContext = React.createContext();"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przekazanie wartości przez Provider:",
-                    "bold": true
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "<MyContext.Provider value={value}>\n  <Child />\n</MyContext.Provider>"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pobranie wartości:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const value = useContext(MyContext);"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kluczowe punkty:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Eliminuje " },
-                  { "text": "prop drilling", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zmiana kontekstu powoduje render wszystkich konsumentów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Przeznaczony dla danych globalnych." }]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 48,
-    "translations": {
-      "uk": {
-        "question": "48. Що таке буріння пропсів (Prop Drilling)? Як його уникнути?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Prop Drilling", "bold": true },
-              {
-                "text": " - це передача пропсів через кілька рівнів вкладених компонентів, навіть якщо вони потрібні лише в глибоко вкладеному компоненті. Це ускладнює підтримку коду та знижує його читабельність."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад Prop Drilling:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const Parent = () => {\n  const user = { name: 'John' };\n  return <Child user={user} />;\n};\n\nconst Child = ({ user }) => {\n  return <GrandChild user={user} />;\n};\n\nconst GrandChild = ({ user }) => {\n  return <p>Ім'я: {user.name}</p>;\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Тут " },
-              { "text": "user", "code": true },
-              { "text": " передається через " },
-              { "text": "Child", "code": true },
-              { "text": ", хоча він йому не потрібен. Це і є " },
-              { "text": "буріння пропсів", "bold": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як уникнути Prop Drilling?" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Метод", "bold": true }],
-              [{ "text": "Опис", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Context API", "bold": true }],
-                [
-                  {
-                    "text": "Дозволяє передавати дані безпосередньо потрібним компонентам."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Зовнішні стейти (Redux, Zustand, Jotai, Recoil)",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Глобальне управління станом без передачі пропсів."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Render Props", "bold": true }],
-                [
-                  {
-                    "text": "Передача логіки через функції, а не через пропси."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Custom Hooks", "bold": true }],
-                [
-                  {
-                    "text": "Винесення спільної логіки в повторно використовувані хуки."
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Приклад використання Context API замість Prop Drilling"
-              }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { createContext, useContext } from 'react';\n\nconst UserContext = createContext();\n\nconst Parent = () => {\n  const user = { name: 'John' };\n  return (\n    <UserContext.Provider value={user}>\n      <GrandChild />\n    </UserContext.Provider>\n  );\n};\n\nconst GrandChild = () => {\n  const user = useContext(UserContext);\n  return <p>Ім'я: {user.name}</p>;\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Тут " },
-              { "text": "user", "code": true },
-              { "text": " доступний напряму у " },
-              { "text": "GrandChild", "code": true },
-              { "text": ", без проміжних компонентів." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "48. What is Prop Drilling? How can it be avoided?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Prop Drilling", "bold": true },
-              {
-                "text": " is the practice of passing props through multiple nested components even if they are only needed by a deeply nested child. It makes code harder to maintain and less readable."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Prop Drilling example:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const Parent = () => {\n  const user = { name: 'John' };\n  return <Child user={user} />;\n};\n\nconst Child = ({ user }) => {\n  return <GrandChild user={user} />;\n};\n\nconst GrandChild = ({ user }) => {\n  return <p>Name: {user.name}</p>;\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Here " },
-              { "text": "user", "code": true },
-              { "text": " is passed through " },
-              { "text": "Child", "code": true },
-              { "text": " even though it does not use it. This is " },
-              { "text": "Prop Drilling", "bold": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How to avoid Prop Drilling?" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Method", "bold": true }],
-              [{ "text": "Description", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Context API", "bold": true }],
-                [
-                  {
-                    "text": "Provides data directly to the components that need it."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "External state (Redux, Zustand, Jotai, Recoil)",
-                    "bold": true
-                  }
-                ],
-                [{ "text": "Global state management without passing props." }]
-              ],
-              [
-                [{ "text": "Render Props", "bold": true }],
-                [{ "text": "Sharing logic via functions instead of props." }]
-              ],
-              [
-                [{ "text": "Custom Hooks", "bold": true }],
-                [{ "text": "Extracting shared logic into reusable hooks." }]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Using Context API instead of Prop Drilling" }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { createContext, useContext } from 'react';\n\nconst UserContext = createContext();\n\nconst Parent = () => {\n  const user = { name: 'John' };\n  return (\n    <UserContext.Provider value={user}>\n      <GrandChild />\n    </UserContext.Provider>\n  );\n};\n\nconst GrandChild = () => {\n  const user = useContext(UserContext);\n  return <p>Name: {user.name}</p>;\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Here " },
-              { "text": "user", "code": true },
-              { "text": " is accessed directly in " },
-              { "text": "GrandChild", "code": true },
-              { "text": " without intermediate components." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "48. Czym jest Prop Drilling? Jak go unikać?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Prop Drilling", "bold": true },
-              {
-                "text": " to przekazywanie propsów przez wiele zagnieżdżonych komponentów, mimo że są potrzebne tylko w głęboko zagnieżdżonym komponencie. Utrudnia to utrzymanie i czytelność kodu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład Prop Drilling:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const Parent = () => {\n  const user = { name: 'John' };\n  return <Child user={user} />;\n};\n\nconst Child = ({ user }) => {\n  return <GrandChild user={user} />;\n};\n\nconst GrandChild = ({ user }) => {\n  return <p>Imię: {user.name}</p>;\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Tutaj " },
-              { "text": "user", "code": true },
-              { "text": " jest przekazywany przez " },
-              { "text": "Child", "code": true },
-              { "text": ", mimo że komponent go nie używa. To jest " },
-              { "text": "Prop Drilling", "bold": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak unikać Prop Drilling?" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Metoda", "bold": true }],
-              [{ "text": "Opis", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Context API", "bold": true }],
-                [
-                  {
-                    "text": "Umożliwia bezpośredni dostęp do danych w wymaganych komponentach."
-                  }
-                ]
-              ],
-              [
-                [
-                  {
-                    "text": "Zewnętrzny stan (Redux, Zustand, Jotai, Recoil)",
-                    "bold": true
-                  }
-                ],
-                [
-                  {
-                    "text": "Globalne zarządzanie stanem bez przekazywania propsów."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Render Props", "bold": true }],
-                [
-                  {
-                    "text": "Przekazywanie logiki za pomocą funkcji zamiast propsów."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Custom Hooks", "bold": true }],
-                [
-                  {
-                    "text": "Wydzielenie wspólnej logiki do wielokrotnego użytku."
-                  }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Użycie Context API zamiast Prop Drilling" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { createContext, useContext } from 'react';\n\nconst UserContext = createContext();\n\nconst Parent = () => {\n  const user = { name: 'John' };\n  return (\n    <UserContext.Provider value={user}>\n      <GrandChild />\n    </UserContext.Provider>\n  );\n};\n\nconst GrandChild = () => {\n  const user = useContext(UserContext);\n  return <p>Imię: {user.name}</p>;\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Tutaj " },
-              { "text": "user", "code": true },
-              { "text": " jest dostępny bezpośrednio w " },
-              { "text": "GrandChild", "code": true },
-              { "text": " bez pośrednich komponentów." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 49,
-    "translations": {
-      "uk": {
-        "question": "49. Що таке Redux?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux", "bold": true },
-              {
-                "text": " - це бібліотека для керування станом у JavaScript-додатках, особливо популярна у React. Вона використовує глобальне сховище (store) для зберігання всього стану додатка та забезпечує передбачувані зміни стану."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні принципи Redux:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Єдине джерело правди", "bold": true },
-                  { "text": " - весь стан зберігається в одному глобальному " },
-                  { "text": "store", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Стан лише для читання", "bold": true },
-                  { "text": " - змінюється тільки через " },
-                  { "text": "action", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Зміни через чисті функції", "bold": true },
-                  { "text": " - ред’юсери отримують стан і " },
-                  { "text": "action", "code": true },
-                  { "text": ", повертаючи новий стан." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні елементи Redux:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Store", "bold": true },
-                  { "text": " - єдине сховище стану." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Actions", "bold": true },
-                  { "text": " - описують намір змінити стан." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Reducers", "bold": true },
-                  { "text": " - визначають, як змінюється стан." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dispatch", "bold": true },
-                  { "text": " - відправляє " },
-                  { "text": "action", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selectors", "bold": true },
-                  { "text": " - отримують дані зі " },
-                  { "text": "store", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Redux доцільний у великих додатках зі складною логікою стану. У малих проєктах часто надлишковий."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "49. What is Redux?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux", "bold": true },
-              {
-                "text": " is a state management library for JavaScript applications, commonly used with React. It relies on a single global store to hold application state and enforces predictable state changes."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Core Redux principles:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Single source of truth", "bold": true },
-                  { "text": " - the entire state is stored in one global " },
-                  { "text": "store", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "State is read-only", "bold": true },
-                  { "text": " - it can only be changed via " },
-                  { "text": "actions", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Changes via pure functions", "bold": true },
-                  { "text": " - reducers take state and an " },
-                  { "text": "action", "code": true },
-                  { "text": " and return new state." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Main Redux elements:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Store", "bold": true },
-                  { "text": " - holds the application state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Actions", "bold": true },
-                  { "text": " - describe state change intentions." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Reducers", "bold": true },
-                  { "text": " - define how state changes." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dispatch", "bold": true },
-                  { "text": " - sends an " },
-                  { "text": "action", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selectors", "bold": true },
-                  { "text": " - extract data from the " },
-                  { "text": "store", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Redux fits large applications with complex data flows. For simple apps, it is often unnecessary."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "49. Czym jest Redux?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux", "bold": true },
-              {
-                "text": " to biblioteka do zarządzania stanem w aplikacjach JavaScript, często używana z Reactem. Opiera się na jednym globalnym magazynie stanu (store) i przewidywalnych zmianach stanu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne zasady Redux:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jedno źródło prawdy", "bold": true },
-                  { "text": " - cały stan znajduje się w jednym " },
-                  { "text": "store", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Stan tylko do odczytu", "bold": true },
-                  { "text": " - zmiany zachodzą wyłącznie przez " },
-                  { "text": "actions", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zmiany przez czyste funkcje", "bold": true },
-                  { "text": " - reducery otrzymują stan i " },
-                  { "text": "action", "code": true },
-                  { "text": ", zwracając nowy stan." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne elementy Redux:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Store", "bold": true },
-                  { "text": " - przechowuje stan aplikacji." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Actions", "bold": true },
-                  { "text": " - opisują zamiar zmiany stanu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Reducers", "bold": true },
-                  { "text": " - określają sposób zmiany stanu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dispatch", "bold": true },
-                  { "text": " - wysyła " },
-                  { "text": "action", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selectors", "bold": true },
-                  { "text": " - pobierają dane ze " },
-                  { "text": "store", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Redux jest sensowny w dużych aplikacjach ze złożonym stanem. W prostych projektach bywa przerostem formy."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 50,
-    "translations": {
-      "uk": {
-        "question": "50. Які ти ще знаєш бібліотеки керування станом у React, окрім Redux?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Окрім Redux, у React екосистемі існує кілька альтернативних бібліотек для керування станом:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Context API", "bold": true },
-                  {
-                    "text": " - вбудований механізм React для передачі стану без пропсів. Підходить для простих і середніх додатків."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zustand", "bold": true },
-                  {
-                    "text": " - мінімалістична бібліотека без reducers та actions. Працює через хуки."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Recoil", "bold": true },
-                  {
-                    "text": " - бібліотека з атомами та селекторами для побудови гнучкого глобального стану."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jotai", "bold": true },
-                  {
-                    "text": " - спрощений підхід на основі атомів із мінімальною конфігурацією."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "MobX", "bold": true },
-                  {
-                    "text": " - реактивне керування станом на основі observables."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Effector", "bold": true },
-                  {
-                    "text": " - реактивна та декларативна бібліотека для складних потоків даних."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "XState", "bold": true },
-                  {
-                    "text": " - бібліотека для моделювання стану через машини станів."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Вибір бібліотеки залежить від складності логіки, масштабів додатка та вимог до керованості стану."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "50. What state management libraries do you know in React besides Redux?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Besides Redux, there are several alternative state management libraries in the React ecosystem:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Context API", "bold": true },
-                  {
-                    "text": " - a built-in React mechanism for sharing state without prop drilling."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zustand", "bold": true },
-                  {
-                    "text": " - a lightweight library without reducers or actions, based on hooks."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Recoil", "bold": true },
-                  {
-                    "text": " - atom-based state management with selectors for derived data."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jotai", "bold": true },
-                  {
-                    "text": " - a simpler atom-based approach with minimal boilerplate."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "MobX", "bold": true },
-                  { "text": " - reactive state management using observables." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Effector", "bold": true },
-                  {
-                    "text": " - a reactive and declarative library for complex data flows."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "XState", "bold": true },
-                  {
-                    "text": " - state management based on finite state machines."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The choice depends on application size, complexity, and state control requirements."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "50. Jakie biblioteki do zarządzania stanem w React znasz poza Reduxem?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Poza Reduxem w ekosystemie React dostępnych jest kilka alternatywnych bibliotek do zarządzania stanem:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Context API", "bold": true },
-                  {
-                    "text": " - wbudowany mechanizm React do udostępniania stanu bez propsów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zustand", "bold": true },
-                  {
-                    "text": " - lekka biblioteka bez reducerów i akcji, oparta na hookach."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Recoil", "bold": true },
-                  {
-                    "text": " - zarządzanie stanem oparte na atomach i selektorach."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jotai", "bold": true },
-                  { "text": " - uproszczona wersja podejścia atomowego." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "MobX", "bold": true },
-                  {
-                    "text": " - reaktywne zarządzanie stanem z użyciem observables."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Effector", "bold": true },
-                  {
-                    "text": " - reaktywna i deklaratywna biblioteka do złożonych przepływów danych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "XState", "bold": true },
-                  { "text": " - zarządzanie stanem przy użyciu maszyn stanów." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Dobór biblioteki zależy od skali projektu, złożoności logiki i wymagań dotyczących kontroli stanu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 51,
-    "translations": {
-      "uk": {
-        "question": "51. Що таке Redux Thunk?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux Thunk", "bold": true },
-              {
-                "text": " - це middleware для Redux, яке дозволяє виконувати асинхронні операції перед оновленням "
-              },
-              { "text": "store", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "За замовчуванням " },
-              { "text": "dispatch", "code": true },
-              {
-                "text": " приймає лише об'єкти. Redux Thunk дозволяє передавати функції, що дає змогу:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Виконувати асинхронну логіку перед зміною стану." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Мати доступ до " },
-                  { "text": "dispatch", "code": true },
-                  { "text": " та " },
-                  { "text": "getState", "code": true },
-                  { "text": " усередині " },
-                  { "text": "thunk", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад використання:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const fetchData = () => {\n  return async dispatch => {\n    dispatch({ type: 'FETCH_START' });\n    try {\n      const res = await fetch('https://api.example.com/data');\n      const data = await res.json();\n      dispatch({ type: 'FETCH_SUCCESS', payload: data });\n    } catch (error) {\n      dispatch({ type: 'FETCH_ERROR', error });\n    }\n  };\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Виклик: " },
-              { "text": "dispatch(fetchData())", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Коли використовувати:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Запити до API." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Складну або поетапну логіку оновлення стану." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Кілька dispatch в одній дії." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для складних сценаріїв асинхронності доцільні альтернативи на кшталт Redux Saga або RTK Query."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "51. What is Redux Thunk?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux Thunk", "bold": true },
-              {
-                "text": " is a Redux middleware that allows running asynchronous logic before updating the "
-              },
-              { "text": "store", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "By default, " },
-              { "text": "dispatch", "code": true },
-              {
-                "text": " accepts only plain objects. Redux Thunk allows dispatching functions, which makes it possible to:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Run asynchronous logic before state updates." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Access " },
-                  { "text": "dispatch", "code": true },
-                  { "text": " and " },
-                  { "text": "getState", "code": true },
-                  { "text": " inside a " },
-                  { "text": "thunk", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Usage example:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const fetchData = () => {\n  return async dispatch => {\n    dispatch({ type: 'FETCH_START' });\n    try {\n      const res = await fetch('https://api.example.com/data');\n      const data = await res.json();\n      dispatch({ type: 'FETCH_SUCCESS', payload: data });\n    } catch (error) {\n      dispatch({ type: 'FETCH_ERROR', error });\n    }\n  };\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Call it with " },
-              { "text": "dispatch(fetchData())", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "When to use:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              { "type": "listItem", "children": [{ "text": "API requests." }] },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Delayed or multi-step logic." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Multiple dispatches in a single action." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "For complex async flows, alternatives like Redux Saga or RTK Query are often a better fit."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "51. Czym jest Redux Thunk?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux Thunk", "bold": true },
-              {
-                "text": " to middleware dla Redux, które umożliwia wykonywanie logiki asynchronicznej przed aktualizacją "
-              },
-              { "text": "store", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Domyślnie " },
-              { "text": "dispatch", "code": true },
-              {
-                "text": " przyjmuje tylko obiekty. Redux Thunk pozwala dispatchować funkcje, co umożliwia:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wykonywanie operacji asynchronicznych przed zmianą stanu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dostęp do " },
-                  { "text": "dispatch", "code": true },
-                  { "text": " oraz " },
-                  { "text": "getState", "code": true },
-                  { "text": " wewnątrz " },
-                  { "text": "thunk", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład użycia:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const fetchData = () => {\n  return async dispatch => {\n    dispatch({ type: 'FETCH_START' });\n    try {\n      const res = await fetch('https://api.example.com/data');\n      const data = await res.json();\n      dispatch({ type: 'FETCH_SUCCESS', payload: data });\n    } catch (error) {\n      dispatch({ type: 'FETCH_ERROR', error });\n    }\n  };\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Wywołanie: " },
-              { "text": "dispatch(fetchData())", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kiedy używać:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Zapytania do API." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Złożona logika asynchroniczna." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Wiele dispatchów w jednej akcji." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Przy bardzo złożonych scenariuszach asynchronicznych lepszym wyborem są Redux Saga lub RTK Query."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 52,
-    "translations": {
-      "uk": {
-        "question": "52. Як працює Redux Saga?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux Saga", "bold": true },
-              {
-                "text": " - це middleware для Redux, яке використовує генератори (function*) для керування асинхронною логікою та побічними ефектами."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Слухає екшени", "bold": true },
-                  { "text": " (" },
-                  { "text": "takeEvery", "code": true },
-                  { "text": ", " },
-                  { "text": "takeLatest", "code": true },
-                  { "text": ")." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Виконує побічні ефекти", "bold": true },
-                  { "text": " (API, таймери, затримки)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Диспатчить нові екшени", "bold": true },
-                  { "text": " через " },
-                  { "text": "put", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Сага для запиту до API:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import { call, put, takeEvery } from 'redux-saga/effects';\n\nfunction* fetchData() {\n  try {\n    const response = yield call(fetch, 'https://api.example.com/data');\n    const data = yield response.json();\n    yield put({ type: 'FETCH_SUCCESS', payload: data });\n  } catch (error) {\n    yield put({ type: 'FETCH_ERROR', error });\n  }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Слухач екшенів:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function* watchFetchData() {\n  yield takeEvery('FETCH_REQUEST', fetchData);\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги Redux Saga:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Контроль складної асинхронної логіки." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Підтримка скасувань через " },
-                  { "text": "takeLatest", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Потужні ефекти: " },
-                  { "text": "call", "code": true },
-                  { "text": ", " },
-                  { "text": "put", "code": true },
-                  { "text": ", " },
-                  { "text": "select", "code": true },
-                  { "text": ", " },
-                  { "text": "delay", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux Thunk", "bold": true },
-              { "text": " простіший, але для складних сценаріїв " },
-              { "text": "Redux Saga", "bold": true },
-              { "text": " ефективніша." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "52. How does Redux Saga work?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux Saga", "bold": true },
-              {
-                "text": " is a Redux middleware that uses generator functions (function*) to manage asynchronous logic and side effects."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Listens to actions", "bold": true },
-                  { "text": " via " },
-                  { "text": "takeEvery", "code": true },
-                  { "text": " and " },
-                  { "text": "takeLatest", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Executes side effects", "bold": true },
-                  { "text": " such as API calls or delays." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dispatches new actions", "bold": true },
-                  { "text": " using " },
-                  { "text": "put", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Saga handling API request:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import { call, put, takeEvery } from 'redux-saga/effects';\n\nfunction* fetchData() {\n  try {\n    const response = yield call(fetch, 'https://api.example.com/data');\n    const data = yield response.json();\n    yield put({ type: 'FETCH_SUCCESS', payload: data });\n  } catch (error) {\n    yield put({ type: 'FETCH_ERROR', error });\n  }\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Advantages of Redux Saga:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Handles complex async workflows." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Built-in cancellation with " },
-                  { "text": "takeLatest", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Powerful effects: " },
-                  { "text": "call", "code": true },
-                  { "text": ", " },
-                  { "text": "put", "code": true },
-                  { "text": ", " },
-                  { "text": "select", "code": true },
-                  { "text": ", " },
-                  { "text": "delay", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux Thunk", "bold": true },
-              { "text": " is simpler, but " },
-              { "text": "Redux Saga", "bold": true },
-              { "text": " is better suited for complex async logic." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "52. Jak działa Redux Saga?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux Saga", "bold": true },
-              {
-                "text": " to middleware dla Redux, które wykorzystuje generatory (function*) do obsługi logiki asynchronicznej i efektów ubocznych."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Nasłuchuje akcje", "bold": true },
-                  { "text": " przez " },
-                  { "text": "takeEvery", "code": true },
-                  { "text": " oraz " },
-                  { "text": "takeLatest", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wykonuje efekty uboczne", "bold": true },
-                  { "text": " jak zapytania API lub opóźnienia." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wysyła nowe akcje", "bold": true },
-                  { "text": " za pomocą " },
-                  { "text": "put", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Saga obsługująca API:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import { call, put, takeEvery } from 'redux-saga/effects';\n\nfunction* fetchData() {\n  try {\n    const response = yield call(fetch, 'https://api.example.com/data');\n    const data = yield response.json();\n    yield put({ type: 'FETCH_SUCCESS', payload: data });\n  } catch (error) {\n    yield put({ type: 'FETCH_ERROR', error });\n  }\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety Redux Saga:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Obsługa złożonej logiki asynchronicznej." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Obsługa anulowania przez " },
-                  { "text": "takeLatest", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Bogaty zestaw efektów: " },
-                  { "text": "call", "code": true },
-                  { "text": ", " },
-                  { "text": "put", "code": true },
-                  { "text": ", " },
-                  { "text": "select", "code": true },
-                  { "text": ", " },
-                  { "text": "delay", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Redux Thunk", "bold": true },
-              { "text": " jest prostszy, ale " },
-              { "text": "Redux Saga", "bold": true },
-              { "text": " lepiej sprawdza się w złożonych przypadkach." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 53,
-    "translations": {
-      "uk": {
-        "question": "53. Що таке React Fiber?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React Fiber", "bold": true },
-              {
-                "text": " - це внутрішня архітектура рендерингу React, представлена з версії 16. Вона створена для підвищення продуктивності, підтримки асинхронного рендерингу та кращого керування оновленнями UI."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ключові особливості React Fiber:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Переривний рендеринг", "bold": true },
-                  {
-                    "text": " - React може зупиняти, відкладати або відновлювати рендеринг для обробки важливіших задач."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Асинхронний підхід", "bold": true },
-                  {
-                    "text": " - рендеринг виконується частинами без блокування головного потоку."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Пріоритети оновлень", "bold": true },
-                  {
-                    "text": " - різні типи оновлень UI мають різний пріоритет."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Розбиття на підзадачі", "bold": true },
-                  {
-                    "text": " - рендеринг поділяється на дрібні етапи, між якими React може обробляти події."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Fiber є фундаментом для Concurrent Rendering, Suspense та сучасних механізмів оптимізації React."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "53. What is React Fiber?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React Fiber", "bold": true },
-              {
-                "text": " is the internal rendering architecture of React introduced in version 16. It was designed to improve performance, enable asynchronous rendering, and provide better control over UI updates."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key features of React Fiber:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Interruptible rendering", "bold": true },
-                  {
-                    "text": " - React can pause, resume, or cancel rendering work."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Asynchronous rendering", "bold": true },
-                  {
-                    "text": " - rendering work is split into chunks without blocking the main thread."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Update prioritization", "bold": true },
-                  {
-                    "text": " - different updates have different priorities."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Task scheduling", "bold": true },
-                  {
-                    "text": " - rendering is broken into small units that can yield to other tasks."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React Fiber is the foundation for Concurrent Rendering, Suspense, and modern React performance optimizations."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "53. Czym jest React Fiber?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React Fiber", "bold": true },
-              {
-                "text": " to wewnętrzna architektura renderowania Reacta wprowadzona w wersji 16. Została zaprojektowana w celu poprawy wydajności, obsługi renderowania asynchronicznego oraz lepszego zarządzania aktualizacjami UI."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kluczowe cechy React Fiber:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Renderowanie przerywalne", "bold": true },
-                  {
-                    "text": " - React może wstrzymywać i wznawiać proces renderowania."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Renderowanie asynchroniczne", "bold": true },
-                  {
-                    "text": " - praca renderowania jest dzielona na części."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Priorytety aktualizacji", "bold": true },
-                  {
-                    "text": " - różne aktualizacje mają różny priorytet."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Planowanie zadań", "bold": true },
-                  {
-                    "text": " - renderowanie jest podzielone na małe jednostki pracy."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React Fiber stanowi podstawę dla Concurrent Rendering, Suspense i nowoczesnych optymalizacji Reacta."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 54,
-    "translations": {
-      "uk": {
-        "question": "54. Що таке Lifting State Up у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Lifting State Up", "bold": true },
-              {
-                "text": " - це підхід у React, за якого стан піднімається до найближчого спільного батьківського компонента, щоб кілька дочірніх компонентів могли використовувати одні й ті самі дані."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основна ідея:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Компоненти зі спільними даними не повинні зберігати окремі стани.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Стан зберігається у спільного батьківського компонента і передається вниз через props.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як це працює:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Батьківський компонент зберігає стан.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Він передає стан і функції його оновлення дочірнім компонентам через props.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Дочірні компоненти повідомляють про зміни через передані callback-функції.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Lifting State Up використовується для синхронізації UI без глобального стану."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "54. What is Lifting State Up in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Lifting State Up", "bold": true },
-              {
-                "text": " is a React pattern where state is moved to the closest common parent component so multiple child components can share the same data."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Core idea:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Components that share data should not maintain separate local state.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "State is stored in a common parent and passed down via props.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "The parent component owns the state.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "It passes state and update functions to children via props.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Children notify the parent about changes using callbacks.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Lifting State Up enables shared state without introducing global state management."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "54. Czym jest Lifting State Up w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Lifting State Up", "bold": true },
-              {
-                "text": " to podejście w React, w którym stan jest przenoszony do najbliższego wspólnego komponentu nadrzędnego, aby mógł być współdzielony przez komponenty potomne."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główna idea:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Komponenty współdzielące dane nie powinny mieć oddzielnego stanu.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Stan znajduje się w komponencie nadrzędnym i jest przekazywany przez props.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak to działa:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Komponent nadrzędny przechowuje stan.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Przekazuje stan i funkcje aktualizacji do komponentów potomnych.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Komponenty potomne informują o zmianach za pomocą callbacków.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Lifting State Up pozwala synchronizować UI bez użycia globalnego stanu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 55,
-    "translations": {
-      "uk": {
-        "question": "55. Що таке контрольовані компоненти (Controlled Components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Контрольовані компоненти",
-                "bold": true
-              },
-              {
-                "text": " — це компоненти React, у яких значення елементів форми повністю контролюється станом компонента через "
-              },
-              { "text": "state", "code": true },
-              {
-                "text": ". Усі зміни відбуваються через обробники подій."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як це працює:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Значення форми зберігається у state.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Подія onChange оновлює state.", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "UI завжди відображає актуальний state.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Цей підхід забезпечує повний контроль над даними форми та спрощує валідацію."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "55. What are Controlled Components?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Controlled Components", "bold": true },
-              {
-                "text": " are React components where form values are fully controlled by component state via "
-              },
-              { "text": "state", "code": true },
-              {
-                "text": ". All changes are handled through event handlers."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Form values are stored in state.", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "onChange updates the state.", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "UI always reflects the current state.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This pattern provides predictable behavior and easier validation for forms."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "55. Czym są kontrolowane komponenty (Controlled Components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Kontrolowane komponenty", "bold": true },
-              {
-                "text": " to komponenty React, w których wartości formularza są w pełni kontrolowane przez stan komponentu za pomocą "
-              },
-              { "text": "state", "code": true },
-              {
-                "text": ". Wszystkie zmiany obsługiwane są przez zdarzenia."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak to działa:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wartości formularza są przechowywane w stanie.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Zdarzenie onChange aktualizuje stan.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Interfejs zawsze odzwierciedla aktualny stan.",
-                    "bold": true
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Takie podejście zapewnia przewidywalność i łatwiejszą walidację formularzy."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 56,
-    "translations": {
-      "uk": {
-        "question": "56. Що таке неконтрольовані компоненти (Uncontrolled Components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Неконтрольовані компоненти", "bold": true },
-              {
-                "text": " — це React-компоненти, у яких значення елементів форми зберігаються безпосередньо в DOM, а не в "
-              },
-              { "text": "state", "code": true },
-              {
-                "text": " React. Доступ до значень здійснюється через "
-              },
-              { "text": "ref", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні характеристики:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Стан керується DOM.", "bold": true }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Не використовує useState або setState.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Значення отримуються через refs.", "bold": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Підхід корисний для простих форм або інтеграції зі сторонніми бібліотеками."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "56. What are Uncontrolled Components?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Uncontrolled Components", "bold": true },
-              {
-                "text": " are React components where form values are stored directly in the DOM instead of React "
-              },
-              { "text": "state", "code": true },
-              {
-                "text": ". Values are accessed using "
-              },
-              { "text": "refs", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key characteristics:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "State is managed by the DOM.", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Does not rely on useState or setState.",
-                    "bold": true
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Values are accessed via refs.", "bold": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This approach is suitable for simple forms or integration with non-React libraries."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "56. Czym są komponenty niekontrolowane (Uncontrolled Components)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Komponenty niekontrolowane", "bold": true },
-              {
-                "text": " to komponenty React, w których wartości formularza są przechowywane bezpośrednio w DOM, a nie w "
-              },
-              { "text": "state", "code": true },
-              {
-                "text": " Reacta. Dostęp do wartości odbywa się za pomocą "
-              },
-              { "text": "ref", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne cechy:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Stan jest zarządzany przez DOM.", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Brak użycia useState lub setState.", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dostęp do danych przez refs.", "bold": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Podejście sprawdza się w prostych formularzach lub przy integracji z zewnętrznymi bibliotekami."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 57,
-    "translations": {
-      "uk": {
-        "question": "57. Як створити форму в React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Форми в React будуються на базі HTML-елемента "
-              },
-              { "text": "<form>", "code": true },
-              {
-                "text": " і можуть бути реалізовані як керовані або некеровані компоненти."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Керована форма:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Значення полів зберігаються у "
-              },
-              { "text": "state", "code": true },
-              {
-                "text": " та оновлюються через обробники подій."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Некерована форма:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Значення полів зберігаються у DOM, доступ здійснюється через "
-              },
-              { "text": "ref", "code": true },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Керовані форми підходять для складної логіки та валідації. Некеровані — для простих сценаріїв."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "57. How do you create a form in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Forms in React are built using the "
-              },
-              { "text": "<form>", "code": true },
-              {
-                "text": " element and can be implemented as controlled or uncontrolled components."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Controlled form:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Form values are stored in "
-              },
-              { "text": "state", "code": true },
-              {
-                "text": " and updated via event handlers."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Uncontrolled form:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Form values are stored in the DOM and accessed using "
-              },
-              { "text": "ref", "code": true },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Controlled forms are better for complex logic and validation. Uncontrolled forms suit simple cases."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "57. Jak utworzyć formularz w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Formularze w React tworzy się przy użyciu elementu "
-              },
-              { "text": "<form>", "code": true },
-              {
-                "text": " i realizuje jako komponenty kontrolowane lub niekontrolowane."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Formularz kontrolowany:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wartości pól są przechowywane w "
-              },
-              { "text": "state", "code": true },
-              {
-                "text": " i aktualizowane przez obsługę zdarzeń."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Formularz niekontrolowany:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wartości pól są przechowywane w DOM, a dostęp odbywa się przez "
-              },
-              { "text": "ref", "code": true },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Formularze kontrolowane są lepsze dla złożonej logiki. Niekontrolowane sprawdzają się w prostych przypadkach."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 58,
-    "translations": {
-      "uk": {
-        "question": "58. Як застосувати перевірку пропсів (props) у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для перевірки пропсів у React використовують ",
-                "bold": false
-              },
-              {
-                "text": "PropTypes",
-                "bold": true
-              },
-              {
-                "text": ". Вони дозволяють перевіряти типи пропсів під час розробки."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад використання:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import PropTypes from 'prop-types';\n\nfunction UserCard({ name, age }) {\n  return <div>{name} ({age})</div>;\n}\n\nUserCard.propTypes = {\n  name: PropTypes.string.isRequired,\n  age: PropTypes.number,\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "PropTypes виконують перевірку лише під час розробки та не впливають на runtime у продакшені."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "58. How do you validate props in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "To validate props in React, developers use ",
-                "bold": false
-              },
-              {
-                "text": "PropTypes",
-                "bold": true
-              },
-              {
-                "text": ". They provide runtime type checking during development."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Usage example:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import PropTypes from 'prop-types';\n\nfunction UserCard({ name, age }) {\n  return <div>{name} ({age})</div>;\n}\n\nUserCard.propTypes = {\n  name: PropTypes.string.isRequired,\n  age: PropTypes.number,\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "PropTypes are checked only in development mode and do not enforce types at runtime in production."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "58. Jak sprawdzić poprawność propsów w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Do walidacji propsów w React używa się ",
-                "bold": false
-              },
-              {
-                "text": "PropTypes",
-                "bold": true
-              },
-              {
-                "text": ", które umożliwiają sprawdzanie typów podczas developmentu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład użycia:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import PropTypes from 'prop-types';\n\nfunction UserCard({ name, age }) {\n  return <div>{name} ({age})</div>;\n}\n\nUserCard.propTypes = {\n  name: PropTypes.string.isRequired,\n  age: PropTypes.number,\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "PropTypes działają wyłącznie w trybie developerskim i nie zapewniają bezpieczeństwa typów w produkcji."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 59,
-    "translations": {
-      "uk": {
-        "question": "59. Чим React Router відрізняється від звичайної маршрутизації?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Різниця між React Router і звичайною маршрутизацією:" }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Критерій", "bold": true }],
-              [{ "text": "React Router", "bold": true }],
-              [{ "text": "Звичайна маршрутизація (Server-Side)", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Тип маршрутизації", "bold": true }],
-                [{ "text": "Клієнтська (SPA)" }],
-                [{ "text": "Серверна (MPA)" }]
-              ],
-              [
-                [{ "text": "Навігація", "bold": true }],
-                [{ "text": "Без перезавантаження сторінки" }],
-                [{ "text": "З повним перезавантаженням" }]
-              ],
-              [
-                [{ "text": "Продуктивність", "bold": true }],
-                [{ "text": "Вища після першого завантаження" }],
-                [{ "text": "Нижча через повторні запити" }]
-              ],
-              [
-                [{ "text": "SEO", "bold": true }],
-                [{ "text": "Потребує SSR для повної підтримки" }],
-                [{ "text": "Добра за замовчуванням" }]
-              ],
-              [
-                [{ "text": "Рендеринг", "bold": true }],
-                [{ "text": "Компоненти React" }],
-                [{ "text": "HTML з сервера" }]
-              ]
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "59. How is React Router different from traditional routing?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Difference between React Router and traditional routing:"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Criterion", "bold": true }],
-              [{ "text": "React Router", "bold": true }],
-              [{ "text": "Traditional Routing (Server-Side)", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Routing type", "bold": true }],
-                [{ "text": "Client-side (SPA)" }],
-                [{ "text": "Server-side (MPA)" }]
-              ],
-              [
-                [{ "text": "Navigation", "bold": true }],
-                [{ "text": "No page reload" }],
-                [{ "text": "Full page reload" }]
-              ],
-              [
-                [{ "text": "Performance", "bold": true }],
-                [{ "text": "Faster after initial load" }],
-                [{ "text": "Slower due to repeated requests" }]
-              ],
-              [
-                [{ "text": "SEO", "bold": true }],
-                [{ "text": "Requires SSR for full support" }],
-                [{ "text": "Good by default" }]
-              ],
-              [
-                [{ "text": "Rendering", "bold": true }],
-                [{ "text": "React components" }],
-                [{ "text": "Server-rendered HTML" }]
-              ]
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "59. Czym różni się React Router od tradycyjnego routingu?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              {
-                "text": "Różnice między React Router a tradycyjnym routingiem:"
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Kryterium", "bold": true }],
-              [{ "text": "React Router", "bold": true }],
-              [{ "text": "Routing tradycyjny (Server-Side)", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Typ routingu", "bold": true }],
-                [{ "text": "Kliencki (SPA)" }],
-                [{ "text": "Serwerowy (MPA)" }]
-              ],
-              [
-                [{ "text": "Nawigacja", "bold": true }],
-                [{ "text": "Bez przeładowania strony" }],
-                [{ "text": "Z przeładowaniem strony" }]
-              ],
-              [
-                [{ "text": "Wydajność", "bold": true }],
-                [{ "text": "Wyższa po starcie" }],
-                [{ "text": "Niższa przez kolejne żądania" }]
-              ],
-              [
-                [{ "text": "SEO", "bold": true }],
-                [{ "text": "Wymaga SSR" }],
-                [{ "text": "Dobre domyślnie" }]
-              ],
-              [
-                [{ "text": "Renderowanie", "bold": true }],
-                [{ "text": "Komponenty React" }],
-                [{ "text": "HTML z serwera" }]
-              ]
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 60,
-    "translations": {
-      "uk": {
-        "question": "60. Як передавати пропси в React Router?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У React Router пропси передаються не напряму, а через маршрути, навігацію або параметри URL."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Через Route (React Router v5)", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "<Route path=\"/profile\" render={props => <Profile {...props} user=\"John\" />} />"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Через навігацію (state)", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "navigate('/profile', { state: { user: 'John' } });"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Через параметри маршруту", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const { id } = useParams();"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У React Router v6 основні способи — state навігації та параметри URL."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "60. How do you pass props in React Router?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In React Router, props are passed indirectly via routes, navigation state, or URL parameters."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Via Route (React Router v5)", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "<Route path=\"/profile\" render={props => <Profile {...props} user=\"John\" />} />"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Via navigation state", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "navigate('/profile', { state: { user: 'John' } });"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Via URL parameters", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const { id } = useParams();"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In React Router v6, navigation state and URL params are the primary approaches."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "60. Jak przekazywać propsy w React Router?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W React Router propsy przekazuje się pośrednio przez routing, stan nawigacji lub parametry URL."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przez Route (React Router v5)", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "<Route path=\"/profile\" render={props => <Profile {...props} user=\"John\" />} />"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przez state nawigacji", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "navigate('/profile', { state: { user: 'John' } });"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przez parametry URL", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const { id } = useParams();"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W React Router v6 główne metody to state nawigacji i parametry URL."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 61,
-    "translations": {
-      "uk": {
-        "question": "61. Способи стилізації в React-компонентах?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні способи стилізації в React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inline-стилі", "bold": true },
-                  { "text": " — стилі передаються через атрибут " },
-                  { "text": "style", "code": true },
-                  { "text": " у вигляді JS-об’єкта." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS-файли", "bold": true },
-                  { "text": " — класичні CSS, імпортовані в компонент." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS Modules", "bold": true },
-                  { "text": " — локальна ізоляція стилів на рівні компонента." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "CSS-in-JS (styled-components, Emotion)",
-                    "bold": true
-                  },
-                  { "text": " — стилі описуються безпосередньо в JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Utility-first (Tailwind CSS)", "bold": true },
-                  { "text": " — стилізація через готові utility-класи." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sass / SCSS", "bold": true },
-                  { "text": " — розширений CSS з вкладеністю та змінними." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Вибір підходу залежить від масштабу проєкту, вимог до ізоляції стилів та підходів команди."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "61. What styling approaches are used in React components?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Main styling approaches in React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inline styles", "bold": true },
-                  { "text": " — styles passed via the " },
-                  { "text": "style", "code": true },
-                  { "text": " prop as a JS object." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS files", "bold": true },
-                  { "text": " — traditional CSS imported into components." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS Modules", "bold": true },
-                  { "text": " — locally scoped styles per component." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "CSS-in-JS (styled-components, Emotion)",
-                    "bold": true
-                  },
-                  { "text": " — styles written directly in JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Utility-first (Tailwind CSS)", "bold": true },
-                  { "text": " — styling via predefined utility classes." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sass / SCSS", "bold": true },
-                  { "text": " — extended CSS with variables and nesting." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The choice depends on project scale, style isolation needs, and team preferences."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "61. Jakie są sposoby stylizacji komponentów w React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne sposoby stylizacji w React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Style inline", "bold": true },
-                  { "text": " — przekazywane przez atrybut " },
-                  { "text": "style", "code": true },
-                  { "text": " jako obiekt JS." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pliki CSS", "bold": true },
-                  {
-                    "text": " — klasyczne arkusze CSS importowane do komponentów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS Modules", "bold": true },
-                  { "text": " — lokalna izolacja stylów." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "CSS-in-JS (styled-components, Emotion)",
-                    "bold": true
-                  },
-                  { "text": " — style definiowane w JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Utility-first (Tailwind CSS)", "bold": true },
-                  { "text": " — stylizacja za pomocą klas użytkowych." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Sass / SCSS", "bold": true },
-                  { "text": " — rozszerzony CSS z dodatkowymi możliwościami." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Dobór metody zależy od skali projektu, potrzeby izolacji stylów i preferencji zespołu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 62,
-    "translations": {
-      "uk": {
-        "question": "62. У чому перевага модульних стилів (CSS Modules)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "CSS Modules", "bold": true },
-              {
-                "text": " — це підхід до стилізації, який забезпечує локальну область видимості стилів на рівні компонента."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Локальний scope", "bold": true },
-                  {
-                    "text": " — стилі застосовуються лише до конкретного компонента і не конфліктують з іншими."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Унікальні імена класів", "bold": true },
-                  {
-                    "text": " — імена генеруються автоматично, що усуває перезапис стилів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Простіше масштабування", "bold": true },
-                  {
-                    "text": " — стилі залишаються керованими у великих проєктах."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS Modules зменшують кількість помилок і спрощують підтримку стилів."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "62. What are the advantages of CSS Modules?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "CSS Modules", "bold": true },
-              {
-                "text": " provide locally scoped styles at the component level."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Local scope", "bold": true },
-                  {
-                    "text": " — styles apply only to the component and avoid global conflicts."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Unique class names", "bold": true },
-                  {
-                    "text": " — class names are automatically generated, preventing overrides."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Easier maintenance", "bold": true },
-                  {
-                    "text": " — styles remain manageable as the project grows."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS Modules help keep styles predictable and isolated."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "62. Jakie są zalety CSS Modules?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "CSS Modules", "bold": true },
-              {
-                "text": " zapewniają lokalny zakres stylów na poziomie komponentu."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lokalny zakres", "bold": true },
-                  {
-                    "text": " — style dotyczą tylko danego komponentu i nie kolidują z innymi."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Unikalne nazwy klas", "bold": true },
-                  {
-                    "text": " — generowane automatycznie, bez ryzyka nadpisania."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Łatwiejsze utrzymanie", "bold": true },
-                  {
-                    "text": " — style są czytelniejsze w dużych projektach."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "CSS Modules pomagają utrzymać porządek i izolację stylów."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 63,
-    "translations": {
-      "uk": {
-        "question": "63. Які підходи ви знаєте для оптимізації продуктивності React-додатків?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Мемоїзація компонентів", "bold": true },
-                  {
-                    "text": " — використання ",
-                    "bold": false
-                  },
-                  { "text": "React.memo", "code": true },
-                  { "text": " та " },
-                  { "text": "PureComponent", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Мемоїзація значень і функцій", "bold": true },
-                  {
-                    "text": " — ",
-                    "bold": false
-                  },
-                  { "text": "useMemo", "code": true },
-                  { "text": ", " },
-                  { "text": "useCallback", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Code Splitting", "bold": true },
-                  {
-                    "text": " — динамічні імпорти з ",
-                    "bold": false
-                  },
-                  { "text": "React.lazy", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Віртуалізація списків", "bold": true },
-                  {
-                    "text": " — рендер лише видимих елементів",
-                    "bold": false
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Контроль ререндерів", "bold": true },
-                  {
-                    "text": " — уникайте зайвих оновлень",
-                    "bold": false
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оптимізація стану", "bold": true },
-                  {
-                    "text": " — мінімальний і локальний state",
-                    "bold": false
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ключова ідея: менше ререндерів, менше DOM, менше роботи в main thread."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "63. What approaches are used to optimize React application performance?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Component memoization", "bold": true },
-                  { "text": " — using " },
-                  { "text": "React.memo", "code": true },
-                  { "text": " and " },
-                  { "text": "PureComponent", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Memoizing values and callbacks", "bold": true },
-                  { "text": " — " },
-                  { "text": "useMemo", "code": true },
-                  { "text": ", " },
-                  { "text": "useCallback", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Code splitting", "bold": true },
-                  { "text": " — dynamic imports with " },
-                  { "text": "React.lazy", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "List virtualization", "bold": true },
-                  { "text": " — render only visible items" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Render control", "bold": true },
-                  { "text": " — avoid unnecessary re-renders" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "State optimization", "bold": true },
-                  { "text": " — keep state minimal and local" }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Core principle: reduce renders, DOM nodes, and main-thread work."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "63. Jakie podejścia stosuje się do optymalizacji wydajności aplikacji React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Memoizacja komponentów", "bold": true },
-                  { "text": " — " },
-                  { "text": "React.memo", "code": true },
-                  { "text": ", " },
-                  { "text": "PureComponent", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Memoizacja wartości i funkcji", "bold": true },
-                  { "text": " — " },
-                  { "text": "useMemo", "code": true },
-                  { "text": ", " },
-                  { "text": "useCallback", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Code splitting", "bold": true },
-                  { "text": " — dynamiczne importy z " },
-                  { "text": "React.lazy", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wirtualizacja list", "bold": true },
-                  { "text": " — renderowanie tylko widocznych elementów" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kontrola renderowania", "bold": true },
-                  { "text": " — unikanie zbędnych renderów" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optymalizacja stanu", "bold": true },
-                  { "text": " — minimalny i lokalny state" }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zasada: mniej renderów, mniej DOM i mniej pracy w głównym wątku."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 64,
-    "translations": {
-      "uk": {
-        "question": "64. Різниця між memo і useMemo?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Різниця між memo і useMemo" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Критерій", "bold": true }],
-              [{ "text": "memo", "bold": true }],
-              [{ "text": "useMemo", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Що це?", "bold": true }],
-                [{ "text": "Функція вищого порядку (HOC)" }],
-                [{ "text": "Хук" }]
-              ],
-              [
-                [{ "text": "Призначення", "bold": true }],
-                [{ "text": "Запобігає повторному рендеру компонента" }],
-                [{ "text": "Кешує результат обчислення" }]
-              ],
-              [
-                [{ "text": "Де використовується?", "bold": true }],
-                [{ "text": "Навколо компонента" }],
-                [{ "text": "Всередині компонента" }]
-              ],
-              [
-                [{ "text": "Що кешує?", "bold": true }],
-                [{ "text": "Результат рендеру компонента" }],
-                [{ "text": "Значення, що повертає функція" }]
-              ],
-              [
-                [{ "text": "Типовий кейс", "bold": true }],
-                [{ "text": "Компонент часто рендериться з тими ж пропсами" }],
-                [{ "text": "Важке обчислення залежить від deps" }]
-              ]
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "memo оптимізує рендер компонента. useMemo оптимізує обчислення всередині компонента."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "64. What is the difference between memo and useMemo?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Difference between memo and useMemo" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Criteria", "bold": true }],
-              [{ "text": "memo", "bold": true }],
-              [{ "text": "useMemo", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "What is it?", "bold": true }],
-                [{ "text": "Higher-order component (HOC)" }],
-                [{ "text": "Hook" }]
-              ],
-              [
-                [{ "text": "Purpose", "bold": true }],
-                [{ "text": "Prevents unnecessary component re-renders" }],
-                [{ "text": "Caches computation results" }]
-              ],
-              [
-                [{ "text": "Where used?", "bold": true }],
-                [{ "text": "Wraps a component" }],
-                [{ "text": "Inside a component" }]
-              ],
-              [
-                [{ "text": "What is cached?", "bold": true }],
-                [{ "text": "Rendered output of a component" }],
-                [{ "text": "Return value of a function" }]
-              ],
-              [
-                [{ "text": "Typical use case", "bold": true }],
-                [{ "text": "Component renders often with same props" }],
-                [{ "text": "Expensive calculation with dependencies" }]
-              ]
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "memo optimizes rendering. useMemo optimizes calculations."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "64. Jaka jest różnica między memo a useMemo?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Różnica między memo i useMemo" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Kryterium", "bold": true }],
-              [{ "text": "memo", "bold": true }],
-              [{ "text": "useMemo", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Czym jest?", "bold": true }],
-                [{ "text": "Komponent wyższego rzędu (HOC)" }],
-                [{ "text": "Hook" }]
-              ],
-              [
-                [{ "text": "Cel", "bold": true }],
-                [{ "text": "Zapobiega zbędnym renderom komponentu" }],
-                [{ "text": "Buforuje wynik obliczeń" }]
-              ],
-              [
-                [{ "text": "Gdzie używany?", "bold": true }],
-                [{ "text": "Opakowuje komponent" }],
-                [{ "text": "Wewnątrz komponentu" }]
-              ],
-              [
-                [{ "text": "Co jest buforowane?", "bold": true }],
-                [{ "text": "Wynik renderowania komponentu" }],
-                [{ "text": "Wartość zwracana przez funkcję" }]
-              ],
-              [
-                [{ "text": "Typowy przypadek", "bold": true }],
-                [{ "text": "Częste renderowanie z tymi samymi propsami" }],
-                [{ "text": "Kosztowne obliczenia zależne od deps" }]
-              ]
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "memo optymalizuje renderowanie. useMemo optymalizuje obliczenia."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 65,
-    "translations": {
-      "uk": {
-        "question": "65. Навіщо setState() потрібно передавати функцію?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Функцію в ",
-                "bold": false
-              },
-              { "text": "setState()", "code": true },
-              {
-                "text": " передають тоді, коли новий стан залежить від попереднього. Це необхідно через асинхронність та батчинг оновлень стану."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Суть проблеми:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Пряме використання значення стану може призвести до помилок, якщо кілька оновлень виконуються поспіль."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Правильний підхід:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Функція отримує актуальний попередній стан і гарантує коректний результат."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "65. Why should you pass a function to setState()?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "A function is passed to ",
-                "bold": false
-              },
-              { "text": "setState()", "code": true },
-              {
-                "text": " when the next state depends on the previous one. This is required because state updates are asynchronous and batched."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Core issue:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Using the current state value directly may produce incorrect results when multiple updates occur."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Correct approach:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The function form receives the latest state and guarantees correct updates."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "65. Dlaczego do setState() należy przekazywać funkcję?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Funkcję przekazuje się do ",
-                "bold": false
-              },
-              { "text": "setState()", "code": true },
-              {
-                "text": ", gdy nowy stan zależy od poprzedniego. Wynika to z asynchronicznego i grupowanego charakteru aktualizacji stanu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Istota problemu:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Bezpośrednie użycie stanu może prowadzić do błędów przy wielu aktualizacjach."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Poprawne rozwiązanie:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wersja funkcyjna zawsze otrzymuje aktualny poprzedni stan."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 66,
-    "translations": {
-      "uk": {
-        "question": "66. Як рефи (refs) у React використовуються для взаємодії з DOM елементами?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Рефи (refs) у React використовуються для прямого доступу до DOM-елементів або екземплярів компонентів, минаючи пропси та state."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Створення рефа", "bold": true },
-                  { "text": " — через " },
-                  { "text": "useRef()", "code": true },
-                  { "text": " або " },
-                  { "text": "createRef()", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Привʼязка до DOM", "bold": true },
-                  { "text": " — передача рефа в атрибут " },
-                  { "text": "ref", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Доступ до елемента", "bold": true },
-                  { "text": " — через " },
-                  { "text": "ref.current", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Типові сценарії", "bold": true },
-                  {
-                    "text": " — фокус, скрол, вимірювання розмірів, інтеграція з не-React бібліотеками."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Рефи не призначені для керування станом і повинні використовуватись обмежено."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "66. How are refs used in React to interact with DOM elements?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Refs in React provide direct access to DOM elements or component instances, bypassing props and state."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Creating refs", "bold": true },
-                  { "text": " — using " },
-                  { "text": "useRef()", "code": true },
-                  { "text": " or " },
-                  { "text": "createRef()", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Binding to DOM", "bold": true },
-                  { "text": " — passing the ref via the " },
-                  { "text": "ref", "code": true },
-                  { "text": " attribute" }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Accessing the element", "bold": true },
-                  { "text": " — through " },
-                  { "text": "ref.current", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Common use cases", "bold": true },
-                  {
-                    "text": " — focus management, scrolling, measurements, third-party integrations."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Refs should not be used for state management and must be applied sparingly."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "66. Jak w React wykorzystuje się refy do interakcji z elementami DOM?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Refy w React umożliwiają bezpośredni dostęp do elementów DOM lub instancji komponentów, z pominięciem propsów i stanu."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tworzenie refów", "bold": true },
-                  { "text": " — za pomocą " },
-                  { "text": "useRef()", "code": true },
-                  { "text": " lub " },
-                  { "text": "createRef()", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Powiązanie z DOM", "bold": true },
-                  { "text": " — przekazanie refa do atrybutu " },
-                  { "text": "ref", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dostęp do elementu", "bold": true },
-                  { "text": " — przez " },
-                  { "text": "ref.current", "code": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Typowe zastosowania", "bold": true },
-                  {
-                    "text": " — fokus, przewijanie, pomiary, integracje z bibliotekami zewnętrznymi."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Refy nie służą do zarządzania stanem i powinny być używane oszczędnie."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "question": "67. Як використовувати InnerHtml у React?",
-    "category": "react",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "У React для вставки HTML-контенту в DOM використовується атрибут dangerouslySetInnerHTML. Це дає можливість вставити HTML безпосередньо в компонент, однак такий підхід може бути небезпечним, тому й називається \"dangerously\", оскільки він дозволяє вбудовувати сирий HTML, що може призвести до XSS-атак, якщо дані не очищені."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад використання "
-          },
-          {
-            "text": "dangerouslySetInnerHTML",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "jsx",
-        "content": "const MyComponent = () => {\r\n  const htmlContent = '<p>Це <strong>HTML</strong> контент.</p>';\r\n\r\n  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;\r\n};\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Пояснення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dangerouslySetInnerHTML",
-                "code": true
-              },
-              {
-                "text": " приймає об'єкт, в якому ключ "
-              },
-              {
-                "text": "__html",
-                "code": true
-              },
-              {
-                "text": " містить рядок HTML-коду."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це дозволяє вбудовувати HTML всередину компонента, але не безпечно, якщо контент надходить з ненадійних джерел."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовувати:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Якщо ви впевнені в безпечності даних (наприклад, від власних серверів)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коли вам потрібно вбудувати динамічний HTML-контент, такий як сторінки чи статті з HTML."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Застереження:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Безпека: Ніколи не використовуйте dangerouslySetInnerHTML для вставки даних, отриманих від користувача чи зовнішніх джерел, без попередньої очистки від шкідливих скриптів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для очищення контенту використовуйте бібліотеки, такі як DOMPurify, щоб уникнути XSS атак."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад очищення даних перед вставкою:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "jsx",
-        "content": "import DOMPurify from 'dompurify';\r\n\r\nconst MyComponent = () => {\r\n  const dirtyHtml = \"<img src=x onerror=alert('XSS')>\";\r\n  const cleanHtml = DOMPurify.sanitize(dirtyHtml);\r\n\r\n  return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;\r\n};\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Отже, "
-          },
-          {
-            "text": "dangerouslySetInnerHTML",
-            "code": true
-          },
-          {
-            "text": " слід використовувати обережно і тільки в тих випадках, коли ви впевнені в безпеці контенту."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "category": "react",
-    "order": 68,
-    "translations": {
-      "uk": {
-        "question": "68. Що таке ReactDOMServer?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "ReactDOMServer", "bold": true },
-              {
-                "text": " — це бібліотека, що входить до складу React і використовується для серверного рендерингу (SSR) React-компонентів. Вона дозволяє генерувати HTML на сервері та передавати його клієнту, що покращує продуктивність і SEO."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні методи:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ReactDOMServer.renderToString():",
-                    "bold": true
-                  },
-                  {
-                    "text": " Рендерить React-елементи в HTML-рядок для початкового завантаження сторінки."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import ReactDOMServer from 'react-dom/server';\nconst html = ReactDOMServer.renderToString(<App />);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ReactDOMServer.renderToStaticMarkup():",
-                    "bold": true
-                  },
-                  {
-                    "text": " Генерує чистий HTML без React-атрибутів. Підходить для повністю статичних сторінок."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const html = ReactDOMServer.renderToStaticMarkup(<App />);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOMServer.hydrate():", "bold": true },
-                  {
-                    "text": " Використовується на клієнті для підключення реактивності до серверно-рендереного HTML."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.hydrate(<App />, document.getElementById('root'));"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Використання:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SSR (Server-Side Rendering):", "bold": true },
-                  {
-                    "text": " Рендеринг компонентів на сервері з передачею готового HTML клієнту."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO:", "bold": true },
-                  {
-                    "text": " Пошукові системи отримують готовий HTML без виконання JavaScript."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ReactDOMServer",
-                "code": true
-              },
-              {
-                "text": " використовується для створення попередньо зрендерених сторінок з кращою швидкістю завантаження та SEO."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "68. What is ReactDOMServer?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "ReactDOMServer", "bold": true },
-              {
-                "text": " is a library included in React that enables server-side rendering (SSR) of React components. It generates HTML on the server and sends it to the client, improving performance and SEO."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Core methods:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ReactDOMServer.renderToString():",
-                    "bold": true
-                  },
-                  {
-                    "text": " Renders React elements to an HTML string for the initial page load."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import ReactDOMServer from 'react-dom/server';\nconst html = ReactDOMServer.renderToString(<App />);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ReactDOMServer.renderToStaticMarkup():",
-                    "bold": true
-                  },
-                  {
-                    "text": " Produces plain HTML without React-specific attributes. Useful for fully static pages."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const html = ReactDOMServer.renderToStaticMarkup(<App />);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOMServer.hydrate():", "bold": true },
-                  {
-                    "text": " Used on the client to attach React interactivity to server-rendered HTML."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.hydrate(<App />, document.getElementById('root'));"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Usage:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SSR (Server-Side Rendering):", "bold": true },
-                  {
-                    "text": " Components are rendered on the server and delivered as ready HTML."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO:", "bold": true },
-                  {
-                    "text": " Search engines can index pages without executing JavaScript."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ReactDOMServer",
-                "code": true
-              },
-              {
-                "text": " enables pre-rendered pages with faster load times and improved SEO."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "68. Czym jest ReactDOMServer?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "ReactDOMServer", "bold": true },
-              {
-                "text": " to biblioteka wchodząca w skład React, służąca do renderowania komponentów po stronie serwera (SSR). Generuje HTML na serwerze i przesyła go do klienta, co poprawia wydajność i SEO."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne metody:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ReactDOMServer.renderToString():",
-                    "bold": true
-                  },
-                  {
-                    "text": " Renderuje elementy React do łańcucha HTML dla początkowego załadowania strony."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import ReactDOMServer from 'react-dom/server';\nconst html = ReactDOMServer.renderToString(<App />);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ReactDOMServer.renderToStaticMarkup():",
-                    "bold": true
-                  },
-                  {
-                    "text": " Generuje czysty HTML bez atrybutów React. Nadaje się do stron statycznych."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const html = ReactDOMServer.renderToStaticMarkup(<App />);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOMServer.hydrate():", "bold": true },
-                  {
-                    "text": " Służy po stronie klienta do podłączenia interaktywności do HTML wygenerowanego na serwerze."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.hydrate(<App />, document.getElementById('root'));"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zastosowanie:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SSR (Server-Side Rendering):", "bold": true },
-                  {
-                    "text": " Renderowanie komponentów na serwerze i wysyłanie gotowego HTML do klienta."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO:", "bold": true },
-                  {
-                    "text": " Wyszukiwarki mogą indeksować treść bez uruchamiania JavaScript."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "ReactDOMServer",
-                "code": true
-              },
-              {
-                "text": " umożliwia tworzenie wstępnie renderowanych stron z lepszą wydajnością i SEO."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 69,
-    "translations": {
-      "uk": {
-        "question": "69. Яке використання пакету react-dom?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Пакет " },
-              { "text": "react-dom", "code": true },
-              {
-                "text": " використовується для взаємодії React із реальним DOM у веб-додатках. Основні функції:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.render():", "bold": true },
-                  {
-                    "text": " Використовується для рендерингу React-компонента в реальний DOM."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.render(<App />, document.getElementById('root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.hydrate():", "bold": true },
-                  {
-                    "text": " Використовується для гідратації серверно-зрендереного HTML."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.hydrate(<App />, document.getElementById('root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.createPortal():", "bold": true },
-                  {
-                    "text": " Дозволяє рендерити елементи поза основною ієрархією DOM."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.createPortal(<Modal />, document.getElementById('modal-root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ReactDOM.unmountComponentAtNode():",
-                    "bold": true
-                  },
-                  {
-                    "text": " Видаляє React-компонент з DOM."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.unmountComponentAtNode(document.getElementById('root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.findDOMNode():", "bold": true },
-                  {
-                    "text": " Надає доступ до DOM-елемента компонента. Вважається застарілим підходом."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "69. What is the usage of the react-dom package?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The " },
-              { "text": "react-dom", "code": true },
-              {
-                "text": " package is responsible for connecting React with the real DOM in web applications. Core features include:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.render():", "bold": true },
-                  {
-                    "text": " Renders a React component into the real DOM."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.render(<App />, document.getElementById('root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.hydrate():", "bold": true },
-                  {
-                    "text": " Attaches React to server-rendered HTML."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.hydrate(<App />, document.getElementById('root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.createPortal():", "bold": true },
-                  {
-                    "text": " Renders children into a different DOM subtree."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.createPortal(<Modal />, document.getElementById('modal-root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ReactDOM.unmountComponentAtNode():",
-                    "bold": true
-                  },
-                  {
-                    "text": " Removes a React component from the DOM."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.unmountComponentAtNode(document.getElementById('root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.findDOMNode():", "bold": true },
-                  {
-                    "text": " Provides access to a component’s DOM node. Considered legacy."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "69. Jakie jest zastosowanie pakietu react-dom?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Pakiet " },
-              { "text": "react-dom", "code": true },
-              {
-                "text": " służy do integracji React z rzeczywistym DOM w aplikacjach webowych. Główne funkcje:"
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.render():", "bold": true },
-                  {
-                    "text": " Renderuje komponent React do rzeczywistego DOM."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.render(<App />, document.getElementById('root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.hydrate():", "bold": true },
-                  {
-                    "text": " Podłącza React do HTML wygenerowanego po stronie serwera."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.hydrate(<App />, document.getElementById('root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.createPortal():", "bold": true },
-                  {
-                    "text": " Pozwala renderować elementy poza standardową hierarchią DOM."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.createPortal(<Modal />, document.getElementById('modal-root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "ReactDOM.unmountComponentAtNode():",
-                    "bold": true
-                  },
-                  {
-                    "text": " Usuwa komponent React z DOM."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "ReactDOM.unmountComponentAtNode(document.getElementById('root'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ReactDOM.findDOMNode():", "bold": true },
-                  {
-                    "text": " Zapewnia dostęp do elementu DOM komponentu. Metoda przestarzała."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 70,
-    "translations": {
-      "uk": {
-        "question": "70. Як використовувати React.lazy та React.Suspense для запуску коду програми?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React.lazy", "code": true },
-              { "text": " та " },
-              { "text": "React.Suspense", "code": true },
-              { "text": " використовуються для " },
-              { "text": "динамічного завантаження компонентів", "bold": true },
-              { "text": " у React з метою " },
-              { "text": "розподілу коду", "bold": true },
-              {
-                "text": " (code splitting). Компоненти завантажуються лише за потреби, що зменшує початкове навантаження."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як це працює:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.lazy()", "bold": true },
-                  { "text": " дозволяє відкладено імпортувати компонент." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.Suspense", "bold": true },
-                  {
-                    "text": " обгортає ледачі компоненти та показує fallback-контент під час завантаження."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Динамічний імпорт компонента:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const MyComponent = React.lazy(() => import('./MyComponent'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Використання React.Suspense:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function App() {\n  return (\n    <React.Suspense fallback={<div>Завантаження...</div>}>\n      <MyComponent />\n    </React.Suspense>\n  );\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Менший розмір початкового бандлу." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Швидше початкове завантаження застосунку." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "70. How to use React.lazy and React.Suspense to load application code?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React.lazy", "code": true },
-              { "text": " and " },
-              { "text": "React.Suspense", "code": true },
-              { "text": " are used for " },
-              { "text": "dynamic component loading", "bold": true },
-              { "text": " in React via " },
-              { "text": "code splitting", "bold": true },
-              {
-                "text": ". Code is loaded only when required, reducing initial load time."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.lazy()", "bold": true },
-                  { "text": " enables deferred importing of components." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.Suspense", "bold": true },
-                  {
-                    "text": " wraps lazy components and displays fallback content during loading."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lazy-loaded component:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const MyComponent = React.lazy(() => import('./MyComponent'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Suspense wrapper:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function App() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <MyComponent />\n    </React.Suspense>\n  );\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Benefits:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Smaller initial bundle size." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Faster initial application load." }]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "70. Jak używać React.lazy i React.Suspense do ładowania kodu aplikacji?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React.lazy", "code": true },
-              { "text": " oraz " },
-              { "text": "React.Suspense", "code": true },
-              { "text": " służą do " },
-              { "text": "dynamicznego ładowania komponentów", "bold": true },
-              { "text": " w React poprzez " },
-              { "text": "podział kodu", "bold": true },
-              {
-                "text": " (code splitting). Kod jest pobierany tylko wtedy, gdy jest potrzebny."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak to działa:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.lazy()", "bold": true },
-                  { "text": " umożliwia leniwe importowanie komponentów." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.Suspense", "bold": true },
-                  {
-                    "text": " wyświetla zawartość zastępczą podczas ładowania komponentów."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponent ładowany dynamicznie:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "const MyComponent = React.lazy(() => import('./MyComponent'));"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Użycie React.Suspense:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function App() {\n  return (\n    <React.Suspense fallback={<div>Ładowanie...</div>}>\n      <MyComponent />\n    </React.Suspense>\n  );\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Mniejszy początkowy rozmiar pakietu." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Szybsze uruchomienie aplikacji." }]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 71,
-    "translations": {
-      "uk": {
-        "question": "71. Найкращі практики безпеки в React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Найкращі практики безпеки в React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Запобігання XSS:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Очищуйте всі користувацькі дані перед відображенням."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Уникайте " },
-                          { "text": "dangerouslySetInnerHTML", "code": true }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Захист від інʼєкцій коду:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Не використовуйте " },
-                          { "text": "eval()", "code": true },
-                          { "text": " та подібні API." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Безпечна робота з API:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Використовуйте HTTPS." }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Застосовуйте HTTPOnly та Secure cookies."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Захист від CSRF:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Використовуйте CSRF-токени." }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Використовуйте cookie з флагом " },
-                          { "text": "SameSite", "code": true }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Контроль доступу:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Не довіряйте клієнтській валідації." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Перевіряйте права на сервері." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оновлення залежностей:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Регулярно перевіряйте залежності через "
-                          },
-                          { "text": "npm audit", "code": true }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Керування секретами:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Не зберігайте секрети в клієнтському коді."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ці практики зменшують типові ризики безпеки в React-додатках."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "71. Best security practices in React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Best security practices in React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Prevent XSS:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Sanitize all user input before rendering."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Avoid " },
-                          { "text": "dangerouslySetInnerHTML", "code": true }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Avoid code injection:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Do not use " },
-                          { "text": "eval()", "code": true }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Secure API access:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Always use HTTPS." }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Use HTTPOnly and Secure cookies." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Protect against CSRF:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Use CSRF tokens." }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Use cookies with " },
-                          { "text": "SameSite", "code": true }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Access control:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Never trust client-side validation." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Enforce checks on the server." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dependency updates:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Audit dependencies using " },
-                          { "text": "npm audit", "code": true }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Secrets management:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Never store secrets in client code." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "These practices reduce common security risks in React applications."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "71. Najlepsze praktyki bezpieczeństwa w React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Najlepsze praktyki bezpieczeństwa w React:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zapobieganie XSS:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Sanityzuj dane użytkownika przed renderowaniem."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Unikaj " },
-                          { "text": "dangerouslySetInnerHTML", "code": true }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Ochrona przed wstrzyknięciem kodu:",
-                    "bold": true
-                  },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Nie używaj " },
-                          { "text": "eval()", "code": true }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Bezpieczne API:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Korzystaj z HTTPS." }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Stosuj cookies HTTPOnly i Secure." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ochrona CSRF:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Używaj tokenów CSRF." }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Ustaw flagę " },
-                          { "text": "SameSite", "code": true }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kontrola dostępu:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Nie ufaj walidacji po stronie klienta." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Weryfikuj uprawnienia na serwerze." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Aktualizacja zależności:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Sprawdzaj zależności za pomocą " },
-                          { "text": "npm audit", "code": true }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zarządzanie sekretami:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Nie przechowuj sekretów w kodzie frontendowym."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Stosowanie tych zasad ogranicza typowe podatności w aplikacjach React."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 72,
-    "translations": {
-      "uk": {
-        "question": "72. Як обробляти помилки в React за допомогою Error Boundary?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Error Boundaries", "bold": true },
-              {
-                "text": " у React дозволяють перехоплювати помилки під час рендерингу, у методах життєвого циклу та конструкторах компонентів без падіння всього додатку."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні моменти:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Error Boundary — це компонент-обгортка, який ловить помилки у своїх дочірніх компонентах."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Error Boundaries", "bold": true },
-                  {
-                    "text": " не ловлять помилки всередині самих себе."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Реалізація Error Boundary:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Створення компонента:", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "static getDerivedStateFromError(error)",
-                            "code": true
-                          },
-                          { "text": " — оновлює стан при помилці." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "componentDidCatch(error, info)",
-                            "code": true
-                          },
-                          { "text": " — логування або відправка помилки." }
-                        ]
-                      }
-                    ]
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class ErrorBoundary extends React.Component {\n  state = { hasError: false };\n\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, info) {\n    console.error(error, info);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return <h1>Щось пішло не так.</h1>;\n    }\n    return this.props.children;\n  }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Використання:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "<ErrorBoundary>\n  <MyComponent />\n</ErrorBoundary>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Обмеження:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Не ловить помилки в обробниках подій, async-коді, таймерах та HTTP-запитах."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "72. How to handle errors in React using Error Boundaries?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Error Boundaries", "bold": true },
-              {
-                "text": " allow React applications to catch rendering and lifecycle errors without crashing the entire app."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key points:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "An Error Boundary is a wrapper component that catches errors in its children."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Error Boundaries", "bold": true },
-                  {
-                    "text": " do not catch errors inside themselves."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Implementation:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Create Error Boundary:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class ErrorBoundary extends React.Component {\n  state = { hasError: false };\n\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, info) {\n    console.error(error, info);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return <h1>Something went wrong.</h1>;\n    }\n    return this.props.children;\n  }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Usage:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "<ErrorBoundary>\n  <MyComponent />\n</ErrorBoundary>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Limitations:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Does not catch errors in event handlers, async code, or network requests."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "72. Jak obsługiwać błędy w React za pomocą Error Boundary?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Error Boundaries", "bold": true },
-              {
-                "text": " pozwalają przechwytywać błędy renderowania i cyklu życia bez zatrzymywania całej aplikacji."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Najważniejsze informacje:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Error Boundary to komponent opakowujący, który łapie błędy w komponentach potomnych."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Error Boundaries", "bold": true },
-                  {
-                    "text": " nie przechwytują błędów we własnym kodzie."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Implementacja:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tworzenie komponentu:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "class ErrorBoundary extends React.Component {\n  state = { hasError: false };\n\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, info) {\n    console.error(error, info);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return <h1>Coś poszło nie tak.</h1>;\n    }\n    return this.props.children;\n  }\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Użycie:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "<ErrorBoundary>\n  <MyComponent />\n</ErrorBoundary>"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Ograniczenia:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nie obsługuje błędów w obsłudze zdarzeń, kodzie asynchronicznym ani zapytaniach sieciowych."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 73,
-    "translations": {
-      "uk": {
-        "question": "73. Що таке інверсія спадкування (Inheritance Inversion)?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Інверсія спадкування (Inheritance Inversion)",
-                    "bold": true
-                  },
-                  {
-                    "text": " — це антипатерн, за якого базовий клас втрачає автономну логіку та фактично залежить від своїх нащадків."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Проблеми інверсії спадкування" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Порушення принципу підстановки Лісков (LSP)." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Складність розширення базового класу." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Тісна звʼязність між класами." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад поганої практики" }]
-          },
-          {
-            "type": "code",
-            "language": "js",
-            "content": "class Parent {\n  method() {\n    throw new Error('Метод має бути реалізований у нащадку');\n  }\n}\n\nclass Child extends Parent {\n  method() {\n    return 'Реалізація в нащадку';\n  }\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Базовий клас не має власної поведінки і примушує нащадків її визначати."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Альтернатива: композиція" }]
-          },
-          {
-            "type": "code",
-            "language": "js",
-            "content": "class Behavior {\n  method() {\n    return 'Реалізація без інверсії';\n  }\n}\n\nclass Parent {\n  constructor() {\n    this.behavior = new Behavior();\n  }\n\n  method() {\n    return this.behavior.method();\n  }\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Композиція зменшує залежності та підвищує гнучкість коду."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "73. What is inheritance inversion?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inheritance Inversion", "bold": true },
-                  {
-                    "text": " is an anti-pattern where a base class depends on its subclasses or delegates core behavior to them."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Problems with inheritance inversion" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Violates the Liskov Substitution Principle." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hard to extend or refactor base classes." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Creates tight coupling." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Bad practice example" }]
-          },
-          {
-            "type": "code",
-            "language": "js",
-            "content": "class Parent {\n  method() {\n    throw new Error('Must be implemented by child');\n  }\n}\n\nclass Child extends Parent {\n  method() {\n    return 'Child implementation';\n  }\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The base class has no real behavior and forces subclasses to define it."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Alternative: composition" }]
-          },
-          {
-            "type": "code",
-            "language": "js",
-            "content": "class Behavior {\n  method() {\n    return 'Implementation without inversion';\n  }\n}\n\nclass Parent {\n  constructor() {\n    this.behavior = new Behavior();\n  }\n\n  method() {\n    return this.behavior.method();\n  }\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Composition removes subclass dependency and improves maintainability."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "73. Czym jest inwersja dziedziczenia?",
-        "answerBlocks": [
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inwersja dziedziczenia", "bold": true },
-                  {
-                    "text": " to antywzorzec, w którym klasa bazowa zależy od klas potomnych."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Problemy inwersji dziedziczenia" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Naruszenie zasady podstawienia Liskov." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Trudna rozbudowa klasy bazowej." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Silne powiązania między klasami." }]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład złej praktyki" }]
-          },
-          {
-            "type": "code",
-            "language": "js",
-            "content": "class Parent {\n  method() {\n    throw new Error('Musi być zaimplementowane w klasie potomnej');\n  }\n}\n\nclass Child extends Parent {\n  method() {\n    return 'Implementacja potomna';\n  }\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Klasa bazowa nie posiada własnej logiki."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Alternatywa: kompozycja" }]
-          },
-          {
-            "type": "code",
-            "language": "js",
-            "content": "class Behavior {\n  method() {\n    return 'Implementacja bez inwersji';\n  }\n}\n\nclass Parent {\n  constructor() {\n    this.behavior = new Behavior();\n  }\n\n  method() {\n    return this.behavior.method();\n  }\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Kompozycja zmniejsza zależności i poprawia elastyczność."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 74,
-    "translations": {
-      "uk": {
-        "question": "74. Що таке \"опитування\" (Polling)? Як його реалізувати у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Опитування (Polling)", "bold": true },
-              {
-                "text": " — це періодичне надсилання запитів до сервера для отримання оновлених даних, коли push-механізми недоступні."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Реалізація Polling у React" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Polling реалізують через " },
-              { "text": "setInterval", "code": true },
-              { "text": ", " },
-              { "text": "setTimeout", "code": true },
-              { "text": " або хук " },
-              { "text": "useEffect", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Використання setInterval:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "useEffect(() => {\n  const fetchData = async () => {\n    const res = await fetch('/api/data');\n    setData(await res.json());\n  };\n\n  fetchData();\n  const id = setInterval(fetchData, 5000);\n  return () => clearInterval(id);\n}, []);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Використання setTimeout:", "bold": true },
-                  {
-                    "text": " Дозволяє уникнути накладання запитів."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "setTimeout викликає наступний запит лише після завершення попереднього."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "74. What is polling? How is it implemented in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Polling", "bold": true },
-              {
-                "text": " is a technique where the client periodically requests updated data from the server when push mechanisms are unavailable."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Polling implementation in React" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Polling can be implemented using " },
-              { "text": "setInterval", "code": true },
-              { "text": ", " },
-              { "text": "setTimeout", "code": true },
-              { "text": " and the " },
-              { "text": "useEffect", "code": true },
-              { "text": " hook." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Using setInterval:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "useEffect(() => {\n  const fetchData = async () => {\n    const res = await fetch('/api/data');\n    setData(await res.json());\n  };\n\n  fetchData();\n  const id = setInterval(fetchData, 5000);\n  return () => clearInterval(id);\n}, []);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Using setTimeout:", "bold": true },
-                  {
-                    "text": " Prevents overlapping requests."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "With setTimeout, the next request starts only after the previous one completes."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "74. Czym jest polling? Jak zaimplementować go w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Polling", "bold": true },
-              {
-                "text": " to technika okresowego odpytywania serwera o nowe dane, gdy mechanizmy push nie są dostępne."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Implementacja Polling w React" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Polling można zaimplementować za pomocą " },
-              { "text": "setInterval", "code": true },
-              { "text": ", " },
-              { "text": "setTimeout", "code": true },
-              { "text": " oraz hooka " },
-              { "text": "useEffect", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Użycie setInterval:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "useEffect(() => {\n  const fetchData = async () => {\n    const res = await fetch('/api/data');\n    setData(await res.json());\n  };\n\n  fetchData();\n  const id = setInterval(fetchData, 5000);\n  return () => clearInterval(id);\n}, []);"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Użycie setTimeout:", "bold": true },
-                  {
-                    "text": " Zapobiega nakładaniu się zapytań."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "setTimeout uruchamia kolejne zapytanie dopiero po zakończeniu poprzedniego."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 75,
-    "translations": {
-      "uk": {
-        "question": "75. Як у React реалізувати двостороннє зв'язування даних?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У React двостороннє зв’язування даних реалізується через "
-              },
-              {
-                "text": "керовані компоненти",
-                "bold": true
-              },
-              {
-                "text": ", де стан ("
-              },
-              {
-                "text": "state",
-                "code": true
-              },
-              {
-                "text": ") синхронізується з полем вводу ("
-              },
-              {
-                "text": "input",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад реалізації" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { useState } from 'react';\n\nconst TwoWayBinding = () => {\n  const [value, setValue] = useState('');\n\n  return (\n    <input\n      value={value}\n      onChange={e => setValue(e.target.value)}\n    />\n  );\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Зміна значення в полі вводу одразу оновлює стан, а стан керує відображенням."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "75. How is two-way data binding implemented in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In React, two-way data binding is implemented using "
-              },
-              {
-                "text": "controlled components",
-                "bold": true
-              },
-              {
-                "text": ", where component "
-              },
-              {
-                "text": "state",
-                "code": true
-              },
-              {
-                "text": " is synchronized with an "
-              },
-              {
-                "text": "input",
-                "code": true
-              },
-              {
-                "text": " element."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { useState } from 'react';\n\nconst TwoWayBinding = () => {\n  const [value, setValue] = useState('');\n\n  return (\n    <input\n      value={value}\n      onChange={e => setValue(e.target.value)}\n    />\n  );\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "User input updates state, and state controls what is rendered."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "75. Jak w React zaimplementować dwukierunkowe wiązanie danych?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W React dwukierunkowe wiązanie danych realizuje się za pomocą "
-              },
-              {
-                "text": "komponentów kontrolowanych",
-                "bold": true
-              },
-              {
-                "text": ", gdzie "
-              },
-              {
-                "text": "state",
-                "code": true
-              },
-              {
-                "text": " jest synchronizowany z polem "
-              },
-              {
-                "text": "input",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { useState } from 'react';\n\nconst TwoWayBinding = () => {\n  const [value, setValue] = useState('');\n\n  return (\n    <input\n      value={value}\n      onChange={e => setValue(e.target.value)}\n    />\n  );\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Zmiana wartości w polu aktualizuje stan, a stan steruje interfejsem."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 76,
-    "translations": {
-      "uk": {
-        "question": "76. Що таке зворотний потік даних (Reverse Data Flow) у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Зворотний потік даних (Reverse Data Flow) у React — це передача змін від дочірнього компонента до батьківського. На практиці це реалізується без прямого доступу до стану батька."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як це реалізується:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Callback-функції", "bold": true },
-                  {
-                    "text": ": батьківський компонент передає функцію через пропси, а дочірній викликає її при зміні даних."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Приклад:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function Parent() {\n  const [value, setValue] = useState('');\n\n  const handleChange = v => setValue(v);\n\n  return <Child onValueChange={handleChange} />;\n}\n\nfunction Child({ onValueChange }) {\n  return <input onChange={e => onValueChange(e.target.value)} />;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Таким чином дочірній компонент ініціює зміну стану, але сам стан залишається у батьківському компоненті."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "76. What is Reverse Data Flow in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Reverse Data Flow in React means passing data changes from a child component back to a parent component, without breaking one-way data flow."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it is implemented:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Callback functions", "bold": true },
-                  {
-                    "text": ": the parent passes a function via props and the child invokes it on changes."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Example:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function Parent() {\n  const [value, setValue] = useState('');\n\n  const handleChange = v => setValue(v);\n\n  return <Child onValueChange={handleChange} />;\n}\n\nfunction Child({ onValueChange }) {\n  return <input onChange={e => onValueChange(e.target.value)} />;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The child triggers updates, but state ownership remains in the parent."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "76. Czym jest odwrotny przepływ danych (Reverse Data Flow) w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Reverse Data Flow w React oznacza przekazywanie zmian danych z komponentu potomnego do komponentu nadrzędnego."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak jest realizowany:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Funkcje callback", "bold": true },
-                  {
-                    "text": ": komponent nadrzędny przekazuje funkcję przez propsy, a potomny ją wywołuje."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Przykład:", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function Parent() {\n  const [value, setValue] = useState('');\n\n  const handleChange = v => setValue(v);\n\n  return <Child onValueChange={handleChange} />;\n}\n\nfunction Child({ onValueChange }) {\n  return <input onChange={e => onValueChange(e.target.value)} />;\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Komponent potomny inicjuje zmianę, ale stan pozostaje w komponencie nadrzędnym."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 77,
-    "translations": {
-      "uk": {
-        "question": "77. Що таке мутація стану і як їй запобігти?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Мутація стану — це пряме змінювання обʼєктів або масивів у стані без створення нової копії. У React це ламає механізм виявлення змін і може призвести до відсутності перерендеру."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як запобігти мутації стану:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Створювати копії даних", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Масиви: " },
-                          {
-                            "text": "setItems([...items, newItem])",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Обʼєкти: " },
-                          {
-                            "text": "setUser({ ...user, name: 'John' })",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Використовувати немутуючі методи",
-                    "bold": true
-                  },
-                  {
-                    "text": " "
-                  },
-                  { "text": "map()", "code": true },
-                  { "text": ", " },
-                  { "text": "filter()", "code": true },
-                  { "text": ", " },
-                  { "text": "reduce()", "code": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Немутуючі оновлення дозволяють React коректно визначати зміни стану."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "77. What is state mutation and how can it be prevented?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "State mutation is the direct modification of objects or arrays stored in state without creating a new copy. In React, this breaks change detection and may prevent re-rendering."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How to prevent state mutation:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Create copies of data", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Arrays: " },
-                          {
-                            "text": "setItems([...items, newItem])",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Objects: " },
-                          {
-                            "text": "setUser({ ...user, name: 'John' })",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Use non-mutating methods", "bold": true },
-                  { "text": " " },
-                  { "text": "map()", "code": true },
-                  { "text": ", " },
-                  { "text": "filter()", "code": true },
-                  { "text": ", " },
-                  { "text": "reduce()", "code": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Immutable updates allow React to reliably detect state changes."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "77. Czym jest mutacja stanu i jak jej zapobiegać?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Mutacja stanu to bezpośrednia modyfikacja obiektów lub tablic w stanie bez tworzenia nowej kopii. W React prowadzi to do problemów z wykrywaniem zmian."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak zapobiegać mutacji stanu:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Tworzyć kopie danych", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Tablice: " },
-                          {
-                            "text": "setItems([...items, newItem])",
-                            "code": true
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Obiekty: " },
-                          {
-                            "text": "setUser({ ...user, name: 'John' })",
-                            "code": true
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Używać metod niemutujących", "bold": true },
-                  { "text": " " },
-                  { "text": "map()", "code": true },
-                  { "text": ", " },
-                  { "text": "filter()", "code": true },
-                  { "text": ", " },
-                  { "text": "reduce()", "code": true }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Niemutujące aktualizacje umożliwiają React poprawne śledzenie zmian stanu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 78,
-    "translations": {
-      "uk": {
-        "question": "78. Що таке строгий режим (Strict Mode) React? Його переваги?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Strict Mode", "bold": true },
-              {
-                "text": " — це інструмент React для виявлення потенційних проблем у коді під час розробки. У продакшені не має жодного ефекту."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Активується обгорткою в " },
-              { "text": "<React.StrictMode>", "code": true }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "root.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги Strict Mode" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Виявляє застарілі та небезпечні lifecycle-методи."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Навмисно двічі викликає рендер і "
-                  },
-                  { "text": "useEffect", "code": true },
-                  {
-                    "text": " у dev-режимі для виявлення побічних ефектів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Попереджає про використання застарілого API."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Strict Mode корисний для раннього виявлення проблем, але може ускладнювати дебаг через подвійні виклики."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "78. What is React Strict Mode? Its benefits?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Strict Mode", "bold": true },
-              {
-                "text": " is a development-only tool in React that helps detect potential issues in the code. It has no effect in production."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Enabled by wrapping components with " },
-              { "text": "<React.StrictMode>", "code": true }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "root.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Benefits of Strict Mode" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Detects unsafe and deprecated lifecycle methods."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Intentionally double-invokes render and " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " to expose side effects." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Warns about deprecated APIs and patterns." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Strict Mode improves code quality but may complicate debugging due to intentional double renders."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "78. Czym jest tryb ścisły (Strict Mode) w React? Jakie są jego zalety?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Strict Mode", "bold": true },
-              {
-                "text": " to narzędzie React działające tylko w trybie developerskim, służące do wykrywania potencjalnych problemów."
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Aktywowany przez opakowanie w " },
-              { "text": "<React.StrictMode>", "code": true }
-            ]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "root.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety Strict Mode" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wykrywa przestarzałe i niebezpieczne metody cyklu życia."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podwójnie wywołuje render i " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " w celu wykrycia efektów ubocznych." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Ostrzega przed przestarzałym API." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Strict Mode poprawia jakość kodu, ale może utrudniać debugowanie."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 79,
-    "translations": {
-      "uk": {
-        "question": "79. Які рекомендовані способи перевірки статичних типів?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "TypeScript", "bold": true },
-                  {
-                    "text": " — основний інструмент статичної типізації для React. Перевіряє типи на етапі компіляції та запобігає більшості класів помилок."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "PropTypes", "bold": true },
-                  {
-                    "text": " — runtime-перевірка типів пропсів у React. Не є статичною типізацією."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "MyComponent.propTypes = {\n  name: PropTypes.string.isRequired,\n  age: PropTypes.number,\n};"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Flow", "bold": true },
-                  {
-                    "text": " — статична типізація для JavaScript. Менш поширений і поступається TypeScript."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ESLint з плагінами", "bold": true },
-                  {
-                    "text": " — допоміжний контроль типів, але не замінює повноцінну типізацію."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Рекомендований вибір — " },
-              { "text": "TypeScript", "bold": true },
-              { "text": ". Він дає реальну статичну типізацію." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "79. What are the recommended ways to check static types?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "TypeScript", "bold": true },
-                  {
-                    "text": " — the primary solution for static typing in React. Types are checked at compile time."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "PropTypes", "bold": true },
-                  {
-                    "text": " — runtime validation of React props. Not true static typing."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "MyComponent.propTypes = {\n  name: PropTypes.string.isRequired,\n  age: PropTypes.number,\n};"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Flow", "bold": true },
-                  {
-                    "text": " — a static type checker for JavaScript. Less common than TypeScript."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ESLint plugins", "bold": true },
-                  {
-                    "text": " — partial type-related checks, not a full typing system."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The recommended choice is " },
-              { "text": "TypeScript", "bold": true },
-              { "text": ". It provides real static typing." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "79. Jakie są zalecane sposoby sprawdzania typów statycznych?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "TypeScript", "bold": true },
-                  {
-                    "text": " — podstawowe narzędzie statycznej typizacji w React. Sprawdza typy podczas kompilacji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "PropTypes", "bold": true },
-                  {
-                    "text": " — walidacja typów propsów w czasie działania. To nie jest typizacja statyczna."
-                  },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "MyComponent.propTypes = {\n  name: PropTypes.string.isRequired,\n  age: PropTypes.number,\n};"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Flow", "bold": true },
-                  {
-                    "text": " — system typów dla JavaScript, obecnie rzadziej używany."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wtyczki ESLint", "bold": true },
-                  {
-                    "text": " — dodatkowa kontrola, ale bez pełnej typizacji."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Rekomendowane rozwiązanie to " },
-              { "text": "TypeScript", "bold": true },
-              { "text": ", bo daje pełną kontrolę typów." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 80,
-    "translations": {
-      "uk": {
-        "question": "80. Як реалізувати анімацію в React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS-анімації", "bold": true },
-                  { "text": " — простий варіант для базових ефектів." },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": ".box { animation: fadeIn 1s ease-in; }"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Transition Group", "bold": true },
-                  {
-                    "text": " — керування анімаціями при монтуванні та демонтуванні компонентів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Framer Motion", "bold": true },
-                  {
-                    "text": " — декларативна бібліотека для складних анімацій."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Spring", "bold": true },
-                  { "text": " — анімації з фізичною моделлю руху." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inline-стилі + state", "bold": true },
-                  { "text": " — керування стилями через стан компонента." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для складних сценаріїв доцільніше використовувати "
-              },
-              { "text": "Framer Motion", "bold": true },
-              { "text": " або " },
-              { "text": "React Spring", "bold": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "80. How can animations be implemented in React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "CSS animations", "bold": true },
-                  { "text": " — the simplest solution for basic effects." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Transition Group", "bold": true },
-                  { "text": " — animations for component mount and unmount." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Framer Motion", "bold": true },
-                  { "text": " — declarative animations for complex UI." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Spring", "bold": true },
-                  { "text": " — physics-based animation library." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Inline styles with state", "bold": true },
-                  { "text": " — animation driven by component state." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "For advanced animations, " },
-              { "text": "Framer Motion", "bold": true },
-              { "text": " or " },
-              { "text": "React Spring", "bold": true },
-              { "text": " are preferred." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "80. Jak zaimplementować animacje w React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Animacje CSS", "bold": true },
-                  { "text": " — najprostsze rozwiązanie." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Transition Group", "bold": true },
-                  {
-                    "text": " — animacje przy dodawaniu i usuwaniu komponentów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Framer Motion", "bold": true },
-                  { "text": " — biblioteka do złożonych animacji." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Spring", "bold": true },
-                  { "text": " — animacje oparte na fizyce." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Style inline i state", "bold": true },
-                  { "text": " — animowanie poprzez stan komponentu." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Do bardziej złożonych efektów warto użyć " },
-              { "text": "Framer Motion", "bold": true },
-              { "text": " lub " },
-              { "text": "React Spring", "bold": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 81,
-    "translations": {
-      "uk": {
-        "question": "81. Які самі популярні пакети для анімації у React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Популярні пакети для анімації в React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Framer Motion", "bold": true },
-                  {
-                    "text": " — де-факто стандарт для React-анімацій. Декларативний API, підтримка gesture, layout і complex transitions."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Spring", "bold": true },
-                  {
-                    "text": " — фізично базовані анімації з пружинами. Гнучкий, але складніший у контролі."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GSAP", "bold": true },
-                  {
-                    "text": " — надпотужна low-level бібліотека для складних таймлайнів і високої продуктивності."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Transition Group", "bold": true },
-                  {
-                    "text": " — базові анімації входу та виходу компонентів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lottie for React", "bold": true },
-                  {
-                    "text": " — відтворення JSON-анімацій з After Effects."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "81. What are the most popular animation libraries for React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Popular animation libraries for React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Framer Motion", "bold": true },
-                  {
-                    "text": " — the de facto standard for React animations. Declarative API with layout and gesture support."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Spring", "bold": true },
-                  {
-                    "text": " — physics-based animations using springs. Flexible but harder to reason about."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GSAP", "bold": true },
-                  {
-                    "text": " — extremely powerful low-level animation engine with timelines."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Transition Group", "bold": true },
-                  {
-                    "text": " — basic enter and exit transitions for components."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lottie for React", "bold": true },
-                  {
-                    "text": " — plays After Effects animations exported as JSON."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "81. Jakie są najpopularniejsze biblioteki animacji w React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Popularne biblioteki animacji w React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Framer Motion", "bold": true },
-                  {
-                    "text": " — standard dla animacji w React. Deklaratywne API i animacje layoutu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Spring", "bold": true },
-                  {
-                    "text": " — animacje oparte na fizyce i sprężynach."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GSAP", "bold": true },
-                  {
-                    "text": " — bardzo wydajna biblioteka do złożonych animacji i timeline’ów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Transition Group", "bold": true },
-                  {
-                    "text": " — animacje wejścia i wyjścia komponentów."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Lottie for React", "bold": true },
-                  {
-                    "text": " — odtwarzanie animacji JSON z After Effects."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 82,
-    "translations": {
-      "uk": {
-        "question": "82. React DevTools: Як використовувати для налагодження?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Встановлення", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Встанови розширення React Developer Tools для Chrome або Firefox."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Для Electron або React Native використай CLI."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вкладка Components", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Перегляд дерева компонентів." }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Інспекція props, state, context і хуків."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Тимчасове редагування state/props для перевірок."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Вкладка Profiler", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Запис і аналіз рендерів." }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Виявлення зайвих і дорогих рендерів." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Strict Mode", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Подвійні рендери у dev нормальні і допомагають знайти побічні ефекти."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Components для логіки і стану. Profiler для продуктивності."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "82. React DevTools: How to use it for debugging?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Installation", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Install React Developer Tools for Chrome or Firefox."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Use the CLI for Electron or React Native."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Components tab", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Inspect component tree." }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "View props, state, context, hooks." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Temporarily edit values for testing." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Profiler tab", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Record and analyze renders." }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Find unnecessary or expensive renders." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Strict Mode", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Double renders in dev are expected and intentional."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Use Components for logic and state. Use Profiler for performance."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "82. React DevTools: Jak używać do debugowania?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Instalacja", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Zainstaluj React Developer Tools dla Chrome lub Firefox."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Użyj CLI dla Electron lub React Native."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zakładka Components", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [{ "text": "Podgląd drzewa komponentów." }]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Inspekcja props, state, context i hooków."
-                          }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Tymczasowa edycja wartości do testów." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zakładka Profiler", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Nagrywanie i analiza renderów." }
-                        ]
-                      },
-                      {
-                        "type": "listItem",
-                        "children": [
-                          { "text": "Wykrywanie zbędnych renderów." }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Strict Mode", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Podwójne renderowanie w dev jest zamierzone."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Components do logiki i stanu. Profiler do wydajności."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 83,
-    "translations": {
-      "uk": {
-        "question": "83. Які самі популярні лінтери для React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Самі популярні лінтери для React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ESLint", "bold": true },
-                  { "text": " - найпоширеніший лінтер для " },
-                  { "text": "JavaScript", "code": true },
-                  { "text": ", який підтримує " },
-                  { "text": "React", "code": true },
-                  { "text": " через плагін " },
-                  { "text": "eslint-plugin-react", "code": true },
-                  {
-                    "text": ". Перевіряє стиль коду, знаходить помилки та інтегрується з іншими інструментами, зокрема "
-                  },
-                  { "text": "Prettier", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Prettier", "bold": true },
-                  {
-                    "text": " - інструмент автоматичного форматування коду, який часто використовують разом з "
-                  },
-                  { "text": "ESLint", "code": true },
-                  { "text": " для єдиного стилю." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "TSLint", "bold": true },
-                  { "text": " - лінтер для " },
-                  { "text": "TypeScript", "code": true },
-                  { "text": ", сумісний з " },
-                  { "text": "React", "code": true },
-                  { "text": ", але вважається застарілим і замінений на " },
-                  { "text": "ESLint", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Ці інструменти використовують для контролю якості коду та зниження кількості помилок."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "83. What are the most popular linters for React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Most popular linters for React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ESLint", "bold": true },
-                  { "text": " - the most widely used linter for " },
-                  { "text": "JavaScript", "code": true },
-                  { "text": ", supporting " },
-                  { "text": "React", "code": true },
-                  { "text": " via the " },
-                  { "text": "eslint-plugin-react", "code": true },
-                  {
-                    "text": " plugin. It enforces code style, detects errors, and integrates with tools like "
-                  },
-                  { "text": "Prettier", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Prettier", "bold": true },
-                  {
-                    "text": " - an automatic code formatter, commonly used together with "
-                  },
-                  { "text": "ESLint", "code": true },
-                  { "text": " to maintain consistent code style." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "TSLint", "bold": true },
-                  { "text": " - a linter for " },
-                  { "text": "TypeScript", "code": true },
-                  { "text": ", compatible with " },
-                  { "text": "React", "code": true },
-                  { "text": ", but now deprecated in favor of " },
-                  { "text": "ESLint", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "These tools help maintain code quality and reduce errors in large projects."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "83. Jakie są najpopularniejsze lintery dla React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Najpopularniejsze lintery dla React:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "ESLint", "bold": true },
-                  { "text": " - najczęściej używany linter dla " },
-                  { "text": "JavaScript", "code": true },
-                  { "text": ", obsługujący " },
-                  { "text": "React", "code": true },
-                  { "text": " dzięki wtyczce " },
-                  { "text": "eslint-plugin-react", "code": true },
-                  {
-                    "text": ". Wymusza styl kodu, wykrywa błędy i współpracuje z narzędziami takimi jak "
-                  },
-                  { "text": "Prettier", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Prettier", "bold": true },
-                  {
-                    "text": " - narzędzie do automatycznego formatowania kodu, często używane razem z "
-                  },
-                  { "text": "ESLint", "code": true },
-                  { "text": " w celu zachowania spójnego stylu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "TSLint", "bold": true },
-                  { "text": " - linter dla " },
-                  { "text": "TypeScript", "code": true },
-                  { "text": ", możliwy do użycia z " },
-                  { "text": "React", "code": true },
-                  { "text": ", lecz obecnie zastąpiony przez " },
-                  { "text": "ESLint", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Narzędzia te służą do utrzymania jakości kodu i ograniczania liczby błędów."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 84,
-    "translations": {
-      "uk": {
-        "question": "84. Що таке Next.js?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Next.js", "bold": true },
-              {
-                "text": " - це React-фреймворк, який надає готові рішення для серверного рендерингу (SSR), статичної генерації (SSG), API-роутів, маршрутизації, оптимізації продуктивності та SEO."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні можливості:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Гібридний рендеринг:", "bold": true },
-                  { "text": " підтримка SSR, SSG та ISR." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Автоматична маршрутизація:", "bold": true },
-                  { "text": " файли у pages/ автоматично стають маршрутами." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "API-роути:", "bold": true },
-                  { "text": " створення серверних ендпоінтів у pages/api/*." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оптимізація продуктивності:", "bold": true },
-                  { "text": " автоматичний код-сплітинг і зменшення бандлу." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Підтримка App Router:", "bold": true },
-                  {
-                    "text": " використання React Server Components і app/ замість pages/."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Вбудована підтримка Tailwind, TypeScript, ESLint та інших технологій",
-                    "bold": true
-                  },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Застосовується для створення продуктивних вебзастосунків, блогів, e-commerce та складних інтерфейсів."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "84. What is Next.js?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Next.js", "bold": true },
-              {
-                "text": " is a React framework that provides built-in solutions for server-side rendering (SSR), static site generation (SSG), API routes, routing, performance optimization, and SEO."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Key features:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hybrid rendering:", "bold": true },
-                  { "text": " support for SSR, SSG, and ISR." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automatic routing:", "bold": true },
-                  { "text": " files in pages/ become routes automatically." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "API routes:", "bold": true },
-                  { "text": " building backend endpoints in pages/api/*." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Performance optimization:", "bold": true },
-                  { "text": " automatic code splitting and smaller bundles." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "App Router support:", "bold": true },
-                  {
-                    "text": " based on React Server Components and the app/ directory."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Built-in support for Tailwind, TypeScript, ESLint, and other tools",
-                    "bold": true
-                  },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Used to build high-performance web applications, blogs, e-commerce platforms, and complex user interfaces."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "84. Czym jest Next.js?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Next.js", "bold": true },
-              {
-                "text": " to framework React oferujący gotowe rozwiązania dla renderowania po stronie serwera (SSR), generowania statycznego (SSG), tras API, routingu, optymalizacji wydajności oraz SEO."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne możliwości:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Renderowanie hybrydowe:", "bold": true },
-                  { "text": " obsługa SSR, SSG oraz ISR." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automatyczny routing:", "bold": true },
-                  { "text": " pliki w pages/ automatycznie stają się trasami." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Trasy API:", "bold": true },
-                  {
-                    "text": " tworzenie endpointów backendowych w pages/api/*."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optymalizacja wydajności:", "bold": true },
-                  {
-                    "text": " automatyczny podział kodu i mniejsze bundlowanie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Obsługa App Router:", "bold": true },
-                  {
-                    "text": " podejście oparte na React Server Components i katalogu app/."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Wbudowana obsługa Tailwind, TypeScript, ESLint i innych technologii",
-                    "bold": true
-                  },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Stosowany do budowy wydajnych aplikacji webowych, blogów, e-commerce oraz złożonych interfejsów."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 85,
-    "translations": {
-      "uk": {
-        "question": "85. Які головні відмінності між Next.js і React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Головні відмінності між Next.js і React:" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Критерій", "bold": true }],
-              [{ "text": "React", "bold": true }],
-              [{ "text": "Next.js", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Тип", "bold": true }],
-                [{ "text": "Бібліотека для створення UI" }],
-                [{ "text": "Фреймворк на базі React" }]
-              ],
-              [
-                [{ "text": "Рендеринг", "bold": true }],
-                [{ "text": "Тільки клієнтський (CSR)" }],
-                [{ "text": "Підтримує CSR, SSR, SSG, ISR" }]
-              ],
-              [
-                [{ "text": "Маршрутизація", "bold": true }],
-                [{ "text": "Реалізується вручну через React Router" }],
-                [
-                  { "text": "Файлова маршрутизація (" },
-                  { "text": "pages/", "code": true },
-                  { "text": " або " },
-                  { "text": "app/", "code": true },
-                  { "text": ")" }
-                ]
-              ],
-              [
-                [{ "text": "SEO", "bold": true }],
-                [{ "text": "Обмежена підтримка через CSR" }],
-                [{ "text": "Повноцінна підтримка SEO (SSR, SSG)" }]
-              ],
-              [
-                [{ "text": "API-роути", "bold": true }],
-                [{ "text": "Відсутні" }],
-                [
-                  { "text": "Вбудовані API-ендпоінти (" },
-                  { "text": "pages/api/", "code": true },
-                  { "text": ")" }
-                ]
-              ],
-              [
-                [{ "text": "Кешування", "bold": true }],
-                [{ "text": "Немає вбудованих механізмів" }],
-                [
-                  {
-                    "text": "ISR для оновлення сторінок без повної регенерації"
-                  }
-                ]
-              ],
-              [
-                [{ "text": "Оптимізація продуктивності", "bold": true }],
-                [{ "text": "Покладається на сторонні рішення" }],
-                [{ "text": "Вбудовані оптимізації та код-сплітинг" }]
-              ],
-              [
-                [{ "text": "Серверні компоненти", "bold": true }],
-                [{ "text": "Залежить від налаштувань" }],
-                [
-                  { "text": "Вбудована підтримка React Server Components (" },
-                  { "text": "app/", "code": true },
-                  { "text": ")" }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Висновок:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React", "bold": true },
-                  { "text": " підходить для клієнтських SPA." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Next.js", "bold": true },
-                  {
-                    "text": " орієнтований на SEO, гібридний рендеринг та продуктивність."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "85. What are the main differences between Next.js and React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Main differences between Next.js and React:" }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Criteria", "bold": true }],
-              [{ "text": "React", "bold": true }],
-              [{ "text": "Next.js", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Type", "bold": true }],
-                [{ "text": "UI library" }],
-                [{ "text": "Framework built on React" }]
-              ],
-              [
-                [{ "text": "Rendering", "bold": true }],
-                [{ "text": "Client-side only (CSR)" }],
-                [{ "text": "Supports CSR, SSR, SSG, ISR" }]
-              ],
-              [
-                [{ "text": "Routing", "bold": true }],
-                [{ "text": "Manual setup via React Router" }],
-                [
-                  { "text": "File-based routing (" },
-                  { "text": "pages/", "code": true },
-                  { "text": " or " },
-                  { "text": "app/", "code": true },
-                  { "text": ")" }
-                ]
-              ],
-              [
-                [{ "text": "SEO", "bold": true }],
-                [{ "text": "Limited due to CSR" }],
-                [{ "text": "Strong SEO support (SSR, SSG)" }]
-              ],
-              [
-                [{ "text": "API routes", "bold": true }],
-                [{ "text": "Not available" }],
-                [
-                  { "text": "Built-in API endpoints (" },
-                  { "text": "pages/api/", "code": true },
-                  { "text": ")" }
-                ]
-              ],
-              [
-                [{ "text": "Caching", "bold": true }],
-                [{ "text": "No built-in mechanisms" }],
-                [{ "text": "ISR for incremental page updates" }]
-              ],
-              [
-                [{ "text": "Performance optimization", "bold": true }],
-                [{ "text": "Relies on external tools" }],
-                [{ "text": "Built-in optimizations and code splitting" }]
-              ],
-              [
-                [{ "text": "Server Components", "bold": true }],
-                [{ "text": "Configuration dependent" }],
-                [
-                  { "text": "Native support for React Server Components (" },
-                  { "text": "app/", "code": true },
-                  { "text": ")" }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Conclusion:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React", "bold": true },
-                  { "text": " fits client-rendered SPAs." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Next.js", "bold": true },
-                  {
-                    "text": " is better for SEO-focused and high-performance applications."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "85. Jakie są główne różnice między Next.js a React?",
-        "answerBlocks": [
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne różnice między Next.js a React:" }]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Kryterium", "bold": true }],
-              [{ "text": "React", "bold": true }],
-              [{ "text": "Next.js", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Typ", "bold": true }],
-                [{ "text": "Biblioteka UI" }],
-                [{ "text": "Framework oparty na React" }]
-              ],
-              [
-                [{ "text": "Renderowanie", "bold": true }],
-                [{ "text": "Tylko po stronie klienta (CSR)" }],
-                [{ "text": "CSR, SSR, SSG, ISR" }]
-              ],
-              [
-                [{ "text": "Routing", "bold": true }],
-                [{ "text": "Konfiguracja ręczna (React Router)" }],
-                [
-                  { "text": "Routing plikowy (" },
-                  { "text": "pages/", "code": true },
-                  { "text": " lub " },
-                  { "text": "app/", "code": true },
-                  { "text": ")" }
-                ]
-              ],
-              [
-                [{ "text": "SEO", "bold": true }],
-                [{ "text": "Ograniczone przez CSR" }],
-                [{ "text": "Dobra obsługa SEO (SSR, SSG)" }]
-              ],
-              [
-                [{ "text": "Trasy API", "bold": true }],
-                [{ "text": "Brak" }],
-                [
-                  { "text": "Wbudowane endpointy API (" },
-                  { "text": "pages/api/", "code": true },
-                  { "text": ")" }
-                ]
-              ],
-              [
-                [{ "text": "Cache", "bold": true }],
-                [{ "text": "Brak mechanizmów wbudowanych" }],
-                [{ "text": "ISR umożliwiający częściowe odświeżanie" }]
-              ],
-              [
-                [{ "text": "Optymalizacja wydajności", "bold": true }],
-                [{ "text": "Zależna od narzędzi zewnętrznych" }],
-                [{ "text": "Wbudowane optymalizacje i code splitting" }]
-              ],
-              [
-                [{ "text": "Komponenty serwerowe", "bold": true }],
-                [{ "text": "Zależne od konfiguracji" }],
-                [
-                  { "text": "Natywna obsługa React Server Components (" },
-                  { "text": "app/", "code": true },
-                  { "text": ")" }
-                ]
-              ]
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wniosek:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React", "bold": true },
-                  { "text": " sprawdzi się w SPA po stronie klienta." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Next.js", "bold": true },
-                  {
-                    "text": " jest lepszy dla SEO i aplikacji o wysokiej wydajności."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 86,
-    "translations": {
-      "uk": {
-        "question": "86. Для чого потрібен React Helmet Async?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React Helmet Async", "bold": true },
-              { "text": " - це оптимізована версія " },
-              { "text": "React Helmet", "bold": true },
-              { "text": ", яка використовується для динамічного оновлення " },
-              { "text": "<head>", "code": true },
-              {
-                "text": " (мета-теги, заголовки, Open Graph тощо) у React-додатках."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Навіщо потрібен?" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO-оптимізація", "bold": true },
-                  {
-                    "text": " – динамічна зміна title, meta description, ключових слів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Динамічний `<head>`", "bold": true },
-                  { "text": " – керування head без перезавантаження сторінки." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Підтримка SSR", "bold": true },
-                  {
-                    "text": " – коректна робота в SSR без асинхронних конфліктів."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад використання:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { Helmet } from 'react-helmet-async';\n\nfunction MyComponent() {\n  return (\n    <Helmet>\n      <title>Головна сторінка</title>\n      <meta name=\"description\" content=\"Це опис для головної сторінки\" />\n    </Helmet>\n  );\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "SSR (Next.js, Express):" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { HelmetProvider, Helmet } from 'react-helmet-async';\n\nconst helmetContext = {};\nconst html = renderToString(\n  <HelmetProvider context={helmetContext}>\n    <App />\n  </HelmetProvider>\n);\nconst { helmet } = helmetContext;"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [
-              { "text": "Чому краще за " },
-              { "text": "react-helmet", "code": true },
-              { "text": "?" }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Працює з SSR без помилок асинхронності." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Легший і швидший." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Сумісний з " },
-                  { "text": "StrictMode", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Висновок:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для React-додатків з SEO та SSR варто використовувати "
-              },
-              { "text": "react-helmet-async", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "86. What is React Helmet Async used for?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React Helmet Async", "bold": true },
-              { "text": " is an optimized version of " },
-              { "text": "React Helmet", "bold": true },
-              { "text": " used to dynamically manage the " },
-              { "text": "<head>", "code": true },
-              {
-                "text": " section (meta tags, titles, Open Graph) in React applications."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Why is it needed?" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SEO optimization", "bold": true },
-                  { "text": " – dynamic control over title and meta tags." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dynamic `<head>`", "bold": true },
-                  { "text": " – page-level head management without reloads." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "SSR support", "bold": true },
-                  { "text": " – works correctly with server-side rendering." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Usage example:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "import { Helmet } from 'react-helmet-async';\n\nfunction MyComponent() {\n  return (\n    <Helmet>\n      <title>Home page</title>\n      <meta name=\"description\" content=\"Home page description\" />\n    </Helmet>\n  );\n}"
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Why better than react-helmet?" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              { "type": "listItem", "children": [{ "text": "Safe for SSR." }] },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Smaller and faster." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Compatible with " },
-                  { "text": "StrictMode", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Conclusion:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "For React apps with SSR and SEO requirements, use " },
-              { "text": "react-helmet-async", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "86. Do czego służy React Helmet Async?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React Helmet Async", "bold": true },
-              { "text": " to zoptymalizowana wersja " },
-              { "text": "React Helmet", "bold": true },
-              { "text": " do dynamicznego zarządzania sekcją " },
-              { "text": "<head>", "code": true },
-              {
-                "text": " (meta tagi, tytuły, Open Graph) w aplikacjach React."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Dlaczego jest potrzebny?" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optymalizacja SEO", "bold": true },
-                  { "text": " – dynamiczne zarządzanie meta danymi." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dynamiczny `<head>`", "bold": true },
-                  { "text": " – zmiany bez przeładowania strony." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wsparcie SSR", "bold": true },
-                  {
-                    "text": " – poprawne działanie z renderowaniem po stronie serwera."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Dlaczego lepszy od react-helmet?" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Bezpieczny dla SSR." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Lżejszy i szybszy." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Działa poprawnie z " },
-                  { "text": "StrictMode", "code": true },
-                  { "text": "." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wniosek:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Dla aplikacji React z SEO i SSR należy używać " },
-              { "text": "react-helmet-async", "code": true },
-              { "text": "." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 87,
-    "translations": {
-      "uk": {
-        "question": "87. Що таке розподілений компонент (Distributed Component)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Розподілений компонент (Distributed Component)",
-                "bold": true
-              },
-              {
-                "text": " - це архітектурна концепція, за якої компонент поділяється на незалежні частини, що можуть виконуватися або рендеритися окремо, але логічно працюють як єдине ціле."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклади реалізації:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Код-сплітинг (Code Splitting)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Компоненти завантажуються лише за потреби, що зменшує початковий розмір бандла."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Container-Presentational Pattern", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Розділення бізнес-логіки та UI для кращої підтримки та повторного використання."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Мікрофронтенди (Micro Frontends)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Автономні частини інтерфейсу, що розробляються та деплояться незалежно."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Коли використовувати:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для оптимізації продуктивності та зменшення початкового завантаження."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Для відокремлення логіки від відображення." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Для масштабованих та командно-орієнтованих проєктів."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "87. What is a Distributed Component?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "A Distributed Component", "bold": true },
-              {
-                "text": " is an architectural concept where a component is split into independent parts that can render or execute logic separately while functioning as a single unit."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Implementation examples:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Code Splitting", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Components are loaded only when needed, reducing initial bundle size."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Container-Presentational Pattern", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Separates business logic from UI for better maintainability."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Micro Frontends", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Independent UI parts developed and deployed separately."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "When to use:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "To improve performance via lazy loading." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "To simplify code maintenance and reuse." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "For large-scale and team-distributed applications."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "87. Czym jest komponent rozproszony (Distributed Component)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Komponent rozproszony (Distributed Component)",
-                "bold": true
-              },
-              {
-                "text": " to koncepcja architektoniczna, w której komponent jest podzielony na niezależne części działające osobno, ale razem tworzące spójną całość."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykłady zastosowania:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Code Splitting", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Komponenty są ładowane tylko wtedy, gdy są potrzebne."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wzorzec Container-Presentational", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Oddzielenie logiki aplikacji od warstwy wizualnej."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mikrofrontendy (Micro Frontends)", "bold": true },
-                  {
-                    "type": "bulletList",
-                    "children": [
-                      {
-                        "type": "listItem",
-                        "children": [
-                          {
-                            "text": "Niezależne części interfejsu rozwijane przez różne zespoły."
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Kiedy stosować:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "W celu poprawy wydajności i czasu ładowania." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Dla lepszej struktury i utrzymania kodu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "W dużych i skalowalnych aplikacjach." }]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 88,
-    "translations": {
-      "uk": {
-        "question": "88. Що таке компонент-перемикач (Switching Component)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Компонент-перемикач (Switching Component)",
-                "bold": true
-              },
-              {
-                "text": " — це патерн у React, за якого компонент умовно рендерить один із дочірніх компонентів залежно від стану, пропсів, маршруту або даних."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад: перемикання за умовою" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const SwitchingComponent = ({ type }) => {\n  switch (type) {\n    case 'success': return <SuccessMessage />;\n    case 'error': return <ErrorMessage />;\n    default: return <DefaultMessage />;\n  }\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Такий підхід централізує умовний рендеринг і спрощує підтримку коду."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "88. What is a Switching Component?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "A Switching Component", "bold": true },
-              {
-                "text": " is a React pattern where a component conditionally renders one of its child components based on state, props, routes, or data."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example: conditional switching" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const SwitchingComponent = ({ type }) => {\n  switch (type) {\n    case 'success': return <SuccessMessage />;\n    case 'error': return <ErrorMessage />;\n    default: return <DefaultMessage />;\n  }\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This pattern keeps conditional rendering explicit and easier to maintain."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "88. Czym jest komponent przełączający (Switching Component)?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Komponent przełączający (Switching Component)",
-                "bold": true
-              },
-              {
-                "text": " to wzorzec w React, w którym komponent renderuje różne komponenty potomne w zależności od warunku, stanu lub danych."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład: renderowanie warunkowe" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const SwitchingComponent = ({ type }) => {\n  switch (type) {\n    case 'success': return <SuccessMessage />;\n    case 'error': return <ErrorMessage />;\n    default: return <DefaultMessage />;\n  }\n};"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wzorzec ten porządkuje logikę warunkową i poprawia czytelność kodu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 89,
-    "translations": {
-      "uk": {
-        "question": "89. Що таке Reselect та як він працює?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reselect", "bold": true },
-              {
-                "text": " - це бібліотека для створення мемоізованих селекторів у Redux. Вона оптимізує отримання похідних даних зі стану та зменшує кількість зайвих рендерів."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як працює Reselect?" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reselect використовує ", "text2": null },
-              { "text": "мемоізацію", "bold": true },
-              {
-                "text": ", щоб повторно використовувати результат обчислень, якщо вхідні дані не змінилися."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Input-селектори", "bold": true },
-                  { "text": " отримують дані зі state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Результуючий селектор", "bold": true },
-                  { "text": " обчислює похідні дані." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Результат кешується", "bold": true },
-                  { "text": " і перевикористовується при незмінних входах." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Переваги:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Менше обчислень при кожному рендері." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Менше непотрібних рендерів компонентів." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Покращення продуктивності Redux-додатків." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "89. What is Reselect and how does it work?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reselect", "bold": true },
-              {
-                "text": " is a library for creating memoized selectors in Redux. It optimizes derived data access and reduces unnecessary re-renders."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How does Reselect work?" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reselect uses ", "text2": null },
-              { "text": "memoization", "bold": true },
-              {
-                "text": " to reuse computed results when input data has not changed."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Input selectors", "bold": true },
-                  { "text": " read data from the state." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Result selector", "bold": true },
-                  { "text": " computes derived values." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Results are cached", "bold": true },
-                  { "text": " and reused when inputs are unchanged." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Benefits:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Fewer computations per render." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Prevents unnecessary component re-renders." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Improves Redux application performance." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "89. Czym jest Reselect i jak działa?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reselect", "bold": true },
-              {
-                "text": " to biblioteka do tworzenia memoizowanych selektorów w Redux. Służy do optymalizacji obliczeń i ograniczenia zbędnych renderów."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak działa Reselect?" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Reselect wykorzystuje ", "text2": null },
-              { "text": "memoizację", "bold": true },
-              {
-                "text": ", aby ponownie używać wyników obliczeń, jeśli dane wejściowe się nie zmieniły."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selektory wejściowe", "bold": true },
-                  { "text": " pobierają dane ze stanu." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Selektor wynikowy", "bold": true },
-                  { "text": " oblicza dane pochodne." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wyniki są buforowane", "bold": true },
-                  { "text": " i używane ponownie przy tych samych danych." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Zalety:" }]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Mniej zbędnych obliczeń." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Mniej niepotrzebnych renderów komponentów." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Lepsza wydajność aplikacji Redux." }]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 90,
-    "translations": {
-      "uk": {
-        "question": "90. Які типи даних може повернути render?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Метод " },
-              { "text": "render()", "code": true },
-              { "text": " у React може повертати:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JSX або React-елемент", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "render() {\n  return <div>Hello, World!</div>;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Масив елементів", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "render() {\n  return [\n    <li key=\"1\">Item 1</li>,\n    <li key=\"2\">Item 2</li>\n  ];\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Фрагменти (React.Fragment)", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "render() {\n  return (\n    <>\n      <h1>Title</h1>\n      <p>Description</p>\n    </>\n  );\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "null", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "render() {\n  return null;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Булеві значення", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "render() {\n  return false;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Рядки та числа", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "render() {\n  return \"Hello, World!\";\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Портали", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import { createPortal } from 'react-dom';\n\nrender() {\n  return createPortal(\n    <div>Modal</div>,\n    document.getElementById('modal-root')\n  );\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Найчастіше render повертає JSX, але React підтримує й інші типи для гнучкого рендерингу."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "90. What data types can render return?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "The " },
-              { "text": "render()", "code": true },
-              { "text": " method in React can return:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "JSX or a React element", "bold": true }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "An array of elements", "bold": true }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Fragments (React.Fragment)", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "null", "bold": true }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Boolean values (ignored)", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Strings and numbers", "bold": true }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Portals", "bold": true }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "JSX is the common case, but React supports multiple return types for flexible rendering."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "90. Jakie typy danych może zwrócić render?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Metoda " },
-              { "text": "render()", "code": true },
-              { "text": " w React może zwracać:" }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "JSX lub element React", "bold": true }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Tablicę elementów", "bold": true }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Fragmenty (React.Fragment)", "bold": true }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "null", "bold": true }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Wartości logiczne", "bold": true }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Tekst i liczby", "bold": true }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Portale", "bold": true }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Najczęściej zwracany jest JSX, ale React dopuszcza wiele form renderowania."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 91,
-    "translations": {
-      "uk": {
-        "question": "91. Як React обробляє чи обмежує використання пропсів певного типу?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React обмежує типи пропсів за допомогою " },
-              { "text": "PropTypes", "code": true },
-              { "text": " або " },
-              { "text": "TypeScript", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "PropTypes", "bold": true },
-                  { "text": " — runtime-перевірка типів у JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "TypeScript", "bold": true },
-                  { "text": " — статична перевірка типів на етапі компіляції." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Висновок:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "TypeScript забезпечує суворий контроль до запуску коду. PropTypes дає лише попередження під час виконання."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "91. How does React handle or restrict props of specific types?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React restricts prop types using " },
-              { "text": "PropTypes", "code": true },
-              { "text": " or " },
-              { "text": "TypeScript", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "PropTypes", "bold": true },
-                  { "text": " — runtime type checking in JavaScript." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "TypeScript", "bold": true },
-                  { "text": " — compile-time static type checking." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Conclusion:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "TypeScript prevents invalid props before runtime. PropTypes only warns during execution."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "91. Jak React ogranicza użycie propsów określonego typu?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React ogranicza typy propsów za pomocą " },
-              { "text": "PropTypes", "code": true },
-              { "text": " lub " },
-              { "text": "TypeScript", "code": true },
-              { "text": "." }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "PropTypes", "bold": true },
-                  { "text": " — sprawdzanie typów w czasie działania." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "TypeScript", "bold": true },
-                  {
-                    "text": " — statyczna kontrola typów na etapie kompilacji."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Wniosek:" }]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "TypeScript wykrywa błędy wcześniej. PropTypes daje tylko ostrzeżenia w runtime."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 92,
-    "translations": {
-      "uk": {
-        "question": "92. Різниця між рендерингом та монтуванням?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Різниця між рендерингом та монтуванням у React." }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Процес", "bold": true }],
-              [{ "text": "Опис", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Монтування (Mounting)", "bold": true }],
-                [
-                  {
-                    "text": "Компонент створюється і додається в DOM вперше. Викликаються "
-                  },
-                  { "text": "constructor", "code": true },
-                  { "text": ", " },
-                  { "text": "render", "code": true },
-                  { "text": ", " },
-                  { "text": "componentDidMount", "code": true },
-                  { "text": " або " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " з порожнім масивом залежностей." }
-                ]
-              ],
-              [
-                [{ "text": "Рендеринг (Rendering)", "bold": true }],
-                [
-                  { "text": "Оновлення UI через повторний виклик " },
-                  { "text": "render()", "code": true },
-                  { "text": " або функціонального компонента при зміні " },
-                  { "text": "state", "code": true },
-                  { "text": " чи " },
-                  { "text": "props", "code": true },
-                  { "text": "." }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "92. What is the difference between rendering and mounting?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The difference between rendering and mounting in React."
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Process", "bold": true }],
-              [{ "text": "Description", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Mounting", "bold": true }],
-                [
-                  {
-                    "text": "The component is created and inserted into the DOM for the first time. Calls include "
-                  },
-                  { "text": "constructor", "code": true },
-                  { "text": ", " },
-                  { "text": "render", "code": true },
-                  { "text": ", " },
-                  { "text": "componentDidMount", "code": true },
-                  { "text": " or " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " with an empty dependency array." }
-                ]
-              ],
-              [
-                [{ "text": "Rendering", "bold": true }],
-                [
-                  { "text": "UI updates via repeated calls to " },
-                  { "text": "render()", "code": true },
-                  {
-                    "text": " or re execution of a functional component when "
-                  },
-                  { "text": "state", "code": true },
-                  { "text": " or " },
-                  { "text": "props", "code": true },
-                  { "text": " change." }
-                ]
-              ]
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "92. Jaka jest różnica między renderowaniem a montowaniem?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Różnica między renderowaniem a montowaniem w React."
-              }
-            ]
-          },
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Proces", "bold": true }],
-              [{ "text": "Opis", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "Montowanie (Mounting)", "bold": true }],
-                [
-                  {
-                    "text": "Komponent jest tworzony i po raz pierwszy dodawany do DOM. Wywoływane są "
-                  },
-                  { "text": "constructor", "code": true },
-                  { "text": ", " },
-                  { "text": "render", "code": true },
-                  { "text": ", " },
-                  { "text": "componentDidMount", "code": true },
-                  { "text": " lub " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " z pustą tablicą zależności." }
-                ]
-              ],
-              [
-                [{ "text": "Renderowanie (Rendering)", "bold": true }],
-                [
-                  { "text": "Aktualizacja UI poprzez ponowne wywołanie " },
-                  { "text": "render()", "code": true },
-                  { "text": " lub funkcji komponentu przy zmianie " },
-                  { "text": "state", "code": true },
-                  { "text": " albo " },
-                  { "text": "props", "code": true },
-                  { "text": "." }
-                ]
-              ]
-            ]
-          }
-        ]
-      }
-    }
-  },
-
-  {
-    "category": "react",
-    "order": 93,
-    "translations": {
-      "uk": {
-        "question": "93. Що таке реактивний потік даних (reactive data flow) у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Реактивний потік даних (Reactive Data Flow) у React",
-                "bold": true
-              },
-              {
-                "text": " означає, що зміни в стані або пропсах автоматично призводять до оновлення UI без ручного керування ререндерингом."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні принципи:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Односторонній потік даних", "bold": true },
-                  { "text": " – дані передаються зверху вниз." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Декларативність", "bold": true },
-                  {
-                    "text": " – описується результат, а не процес оновлення."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Автоматичний ререндер", "bold": true },
-                  { "text": " – UI оновлюється при зміні state або props." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "93. What is reactive data flow in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Reactive data flow in React",
-                "bold": true
-              },
-              {
-                "text": " means that changes in state or props automatically trigger UI updates without manual re rendering."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Core principles:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "One way data flow", "bold": true },
-                  { "text": " – data flows from parent to child components." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Declarative model", "bold": true },
-                  {
-                    "text": " – developers describe what to render, not how."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automatic updates", "bold": true },
-                  { "text": " – UI updates when state or props change." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "93. Czym jest reaktywny przepływ danych w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Reaktywny przepływ danych w React",
-                "bold": true
-              },
-              {
-                "text": " oznacza, że zmiany stanu lub propsów automatycznie powodują aktualizację interfejsu użytkownika."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne zasady:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jednokierunkowy przepływ danych", "bold": true },
-                  { "text": " – dane przekazywane są z góry w dół." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Deklaratywność", "bold": true },
-                  {
-                    "text": " – opisujemy rezultat, a nie mechanizm aktualizacji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automatyczne renderowanie", "bold": true },
-                  {
-                    "text": " – UI aktualizuje się przy zmianie state lub props."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-
-  {
-    "category": "react",
-    "order": 94,
-    "translations": {
-      "uk": {
-        "question": "94. Чи є React реактивним?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React не є повністю реактивною бібліотекою. Він використовує реактивні ідеї, але реалізує їх через власну модель рендерингу."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Автоматичне оновлення UI", "bold": true },
-                  {
-                    "text": " – UI оновлюється при зміні state або props через повторний рендер."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Хуки та функціональні компоненти",
-                    "bold": true
-                  },
-                  {
-                    "text": " – "
-                  },
-                  { "text": "useState", "code": true },
-                  { "text": ", " },
-                  { "text": "useEffect", "code": true },
-                  {
-                    "text": " створюють реактивну поведінку, але без автоматичних спостерігачів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Обмежена реактивність", "bold": true },
-                  {
-                    "text": " – React реагує лише на зміни state і props, а не на довільні змінні."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React реактивний на рівні UI, але не є повністю реактивним фреймворком."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "94. Is React reactive?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React is not a fully reactive library. It applies reactive ideas through its rendering model."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automatic UI updates", "bold": true },
-                  {
-                    "text": " – the UI updates when state or props change via re rendering."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hooks and functional components", "bold": true },
-                  { "text": " – " },
-                  { "text": "useState", "code": true },
-                  { "text": ", " },
-                  { "text": "useEffect", "code": true },
-                  {
-                    "text": " enable reactive behavior without automatic dependency tracking."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Limited reactivity", "bold": true },
-                  {
-                    "text": " – React reacts only to state and props changes, not arbitrary variables."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React is reactive at the UI level but not a fully reactive framework."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "94. Czy React jest reaktywny?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React nie jest w pełni reaktywną biblioteką. Wykorzystuje idee reaktywności poprzez własny mechanizm renderowania."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Automatyczna aktualizacja UI", "bold": true },
-                  {
-                    "text": " – interfejs aktualizuje się przy zmianie state lub props."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hooki i komponenty funkcyjne", "bold": true },
-                  { "text": " – " },
-                  { "text": "useState", "code": true },
-                  { "text": ", " },
-                  { "text": "useEffect", "code": true },
-                  {
-                    "text": " zapewniają reaktywność bez automatycznego śledzenia zależności."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ograniczona reaktywność", "bold": true },
-                  {
-                    "text": " – React reaguje wyłącznie na zmiany state i props."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React jest reaktywny na poziomie UI, ale nie jest w pełni reaktywnym frameworkiem."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 95,
-    "translations": {
-      "uk": {
-        "question": "95. Які варіанти реалізації drag-and-drop у React ти знаєш?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Drag-and-drop у React можна реалізувати кількома підходами, від нативних API до спеціалізованих бібліотек."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HTML5 Drag-and-Drop API", "bold": true },
-                  { "text": " – нативні події браузера." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "react-dnd", "bold": true },
-                  { "text": " – гнучка бібліотека для складних сценаріїв." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "dnd-kit", "bold": true },
-                  { "text": " – сучасне та легке рішення." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Вибір підходу залежить від складності drag-and-drop логіки та вимог до контролю."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "95. What drag-and-drop implementation options do you know in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Drag and drop in React can be implemented using native browser APIs or dedicated libraries."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HTML5 Drag-and-Drop API", "bold": true },
-                  { "text": " – built in browser events." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "react-dnd", "bold": true },
-                  { "text": " – flexible solution for complex use cases." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "dnd-kit", "bold": true },
-                  { "text": " – modern and lightweight alternative." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The choice depends on the required complexity and level of control."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "95. Jakie znasz sposoby implementacji drag-and-drop w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Drag-and-drop w React można zaimplementować przy użyciu natywnych API lub bibliotek zewnętrznych."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "HTML5 Drag-and-Drop API", "bold": true },
-                  { "text": " – wbudowane mechanizmy przeglądarki." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "react-dnd", "bold": true },
-                  {
-                    "text": " – elastyczna biblioteka do złożonych przypadków."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "dnd-kit", "bold": true },
-                  { "text": " – nowoczesne i lekkie rozwiązanie." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Wybór zależy od złożoności logiki i potrzebnej kontroli."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 96,
-    "translations": {
-      "uk": {
-        "question": "96. Як відрендерити HTML код у React-компоненті?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Для рендерингу HTML у React використовується " },
-              { "text": "dangerouslySetInnerHTML", "code": true },
-              {
-                "text": ". Це небезпечно при роботі з несанітизованими даними через ризик XSS."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function MyComponent() {\n  const htmlContent = \"<p style='color:red;'>Це HTML-код</p>\";\n\n  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "HTML з зовнішніх джерел потрібно обовʼязково санітизувати."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "96. How do you render HTML code in a React component?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "To render raw HTML in React, use " },
-              { "text": "dangerouslySetInnerHTML", "code": true },
-              {
-                "text": ". It is unsafe when used with unsanitized input due to XSS risks."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function MyComponent() {\n  const htmlContent = \"<p style='color:red;'>This is HTML</p>\";\n\n  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Always sanitize dynamic HTML before rendering." }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "96. Jak wyrenderować kod HTML w komponencie React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Do renderowania HTML w React używa się " },
-              { "text": "dangerouslySetInnerHTML", "code": true },
-              {
-                "text": ". Jest to niebezpieczne przy danych niesanitizowanych ze względu na XSS."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "function MyComponent() {\n  const htmlContent = \"<p style='color:red;'>To jest HTML</p>\";\n\n  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;\n}"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Dynamiczny HTML musi być wcześniej sanitizowany." }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 97,
-    "translations": {
-      "uk": {
-        "question": "97. Як реалізувати додавання класу за умовою в React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У React умовне додавання CSS класів виконується через "
-              },
-              { "text": "className", "code": true },
-              { "text": " з використанням умовної логіки." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Основні підходи:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Тернарний оператор", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent({ isActive }) {\n  return <div className={isActive ? 'active' : 'inactive'}>Hello</div>;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Шаблонні рядки", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent({ isHighlighted }) {\n  return <div className={`base ${isHighlighted ? 'highlighted' : ''}`}>Hello</div>;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Бібліотека clsx", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import clsx from 'clsx';\n\nfunction MyComponent({ isActive, isDisabled }) {\n  return (\n    <div className={clsx('base', { active: isActive, disabled: isDisabled })}>Hello</div>\n  );\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Для складних умов використання бібліотек підвищує читабельність коду."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "97. How do you conditionally add a class in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "In React, conditional class assignment is done via " },
-              { "text": "className", "code": true },
-              { "text": " combined with conditional logic." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Common approaches:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ternary operator", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent({ isActive }) {\n  return <div className={isActive ? 'active' : 'inactive'}>Hello</div>;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Template literals", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent({ isHighlighted }) {\n  return <div className={`base ${isHighlighted ? 'highlighted' : ''}`}>Hello</div>;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "clsx library", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import clsx from 'clsx';\n\nfunction MyComponent({ isActive, isDisabled }) {\n  return (\n    <div className={clsx('base', { active: isActive, disabled: isDisabled })}>Hello</div>\n  );\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Libraries are preferred when conditional logic becomes complex."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "97. Jak warunkowo dodać klasę w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W React warunkowe dodawanie klas CSS odbywa się przez "
-              },
-              { "text": "className", "code": true },
-              { "text": " z użyciem logiki warunkowej." }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Główne podejścia:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Operator trójargumentowy", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent({ isActive }) {\n  return <div className={isActive ? 'active' : 'inactive'}>Hello</div>;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Template stringi", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "function MyComponent({ isHighlighted }) {\n  return <div className={`base ${isHighlighted ? 'highlighted' : ''}`}>Hello</div>;\n}"
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Biblioteka clsx", "bold": true },
-                  {
-                    "type": "code",
-                    "language": "jsx",
-                    "content": "import clsx from 'clsx';\n\nfunction MyComponent({ isActive, isDisabled }) {\n  return (\n    <div className={clsx('base', { active: isActive, disabled: isDisabled })}>Hello</div>\n  );\n}"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Przy bardziej złożonych warunkach biblioteki poprawiają czytelność kodu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 98,
-    "translations": {
-      "uk": {
-        "question": "98. Як виконати код перед видаленням компонента з дерева?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "У React код перед видаленням компонента виконується через спеціальні хуки або методи життєвого циклу."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Класові компоненти", "bold": true },
-                  { "text": " – використовується метод " },
-                  { "text": "componentWillUnmount", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Функціональні компоненти", "bold": true },
-                  { "text": " – використовується " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " з функцією очищення." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Цей код виконується безпосередньо перед демонтуванням компонента."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "98. How do you run code before a component is removed from the tree?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "In React, code before a component is removed is executed using lifecycle methods or hooks."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Class components", "bold": true },
-                  { "text": " – use the " },
-                  { "text": "componentWillUnmount", "code": true },
-                  { "text": " lifecycle method." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Functional components", "bold": true },
-                  { "text": " – use " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " with a cleanup function." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "This logic runs right before the component is unmounted."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "98. Jak wykonać kod przed usunięciem komponentu z drzewa?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "W React kod przed usunięciem komponentu wykonuje się za pomocą metod cyklu życia lub hooków."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponenty klasowe", "bold": true },
-                  { "text": " – używają metody " },
-                  { "text": "componentWillUnmount", "code": true },
-                  { "text": "." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Komponenty funkcyjne", "bold": true },
-                  { "text": " – używają " },
-                  { "text": "useEffect", "code": true },
-                  { "text": " z funkcją czyszczącą." }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Kod ten uruchamia się bezpośrednio przed odmontowaniem komponentu."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 99,
-    "translations": {
-      "uk": {
-        "question": "99. Що таке useReducer()?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "useReducer()", "code": true },
-              {
-                "text": " — це хук React для керування станом у функціональних компонентах. Він є альтернативою "
-              },
-              { "text": "useState()", "code": true },
-              {
-                "text": " і використовується, коли логіка оновлення стану складна або залежить від попереднього стану."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Синтаксис:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const [state, dispatch] = useReducer(reducer, initialState);"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "reducer", "code": true },
-                  {
-                    "text": " — функція, що приймає state і action та повертає новий стан."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "dispatch", "code": true },
-                  { "text": " — викликає reducer з action." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "99. What is useReducer()?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "useReducer()", "code": true },
-              {
-                "text": " is a React hook used for state management in functional components. It is an alternative to "
-              },
-              { "text": "useState()", "code": true },
-              {
-                "text": " and is suited for complex state logic or state transitions based on previous state."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Syntax:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const [state, dispatch] = useReducer(reducer, initialState);"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "reducer", "code": true },
-                  {
-                    "text": " — a function that returns new state based on state and action."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "dispatch", "code": true },
-                  { "text": " — triggers state updates via actions." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "99. Czym jest useReducer()?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "useReducer()", "code": true },
-              {
-                "text": " to hook React służący do zarządzania stanem w komponentach funkcyjnych. Jest alternatywą dla "
-              },
-              { "text": "useState()", "code": true },
-              {
-                "text": " i sprawdza się przy złożonej logice zmiany stanu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Składnia:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const [state, dispatch] = useReducer(reducer, initialState);"
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "reducer", "code": true },
-                  {
-                    "text": " — funkcja zwracająca nowy stan na podstawie akcji."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "dispatch", "code": true },
-                  { "text": " — wywołuje reducer z akcją." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 100,
-    "translations": {
-      "uk": {
-        "question": "100. Як використовувати React.lazy та React.Suspense для запуску коду програми?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React.lazy", "code": true },
-              { "text": " та " },
-              { "text": "React.Suspense", "code": true },
-              {
-                "text": " використовуються для динамічного завантаження компонентів і розбиття коду (code splitting)."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Як це працює:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.lazy()", "code": true },
-                  {
-                    "text": " відкладено завантажує компонент через dynamic import."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.Suspense", "code": true },
-                  {
-                    "text": " показує fallback-контент, поки компонент не завантажився."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Приклад:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const MyComponent = React.lazy(() => import('./MyComponent'));\n\nfunction App() {\n  return (\n    <React.Suspense fallback={<div>Завантаження...</div>}>\n      <MyComponent />\n    </React.Suspense>\n  );\n}"
-          }
-        ]
-      },
-      "en": {
-        "question": "100. How do you use React.lazy and React.Suspense to load application code?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React.lazy", "code": true },
-              { "text": " and " },
-              { "text": "React.Suspense", "code": true },
-              {
-                "text": " are used for dynamic component loading and code splitting."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "How it works:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.lazy()", "code": true },
-                  {
-                    "text": " loads a component lazily using dynamic import."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.Suspense", "code": true },
-                  {
-                    "text": " renders fallback UI while the component is loading."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Example:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const MyComponent = React.lazy(() => import('./MyComponent'));\n\nfunction App() {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <MyComponent />\n    </React.Suspense>\n  );\n}"
-          }
-        ]
-      },
-      "pl": {
-        "question": "100. Jak używać React.lazy i React.Suspense do ładowania kodu aplikacji?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "React.lazy", "code": true },
-              { "text": " oraz " },
-              { "text": "React.Suspense", "code": true },
-              {
-                "text": " służą do dynamicznego ładowania komponentów i podziału kodu."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Jak to działa:" }]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.lazy()", "code": true },
-                  {
-                    "text": " ładuje komponent z opóźnieniem przez dynamic import."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React.Suspense", "code": true },
-                  {
-                    "text": " wyświetla fallback, dopóki komponent się nie załaduje."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Przykład:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "const MyComponent = React.lazy(() => import('./MyComponent'));\n\nfunction App() {\n  return (\n    <React.Suspense fallback={<div>Ładowanie...</div>}>\n      <MyComponent />\n    </React.Suspense>\n  );\n}"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 101,
-    "translations": {
-      "uk": {
-        "question": "101. Які підходи використовуються для виконання HTTP-запитів у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React не має власного API для HTTP-запитів, тому використовуються стандартні можливості JavaScript або сторонні бібліотеки."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Fetch API", "bold": true },
-                  {
-                    "text": " — нативний браузерний спосіб для простих HTTP-запитів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Axios", "bold": true },
-                  {
-                    "text": " — бібліотека з підтримкою interceptors, тайм-аутів і зручнішого API."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Query (TanStack Query)", "bold": true },
-                  {
-                    "text": " — керування серверним станом, кешування, refetch, retries."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GraphQL клієнти (Apollo)", "bold": true },
-                  { "text": " — робота з GraphQL API." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Custom Hooks", "bold": true },
-                  {
-                    "text": " — винесення логіки запитів для повторного використання."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "101. What approaches are used to perform HTTP requests in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React does not provide a built-in HTTP API, so standard JavaScript tools or external libraries are used."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Fetch API", "bold": true },
-                  { "text": " — native browser API for basic requests." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Axios", "bold": true },
-                  {
-                    "text": " — library with interceptors, timeouts, and cleaner syntax."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Query (TanStack Query)", "bold": true },
-                  {
-                    "text": " — server state management with caching and refetching."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "GraphQL clients (Apollo)", "bold": true },
-                  { "text": " — for GraphQL based APIs." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Custom Hooks", "bold": true },
-                  { "text": " — reusable abstraction for request logic." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "101. Jakie podejścia stosuje się do wykonywania zapytań HTTP w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "React nie posiada wbudowanego mechanizmu HTTP, dlatego używa się narzędzi JavaScript lub bibliotek zewnętrznych."
-              }
-            ]
-          },
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Fetch API", "bold": true },
-                  {
-                    "text": " — natywne API przeglądarki do prostych zapytań."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Axios", "bold": true },
-                  {
-                    "text": " — biblioteka z interceptorami i wygodniejszym API."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Query (TanStack Query)", "bold": true },
-                  {
-                    "text": " — zarządzanie stanem danych z serwera i cache."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Klienci GraphQL (Apollo)", "bold": true },
-                  { "text": " — obsługa API GraphQL." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Custom Hooks", "bold": true },
-                  { "text": " — wielokrotne użycie logiki zapytań." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 102,
-    "translations": {
-      "uk": {
-        "question": "102. Яка різниця між createElement і cloneElement?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Метод", "bold": true }],
-              [{ "text": "Опис", "bold": true }],
-              [{ "text": "Основне застосування", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "React.createElement", "code": true }],
-                [
-                  {
-                    "text": "Створює новий React-елемент з типу, пропсів і дітей."
-                  }
-                ],
-                [
-                  {
-                    "text": "Базове створення елементів, на чому працює JSX."
-                  }
-                ]
-              ],
-              [
-                [{ "text": "React.cloneElement", "code": true }],
-                [
-                  {
-                    "text": "Клонує існуючий React-елемент із можливістю змінити пропси або children."
-                  }
-                ],
-                [{ "text": "Модифікація вже створених елементів." }]
-              ]
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "createElement", "code": true },
-                  { "text": " створює елемент з нуля." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "cloneElement", "code": true },
-                  { "text": " працює лише з уже існуючим елементом." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "102. What is the difference between createElement and cloneElement?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Method", "bold": true }],
-              [{ "text": "Description", "bold": true }],
-              [{ "text": "Primary use", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "React.createElement", "code": true }],
-                [
-                  {
-                    "text": "Creates a new React element from type, props, and children."
-                  }
-                ],
-                [{ "text": "Core mechanism behind JSX rendering." }]
-              ],
-              [
-                [{ "text": "React.cloneElement", "code": true }],
-                [
-                  {
-                    "text": "Clones an existing React element and overrides props or children."
-                  }
-                ],
-                [{ "text": "Modifying existing React elements." }]
-              ]
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "createElement", "code": true },
-                  { "text": " creates a brand new element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "cloneElement", "code": true },
-                  { "text": " requires an existing element to work with." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "102. Jaka jest różnica między createElement a cloneElement?",
-        "answerBlocks": [
-          {
-            "type": "table",
-            "header": [
-              [{ "text": "Metoda", "bold": true }],
-              [{ "text": "Opis", "bold": true }],
-              [{ "text": "Główne zastosowanie", "bold": true }]
-            ],
-            "rows": [
-              [
-                [{ "text": "React.createElement", "code": true }],
-                [
-                  {
-                    "text": "Tworzy nowy element React na podstawie typu, propsów i children."
-                  }
-                ],
-                [{ "text": "Podstawa działania JSX." }]
-              ],
-              [
-                [{ "text": "React.cloneElement", "code": true }],
-                [
-                  {
-                    "text": "Klonuje istniejący element React i pozwala zmienić jego propsy lub children."
-                  }
-                ],
-                [{ "text": "Modyfikowanie istniejących elementów." }]
-              ]
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "createElement", "code": true },
-                  { "text": " tworzy nowy element." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "cloneElement", "code": true },
-                  { "text": " działa na istniejącym elemencie." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 103,
-    "translations": {
-      "uk": {
-        "question": "103. Чи підтримує функція lazy іменований експорт?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Ні. " },
-              { "text": "React.lazy", "code": true },
-              {
-                "text": " працює лише з default export. Іменований експорт напряму не підтримується."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Обхідне рішення:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "export const MyComponent = () => <div>Hello</div>;\n\nconst LazyComponent = React.lazy(() =>\n  import('./MyComponent').then(m => ({ default: m.MyComponent }))\n);"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Іменований експорт явно приводиться до default."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "103. Does React.lazy support named exports?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "No. " },
-              { "text": "React.lazy", "code": true },
-              {
-                "text": " works only with default exports. Named exports are not supported directly."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Workaround:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "export const MyComponent = () => <div>Hello</div>;\n\nconst LazyComponent = React.lazy(() =>\n  import('./MyComponent').then(m => ({ default: m.MyComponent }))\n);"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The named export is explicitly mapped to default."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "103. Czy React.lazy obsługuje eksport nazwany?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "Nie. " },
-              { "text": "React.lazy", "code": true },
-              {
-                "text": " obsługuje wyłącznie eksport domyślny."
-              }
-            ]
-          },
-          {
-            "type": "heading",
-            "level": 4,
-            "children": [{ "text": "Rozwiązanie obejściowe:" }]
-          },
-          {
-            "type": "code",
-            "language": "jsx",
-            "content": "export const MyComponent = () => <div>Hello</div>;\n\nconst LazyComponent = React.lazy(() =>\n  import('./MyComponent').then(m => ({ default: m.MyComponent }))\n);"
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Eksport nazwany jest mapowany na default."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 104,
-    "translations": {
-      "uk": {
-        "question": "104. Які переваги React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Висока продуктивність", "bold": true },
-                  {
-                    "text": " — використання Virtual DOM зменшує кількість оновлень реального DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Компонентна архітектура", "bold": true },
-                  {
-                    "text": " — повторне використання компонентів спрощує підтримку коду."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Односторонній потік даних", "bold": true },
-                  { "text": " — спрощує контроль стану та налагодження." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Хуки", "bold": true },
-                  {
-                    "text": " — дозволяють керувати станом та ефектами без класів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Розвинена екосистема", "bold": true },
-                  { "text": " — велика кількість бібліотек і інструментів." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "104. What are the advantages of React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "High performance", "bold": true },
-                  { "text": " — Virtual DOM minimizes real DOM updates." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Component based architecture", "bold": true },
-                  { "text": " — reusable components improve maintainability." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "One way data flow", "bold": true },
-                  { "text": " — simplifies state tracking and debugging." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hooks", "bold": true },
-                  {
-                    "text": " — manage state and side effects without classes."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Strong ecosystem", "bold": true },
-                  { "text": " — rich tooling and library support." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "104. Jakie są zalety React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wysoka wydajność", "bold": true },
-                  {
-                    "text": " — Virtual DOM ogranicza aktualizacje prawdziwego DOM."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Architektura komponentowa", "bold": true },
-                  { "text": " — komponenty są wielokrotnego użytku." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jednokierunkowy przepływ danych", "bold": true },
-                  { "text": " — ułatwia kontrolę stanu aplikacji." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hooki", "bold": true },
-                  { "text": " — zarządzanie stanem bez użycia klas." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Bogaty ekosystem", "bold": true },
-                  { "text": " — wiele bibliotek i narzędzi." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 105,
-    "translations": {
-      "uk": {
-        "question": "105. Які обмеження React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Надмірні перерендери", "bold": true },
-                  {
-                    "text": " — без оптимізації можливі проблеми з продуктивністю."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Складне керування станом", "bold": true },
-                  { "text": " — великі додатки потребують додаткових рішень." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Однонаправлений потік даних", "bold": true },
-                  {
-                    "text": " — ускладнює передачу даних через глибоку ієрархію."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Відсутність повної реактивності", "bold": true },
-                  {
-                    "text": " — оновлення через Virtual DOM не завжди оптимальні."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Залежність від JavaScript", "bold": true },
-                  { "text": " — без JS функціональність обмежена." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Поріг входу", "bold": true },
-                  {
-                    "text": " — хуки, контекст і оптимізація вимагають досвіду."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "105. What are the limitations of React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Excessive re-renders", "bold": true },
-                  { "text": " — poor optimization can hurt performance." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Complex state management", "bold": true },
-                  { "text": " — larger apps require extra tooling." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "One-way data flow", "bold": true },
-                  {
-                    "text": " — passing data through deep trees is cumbersome."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Limited reactivity", "bold": true },
-                  { "text": " — Virtual DOM updates are not always optimal." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "JavaScript dependency", "bold": true },
-                  { "text": " — limited functionality without JS." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Learning curve", "bold": true },
-                  { "text": " — hooks and optimization require experience." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "105. Jakie są ograniczenia React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Nadmierne renderowanie", "bold": true },
-                  { "text": " — brak optymalizacji obniża wydajność." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Złożone zarządzanie stanem", "bold": true },
-                  { "text": " — duże aplikacje wymagają dodatkowych narzędzi." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Jednokierunkowy przepływ danych", "bold": true },
-                  { "text": " — utrudnia przekazywanie danych w głąb drzewa." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ograniczona reaktywność", "bold": true },
-                  { "text": " — Virtual DOM nie zawsze jest optymalny." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Zależność od JavaScript", "bold": true },
-                  { "text": " — brak pełnej funkcjonalności bez JS." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Krzywa uczenia", "bold": true },
-                  { "text": " — hooki i optymalizacja wymagają praktyki." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 106,
-    "translations": {
-      "uk": {
-        "question": "106. Для чого призначений метод registerServiceWorker() у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "registerServiceWorker()", "code": true },
-              {
-                "text": " використовувався у Create React App для реєстрації Service Worker. Метод застарілий і видалений, починаючи з CRA v4."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Кешування ресурсів і робота офлайн." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Швидше завантаження додатка." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Фонове оновлення ресурсів." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Зараз Service Worker потрібно реєструвати вручну через navigator.serviceWorker.register()."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "106. What is the purpose of registerServiceWorker() in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "registerServiceWorker()", "code": true },
-              {
-                "text": " was used in Create React App to register a Service Worker. It is deprecated and removed starting from CRA v4."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Offline caching support." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Faster application loading." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Background resource updates." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Today, Service Workers must be registered manually using navigator.serviceWorker.register()."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "106. Do czego służy metoda registerServiceWorker() w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              { "text": "registerServiceWorker()", "code": true },
-              {
-                "text": " była używana w Create React App do rejestracji Service Workera. Metoda jest przestarzała i usunięta od CRA v4."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Obsługa trybu offline." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Szybsze ładowanie aplikacji." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Aktualizacja zasobów w tle." }]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Obecnie Service Worker należy rejestrować ręcznie przez navigator.serviceWorker.register()."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 107,
-    "translations": {
-      "uk": {
-        "question": "107. Що таке синтетичні події (SyntheticEvent) у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "SyntheticEvent",
-                "bold": true
-              },
-              {
-                "text": " у React — це обгортка над нативними подіями браузера, яка уніфікує їх поведінку та API."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Кросбраузерна сумісність." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Нормалізований інтерфейс подій." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Оптимізація памʼяті через pooling (у старих версіях React)."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "SyntheticEvent надає доступ до оригінальної події через "
-              },
-              {
-                "text": "nativeEvent",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "107. What are SyntheticEvents in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "SyntheticEvent",
-                "bold": true
-              },
-              {
-                "text": " in React is a wrapper around native browser events that provides a consistent API."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Cross browser compatibility." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Normalized event interface." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Memory optimizations via event pooling in older React versions."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "The original browser event is доступible via "
-              },
-              {
-                "text": "nativeEvent",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "107. Czym są zdarzenia syntetyczne (SyntheticEvent) w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "SyntheticEvent",
-                "bold": true
-              },
-              {
-                "text": " w React to obudowa natywnych zdarzeń przeglądarki z ujednoliconym API."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Zgodność między przeglądarkami." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Ustandaryzowany interfejs zdarzeń." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Optymalizacja pamięci przez pooling w starszych wersjach React."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Dostęp do oryginalnego zdarzenia przez "
-              },
-              {
-                "text": "nativeEvent",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 108,
-    "translations": {
-      "uk": {
-        "question": "108. Техніки оптимізації перфомансу React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Мемоізація", "bold": true },
-                  {
-                    "text": " — React.memo, useMemo, useCallback для зменшення ререндерів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Контроль ререндерів", "bold": true },
-                  {
-                    "text": " — правильне використання state, props і Context."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Віртуалізація списків", "bold": true },
-                  { "text": " — react-window, react-virtualized." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Code splitting", "bold": true },
-                  { "text": " — React.lazy та Suspense." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Оптимізація ефектів", "bold": true },
-                  {
-                    "text": " — коректні залежності useEffect, useRef для mutable значень."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Робота з даними", "bold": true },
-                  { "text": " — кешування, debounce/throttle для подій." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "108. React performance optimization techniques?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Memoization", "bold": true },
-                  {
-                    "text": " — React.memo, useMemo, useCallback to avoid re-renders."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Render control", "bold": true },
-                  { "text": " — proper state, props, and Context usage." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "List virtualization", "bold": true },
-                  { "text": " — react-window, react-virtualized." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Code splitting", "bold": true },
-                  { "text": " — React.lazy and Suspense." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Effect optimization", "bold": true },
-                  {
-                    "text": " — correct useEffect dependencies, useRef for mutable values."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Data handling", "bold": true },
-                  { "text": " — caching, debounce/throttle for events." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "108. Techniki optymalizacji wydajności React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Memoizacja", "bold": true },
-                  {
-                    "text": " — React.memo, useMemo, useCallback ograniczają renderowanie."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Kontrola renderów", "bold": true },
-                  { "text": " — poprawne użycie state, props i Context." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wirtualizacja list", "bold": true },
-                  { "text": " — react-window, react-virtualized." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Podział kodu", "bold": true },
-                  { "text": " — React.lazy oraz Suspense." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Optymalizacja efektów", "bold": true },
-                  { "text": " — poprawne zależności useEffect, useRef." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Obsługa danych", "bold": true },
-                  { "text": " — cache, debounce i throttle zdarzeń." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 109,
-    "translations": {
-      "uk": {
-        "question": "109. Чи можливо використовувати async/await у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Так, "
-              },
-              {
-                "text": "async/await",
-                "code": true
-              },
-              {
-                "text": " можна використовувати в React для асинхронних операцій."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Не можна використовувати "
-                  },
-                  {
-                    "text": "async",
-                    "code": true
-                  },
-                  {
-                    "text": " безпосередньо в тілі компонента або в "
-                  },
-                  {
-                    "text": "render",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Можна використовувати в "
-                  },
-                  {
-                    "text": "useEffect",
-                    "code": true
-                  },
-                  {
-                    "text": ", обробниках подій або окремих функціях."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Помилки потрібно обробляти через "
-                  },
-                  {
-                    "text": "try/catch",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "109. Is it possible to use async/await in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Yes, "
-              },
-              {
-                "text": "async/await",
-                "code": true
-              },
-              {
-                "text": " can be used in React for asynchronous operations."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "It cannot be used directly inside component render logic."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "It is commonly used inside "
-                  },
-                  {
-                    "text": "useEffect",
-                    "code": true
-                  },
-                  {
-                    "text": " or event handlers."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Errors should be handled with "
-                  },
-                  {
-                    "text": "try/catch",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "109. Czy można używać async/await w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "Tak, "
-              },
-              {
-                "text": "async/await",
-                "code": true
-              },
-              {
-                "text": " można używać w React do operacji asynchronicznych."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Nie można używać bezpośrednio w renderowaniu komponentu."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Najczęściej stosowane w "
-                  },
-                  {
-                    "text": "useEffect",
-                    "code": true
-                  },
-                  {
-                    "text": " lub obsłudze zdarzeń."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  {
-                    "text": "Obsługa błędów przez "
-                  },
-                  {
-                    "text": "try/catch",
-                    "code": true
-                  },
-                  {
-                    "text": "."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 110,
-    "translations": {
-      "uk": {
-        "question": "110. Яка історія еволюції React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2011", "bold": true },
-                  {
-                    "text": " — створення React у Facebook Джорданом Волке для внутрішніх продуктів."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2013", "bold": true },
-                  { "text": " — відкриття React як open source." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2015", "bold": true },
-                  {
-                    "text": " — React 0.14, поділ на React і ReactDOM, поява React Native."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2017", "bold": true },
-                  {
-                    "text": " — React 16 та архітектура Fiber, Error Boundaries, Portals."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2019", "bold": true },
-                  { "text": " — React 16.8, офіційний реліз Hooks." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2020", "bold": true },
-                  { "text": " — React 17, спрощення міграцій без змін API." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2022", "bold": true },
-                  {
-                    "text": " — React 18, Concurrent Rendering, useTransition."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2024", "bold": true },
-                  {
-                    "text": " — React 19, React Server Components, use(), React Compiler."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "110. What is the evolution history of React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2011", "bold": true },
-                  {
-                    "text": " — React was created at Facebook by Jordan Walke."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2013", "bold": true },
-                  { "text": " — React was released as open source." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2015", "bold": true },
-                  {
-                    "text": " — React 0.14, ReactDOM split, React Native introduced."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2017", "bold": true },
-                  { "text": " — React 16 with Fiber architecture." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2019", "bold": true },
-                  { "text": " — React 16.8, Hooks officially released." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2020", "bold": true },
-                  { "text": " — React 17 focused on easier upgrades." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2022", "bold": true },
-                  { "text": " — React 18 with Concurrent Rendering." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2024", "bold": true },
-                  {
-                    "text": " — React 19, Server Components, use(), React Compiler."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "110. Jaka jest historia ewolucji React?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2011", "bold": true },
-                  {
-                    "text": " — React powstał w Facebooku, autor Jordan Walke."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2013", "bold": true },
-                  { "text": " — React został udostępniony jako open source." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2015", "bold": true },
-                  {
-                    "text": " — React 0.14, podział na React i ReactDOM, React Native."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2017", "bold": true },
-                  { "text": " — React 16 i architektura Fiber." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2019", "bold": true },
-                  { "text": " — React 16.8, oficjalne wprowadzenie Hooks." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2020", "bold": true },
-                  { "text": " — React 17, łatwiejsze aktualizacje." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2022", "bold": true },
-                  { "text": " — React 18, Concurrent Rendering." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "2024", "bold": true },
-                  {
-                    "text": " — React 19, Server Components, use(), React Compiler."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 111,
-    "translations": {
-      "uk": {
-        "question": "111. Які нововведення було додано в React 19?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Compiler", "bold": true },
-                  {
-                    "text": " — автоматична оптимізація ререндерів без ручного memo."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Хук use()", "bold": true },
-                  {
-                    "text": " — спрощена робота з асинхронними даними та Server Components."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Actions API", "bold": true },
-                  {
-                    "text": " — уніфікований підхід до мутацій і серверних дій."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Покращений Suspense", "bold": true },
-                  {
-                    "text": " — кращий контроль асинхронного рендерингу та гідратації."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Нативна робота з метатегами", "bold": true },
-                  { "text": " — title, meta, link без сторонніх бібліотек." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "111. What new features were introduced in React 19?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Compiler", "bold": true },
-                  {
-                    "text": " — automatic render optimization without manual memoization."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "use() hook", "bold": true },
-                  {
-                    "text": " — simplified async data handling and Server Components."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Actions API", "bold": true },
-                  {
-                    "text": " — unified model for mutations and server actions."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Improved Suspense", "bold": true },
-                  { "text": " — better async rendering and hydration control." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Native metadata handling", "bold": true },
-                  { "text": " — title, meta, link without extra libraries." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "111. Jakie nowości wprowadzono w React 19?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Compiler", "bold": true },
-                  { "text": " — automatyczna optymalizacja renderowania." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Hook use()", "bold": true },
-                  {
-                    "text": " — prostsza obsługa danych asynchronicznych i Server Components."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Actions API", "bold": true },
-                  { "text": " — jednolity model mutacji i akcji serwerowych." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Ulepszony Suspense", "bold": true },
-                  {
-                    "text": " — lepsza kontrola renderowania asynchronicznego."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Natywna obsługa metadanych", "bold": true },
-                  { "text": " — title, meta, link bez dodatkowych bibliotek." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 112,
-    "translations": {
-      "uk": {
-        "question": "112. Що рекомендують використовувати розробники React після того як Create React App став deprecated?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Next.js", "bold": true },
-                  {
-                    "text": " — рекомендований за замовчуванням фреймворк з SSR, SSG, RSC та сучасним tooling."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Vite + React", "bold": true },
-                  {
-                    "text": " — легка альтернатива для SPA з швидким дев-сервером і мінімальною конфігурацією."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Router + Vite", "bold": true },
-                  {
-                    "text": " — для клієнтських SPA без серверного рендерингу."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Expo", "bold": true },
-                  {
-                    "text": " — для React Native та кросплатформеної розробки."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "112. What do React developers recommend after Create React App became deprecated?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Next.js", "bold": true },
-                  {
-                    "text": " — the default recommended framework with SSR, SSG, RSC, and modern tooling."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Vite + React", "bold": true },
-                  {
-                    "text": " — a lightweight SPA setup with fast dev server and minimal config."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Router + Vite", "bold": true },
-                  {
-                    "text": " — for client side SPAs without server rendering."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Expo", "bold": true },
-                  {
-                    "text": " — for React Native and cross platform development."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "112. Co zalecają twórcy React po tym, jak Create React App został wycofany?",
-        "answerBlocks": [
-          {
-            "type": "numberedList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Next.js", "bold": true },
-                  {
-                    "text": " — domyślnie rekomendowany framework z SSR, SSG i RSC."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Vite + React", "bold": true },
-                  {
-                    "text": " — lekka konfiguracja SPA z szybkim środowiskiem developerskim."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "React Router + Vite", "bold": true },
-                  {
-                    "text": " — do aplikacji SPA bez renderowania po stronie serwera."
-                  }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Expo", "bold": true },
-                  {
-                    "text": " — do React Native i aplikacji wieloplatformowych."
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    "category": "react",
-    "order": 113,
-    "translations": {
-      "uk": {
-        "question": "113. Як працює хук useDeferredValue у React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "useDeferredValue",
-                "code": true
-              },
-              {
-                "text": " дозволяє відкладати оновлення значення з нижчим пріоритетом, щоб зберегти чуйність інтерфейсу."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Термінові оновлення виконуються одразу." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Важкі обчислення виконуються пізніше." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Проміжні значення можуть бути пропущені." }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      "en": {
-        "question": "113. How does the useDeferredValue hook work in React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "useDeferredValue",
-                "code": true
-              },
-              {
-                "text": " delays low priority value updates to keep the UI responsive."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [{ "text": "Urgent updates run immediately." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Expensive updates are deferred." }]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Intermediate values may be skipped." }]
-              }
-            ]
-          }
-        ]
-      },
-      "pl": {
-        "question": "113. Jak działa hook useDeferredValue w React?",
-        "answerBlocks": [
-          {
-            "type": "paragraph",
-            "children": [
-              {
-                "text": "useDeferredValue",
-                "code": true
-              },
-              {
-                "text": " opóźnia aktualizacje o niskim priorytecie, zachowując płynność interfejsu."
-              }
-            ]
-          },
-          {
-            "type": "bulletList",
-            "children": [
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Pilne aktualizacje wykonywane są natychmiast." }
-                ]
-              },
-              {
-                "type": "listItem",
-                "children": [{ "text": "Kosztowne obliczenia są odkładane." }]
-              },
-              {
-                "type": "listItem",
-                "children": [
-                  { "text": "Wartości pośrednie mogą być pomijane." }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    }
-  }
-]
diff --git a/json/quizzes/angular/advanced/angular-advanced-quiz-part1.json b/json/quizzes/angular/advanced/angular-advanced-quiz-part1.json
deleted file mode 100644
index ee06901c..00000000
--- a/json/quizzes/angular/advanced/angular-advanced-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "angular-adv-q01",
-      "order": 1,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який lifecycle hook викликається при кожній зміні @Input властивостей?",
-        "exp": "ngOnChanges() викликається кожного разу, коли змінюються @Input властивості. Отримує об'єкт SimpleChanges з попередніми та поточними значеннями."
-      },
-      "en": {
-        "q": "Which lifecycle hook is called on every @Input property change?",
-        "exp": "ngOnChanges() is called every time @Input properties change. It receives a SimpleChanges object with previous and current values."
-      },
-      "pl": {
-        "q": "Który lifecycle hook jest wywoływany przy każdej zmianie właściwości @Input?",
-        "exp": "ngOnChanges() jest wywoływany za każdym razem, gdy zmieniają się właściwości @Input. Otrzymuje obiekt SimpleChanges z poprzednimi i aktualnymi wartościami."
-      },
-      "answers": [
-        {
-          "uk": "ngOnInit()",
-          "en": "ngOnInit()",
-          "pl": "ngOnInit()",
-          "correct": false
-        },
-        {
-          "uk": "ngOnChanges()",
-          "en": "ngOnChanges()",
-          "pl": "ngOnChanges()",
-          "correct": true
-        },
-        {
-          "uk": "ngDoCheck()",
-          "en": "ngDoCheck()",
-          "pl": "ngDoCheck()",
-          "correct": false
-        },
-        {
-          "uk": "ngAfterViewInit()",
-          "en": "ngAfterViewInit()",
-          "pl": "ngAfterViewInit()",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q02",
-      "order": 2,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Коли використовується ngAfterViewInit()?",
-        "exp": "ngAfterViewInit() викликається один раз після ініціалізації view компонента. Використовується для доступу до елементів через @ViewChild/@ViewChildren."
-      },
-      "en": {
-        "q": "When is ngAfterViewInit() used?",
-        "exp": "ngAfterViewInit() is called once after the component's view is initialized. Used for accessing elements via @ViewChild/@ViewChildren."
-      },
-      "pl": {
-        "q": "Kiedy używa się ngAfterViewInit()?",
-        "exp": "ngAfterViewInit() jest wywoływany raz po inicjalizacji widoku komponentu. Używany do dostępu do elementów przez @ViewChild/@ViewChildren."
-      },
-      "answers": [
-        {
-          "uk": "Перед ініціалізацією компонента",
-          "en": "Before component initialization",
-          "pl": "Przed inicjalizacją komponentu",
-          "correct": false
-        },
-        {
-          "uk": "Після ініціалізації view для доступу до @ViewChild",
-          "en": "After view initialization for @ViewChild access",
-          "pl": "Po inicjalizacji widoku dla dostępu do @ViewChild",
-          "correct": true
-        },
-        {
-          "uk": "При кожній зміні даних",
-          "en": "On every data change",
-          "pl": "Przy każdej zmianie danych",
-          "correct": false
-        },
-        {
-          "uk": "Перед знищенням компонента",
-          "en": "Before component destruction",
-          "pl": "Przed zniszczeniem komponentu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q03",
-      "order": 3,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується @ViewChild?",
-        "exp": "@ViewChild дає доступ до дочірнього компонента, директиви або DOM-елемента з власного шаблону компонента. Доступний після ngAfterViewInit()."
-      },
-      "en": {
-        "q": "What is @ViewChild used for?",
-        "exp": "@ViewChild provides access to a child component, directive, or DOM element from the component's own template. Available after ngAfterViewInit()."
-      },
-      "pl": {
-        "q": "Do czego służy @ViewChild?",
-        "exp": "@ViewChild zapewnia dostęp do komponentu dziecka, dyrektywy lub elementu DOM z własnego szablonu komponentu. Dostępny po ngAfterViewInit()."
-      },
-      "answers": [
-        {
-          "uk": "Для передачі даних батьківському компоненту",
-          "en": "For passing data to parent component",
-          "pl": "Do przekazywania danych do komponentu rodzica",
-          "correct": false
-        },
-        {
-          "uk": "Для доступу до елементів власного шаблону",
-          "en": "For accessing elements in own template",
-          "pl": "Do dostępu do elementów własnego szablonu",
-          "correct": true
-        },
-        {
-          "uk": "Для підписки на HTTP-запити",
-          "en": "For subscribing to HTTP requests",
-          "pl": "Do subskrypcji żądań HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Для валідації форм",
-          "en": "For form validation",
-          "pl": "Do walidacji formularzy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q04",
-      "order": 4,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між @ViewChild та @ContentChild?",
-        "exp": "@ViewChild звертається до елементів власного шаблону компонента. @ContentChild — до проєктованого контенту (ng-content), переданого ззовні."
-      },
-      "en": {
-        "q": "What is the difference between @ViewChild and @ContentChild?",
-        "exp": "@ViewChild accesses elements in the component's own template. @ContentChild accesses projected content (ng-content) passed from outside."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między @ViewChild a @ContentChild?",
-        "exp": "@ViewChild dostęp do elementów własnego szablonu komponentu. @ContentChild dostęp do projektowanej zawartości (ng-content) przekazanej z zewnątrz."
-      },
-      "answers": [
-        {
-          "uk": "@ViewChild — для сервісів, @ContentChild — для компонентів",
-          "en": "@ViewChild for services, @ContentChild for components",
-          "pl": "@ViewChild dla serwisów, @ContentChild dla komponentów",
-          "correct": false
-        },
-        {
-          "uk": "@ViewChild — для власного шаблону, @ContentChild — для проєктованого контенту",
-          "en": "@ViewChild for own template, @ContentChild for projected content",
-          "pl": "@ViewChild dla własnego szablonu, @ContentChild dla projektowanej zawartości",
-          "correct": true
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        },
-        {
-          "uk": "@ContentChild працює тільки з формами",
-          "en": "@ContentChild only works with forms",
-          "pl": "@ContentChild działa tylko z formularzami",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q05",
-      "order": 5,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке ng-content і для чого він використовується?",
-        "exp": "ng-content — це механізм проєкції контенту, що дозволяє передавати HTML-вміст у компонент ззовні. Аналог slots у Web Components."
-      },
-      "en": {
-        "q": "What is ng-content and what is it used for?",
-        "exp": "ng-content is a content projection mechanism that allows passing HTML content into a component from outside. Similar to slots in Web Components."
-      },
-      "pl": {
-        "q": "Czym jest ng-content i do czego służy?",
-        "exp": "ng-content to mechanizm projekcji zawartości pozwalający przekazywać zawartość HTML do komponentu z zewnątrz. Podobny do slots w Web Components."
-      },
-      "answers": [
-        {
-          "uk": "Директива для умовного рендерингу",
-          "en": "A directive for conditional rendering",
-          "pl": "Dyrektywa do warunkowego renderowania",
-          "correct": false
-        },
-        {
-          "uk": "Механізм проєкції контенту для передачі HTML у компонент ззовні",
-          "en": "A content projection mechanism for passing HTML into a component from outside",
-          "pl": "Mechanizm projekcji zawartości do przekazywania HTML do komponentu z zewnątrz",
-          "correct": true
-        },
-        {
-          "uk": "Сервіс для роботи з DOM",
-          "en": "A service for working with DOM",
-          "pl": "Serwis do pracy z DOM",
-          "correct": false
-        },
-        {
-          "uk": "Pipe для форматування тексту",
-          "en": "A pipe for text formatting",
-          "pl": "Pipe do formatowania tekstu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q06",
-      "order": 6,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як створити синхронний кастомний валідатор для Reactive Forms?",
-        "exp": "Кастомний валідатор — це функція, що приймає AbstractControl і повертає об'єкт помилки { errorKey: true } або null, якщо валідація пройшла."
-      },
-      "en": {
-        "q": "How do you create a synchronous custom validator for Reactive Forms?",
-        "exp": "A custom validator is a function that takes AbstractControl and returns an error object { errorKey: true } or null if validation passed."
-      },
-      "pl": {
-        "q": "Jak stworzyć synchroniczny niestandardowy walidator dla Reactive Forms?",
-        "exp": "Niestandardowy walidator to funkcja przyjmująca AbstractControl i zwracająca obiekt błędu { errorKey: true } lub null, jeśli walidacja przeszła."
-      },
-      "answers": [
-        {
-          "uk": "Створити клас, що розширює Validators",
-          "en": "Create a class extending Validators",
-          "pl": "Stworzyć klasę rozszerzającą Validators",
-          "correct": false
-        },
-        {
-          "uk": "Створити функцію, що повертає { errorKey: true } або null",
-          "en": "Create a function returning { errorKey: true } or null",
-          "pl": "Stworzyć funkcję zwracającą { errorKey: true } lub null",
-          "correct": true
-        },
-        {
-          "uk": "Використати декоратор @Validator",
-          "en": "Use @Validator decorator",
-          "pl": "Użyć dekoratora @Validator",
-          "correct": false
-        },
-        {
-          "uk": "Кастомні валідатори неможливі в Angular",
-          "en": "Custom validators are not possible in Angular",
-          "pl": "Niestandardowe walidatory nie są możliwe w Angular",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q07",
-      "order": 7,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Чим асинхронний валідатор відрізняється від синхронного?",
-        "exp": "Асинхронний валідатор повертає Observable або Promise замість звичайного значення. Використовується для перевірок, що потребують HTTP-запитів (наприклад, унікальність email)."
-      },
-      "en": {
-        "q": "How does an async validator differ from a sync validator?",
-        "exp": "An async validator returns Observable or Promise instead of a plain value. Used for checks requiring HTTP requests (e.g., email uniqueness)."
-      },
-      "pl": {
-        "q": "Czym różni się walidator asynchroniczny od synchronicznego?",
-        "exp": "Walidator asynchroniczny zwraca Observable lub Promise zamiast zwykłej wartości. Używany do sprawdzeń wymagających żądań HTTP (np. unikalność emaila)."
-      },
-      "answers": [
-        {
-          "uk": "Асинхронний працює швидше",
-          "en": "Async works faster",
-          "pl": "Asynchroniczny działa szybciej",
-          "correct": false
-        },
-        {
-          "uk": "Асинхронний повертає Observable/Promise для перевірок з HTTP-запитами",
-          "en": "Async returns Observable/Promise for checks with HTTP requests",
-          "pl": "Asynchroniczny zwraca Observable/Promise dla sprawdzeń z żądaniami HTTP",
-          "correct": true
-        },
-        {
-          "uk": "Асинхронний не підтримує кастомні помилки",
-          "en": "Async doesn't support custom errors",
-          "pl": "Asynchroniczny nie wspiera niestandardowych błędów",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q08",
-      "order": 8,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який lifecycle hook викликається один раз після вставлення проєктованого контенту (ng-content)?",
-        "exp": "ngAfterContentInit() викликається один раз після того, як Angular проєктує зовнішній контент у компонент через ng-content."
-      },
-      "en": {
-        "q": "Which lifecycle hook is called once after projected content (ng-content) is inserted?",
-        "exp": "ngAfterContentInit() is called once after Angular projects external content into the component via ng-content."
-      },
-      "pl": {
-        "q": "Który lifecycle hook jest wywoływany raz po wstawieniu projektowanej zawartości (ng-content)?",
-        "exp": "ngAfterContentInit() jest wywoływany raz po tym, jak Angular projektuje zewnętrzną zawartość do komponentu przez ng-content."
-      },
-      "answers": [
-        {
-          "uk": "ngOnInit()",
-          "en": "ngOnInit()",
-          "pl": "ngOnInit()",
-          "correct": false
-        },
-        {
-          "uk": "ngAfterViewInit()",
-          "en": "ngAfterViewInit()",
-          "pl": "ngAfterViewInit()",
-          "correct": false
-        },
-        {
-          "uk": "ngAfterContentInit()",
-          "en": "ngAfterContentInit()",
-          "pl": "ngAfterContentInit()",
-          "correct": true
-        },
-        {
-          "uk": "ngDoCheck()",
-          "en": "ngDoCheck()",
-          "pl": "ngDoCheck()",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q09",
-      "order": 9,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Для чого використовується ngDoCheck()?",
-        "exp": "ngDoCheck() викликається на кожному циклі change detection. Використовується для кастомної логіки виявлення змін, коли стандартний механізм не підходить."
-      },
-      "en": {
-        "q": "What is ngDoCheck() used for?",
-        "exp": "ngDoCheck() is called on every change detection cycle. Used for custom change detection logic when the standard mechanism isn't sufficient."
-      },
-      "pl": {
-        "q": "Do czego służy ngDoCheck()?",
-        "exp": "ngDoCheck() jest wywoływany przy każdym cyklu change detection. Używany do niestandardowej logiki wykrywania zmian, gdy standardowy mechanizm nie wystarcza."
-      },
-      "answers": [
-        {
-          "uk": "Для ініціалізації компонента",
-          "en": "For component initialization",
-          "pl": "Do inicjalizacji komponentu",
-          "correct": false
-        },
-        {
-          "uk": "Для кастомної логіки виявлення змін на кожному CD-циклі",
-          "en": "For custom change detection logic on every CD cycle",
-          "pl": "Do niestandardowej logiki wykrywania zmian przy każdym cyklu CD",
-          "correct": true
-        },
-        {
-          "uk": "Для очищення ресурсів",
-          "en": "For resource cleanup",
-          "pl": "Do czyszczenia zasobów",
-          "correct": false
-        },
-        {
-          "uk": "Для HTTP-запитів",
-          "en": "For HTTP requests",
-          "pl": "Do żądań HTTP",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q10",
-      "order": 10,
-      "difficulty": "medium",
-      "uk": {
-        "q": "В якому порядку викликаються lifecycle hooks: ngOnInit, ngOnChanges, ngAfterViewInit?",
-        "exp": "Порядок: ngOnChanges (перший, якщо є @Input) → ngOnInit → ngAfterContentInit → ngAfterViewInit. ngOnChanges викликається перед ngOnInit."
-      },
-      "en": {
-        "q": "In what order are lifecycle hooks called: ngOnInit, ngOnChanges, ngAfterViewInit?",
-        "exp": "Order: ngOnChanges (first if @Input exists) → ngOnInit → ngAfterContentInit → ngAfterViewInit. ngOnChanges is called before ngOnInit."
-      },
-      "pl": {
-        "q": "W jakiej kolejności wywoływane są lifecycle hooks: ngOnInit, ngOnChanges, ngAfterViewInit?",
-        "exp": "Kolejność: ngOnChanges (pierwszy jeśli istnieje @Input) → ngOnInit → ngAfterContentInit → ngAfterViewInit. ngOnChanges wywoływany przed ngOnInit."
-      },
-      "answers": [
-        {
-          "uk": "ngOnInit → ngOnChanges → ngAfterViewInit",
-          "en": "ngOnInit → ngOnChanges → ngAfterViewInit",
-          "pl": "ngOnInit → ngOnChanges → ngAfterViewInit",
-          "correct": false
-        },
-        {
-          "uk": "ngOnChanges → ngOnInit → ngAfterViewInit",
-          "en": "ngOnChanges → ngOnInit → ngAfterViewInit",
-          "pl": "ngOnChanges → ngOnInit → ngAfterViewInit",
-          "correct": true
-        },
-        {
-          "uk": "ngAfterViewInit → ngOnInit → ngOnChanges",
-          "en": "ngAfterViewInit → ngOnInit → ngOnChanges",
-          "pl": "ngAfterViewInit → ngOnInit → ngOnChanges",
-          "correct": false
-        },
-        {
-          "uk": "Порядок випадковий",
-          "en": "Order is random",
-          "pl": "Kolejność jest losowa",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/angular/advanced/angular-advanced-quiz-part2.json b/json/quizzes/angular/advanced/angular-advanced-quiz-part2.json
deleted file mode 100644
index 33cf1b95..00000000
--- a/json/quizzes/angular/advanced/angular-advanced-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "angular-adv-q11",
-      "order": 11,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Для чого використовується декоратор @Optional() у DI?",
-        "exp": "@Optional() позначає залежність як необов'язкову. Якщо Angular не знайде провайдера, він поверне null замість викидання помилки."
-      },
-      "en": {
-        "q": "What is the @Optional() decorator used for in DI?",
-        "exp": "@Optional() marks a dependency as optional. If Angular can't find a provider, it returns null instead of throwing an error."
-      },
-      "pl": {
-        "q": "Do czego służy dekorator @Optional() w DI?",
-        "exp": "@Optional() oznacza zależność jako opcjonalną. Jeśli Angular nie znajdzie providera, zwróci null zamiast rzucać błąd."
-      },
-      "answers": [
-        {
-          "uk": "Для створення singleton-сервісу",
-          "en": "For creating a singleton service",
-          "pl": "Do tworzenia serwisu singleton",
-          "correct": false
-        },
-        {
-          "uk": "Для позначення залежності як необов'язкової (null якщо не знайдено)",
-          "en": "For marking a dependency as optional (null if not found)",
-          "pl": "Do oznaczenia zależności jako opcjonalnej (null jeśli nie znaleziono)",
-          "correct": true
-        },
-        {
-          "uk": "Для lazy loading сервісу",
-          "en": "For lazy loading a service",
-          "pl": "Do lazy loading serwisu",
-          "correct": false
-        },
-        {
-          "uk": "Для кешування залежності",
-          "en": "For caching a dependency",
-          "pl": "Do cache'owania zależności",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q12",
-      "order": 12,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Яка різниця між @Self() та @SkipSelf() у DI?",
-        "exp": "@Self() шукає залежність тільки в локальному інжекторі компонента. @SkipSelf() пропускає локальний інжектор і шукає в батьківських."
-      },
-      "en": {
-        "q": "What is the difference between @Self() and @SkipSelf() in DI?",
-        "exp": "@Self() looks for dependency only in the component's local injector. @SkipSelf() skips the local injector and looks in parent injectors."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między @Self() a @SkipSelf() w DI?",
-        "exp": "@Self() szuka zależności tylko w lokalnym injektorze komponentu. @SkipSelf() pomija lokalny injektor i szuka w injektorach nadrzędnych."
-      },
-      "answers": [
-        {
-          "uk": "@Self() — для сервісів, @SkipSelf() — для компонентів",
-          "en": "@Self() for services, @SkipSelf() for components",
-          "pl": "@Self() dla serwisów, @SkipSelf() dla komponentów",
-          "correct": false
-        },
-        {
-          "uk": "@Self() шукає локально, @SkipSelf() пропускає локальний і шукає в батьківських",
-          "en": "@Self() looks locally, @SkipSelf() skips local and looks in parents",
-          "pl": "@Self() szuka lokalnie, @SkipSelf() pomija lokalny i szuka w nadrzędnych",
-          "correct": true
-        },
-        {
-          "uk": "@SkipSelf() швидший за @Self()",
-          "en": "@SkipSelf() is faster than @Self()",
-          "pl": "@SkipSelf() jest szybszy niż @Self()",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q13",
-      "order": 13,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується декоратор @Inject()?",
-        "exp": "@Inject() дозволяє явно вказати токен для інжекції, особливо корисний для інжекції примітивних значень або InjectionToken."
-      },
-      "en": {
-        "q": "What is the @Inject() decorator used for?",
-        "exp": "@Inject() allows explicitly specifying the injection token, especially useful for injecting primitive values or InjectionToken."
-      },
-      "pl": {
-        "q": "Do czego służy dekorator @Inject()?",
-        "exp": "@Inject() pozwala jawnie określić token do iniekcji, szczególnie przydatny do wstrzykiwania wartości prymitywnych lub InjectionToken."
-      },
-      "answers": [
-        {
-          "uk": "Для створення нового сервісу",
-          "en": "For creating a new service",
-          "pl": "Do tworzenia nowego serwisu",
-          "correct": false
-        },
-        {
-          "uk": "Для явного вказання токена інжекції (примітиви, InjectionToken)",
-          "en": "For explicitly specifying injection token (primitives, InjectionToken)",
-          "pl": "Do jawnego określenia tokena iniekcji (prymitywy, InjectionToken)",
-          "correct": true
-        },
-        {
-          "uk": "Для валідації залежностей",
-          "en": "For validating dependencies",
-          "pl": "Do walidacji zależności",
-          "correct": false
-        },
-        {
-          "uk": "Для логування інжекцій",
-          "en": "For logging injections",
-          "pl": "Do logowania iniekcji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q14",
-      "order": 14,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між Subject та BehaviorSubject?",
-        "exp": "Subject не має початкового значення і не передає останнє значення новим підписникам. BehaviorSubject зберігає останнє значення і одразу передає його новим підписникам."
-      },
-      "en": {
-        "q": "What is the difference between Subject and BehaviorSubject?",
-        "exp": "Subject has no initial value and doesn't pass the last value to new subscribers. BehaviorSubject stores the last value and immediately passes it to new subscribers."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między Subject a BehaviorSubject?",
-        "exp": "Subject nie ma wartości początkowej i nie przekazuje ostatniej wartości nowym subskrybentom. BehaviorSubject przechowuje ostatnią wartość i natychmiast przekazuje ją nowym subskrybentom."
-      },
-      "answers": [
-        {
-          "uk": "Subject швидший за BehaviorSubject",
-          "en": "Subject is faster than BehaviorSubject",
-          "pl": "Subject jest szybszy niż BehaviorSubject",
-          "correct": false
-        },
-        {
-          "uk": "BehaviorSubject зберігає та передає останнє значення новим підписникам",
-          "en": "BehaviorSubject stores and passes the last value to new subscribers",
-          "pl": "BehaviorSubject przechowuje i przekazuje ostatnią wartość nowym subskrybentom",
-          "correct": true
-        },
-        {
-          "uk": "Subject працює тільки з HTTP",
-          "en": "Subject only works with HTTP",
-          "pl": "Subject działa tylko z HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q15",
-      "order": 15,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Коли варто використовувати ReplaySubject замість BehaviorSubject?",
-        "exp": "ReplaySubject передає новим підписникам N останніх значень (конфігурується). Корисний для історії подій або кешування кількох значень."
-      },
-      "en": {
-        "q": "When should you use ReplaySubject instead of BehaviorSubject?",
-        "exp": "ReplaySubject passes N last values to new subscribers (configurable). Useful for event history or caching multiple values."
-      },
-      "pl": {
-        "q": "Kiedy używać ReplaySubject zamiast BehaviorSubject?",
-        "exp": "ReplaySubject przekazuje N ostatnich wartości nowym subskrybentom (konfigurowalne). Przydatny dla historii zdarzeń lub cache'owania wielu wartości."
-      },
-      "answers": [
-        {
-          "uk": "Коли потрібно передати тільки перше значення",
-          "en": "When you need to pass only the first value",
-          "pl": "Kiedy trzeba przekazać tylko pierwszą wartość",
-          "correct": false
-        },
-        {
-          "uk": "Коли потрібно передати N останніх значень новим підписникам",
-          "en": "When you need to pass N last values to new subscribers",
-          "pl": "Kiedy trzeba przekazać N ostatnich wartości nowym subskrybentom",
-          "correct": true
-        },
-        {
-          "uk": "Коли працюєте з формами",
-          "en": "When working with forms",
-          "pl": "Kiedy pracujesz z formularzami",
-          "correct": false
-        },
-        {
-          "uk": "ReplaySubject застарілий",
-          "en": "ReplaySubject is deprecated",
-          "pl": "ReplaySubject jest przestarzały",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q16",
-      "order": 16,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як створити кастомну структурну директиву?",
-        "exp": "Структурна директива створюється через @Directive з інжекцією TemplateRef та ViewContainerRef. ViewContainerRef керує вставкою/видаленням шаблону."
-      },
-      "en": {
-        "q": "How do you create a custom structural directive?",
-        "exp": "A structural directive is created via @Directive with TemplateRef and ViewContainerRef injection. ViewContainerRef manages template insertion/removal."
-      },
-      "pl": {
-        "q": "Jak stworzyć niestandardową dyrektywę strukturalną?",
-        "exp": "Dyrektywa strukturalna tworzona jest przez @Directive z iniekcją TemplateRef i ViewContainerRef. ViewContainerRef zarządza wstawianiem/usuwaniem szablonu."
-      },
-      "answers": [
-        {
-          "uk": "Через @Component з порожнім шаблоном",
-          "en": "Via @Component with empty template",
-          "pl": "Przez @Component z pustym szablonem",
-          "correct": false
-        },
-        {
-          "uk": "Через @Directive з TemplateRef та ViewContainerRef",
-          "en": "Via @Directive with TemplateRef and ViewContainerRef",
-          "pl": "Przez @Directive z TemplateRef i ViewContainerRef",
-          "correct": true
-        },
-        {
-          "uk": "Через спеціальний @StructuralDirective декоратор",
-          "en": "Via special @StructuralDirective decorator",
-          "pl": "Przez specjalny dekorator @StructuralDirective",
-          "correct": false
-        },
-        {
-          "uk": "Кастомні структурні директиви неможливі",
-          "en": "Custom structural directives are not possible",
-          "pl": "Niestandardowe dyrektywy strukturalne nie są możliwe",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q17",
-      "order": 17,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується ViewContainerRef у структурних директивах?",
-        "exp": "ViewContainerRef — це контейнер, який керує створенням та видаленням views. Методи createEmbeddedView() та clear() контролюють DOM."
-      },
-      "en": {
-        "q": "What is ViewContainerRef used for in structural directives?",
-        "exp": "ViewContainerRef is a container that manages view creation and removal. Methods createEmbeddedView() and clear() control the DOM."
-      },
-      "pl": {
-        "q": "Do czego służy ViewContainerRef w dyrektywach strukturalnych?",
-        "exp": "ViewContainerRef to kontener zarządzający tworzeniem i usuwaniem widoków. Metody createEmbeddedView() i clear() kontrolują DOM."
-      },
-      "answers": [
-        {
-          "uk": "Для стилізації елементів",
-          "en": "For styling elements",
-          "pl": "Do stylizacji elementów",
-          "correct": false
-        },
-        {
-          "uk": "Для керування створенням та видаленням views у DOM",
-          "en": "For managing view creation and removal in DOM",
-          "pl": "Do zarządzania tworzeniem i usuwaniem widoków w DOM",
-          "correct": true
-        },
-        {
-          "uk": "Для валідації форм",
-          "en": "For form validation",
-          "pl": "Do walidacji formularzy",
-          "correct": false
-        },
-        {
-          "uk": "Для HTTP-запитів",
-          "en": "For HTTP requests",
-          "pl": "Do żądań HTTP",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q18",
-      "order": 18,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Route Resolver і коли його використовувати?",
-        "exp": "Route Resolver завантажує дані перед активацією маршруту. Angular чекає завершення resolve і передає дані в компонент через ActivatedRoute.data."
-      },
-      "en": {
-        "q": "What is a Route Resolver and when should you use it?",
-        "exp": "Route Resolver loads data before route activation. Angular waits for resolve completion and passes data to the component via ActivatedRoute.data."
-      },
-      "pl": {
-        "q": "Czym jest Route Resolver i kiedy go używać?",
-        "exp": "Route Resolver ładuje dane przed aktywacją trasy. Angular czeka na zakończenie resolve i przekazuje dane do komponentu przez ActivatedRoute.data."
-      },
-      "answers": [
-        {
-          "uk": "Для валідації URL",
-          "en": "For URL validation",
-          "pl": "Do walidacji URL",
-          "correct": false
-        },
-        {
-          "uk": "Для завантаження даних перед активацією маршруту",
-          "en": "For loading data before route activation",
-          "pl": "Do ładowania danych przed aktywacją trasy",
-          "correct": true
-        },
-        {
-          "uk": "Для кешування маршрутів",
-          "en": "For caching routes",
-          "pl": "Do cache'owania tras",
-          "correct": false
-        },
-        {
-          "uk": "Для анімації переходів",
-          "en": "For transition animations",
-          "pl": "Do animacji przejść",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q19",
-      "order": 19,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між canActivate та canLoad guards?",
-        "exp": "canActivate перевіряє доступ до маршруту (код вже завантажено). canLoad запобігає завантаженню lazy-loaded модуля взагалі."
-      },
-      "en": {
-        "q": "What is the difference between canActivate and canLoad guards?",
-        "exp": "canActivate checks route access (code already loaded). canLoad prevents lazy-loaded module from loading at all."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między canActivate a canLoad guards?",
-        "exp": "canActivate sprawdza dostęp do trasy (kod już załadowany). canLoad zapobiega ładowaniu lazy-loaded modułu w ogóle."
-      },
-      "answers": [
-        {
-          "uk": "canActivate швидший",
-          "en": "canActivate is faster",
-          "pl": "canActivate jest szybszy",
-          "correct": false
-        },
-        {
-          "uk": "canActivate перевіряє доступ, canLoad запобігає завантаженню lazy-модуля",
-          "en": "canActivate checks access, canLoad prevents lazy module loading",
-          "pl": "canActivate sprawdza dostęp, canLoad zapobiega ładowaniu lazy modułu",
-          "correct": true
-        },
-        {
-          "uk": "canLoad працює тільки з SSR",
-          "en": "canLoad only works with SSR",
-          "pl": "canLoad działa tylko z SSR",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q20",
-      "order": 20,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується canDeactivate guard?",
-        "exp": "canDeactivate перевіряє, чи можна покинути поточний маршрут. Типове використання — попередження про незбережені зміни у формі."
-      },
-      "en": {
-        "q": "What is the canDeactivate guard used for?",
-        "exp": "canDeactivate checks if the current route can be left. Typical use — warning about unsaved form changes."
-      },
-      "pl": {
-        "q": "Do czego służy guard canDeactivate?",
-        "exp": "canDeactivate sprawdza, czy można opuścić bieżącą trasę. Typowe użycie — ostrzeżenie o niezapisanych zmianach w formularzu."
-      },
-      "answers": [
-        {
-          "uk": "Для перевірки авторизації",
-          "en": "For authorization check",
-          "pl": "Do sprawdzenia autoryzacji",
-          "correct": false
-        },
-        {
-          "uk": "Для перевірки, чи можна покинути маршрут (незбережені зміни)",
-          "en": "For checking if route can be left (unsaved changes)",
-          "pl": "Do sprawdzenia czy można opuścić trasę (niezapisane zmiany)",
-          "correct": true
-        },
-        {
-          "uk": "Для lazy loading",
-          "en": "For lazy loading",
-          "pl": "Do lazy loading",
-          "correct": false
-        },
-        {
-          "uk": "Для кешування даних",
-          "en": "For data caching",
-          "pl": "Do cache'owania danych",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/angular/advanced/angular-advanced-quiz-part3.json b/json/quizzes/angular/advanced/angular-advanced-quiz-part3.json
deleted file mode 100644
index 35c37f88..00000000
--- a/json/quizzes/angular/advanced/angular-advanced-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "angular-adv-q21",
-      "order": 21,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке Actions у NgRx?",
-        "exp": "Actions — це об'єкти, що описують події в застосунку (\"що сталося\"). Мають обов'язкове поле type і опціональний payload через props<>()."
-      },
-      "en": {
-        "q": "What are Actions in NgRx?",
-        "exp": "Actions are objects describing events in the application (\"what happened\"). They have a required type field and optional payload via props<>()."
-      },
-      "pl": {
-        "q": "Czym są Actions w NgRx?",
-        "exp": "Actions to obiekty opisujące zdarzenia w aplikacji (\"co się stało\"). Mają wymagane pole type i opcjonalny payload przez props<>()."
-      },
-      "answers": [
-        {
-          "uk": "Функції для HTTP-запитів",
-          "en": "Functions for HTTP requests",
-          "pl": "Funkcje do żądań HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Об'єкти, що описують події (\"що сталося\") з типом і payload",
-          "en": "Objects describing events (\"what happened\") with type and payload",
-          "pl": "Obiekty opisujące zdarzenia (\"co się stało\") z type i payload",
-          "correct": true
-        },
-        {
-          "uk": "Компоненти для відображення даних",
-          "en": "Components for displaying data",
-          "pl": "Komponenty do wyświetlania danych",
-          "correct": false
-        },
-        {
-          "uk": "Валідатори форм",
-          "en": "Form validators",
-          "pl": "Walidatory formularzy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q22",
-      "order": 22,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке Reducers у NgRx і які їх ключові правила?",
-        "exp": "Reducers — чисті функції, що визначають як змінюється стан у відповідь на action. Правила: без side-effects, без мутацій, повертають новий immutable-стан."
-      },
-      "en": {
-        "q": "What are Reducers in NgRx and what are their key rules?",
-        "exp": "Reducers are pure functions defining how state changes in response to actions. Rules: no side effects, no mutations, return new immutable state."
-      },
-      "pl": {
-        "q": "Czym są Reducers w NgRx i jakie są ich kluczowe zasady?",
-        "exp": "Reducers to czyste funkcje określające jak zmienia się stan w odpowiedzi na akcje. Zasady: bez efektów ubocznych, bez mutacji, zwracają nowy niemutowalny stan."
-      },
-      "answers": [
-        {
-          "uk": "Асинхронні функції для API-запитів",
-          "en": "Async functions for API requests",
-          "pl": "Asynchroniczne funkcje do żądań API",
-          "correct": false
-        },
-        {
-          "uk": "Чисті функції без side-effects, що повертають новий immutable-стан",
-          "en": "Pure functions without side effects returning new immutable state",
-          "pl": "Czyste funkcje bez efektów ubocznych zwracające nowy niemutowalny stan",
-          "correct": true
-        },
-        {
-          "uk": "Класи для валідації даних",
-          "en": "Classes for data validation",
-          "pl": "Klasy do walidacji danych",
-          "correct": false
-        },
-        {
-          "uk": "Директиви для шаблонів",
-          "en": "Template directives",
-          "pl": "Dyrektywy dla szablonów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q23",
-      "order": 23,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Для чого використовуються Effects у NgRx?",
-        "exp": "Effects обробляють side-effects (HTTP, storage, navigation) поза reducer. Слухають actions через ofType() і можуть dispatch нові actions."
-      },
-      "en": {
-        "q": "What are Effects used for in NgRx?",
-        "exp": "Effects handle side effects (HTTP, storage, navigation) outside reducers. They listen to actions via ofType() and can dispatch new actions."
-      },
-      "pl": {
-        "q": "Do czego służą Effects w NgRx?",
-        "exp": "Effects obsługują efekty uboczne (HTTP, storage, nawigacja) poza reducerami. Nasłuchują akcji przez ofType() i mogą dispatch'ować nowe akcje."
-      },
-      "answers": [
-        {
-          "uk": "Для стилізації компонентів",
-          "en": "For styling components",
-          "pl": "Do stylizacji komponentów",
-          "correct": false
-        },
-        {
-          "uk": "Для обробки side-effects (HTTP, storage) поза reducer",
-          "en": "For handling side effects (HTTP, storage) outside reducer",
-          "pl": "Do obsługi efektów ubocznych (HTTP, storage) poza reducerem",
-          "correct": true
-        },
-        {
-          "uk": "Для валідації форм",
-          "en": "For form validation",
-          "pl": "Do walidacji formularzy",
-          "correct": false
-        },
-        {
-          "uk": "Для анімацій",
-          "en": "For animations",
-          "pl": "Do animacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q24",
-      "order": 24,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке Selectors у NgRx і навіщо вони потрібні?",
-        "exp": "Selectors — чисті функції для ефективного отримання даних зі Store. createSelector() мемоізує результати, уникаючи зайвих обчислень."
-      },
-      "en": {
-        "q": "What are Selectors in NgRx and why are they needed?",
-        "exp": "Selectors are pure functions for efficient data retrieval from Store. createSelector() memoizes results, avoiding unnecessary computations."
-      },
-      "pl": {
-        "q": "Czym są Selectors w NgRx i po co są potrzebne?",
-        "exp": "Selectors to czyste funkcje do efektywnego pobierania danych ze Store. createSelector() memoizuje wyniki, unikając niepotrzebnych obliczeń."
-      },
-      "answers": [
-        {
-          "uk": "CSS-селектори для компонентів",
-          "en": "CSS selectors for components",
-          "pl": "Selektory CSS dla komponentów",
-          "correct": false
-        },
-        {
-          "uk": "Мемоізовані функції для ефективного отримання даних зі Store",
-          "en": "Memoized functions for efficient data retrieval from Store",
-          "pl": "Memoizowane funkcje do efektywnego pobierania danych ze Store",
-          "correct": true
-        },
-        {
-          "uk": "Методи для фільтрації масивів",
-          "en": "Methods for filtering arrays",
-          "pl": "Metody do filtrowania tablic",
-          "correct": false
-        },
-        {
-          "uk": "Декоратори для сервісів",
-          "en": "Decorators for services",
-          "pl": "Dekoratory dla serwisów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q25",
-      "order": 25,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить ChangeDetectionStrategy.OnPush?",
-        "exp": "OnPush оптимізує change detection: компонент перевіряється тільки коли змінюються @Input (за посиланням), або викликається async pipe, або вручну markForCheck()."
-      },
-      "en": {
-        "q": "What does ChangeDetectionStrategy.OnPush do?",
-        "exp": "OnPush optimizes change detection: component is checked only when @Input changes (by reference), async pipe fires, or markForCheck() is called manually."
-      },
-      "pl": {
-        "q": "Co robi ChangeDetectionStrategy.OnPush?",
-        "exp": "OnPush optymalizuje change detection: komponent sprawdzany tylko gdy zmienia się @Input (przez referencję), odpala async pipe, lub ręcznie markForCheck()."
-      },
-      "answers": [
-        {
-          "uk": "Вимикає change detection повністю",
-          "en": "Disables change detection completely",
-          "pl": "Wyłącza change detection całkowicie",
-          "correct": false
-        },
-        {
-          "uk": "Перевіряє компонент тільки при зміні @Input за посиланням або async pipe",
-          "en": "Checks component only on @Input reference change or async pipe",
-          "pl": "Sprawdza komponent tylko przy zmianie @Input przez referencję lub async pipe",
-          "correct": true
-        },
-        {
-          "uk": "Запускає change detection кожну секунду",
-          "en": "Runs change detection every second",
-          "pl": "Uruchamia change detection co sekundę",
-          "correct": false
-        },
-        {
-          "uk": "Використовується тільки для форм",
-          "en": "Used only for forms",
-          "pl": "Używany tylko dla formularzy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q26",
-      "order": 26,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як вручну запустити change detection при OnPush?",
-        "exp": "Використовується ChangeDetectorRef: markForCheck() позначає компонент для перевірки, detectChanges() запускає CD негайно для компонента і нащадків."
-      },
-      "en": {
-        "q": "How do you manually trigger change detection with OnPush?",
-        "exp": "Use ChangeDetectorRef: markForCheck() marks component for check, detectChanges() runs CD immediately for component and descendants."
-      },
-      "pl": {
-        "q": "Jak ręcznie uruchomić change detection przy OnPush?",
-        "exp": "Używa się ChangeDetectorRef: markForCheck() oznacza komponent do sprawdzenia, detectChanges() uruchamia CD natychmiast dla komponentu i potomków."
-      },
-      "answers": [
-        {
-          "uk": "Викликати this.update()",
-          "en": "Call this.update()",
-          "pl": "Wywołać this.update()",
-          "correct": false
-        },
-        {
-          "uk": "Через ChangeDetectorRef.markForCheck() або detectChanges()",
-          "en": "Via ChangeDetectorRef.markForCheck() or detectChanges()",
-          "pl": "Przez ChangeDetectorRef.markForCheck() lub detectChanges()",
-          "correct": true
-        },
-        {
-          "uk": "Перезавантажити сторінку",
-          "en": "Reload the page",
-          "pl": "Przeładować stronę",
-          "correct": false
-        },
-        {
-          "uk": "Неможливо при OnPush",
-          "en": "Not possible with OnPush",
-          "pl": "Niemożliwe przy OnPush",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які основні функції використовуються для створення анімацій в Angular?",
-        "exp": "Основні функції з @angular/animations: trigger(), state(), style(), transition(), animate(). trigger() визначає ім'я анімації для шаблону."
-      },
-      "en": {
-        "q": "What are the main functions used for creating animations in Angular?",
-        "exp": "Main functions from @angular/animations: trigger(), state(), style(), transition(), animate(). trigger() defines the animation name for template."
-      },
-      "pl": {
-        "q": "Jakie są główne funkcje do tworzenia animacji w Angular?",
-        "exp": "Główne funkcje z @angular/animations: trigger(), state(), style(), transition(), animate(). trigger() definiuje nazwę animacji dla szablonu."
-      },
-      "answers": [
-        {
-          "uk": "animate(), move(), scale()",
-          "en": "animate(), move(), scale()",
-          "pl": "animate(), move(), scale()",
-          "correct": false
-        },
-        {
-          "uk": "trigger(), state(), style(), transition(), animate()",
-          "en": "trigger(), state(), style(), transition(), animate()",
-          "pl": "trigger(), state(), style(), transition(), animate()",
-          "correct": true
-        },
-        {
-          "uk": "start(), stop(), pause()",
-          "en": "start(), stop(), pause()",
-          "pl": "start(), stop(), pause()",
-          "correct": false
-        },
-        {
-          "uk": "Angular не підтримує анімації",
-          "en": "Angular doesn't support animations",
-          "pl": "Angular nie wspiera animacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q28",
-      "order": 28,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що робить функція stagger() в анімаціях Angular?",
-        "exp": "stagger() створює затримку між анімаціями елементів у списку. Наприклад, stagger(100, animate(...)) додає 100ms затримки між кожним елементом."
-      },
-      "en": {
-        "q": "What does the stagger() function do in Angular animations?",
-        "exp": "stagger() creates a delay between animations of list elements. For example, stagger(100, animate(...)) adds 100ms delay between each element."
-      },
-      "pl": {
-        "q": "Co robi funkcja stagger() w animacjach Angular?",
-        "exp": "stagger() tworzy opóźnienie między animacjami elementów listy. Na przykład stagger(100, animate(...)) dodaje 100ms opóźnienia między każdym elementem."
-      },
-      "answers": [
-        {
-          "uk": "Зупиняє анімацію",
-          "en": "Stops the animation",
-          "pl": "Zatrzymuje animację",
-          "correct": false
-        },
-        {
-          "uk": "Створює затримку між анімаціями елементів списку",
-          "en": "Creates delay between list element animations",
-          "pl": "Tworzy opóźnienie między animacjami elementów listy",
-          "correct": true
-        },
-        {
-          "uk": "Прискорює анімацію",
-          "en": "Speeds up animation",
-          "pl": "Przyspiesza animację",
-          "correct": false
-        },
-        {
-          "uk": "Повторює анімацію",
-          "en": "Repeats animation",
-          "pl": "Powtarza animację",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q29",
-      "order": 29,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як створити pipe з параметрами?",
-        "exp": "Метод transform() приймає додаткові параметри після основного значення. У шаблоні: {{ value | pipeName:param1:param2 }}."
-      },
-      "en": {
-        "q": "How do you create a pipe with parameters?",
-        "exp": "The transform() method accepts additional parameters after the main value. In template: {{ value | pipeName:param1:param2 }}."
-      },
-      "pl": {
-        "q": "Jak stworzyć pipe z parametrami?",
-        "exp": "Metoda transform() przyjmuje dodatkowe parametry po głównej wartości. W szablonie: {{ value | pipeName:param1:param2 }}."
-      },
-      "answers": [
-        {
-          "uk": "Через декоратор @Param()",
-          "en": "Via @Param() decorator",
-          "pl": "Przez dekorator @Param()",
-          "correct": false
-        },
-        {
-          "uk": "Додаткові параметри в transform() і {{ value | pipe:param1:param2 }}",
-          "en": "Additional parameters in transform() and {{ value | pipe:param1:param2 }}",
-          "pl": "Dodatkowe parametry w transform() i {{ value | pipe:param1:param2 }}",
-          "correct": true
-        },
-        {
-          "uk": "Pipes не підтримують параметри",
-          "en": "Pipes don't support parameters",
-          "pl": "Pipes nie wspierają parametrów",
-          "correct": false
-        },
-        {
-          "uk": "Через окремий конфігураційний файл",
-          "en": "Via separate configuration file",
-          "pl": "Przez osobny plik konfiguracyjny",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q30",
-      "order": 30,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що означає providedIn: 'any' у @Injectable?",
-        "exp": "providedIn: 'any' створює окремий екземпляр сервісу для кожного lazy-loaded модуля. Корисно для ізоляції стану між незалежними частинами застосунку."
-      },
-      "en": {
-        "q": "What does providedIn: 'any' mean in @Injectable?",
-        "exp": "providedIn: 'any' creates a separate service instance for each lazy-loaded module. Useful for isolating state between independent app parts."
-      },
-      "pl": {
-        "q": "Co oznacza providedIn: 'any' w @Injectable?",
-        "exp": "providedIn: 'any' tworzy osobną instancję serwisu dla każdego lazy-loaded modułu. Przydatne do izolacji stanu między niezależnymi częściami aplikacji."
-      },
-      "answers": [
-        {
-          "uk": "Сервіс доступний тільки в тестах",
-          "en": "Service is only available in tests",
-          "pl": "Serwis dostępny tylko w testach",
-          "correct": false
-        },
-        {
-          "uk": "Окремий екземпляр сервісу для кожного lazy-loaded модуля",
-          "en": "Separate service instance for each lazy-loaded module",
-          "pl": "Osobna instancja serwisu dla każdego lazy-loaded modułu",
-          "correct": true
-        },
-        {
-          "uk": "Сервіс не використовує DI",
-          "en": "Service doesn't use DI",
-          "pl": "Serwis nie używa DI",
-          "correct": false
-        },
-        {
-          "uk": "Те саме, що providedIn: 'root'",
-          "en": "Same as providedIn: 'root'",
-          "pl": "To samo co providedIn: 'root'",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/angular/advanced/angular-advanced-quiz-part4.json b/json/quizzes/angular/advanced/angular-advanced-quiz-part4.json
deleted file mode 100644
index 3eef69a5..00000000
--- a/json/quizzes/angular/advanced/angular-advanced-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "angular-adv-q31",
-      "order": 31,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке Hydration у контексті Angular SSR?",
-        "exp": "Hydration — процес, коли Angular \"підхоплює\" серверний HTML і робить його інтерактивним без повного перерендеру. provideClientHydration() активує цю функцію."
-      },
-      "en": {
-        "q": "What is Hydration in the context of Angular SSR?",
-        "exp": "Hydration is the process where Angular 'picks up' server-rendered HTML and makes it interactive without full re-render. provideClientHydration() enables this."
-      },
-      "pl": {
-        "q": "Czym jest Hydration w kontekście Angular SSR?",
-        "exp": "Hydration to proces, gdzie Angular 'podchwytuje' HTML wyrenderowany na serwerze i czyni go interaktywnym bez pełnego re-renderu. provideClientHydration() włącza tę funkcję."
-      },
-      "answers": [
-        {
-          "uk": "Процес завантаження CSS",
-          "en": "CSS loading process",
-          "pl": "Proces ładowania CSS",
-          "correct": false
-        },
-        {
-          "uk": "Підхоплення серверного HTML без повного перерендеру",
-          "en": "Picking up server HTML without full re-render",
-          "pl": "Podchwytywanie serwerowego HTML bez pełnego re-renderu",
-          "correct": true
-        },
-        {
-          "uk": "Кешування даних",
-          "en": "Data caching",
-          "pl": "Cache'owanie danych",
-          "correct": false
-        },
-        {
-          "uk": "Стиснення зображень",
-          "en": "Image compression",
-          "pl": "Kompresja obrazów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q32",
-      "order": 32,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Для чого використовується TransferState у SSR?",
-        "exp": "TransferState передає дані з сервера в браузер, уникаючи повторних API-запитів. Сервер зберігає дані в state, браузер їх читає при hydration."
-      },
-      "en": {
-        "q": "What is TransferState used for in SSR?",
-        "exp": "TransferState passes data from server to browser, avoiding duplicate API calls. Server stores data in state, browser reads it during hydration."
-      },
-      "pl": {
-        "q": "Do czego służy TransferState w SSR?",
-        "exp": "TransferState przekazuje dane z serwera do przeglądarki, unikając duplikacji żądań API. Serwer zapisuje dane w state, przeglądarka czyta je podczas hydration."
-      },
-      "answers": [
-        {
-          "uk": "Для анімації переходів між сторінками",
-          "en": "For page transition animations",
-          "pl": "Do animacji przejść między stronami",
-          "correct": false
-        },
-        {
-          "uk": "Для передачі даних з сервера в браузер без повторних API-запитів",
-          "en": "For passing data from server to browser without duplicate API calls",
-          "pl": "Do przekazywania danych z serwera do przeglądarki bez duplikacji żądań API",
-          "correct": true
-        },
-        {
-          "uk": "Для стилізації компонентів",
-          "en": "For component styling",
-          "pl": "Do stylizacji komponentów",
-          "correct": false
-        },
-        {
-          "uk": "Для валідації форм",
-          "en": "For form validation",
-          "pl": "Do walidacji formularzy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q33",
-      "order": 33,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як перевірити, чи код виконується в браузері чи на сервері при SSR?",
-        "exp": "Використовується функція isPlatformBrowser(platformId) або isPlatformServer(platformId). PLATFORM_ID інжектується через DI."
-      },
-      "en": {
-        "q": "How do you check if code runs in browser or server during SSR?",
-        "exp": "Use isPlatformBrowser(platformId) or isPlatformServer(platformId) functions. PLATFORM_ID is injected via DI."
-      },
-      "pl": {
-        "q": "Jak sprawdzić czy kod działa w przeglądarce czy na serwerze przy SSR?",
-        "exp": "Używa się funkcji isPlatformBrowser(platformId) lub isPlatformServer(platformId). PLATFORM_ID jest wstrzykiwany przez DI."
-      },
-      "answers": [
-        {
-          "uk": "Через window !== undefined",
-          "en": "Via window !== undefined",
-          "pl": "Przez window !== undefined",
-          "correct": false
-        },
-        {
-          "uk": "Через isPlatformBrowser(platformId) або isPlatformServer(platformId)",
-          "en": "Via isPlatformBrowser(platformId) or isPlatformServer(platformId)",
-          "pl": "Przez isPlatformBrowser(platformId) lub isPlatformServer(platformId)",
-          "correct": true
-        },
-        {
-          "uk": "Angular робить це автоматично",
-          "en": "Angular does this automatically",
-          "pl": "Angular robi to automatycznie",
-          "correct": false
-        },
-        {
-          "uk": "Неможливо перевірити",
-          "en": "Not possible to check",
-          "pl": "Niemożliwe do sprawdzenia",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Чому не можна напряму використовувати window або document при SSR?",
-        "exp": "На сервері немає браузерних API (window, document, localStorage). Прямий доступ викличе помилку. Потрібно перевіряти платформу або використовувати Renderer2."
-      },
-      "en": {
-        "q": "Why can't you directly use window or document in SSR?",
-        "exp": "Server doesn't have browser APIs (window, document, localStorage). Direct access causes errors. Check platform or use Renderer2."
-      },
-      "pl": {
-        "q": "Dlaczego nie można bezpośrednio używać window lub document w SSR?",
-        "exp": "Serwer nie ma API przeglądarki (window, document, localStorage). Bezpośredni dostęp powoduje błędy. Sprawdzaj platformę lub używaj Renderer2."
-      },
-      "answers": [
-        {
-          "uk": "Вони працюють повільно",
-          "en": "They work slowly",
-          "pl": "Działają wolno",
-          "correct": false
-        },
-        {
-          "uk": "На сервері немає браузерних API — буде помилка",
-          "en": "Server doesn't have browser APIs — will cause error",
-          "pl": "Serwer nie ma API przeglądarki — będzie błąd",
-          "correct": true
-        },
-        {
-          "uk": "Angular забороняє їх використання",
-          "en": "Angular forbids their use",
-          "pl": "Angular zabrania ich użycia",
-          "correct": false
-        },
-        {
-          "uk": "Вони застарілі",
-          "en": "They are deprecated",
-          "pl": "Są przestarzałe",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q35",
-      "order": 35,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між route parameters та query parameters?",
-        "exp": "Route parameters (/user/:id) — частина шляху, обов'язкові. Query parameters (?sort=asc) — опціональні, передаються після ?. Доступ через paramMap та queryParamMap."
-      },
-      "en": {
-        "q": "What is the difference between route parameters and query parameters?",
-        "exp": "Route parameters (/user/:id) are path parts, required. Query parameters (?sort=asc) are optional, after ?. Access via paramMap and queryParamMap."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między route parameters a query parameters?",
-        "exp": "Route parameters (/user/:id) to części ścieżki, wymagane. Query parameters (?sort=asc) są opcjonalne, po ?. Dostęp przez paramMap i queryParamMap."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        },
-        {
-          "uk": "Route params — частина шляху, query params — опціональні після ?",
-          "en": "Route params are path parts, query params are optional after ?",
-          "pl": "Route params to części ścieżki, query params są opcjonalne po ?",
-          "correct": true
-        },
-        {
-          "uk": "Query parameters швидші",
-          "en": "Query parameters are faster",
-          "pl": "Query parameters są szybsze",
-          "correct": false
-        },
-        {
-          "uk": "Route parameters працюють тільки з SSR",
-          "en": "Route parameters only work with SSR",
-          "pl": "Route parameters działają tylko z SSR",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q36",
-      "order": 36,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як отримати query parameters з URL в Angular?",
-        "exp": "Через ActivatedRoute.queryParamMap (Observable) або snapshot.queryParamMap. Метод get('paramName') повертає значення параметра."
-      },
-      "en": {
-        "q": "How do you get query parameters from URL in Angular?",
-        "exp": "Via ActivatedRoute.queryParamMap (Observable) or snapshot.queryParamMap. The get('paramName') method returns the parameter value."
-      },
-      "pl": {
-        "q": "Jak pobrać query parameters z URL w Angular?",
-        "exp": "Przez ActivatedRoute.queryParamMap (Observable) lub snapshot.queryParamMap. Metoda get('paramName') zwraca wartość parametru."
-      },
-      "answers": [
-        {
-          "uk": "Через window.location.search",
-          "en": "Via window.location.search",
-          "pl": "Przez window.location.search",
-          "correct": false
-        },
-        {
-          "uk": "Через ActivatedRoute.queryParamMap",
-          "en": "Via ActivatedRoute.queryParamMap",
-          "pl": "Przez ActivatedRoute.queryParamMap",
-          "correct": true
-        },
-        {
-          "uk": "Через Router.params",
-          "en": "Via Router.params",
-          "pl": "Przez Router.params",
-          "correct": false
-        },
-        {
-          "uk": "Query parameters недоступні в Angular",
-          "en": "Query parameters are not available in Angular",
-          "pl": "Query parameters nie są dostępne w Angular",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q37",
-      "order": 37,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Preloading Strategy і для чого вона потрібна?",
-        "exp": "Preloading Strategy визначає, які lazy-loaded модулі завантажити заздалегідь. PreloadAllModules завантажує всі після старту, можна створити custom strategy."
-      },
-      "en": {
-        "q": "What is Preloading Strategy and what is it for?",
-        "exp": "Preloading Strategy determines which lazy-loaded modules to load in advance. PreloadAllModules loads all after startup, can create custom strategy."
-      },
-      "pl": {
-        "q": "Czym jest Preloading Strategy i do czego służy?",
-        "exp": "Preloading Strategy określa, które lazy-loaded moduły załadować z wyprzedzeniem. PreloadAllModules ładuje wszystkie po starcie, można stworzyć custom strategy."
-      },
-      "answers": [
-        {
-          "uk": "Стратегія кешування даних",
-          "en": "Data caching strategy",
-          "pl": "Strategia cache'owania danych",
-          "correct": false
-        },
-        {
-          "uk": "Визначає, які lazy-модулі завантажити заздалегідь",
-          "en": "Determines which lazy modules to preload",
-          "pl": "Określa które lazy moduły załadować z wyprzedzeniem",
-          "correct": true
-        },
-        {
-          "uk": "Стратегія валідації форм",
-          "en": "Form validation strategy",
-          "pl": "Strategia walidacji formularzy",
-          "correct": false
-        },
-        {
-          "uk": "Метод стилізації компонентів",
-          "en": "Component styling method",
-          "pl": "Metoda stylizacji komponentów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке inject() функція і чим вона краща за constructor injection?",
-        "exp": "inject() — функціональний спосіб DI без constructor. Працює в функціях, guards, resolvers. Чистіший код, менше boilerplate, краща типізація."
-      },
-      "en": {
-        "q": "What is the inject() function and how is it better than constructor injection?",
-        "exp": "inject() is a functional DI approach without constructor. Works in functions, guards, resolvers. Cleaner code, less boilerplate, better typing."
-      },
-      "pl": {
-        "q": "Czym jest funkcja inject() i czym jest lepsza od constructor injection?",
-        "exp": "inject() to funkcjonalne podejście do DI bez konstruktora. Działa w funkcjach, guards, resolvers. Czystszy kod, mniej boilerplate, lepsza typizacja."
-      },
-      "answers": [
-        {
-          "uk": "inject() швидша за constructor",
-          "en": "inject() is faster than constructor",
-          "pl": "inject() jest szybsze niż konstruktor",
-          "correct": false
-        },
-        {
-          "uk": "Функціональний DI без constructor, працює в guards/resolvers",
-          "en": "Functional DI without constructor, works in guards/resolvers",
-          "pl": "Funkcjonalne DI bez konstruktora, działa w guards/resolvers",
-          "correct": true
-        },
-        {
-          "uk": "inject() працює тільки з HTTP",
-          "en": "inject() only works with HTTP",
-          "pl": "inject() działa tylko z HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q39",
-      "order": 39,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Коли використовувати effect() з Signals?",
-        "exp": "effect() виконує side-effects при зміні сигналів (логування, DOM-операції, синхронізація). Автоматично відстежує залежності та реагує на зміни."
-      },
-      "en": {
-        "q": "When should you use effect() with Signals?",
-        "exp": "effect() performs side effects when signals change (logging, DOM operations, sync). Automatically tracks dependencies and reacts to changes."
-      },
-      "pl": {
-        "q": "Kiedy używać effect() z Signals?",
-        "exp": "effect() wykonuje efekty uboczne przy zmianie sygnałów (logowanie, operacje DOM, synchronizacja). Automatycznie śledzi zależności i reaguje na zmiany."
-      },
-      "answers": [
-        {
-          "uk": "Для HTTP-запитів",
-          "en": "For HTTP requests",
-          "pl": "Do żądań HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Для виконання side-effects при зміні сигналів",
-          "en": "For executing side effects when signals change",
-          "pl": "Do wykonywania efektów ubocznych przy zmianie sygnałów",
-          "correct": true
-        },
-        {
-          "uk": "Для валідації форм",
-          "en": "For form validation",
-          "pl": "Do walidacji formularzy",
-          "correct": false
-        },
-        {
-          "uk": "effect() застарілий",
-          "en": "effect() is deprecated",
-          "pl": "effect() jest przestarzały",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-adv-q40",
-      "order": 40,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке computed() у Signals і чим він відрізняється від звичайного signal()?",
-        "exp": "computed() створює похідний сигнал, що автоматично перераховується при зміні залежностей. На відміну від signal(), не можна встановити значення напряму — воно завжди обчислюється."
-      },
-      "en": {
-        "q": "What is computed() in Signals and how does it differ from signal()?",
-        "exp": "computed() creates a derived signal that auto-recalculates when dependencies change. Unlike signal(), you can't set value directly — it's always calculated."
-      },
-      "pl": {
-        "q": "Czym jest computed() w Signals i czym różni się od signal()?",
-        "exp": "computed() tworzy pochodny sygnał, który automatycznie przelicza się przy zmianie zależności. W przeciwieństwie do signal(), nie można ustawić wartości bezpośrednio — jest zawsze obliczana."
-      },
-      "answers": [
-        {
-          "uk": "computed() швидший за signal()",
-          "en": "computed() is faster than signal()",
-          "pl": "computed() jest szybszy niż signal()",
-          "correct": false
-        },
-        {
-          "uk": "computed() — похідний сигнал, що автоматично перераховується",
-          "en": "computed() is a derived signal that auto-recalculates",
-          "pl": "computed() to pochodny sygnał, który automatycznie się przelicza",
-          "correct": true
-        },
-        {
-          "uk": "computed() працює тільки з HTTP",
-          "en": "computed() only works with HTTP",
-          "pl": "computed() działa tylko z HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/angular/advanced/seed-quiz-angular-advanced.ts b/json/quizzes/angular/advanced/seed-quiz-angular-advanced.ts
deleted file mode 100644
index c23fc390..00000000
--- a/json/quizzes/angular/advanced/seed-quiz-angular-advanced.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-import { eq } from 'drizzle-orm';
-import { readFileSync } from 'fs';
-import { join } from 'path';
-import { db } from './index';
-import { categories } from './schema/categories';
-import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
-  quizAnswers,
-  quizAnswerTranslations,
-  quizAttempts,
-} from './schema/quiz';
-
-type Locale = 'uk' | 'en' | 'pl';
-const LOCALES: Locale[] = ['uk', 'en', 'pl'];
-
-interface QuestionData {
-  id: string;
-  order: number;
-  difficulty: 'beginner' | 'medium' | 'advanced';
-  uk: { q: string; exp: string };
-  en: { q: string; exp: string };
-  pl: { q: string; exp: string };
-  answers: {
-    uk: string;
-    en: string;
-    pl: string;
-    correct: boolean;
-  }[];
-}
-
-interface QuizPartData {
-  questions: QuestionData[];
-}
-
-const CATEGORY_SLUG = 'angular';
-
-const QUIZ_METADATA = {
-  slug: 'angular-advanced',
-  questionsCount: 40,
-  timeLimitSeconds: 2400,
-  translations: {
-    uk: {
-      title: 'Angular Advanced',
-      description: 'Поглиблені концепції Angular: lifecycle hooks, DI декоратори, NgRx, кастомні директиви, SSR, Signals, OnPush та оптимізація продуктивності.',
-    },
-    en: {
-      title: 'Angular Advanced',
-      description: 'Advanced Angular concepts: lifecycle hooks, DI decorators, NgRx, custom directives, SSR, Signals, OnPush and performance optimization.',
-    },
-    pl: {
-      title: 'Angular Advanced',
-      description: 'Zaawansowane koncepcje Angular: lifecycle hooks, dekoratory DI, NgRx, niestandardowe dyrektywy, SSR, Signals, OnPush i optymalizacja wydajności.',
-    },
-  },
-};
-
-function createExplanation(text: string) {
-  return [{ type: 'paragraph' as const, children: [{ text }] }];
-}
-
-async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'data', `angular-advanced-quiz-part${partNumber}.json`);
-  const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
-  return partData.questions;
-}
-
-async function ensureQuizExists(): Promise<string> {
-  console.log('Ensuring quiz exists...');
-
-  // Find category by slug
-  const [category] = await db
-    .select()
-    .from(categories)
-    .where(eq(categories.slug, CATEGORY_SLUG))
-    .limit(1);
-
-  if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
-  }
-
-  // Clean up old quiz by slug
-  const existing = await db.query.quizzes.findFirst({
-    where: eq(quizzes.slug, QUIZ_METADATA.slug),
-  });
-  if (existing) {
-    const existingAttempt = await db.query.quizAttempts.findFirst({
-      where: eq(quizAttempts.quizId, existing.id),
-    });
-    if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
-    }
-
-    await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 2,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
-
-    const quizId = existing.id;
-    for (const locale of LOCALES) {
-      await db.insert(quizTranslations).values({
-        quizId,
-        locale,
-        title: QUIZ_METADATA.translations[locale].title,
-        description: QUIZ_METADATA.translations[locale].description,
-      });
-    }
-
-    return quizId;
-  }
-
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 2,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
-
-  for (const locale of LOCALES) {
-    await db.insert(quizTranslations).values({
-      quizId: quiz.id,
-      locale,
-      title: QUIZ_METADATA.translations[locale].title,
-      description: QUIZ_METADATA.translations[locale].description,
-    });
-  }
-
-  return quiz.id;
-}
-
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
-
-  for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
-
-    for (const locale of LOCALES) {
-      await db.insert(quizQuestionContent).values({
-        quizQuestionId: q.id,
-        locale,
-        questionText: question[locale].q,
-        explanation: createExplanation(question[locale].exp),
-      });
-    }
-
-    for (let i = 0; i < question.answers.length; i++) {
-      const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
-
-      for (const locale of LOCALES) {
-        await db.insert(quizAnswerTranslations).values({
-          quizAnswerId: a.id,
-          locale,
-          answerText: answer[locale],
-        });
-      }
-    }
-  }
-
-  console.log(`Part ${partNumber} completed (${questions.length} questions)`);
-}
-
-async function seedQuizFromJson() {
-  const args = process.argv.slice(2);
-  const partArg = args[0];
-
-  if (!partArg) {
-    console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-angular-advanced.ts <part-number>');
-    console.log('Example: npx tsx db/seeds/seed-quiz-angular-advanced.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-angular-advanced.ts all');
-    process.exit(1);
-  }
-
-  console.log('Starting Angular Advanced quiz seed...\n');
-
-  try {
-    const quizId = await ensureQuizExists();
-
-    if (partArg.toLowerCase() === 'all') {
-      console.log('Uploading all parts...\n');
-      let totalQuestions = 0;
-
-      for (let i = 1; i <= 4; i++) {
-        const questions = await loadQuestions(i);
-        await seedQuestions(questions, quizId, i);
-        totalQuestions += questions.length;
-      }
-
-      console.log('\nAll parts seeded successfully!');
-      console.log(`   - 1 quiz with ${LOCALES.length} translations`);
-      console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
-    } else {
-      const partNumber = parseInt(partArg, 10);
-
-      if (isNaN(partNumber) || partNumber < 1 || partNumber > 4) {
-        console.error('Error: Part number must be between 1 and 4');
-        process.exit(1);
-      }
-
-      const questions = await loadQuestions(partNumber);
-      await seedQuestions(questions, quizId, partNumber);
-
-      console.log('\nPart seeded successfully!');
-      console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
-      console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
-    }
-  } catch (error) {
-    console.error('\nError seeding quiz:', error);
-    throw error;
-  }
-}
-
-seedQuizFromJson()
-  .then(() => process.exit(0))
-  .catch((error) => {
-    console.error(error);
-    process.exit(1);
-  });
diff --git a/json/quizzes/angular/beginner_medium/angular-quiz-part1.json b/json/quizzes/angular/beginner_medium/angular-quiz-part1.json
deleted file mode 100644
index 81f7a26e..00000000
--- a/json/quizzes/angular/beginner_medium/angular-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "angular-q01",
-      "order": 1,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке Angular?",
-        "exp": "Angular — це фронтенд-фреймворк від Google для побудови SPA (Single Page Applications) та масштабованих веб-додатків із вбудованими інструментами."
-      },
-      "en": {
-        "q": "What is Angular?",
-        "exp": "Angular is a frontend framework by Google for building SPAs (Single Page Applications) and scalable web applications with built-in tools."
-      },
-      "pl": {
-        "q": "Czym jest Angular?",
-        "exp": "Angular to framework frontendowy od Google do budowania SPA (Single Page Applications) i skalowalnych aplikacji webowych z wbudowanymi narzędziami."
-      },
-      "answers": [
-        {
-          "uk": "Бібліотека для роботи з базами даних",
-          "en": "A library for working with databases",
-          "pl": "Biblioteka do pracy z bazami danych",
-          "correct": false
-        },
-        {
-          "uk": "Фронтенд-фреймворк від Google для побудови SPA та масштабованих веб-додатків",
-          "en": "A frontend framework by Google for building SPAs and scalable web applications",
-          "pl": "Framework frontendowy od Google do budowania SPA i skalowalnych aplikacji webowych",
-          "correct": true
-        },
-        {
-          "uk": "Мова програмування для мобільних додатків",
-          "en": "A programming language for mobile applications",
-          "pl": "Język programowania dla aplikacji mobilnych",
-          "correct": false
-        },
-        {
-          "uk": "Інструмент для тестування бекенду",
-          "en": "A tool for backend testing",
-          "pl": "Narzędzie do testowania backendu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q02",
-      "order": 2,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке компонент в Angular?",
-        "exp": "Компонент — це основний будівельний блок Angular-додатку, що складається з класу (логіка), шаблону HTML та стилів."
-      },
-      "en": {
-        "q": "What is a component in Angular?",
-        "exp": "A component is the main building block of an Angular application, consisting of a class (logic), HTML template, and styles."
-      },
-      "pl": {
-        "q": "Czym jest komponent w Angular?",
-        "exp": "Komponent to główny blok budulcowy aplikacji Angular, składający się z klasy (logika), szablonu HTML i stylów."
-      },
-      "answers": [
-        {
-          "uk": "Функція для обробки HTTP-запитів",
-          "en": "A function for handling HTTP requests",
-          "pl": "Funkcja do obsługi żądań HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Основний будівельний блок, що містить клас, шаблон і стилі",
-          "en": "A main building block containing a class, template, and styles",
-          "pl": "Główny blok budulcowy zawierający klasę, szablon i style",
-          "correct": true
-        },
-        {
-          "uk": "Файл конфігурації для маршрутизації",
-          "en": "A configuration file for routing",
-          "pl": "Plik konfiguracyjny dla routingu",
-          "correct": false
-        },
-        {
-          "uk": "Тип змінної в TypeScript",
-          "en": "A variable type in TypeScript",
-          "pl": "Typ zmiennej w TypeScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q03",
-      "order": 3,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Скільки основних типів data-binding існує в Angular?",
-        "exp": "В Angular є 4 типи: interpolation ({{ }}), property binding ([]), event binding (()), та two-way binding ([()])."
-      },
-      "en": {
-        "q": "How many main types of data binding exist in Angular?",
-        "exp": "Angular has 4 types: interpolation ({{ }}), property binding ([]), event binding (()), and two-way binding ([()])"
-      },
-      "pl": {
-        "q": "Ile głównych typów data binding istnieje w Angular?",
-        "exp": "Angular ma 4 typy: interpolation ({{ }}), property binding ([]), event binding (()), oraz two-way binding ([()])"
-      },
-      "answers": [
-        {
-          "uk": "2",
-          "en": "2",
-          "pl": "2",
-          "correct": false
-        },
-        {
-          "uk": "3",
-          "en": "3",
-          "pl": "3",
-          "correct": false
-        },
-        {
-          "uk": "4",
-          "en": "4",
-          "pl": "4",
-          "correct": true
-        },
-        {
-          "uk": "5",
-          "en": "5",
-          "pl": "5",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q04",
-      "order": 4,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Який синтаксис використовується для interpolation в Angular?",
-        "exp": "Interpolation використовує подвійні фігурні дужки {{ value }} для відображення даних із компонента в шаблоні."
-      },
-      "en": {
-        "q": "What syntax is used for interpolation in Angular?",
-        "exp": "Interpolation uses double curly braces {{ value }} to display component data in the template."
-      },
-      "pl": {
-        "q": "Jakiej składni używa się do interpolacji w Angular?",
-        "exp": "Interpolacja używa podwójnych nawiasów klamrowych {{ value }} do wyświetlania danych komponentu w szablonie."
-      },
-      "answers": [
-        {
-          "uk": "[value]",
-          "en": "[value]",
-          "pl": "[value]",
-          "correct": false
-        },
-        {
-          "uk": "(value)",
-          "en": "(value)",
-          "pl": "(value)",
-          "correct": false
-        },
-        {
-          "uk": "{{ value }}",
-          "en": "{{ value }}",
-          "pl": "{{ value }}",
-          "correct": true
-        },
-        {
-          "uk": "*value",
-          "en": "*value",
-          "pl": "*value",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q05",
-      "order": 5,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як реалізувати двостороннє зв'язування (two-way binding) у Angular?",
-        "exp": "Two-way binding реалізується через [(ngModel)] або комбінацію property binding і event binding. Синтаксис [()] називають \"banana in a box\"."
-      },
-      "en": {
-        "q": "How do you implement two-way binding in Angular?",
-        "exp": "Two-way binding is implemented via [(ngModel)] or a combination of property and event binding. The [()] syntax is called 'banana in a box'."
-      },
-      "pl": {
-        "q": "Jak zaimplementować dwukierunkowe wiązanie (two-way binding) w Angular?",
-        "exp": "Two-way binding implementuje się przez [(ngModel)] lub kombinację property binding i event binding. Składnia [()] nazywana jest 'banana in a box'."
-      },
-      "answers": [
-        {
-          "uk": "Через синтаксис {{ value }}",
-          "en": "Using {{ value }} syntax",
-          "pl": "Przez składnię {{ value }}",
-          "correct": false
-        },
-        {
-          "uk": "Через синтаксис [(ngModel)]=\"value\"",
-          "en": "Using [(ngModel)]=\"value\" syntax",
-          "pl": "Przez składnię [(ngModel)]=\"value\"",
-          "correct": true
-        },
-        {
-          "uk": "Через синтаксис [value]",
-          "en": "Using [value] syntax",
-          "pl": "Przez składnię [value]",
-          "correct": false
-        },
-        {
-          "uk": "Two-way binding неможливий в Angular",
-          "en": "Two-way binding is not possible in Angular",
-          "pl": "Two-way binding nie jest możliwy w Angular",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q06",
-      "order": 6,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка основна різниця між структурними та атрибутними директивами?",
-        "exp": "Структурні директиви (@if, @for) змінюють структуру DOM (додають/видаляють елементи), атрибутні (ngClass, ngStyle) змінюють лише вигляд чи поведінку елемента."
-      },
-      "en": {
-        "q": "What is the main difference between structural and attribute directives?",
-        "exp": "Structural directives (@if, @for) change DOM structure (add/remove elements), attribute directives (ngClass, ngStyle) only change element appearance or behavior."
-      },
-      "pl": {
-        "q": "Jaka jest główna różnica między dyrektywami strukturalnymi a atrybutowymi?",
-        "exp": "Dyrektywy strukturalne (@if, @for) zmieniają strukturę DOM (dodają/usuwają elementy), dyrektywy atrybutowe (ngClass, ngStyle) zmieniają tylko wygląd lub zachowanie elementu."
-      },
-      "answers": [
-        {
-          "uk": "Структурні змінюють стилі, атрибутні — структуру DOM",
-          "en": "Structural change styles, attribute change DOM structure",
-          "pl": "Strukturalne zmieniają style, atrybutowe — strukturę DOM",
-          "correct": false
-        },
-        {
-          "uk": "Структурні змінюють структуру DOM, атрибутні — вигляд або поведінку",
-          "en": "Structural change DOM structure, attribute change appearance or behavior",
-          "pl": "Strukturalne zmieniają strukturę DOM, atrybutowe — wygląd lub zachowanie",
-          "correct": true
-        },
-        {
-          "uk": "Різниці немає, це синоніми",
-          "en": "No difference, they are synonyms",
-          "pl": "Nie ma różnicy, to synonimy",
-          "correct": false
-        },
-        {
-          "uk": "Атрибутні можуть видаляти елементи, структурні — ні",
-          "en": "Attribute can remove elements, structural cannot",
-          "pl": "Atrybutowe mogą usuwać elementy, strukturalne — nie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q07",
-      "order": 7,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке standalone components в Angular?",
-        "exp": "Standalone components — це компоненти, які не потребують NgModule для свого оголошення. Вони імпортують залежності напряму через властивість imports."
-      },
-      "en": {
-        "q": "What are standalone components in Angular?",
-        "exp": "Standalone components are components that don't require NgModule for their declaration. They import dependencies directly via the imports property."
-      },
-      "pl": {
-        "q": "Czym są standalone components w Angular?",
-        "exp": "Standalone components to komponenty, które nie wymagają NgModule do ich deklaracji. Importują zależności bezpośrednio przez właściwość imports."
-      },
-      "answers": [
-        {
-          "uk": "Компоненти, які працюють тільки на сервері",
-          "en": "Components that only work on the server",
-          "pl": "Komponenty, które działają tylko na serwerze",
-          "correct": false
-        },
-        {
-          "uk": "Компоненти без шаблону",
-          "en": "Components without a template",
-          "pl": "Komponenty bez szablonu",
-          "correct": false
-        },
-        {
-          "uk": "Компоненти, які не потребують NgModule",
-          "en": "Components that don't require NgModule",
-          "pl": "Komponenty, które nie wymagają NgModule",
-          "correct": true
-        },
-        {
-          "uk": "Компоненти з глобальними стилями",
-          "en": "Components with global styles",
-          "pl": "Komponenty z globalnymi stylami",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q08",
-      "order": 8,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка директива використовується для динамічного керування CSS-класами?",
-        "exp": "Директива ngClass дозволяє динамічно додавати або видаляти CSS-класи на елементі залежно від умов у компоненті."
-      },
-      "en": {
-        "q": "Which directive is used for dynamic CSS class management?",
-        "exp": "The ngClass directive allows dynamically adding or removing CSS classes on an element based on conditions in the component."
-      },
-      "pl": {
-        "q": "Która dyrektywa służy do dynamicznego zarządzania klasami CSS?",
-        "exp": "Dyrektywa ngClass pozwala dynamicznie dodawać lub usuwać klasy CSS na elemencie w zależności od warunków w komponencie."
-      },
-      "answers": [
-        {
-          "uk": "ngStyle",
-          "en": "ngStyle",
-          "pl": "ngStyle",
-          "correct": false
-        },
-        {
-          "uk": "ngClass",
-          "en": "ngClass",
-          "pl": "ngClass",
-          "correct": true
-        },
-        {
-          "uk": "@if",
-          "en": "@if",
-          "pl": "@if",
-          "correct": false
-        },
-        {
-          "uk": "ngModel",
-          "en": "ngModel",
-          "pl": "ngModel",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q09",
-      "order": 9,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як обробити подію click на кнопці в Angular?",
-        "exp": "Події обробляються через event binding з синтаксисом (eventName). Для click: <button (click)=\"onClick()\">."
-      },
-      "en": {
-        "q": "How do you handle a click event on a button in Angular?",
-        "exp": "Events are handled via event binding with (eventName) syntax. For click: <button (click)=\"onClick()\">."
-      },
-      "pl": {
-        "q": "Jak obsłużyć zdarzenie click na przycisku w Angular?",
-        "exp": "Zdarzenia obsługuje się przez event binding ze składnią (eventName). Dla click: <button (click)=\"onClick()\">."
-      },
-      "answers": [
-        {
-          "uk": "<button [click]=\"onClick()\">",
-          "en": "<button [click]=\"onClick()\">",
-          "pl": "<button [click]=\"onClick()\">",
-          "correct": false
-        },
-        {
-          "uk": "<button (click)=\"onClick()\">",
-          "en": "<button (click)=\"onClick()\">",
-          "pl": "<button (click)=\"onClick()\">",
-          "correct": true
-        },
-        {
-          "uk": "<button {{click}}=\"onClick()\">",
-          "en": "<button {{click}}=\"onClick()\">",
-          "pl": "<button {{click}}=\"onClick()\">",
-          "correct": false
-        },
-        {
-          "uk": "<button click=\"onClick()\">",
-          "en": "<button click=\"onClick()\">",
-          "pl": "<button click=\"onClick()\">",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q10",
-      "order": 10,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який декоратор використовується для передачі даних з батьківського компонента в дочірній?",
-        "exp": "Декоратор @Input() позначає властивість, яка може отримувати дані від батьківського компонента через property binding."
-      },
-      "en": {
-        "q": "Which decorator is used to pass data from a parent component to a child?",
-        "exp": "The @Input() decorator marks a property that can receive data from a parent component via property binding."
-      },
-      "pl": {
-        "q": "Który dekorator służy do przekazywania danych z komponentu rodzica do dziecka?",
-        "exp": "Dekorator @Input() oznacza właściwość, która może otrzymywać dane od komponentu rodzica przez property binding."
-      },
-      "answers": [
-        {
-          "uk": "@Output()",
-          "en": "@Output()",
-          "pl": "@Output()",
-          "correct": false
-        },
-        {
-          "uk": "@Input()",
-          "en": "@Input()",
-          "pl": "@Input()",
-          "correct": true
-        },
-        {
-          "uk": "@ViewChild()",
-          "en": "@ViewChild()",
-          "pl": "@ViewChild()",
-          "correct": false
-        },
-        {
-          "uk": "@Injectable()",
-          "en": "@Injectable()",
-          "pl": "@Injectable()",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/angular/beginner_medium/angular-quiz-part2.json b/json/quizzes/angular/beginner_medium/angular-quiz-part2.json
deleted file mode 100644
index 28222d08..00000000
--- a/json/quizzes/angular/beginner_medium/angular-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "angular-q11",
-      "order": 11,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який декоратор використовується для передачі подій з дочірнього компонента в батьківський?",
-        "exp": "@Output() разом з EventEmitter дозволяє дочірньому компоненту емітити події, на які батьківський компонент може підписатися."
-      },
-      "en": {
-        "q": "Which decorator is used to emit events from a child component to a parent?",
-        "exp": "@Output() together with EventEmitter allows a child component to emit events that the parent component can subscribe to."
-      },
-      "pl": {
-        "q": "Który dekorator służy do emitowania zdarzeń z komponentu dziecka do rodzica?",
-        "exp": "@Output() wraz z EventEmitter pozwala komponentowi dziecka emitować zdarzenia, na które komponent rodzica może się subskrybować."
-      },
-      "answers": [
-        {
-          "uk": "@Input()",
-          "en": "@Input()",
-          "pl": "@Input()",
-          "correct": false
-        },
-        {
-          "uk": "@Output()",
-          "en": "@Output()",
-          "pl": "@Output()",
-          "correct": true
-        },
-        {
-          "uk": "@Emit()",
-          "en": "@Emit()",
-          "pl": "@Emit()",
-          "correct": false
-        },
-        {
-          "uk": "@Event()",
-          "en": "@Event()",
-          "pl": "@Event()",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q12",
-      "order": 12,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке сервіс в Angular і для чого він використовується?",
-        "exp": "Сервіс — це клас з бізнес-логікою, який не пов'язаний напряму з UI. Використовується для роботи з API, керування станом та повторного використання коду."
-      },
-      "en": {
-        "q": "What is a service in Angular and what is it used for?",
-        "exp": "A service is a class with business logic not directly tied to UI. It's used for API calls, state management, and code reusability."
-      },
-      "pl": {
-        "q": "Czym jest serwis w Angular i do czego służy?",
-        "exp": "Serwis to klasa z logiką biznesową niezwiązana bezpośrednio z UI. Służy do wywołań API, zarządzania stanem i ponownego wykorzystania kodu."
-      },
-      "answers": [
-        {
-          "uk": "Компонент для відображення даних",
-          "en": "A component for displaying data",
-          "pl": "Komponent do wyświetlania danych",
-          "correct": false
-        },
-        {
-          "uk": "Клас з бізнес-логікою для роботи з API та керування станом",
-          "en": "A class with business logic for API calls and state management",
-          "pl": "Klasa z logiką biznesową do wywołań API i zarządzania stanem",
-          "correct": true
-        },
-        {
-          "uk": "Файл конфігурації маршрутів",
-          "en": "A route configuration file",
-          "pl": "Plik konfiguracji tras",
-          "correct": false
-        },
-        {
-          "uk": "Директива для стилізації",
-          "en": "A directive for styling",
-          "pl": "Dyrektywa do stylizacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q13",
-      "order": 13,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що означає providedIn: 'root' у декораторі @Injectable?",
-        "exp": "providedIn: 'root' реєструє сервіс у головному інжекторі як singleton — один екземпляр на весь застосунок з оптимізацією tree-shaking."
-      },
-      "en": {
-        "q": "What does providedIn: 'root' mean in the @Injectable decorator?",
-        "exp": "providedIn: 'root' registers the service in the root injector as a singleton — one instance for the entire app with tree-shaking optimization."
-      },
-      "pl": {
-        "q": "Co oznacza providedIn: 'root' w dekoratorze @Injectable?",
-        "exp": "providedIn: 'root' rejestruje serwis w głównym injektorze jako singleton — jedna instancja dla całej aplikacji z optymalizacją tree-shaking."
-      },
-      "answers": [
-        {
-          "uk": "Сервіс доступний тільки в кореневому компоненті",
-          "en": "Service is only available in the root component",
-          "pl": "Serwis jest dostępny tylko w głównym komponencie",
-          "correct": false
-        },
-        {
-          "uk": "Сервіс є singleton на рівні всього застосунку",
-          "en": "Service is a singleton for the entire application",
-          "pl": "Serwis jest singletonem dla całej aplikacji",
-          "correct": true
-        },
-        {
-          "uk": "Сервіс створюється для кожного компонента окремо",
-          "en": "Service is created separately for each component",
-          "pl": "Serwis jest tworzony oddzielnie dla każdego komponentu",
-          "correct": false
-        },
-        {
-          "uk": "Сервіс працює тільки на сервері",
-          "en": "Service only works on the server",
-          "pl": "Serwis działa tylko na serwerze",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q14",
-      "order": 14,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Dependency Injection (DI) в Angular?",
-        "exp": "DI — це механізм, який автоматично створює та надає об'єкти (сервіси) компонентам замість ручного створення через new. Спрощує тестування та керує життєвим циклом об'єктів."
-      },
-      "en": {
-        "q": "What is Dependency Injection (DI) in Angular?",
-        "exp": "DI is a mechanism that automatically creates and provides objects (services) to components instead of manual creation via new. It simplifies testing and manages object lifecycles."
-      },
-      "pl": {
-        "q": "Czym jest Dependency Injection (DI) w Angular?",
-        "exp": "DI to mechanizm automatycznego tworzenia i dostarczania obiektów (serwisów) do komponentów zamiast ręcznego tworzenia przez new. Upraszcza testowanie i zarządza cyklem życia obiektów."
-      },
-      "answers": [
-        {
-          "uk": "Спосіб додавання CSS-залежностей",
-          "en": "A way to add CSS dependencies",
-          "pl": "Sposób dodawania zależności CSS",
-          "correct": false
-        },
-        {
-          "uk": "Механізм автоматичного надання залежностей компонентам",
-          "en": "A mechanism for automatically providing dependencies to components",
-          "pl": "Mechanizm automatycznego dostarczania zależności do komponentów",
-          "correct": true
-        },
-        {
-          "uk": "Процес збірки застосунку",
-          "en": "The application build process",
-          "pl": "Proces budowania aplikacji",
-          "correct": false
-        },
-        {
-          "uk": "Метод шифрування даних",
-          "en": "A data encryption method",
-          "pl": "Metoda szyfrowania danych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q15",
-      "order": 15,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який lifecycle hook викликається один раз після ініціалізації компонента?",
-        "exp": "ngOnInit() викликається один раз після ініціалізації компонента. Використовується для початкового завантаження даних та налаштування."
-      },
-      "en": {
-        "q": "Which lifecycle hook is called once after component initialization?",
-        "exp": "ngOnInit() is called once after component initialization. It's used for initial data loading and setup."
-      },
-      "pl": {
-        "q": "Który lifecycle hook jest wywoływany raz po inicjalizacji komponentu?",
-        "exp": "ngOnInit() jest wywoływany raz po inicjalizacji komponentu. Służy do początkowego ładowania danych i konfiguracji."
-      },
-      "answers": [
-        {
-          "uk": "ngOnChanges()",
-          "en": "ngOnChanges()",
-          "pl": "ngOnChanges()",
-          "correct": false
-        },
-        {
-          "uk": "ngOnInit()",
-          "en": "ngOnInit()",
-          "pl": "ngOnInit()",
-          "correct": true
-        },
-        {
-          "uk": "ngOnDestroy()",
-          "en": "ngOnDestroy()",
-          "pl": "ngOnDestroy()",
-          "correct": false
-        },
-        {
-          "uk": "ngAfterViewInit()",
-          "en": "ngAfterViewInit()",
-          "pl": "ngAfterViewInit()",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q16",
-      "order": 16,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який lifecycle hook використовується для очищення ресурсів перед знищенням компонента?",
-        "exp": "ngOnDestroy() викликається перед знищенням компонента. Тут потрібно відписуватися від Observable, очищати таймери та інші ресурси."
-      },
-      "en": {
-        "q": "Which lifecycle hook is used for cleanup before component destruction?",
-        "exp": "ngOnDestroy() is called before component destruction. Use it to unsubscribe from Observables, clear timers, and release other resources."
-      },
-      "pl": {
-        "q": "Który lifecycle hook służy do czyszczenia zasobów przed zniszczeniem komponentu?",
-        "exp": "ngOnDestroy() jest wywoływany przed zniszczeniem komponentu. Służy do odsubskrybowania Observable, czyszczenia timerów i innych zasobów."
-      },
-      "answers": [
-        {
-          "uk": "ngOnInit()",
-          "en": "ngOnInit()",
-          "pl": "ngOnInit()",
-          "correct": false
-        },
-        {
-          "uk": "ngAfterViewInit()",
-          "en": "ngAfterViewInit()",
-          "pl": "ngAfterViewInit()",
-          "correct": false
-        },
-        {
-          "uk": "ngOnDestroy()",
-          "en": "ngOnDestroy()",
-          "pl": "ngOnDestroy()",
-          "correct": true
-        },
-        {
-          "uk": "ngDoCheck()",
-          "en": "ngDoCheck()",
-          "pl": "ngDoCheck()",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q17",
-      "order": 17,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке pipe в Angular?",
-        "exp": "Pipe — це клас для трансформації даних у шаблоні без зміни оригінального значення. Наприклад: date, currency, uppercase."
-      },
-      "en": {
-        "q": "What is a pipe in Angular?",
-        "exp": "A pipe is a class for transforming data in templates without changing the original value. For example: date, currency, uppercase."
-      },
-      "pl": {
-        "q": "Czym jest pipe w Angular?",
-        "exp": "Pipe to klasa do transformacji danych w szablonach bez zmiany oryginalnej wartości. Na przykład: date, currency, uppercase."
-      },
-      "answers": [
-        {
-          "uk": "Інструмент для роботи з HTTP",
-          "en": "A tool for working with HTTP",
-          "pl": "Narzędzie do pracy z HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Клас для трансформації даних у шаблоні",
-          "en": "A class for transforming data in templates",
-          "pl": "Klasa do transformacji danych w szablonach",
-          "correct": true
-        },
-        {
-          "uk": "Метод маршрутизації",
-          "en": "A routing method",
-          "pl": "Metoda routingu",
-          "correct": false
-        },
-        {
-          "uk": "Декоратор для сервісів",
-          "en": "A decorator for services",
-          "pl": "Dekorator dla serwisów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q18",
-      "order": 18,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між pure та impure pipes?",
-        "exp": "Pure pipes викликаються тільки при зміні вхідних даних (за замовчуванням), impure — на кожен цикл change detection. Pure pipes продуктивніші."
-      },
-      "en": {
-        "q": "What is the difference between pure and impure pipes?",
-        "exp": "Pure pipes are called only when input changes (default), impure pipes run on every change detection cycle. Pure pipes are more performant."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między pipe'ami pure i impure?",
-        "exp": "Pure pipes wywoływane są tylko przy zmianie danych wejściowych (domyślnie), impure — przy każdym cyklu change detection. Pure pipes są wydajniejsze."
-      },
-      "answers": [
-        {
-          "uk": "Pure працюють на сервері, impure — в браузері",
-          "en": "Pure work on server, impure work in browser",
-          "pl": "Pure działają na serwerze, impure — w przeglądarce",
-          "correct": false
-        },
-        {
-          "uk": "Pure викликаються тільки при зміні input, impure — на кожен change detection",
-          "en": "Pure are called only on input change, impure on every change detection",
-          "pl": "Pure wywoływane tylko przy zmianie input, impure — przy każdym change detection",
-          "correct": true
-        },
-        {
-          "uk": "Impure швидші за pure",
-          "en": "Impure are faster than pure",
-          "pl": "Impure są szybsze niż pure",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q19",
-      "order": 19,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка основна різниця між Template-driven та Reactive формами?",
-        "exp": "Template-driven форми будуються в HTML через директиви (ngModel), Reactive — в TypeScript через FormGroup/FormControl. Reactive дають більше контролю."
-      },
-      "en": {
-        "q": "What is the main difference between Template-driven and Reactive forms?",
-        "exp": "Template-driven forms are built in HTML via directives (ngModel), Reactive forms in TypeScript via FormGroup/FormControl. Reactive forms give more control."
-      },
-      "pl": {
-        "q": "Jaka jest główna różnica między formularzami Template-driven a Reactive?",
-        "exp": "Formularze Template-driven budowane są w HTML przez dyrektywy (ngModel), Reactive — w TypeScript przez FormGroup/FormControl. Reactive dają więcej kontroli."
-      },
-      "answers": [
-        {
-          "uk": "Template-driven швидші за Reactive",
-          "en": "Template-driven are faster than Reactive",
-          "pl": "Template-driven są szybsze niż Reactive",
-          "correct": false
-        },
-        {
-          "uk": "Template-driven будуються в HTML, Reactive — в TypeScript коді",
-          "en": "Template-driven are built in HTML, Reactive in TypeScript code",
-          "pl": "Template-driven budowane są w HTML, Reactive — w kodzie TypeScript",
-          "correct": true
-        },
-        {
-          "uk": "Reactive працюють тільки з ngModel",
-          "en": "Reactive only work with ngModel",
-          "pl": "Reactive działają tylko z ngModel",
-          "correct": false
-        },
-        {
-          "uk": "Template-driven не підтримують валідацію",
-          "en": "Template-driven don't support validation",
-          "pl": "Template-driven nie wspierają walidacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q20",
-      "order": 20,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке FormGroup у Reactive Forms?",
-        "exp": "FormGroup — це контейнер, що об'єднує кілька FormControl у єдину структуру для керування станом, валідацією та значеннями всієї групи полів."
-      },
-      "en": {
-        "q": "What is FormGroup in Reactive Forms?",
-        "exp": "FormGroup is a container that combines multiple FormControls into a single structure for managing state, validation, and values of the entire field group."
-      },
-      "pl": {
-        "q": "Czym jest FormGroup w Reactive Forms?",
-        "exp": "FormGroup to kontener łączący wiele FormControl w jedną strukturę do zarządzania stanem, walidacją i wartościami całej grupy pól."
-      },
-      "answers": [
-        {
-          "uk": "Окреме поле форми",
-          "en": "A single form field",
-          "pl": "Pojedyncze pole formularza",
-          "correct": false
-        },
-        {
-          "uk": "Контейнер, що об'єднує кілька FormControl",
-          "en": "A container that combines multiple FormControls",
-          "pl": "Kontener łączący wiele FormControl",
-          "correct": true
-        },
-        {
-          "uk": "Валідатор форми",
-          "en": "A form validator",
-          "pl": "Walidator formularza",
-          "correct": false
-        },
-        {
-          "uk": "Декоратор для шаблону",
-          "en": "A template decorator",
-          "pl": "Dekorator dla szablonu",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/angular/beginner_medium/angular-quiz-part3.json b/json/quizzes/angular/beginner_medium/angular-quiz-part3.json
deleted file mode 100644
index cfa8c5c7..00000000
--- a/json/quizzes/angular/beginner_medium/angular-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "angular-q21",
-      "order": 21,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке FormArray і коли його використовують?",
-        "exp": "FormArray — це масив FormControl або FormGroup для динамічних форм, де кількість полів може змінюватися (наприклад, список телефонів)."
-      },
-      "en": {
-        "q": "What is FormArray and when is it used?",
-        "exp": "FormArray is an array of FormControls or FormGroups for dynamic forms where the number of fields can change (e.g., a list of phone numbers)."
-      },
-      "pl": {
-        "q": "Czym jest FormArray i kiedy się go używa?",
-        "exp": "FormArray to tablica FormControl lub FormGroup dla dynamicznych formularzy, gdzie liczba pól może się zmieniać (np. lista numerów telefonów)."
-      },
-      "answers": [
-        {
-          "uk": "Масив валідаторів",
-          "en": "An array of validators",
-          "pl": "Tablica walidatorów",
-          "correct": false
-        },
-        {
-          "uk": "Масив FormControl для динамічних форм зі змінною кількістю полів",
-          "en": "An array of FormControls for dynamic forms with variable field count",
-          "pl": "Tablica FormControl dla dynamicznych formularzy ze zmienną liczbą pól",
-          "correct": true
-        },
-        {
-          "uk": "Стилізований список полів",
-          "en": "A styled list of fields",
-          "pl": "Stylizowana lista pól",
-          "correct": false
-        },
-        {
-          "uk": "Групування валідаційних помилок",
-          "en": "A grouping of validation errors",
-          "pl": "Grupowanie błędów walidacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q22",
-      "order": 22,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовується <router-outlet> в Angular?",
-        "exp": "<router-outlet> — це директива, яка визначає місце в шаблоні, куди Angular підставляє компонент відповідно до активного маршруту."
-      },
-      "en": {
-        "q": "What is <router-outlet> used for in Angular?",
-        "exp": "<router-outlet> is a directive that defines where in the template Angular inserts the component matching the active route."
-      },
-      "pl": {
-        "q": "Do czego służy <router-outlet> w Angular?",
-        "exp": "<router-outlet> to dyrektywa określająca miejsce w szablonie, gdzie Angular wstawia komponent odpowiadający aktywnej trasie."
-      },
-      "answers": [
-        {
-          "uk": "Контейнер для форм",
-          "en": "A container for forms",
-          "pl": "Kontener dla formularzy",
-          "correct": false
-        },
-        {
-          "uk": "Місце для відображення компонента активного маршруту",
-          "en": "A place to display the active route's component",
-          "pl": "Miejsce do wyświetlania komponentu aktywnej trasy",
-          "correct": true
-        },
-        {
-          "uk": "Елемент для стилізації навігації",
-          "en": "An element for styling navigation",
-          "pl": "Element do stylizacji nawigacji",
-          "correct": false
-        },
-        {
-          "uk": "Метод переходу між сторінками",
-          "en": "A method for navigating between pages",
-          "pl": "Metoda nawigacji między stronami",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q23",
-      "order": 23,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке lazy loading в контексті маршрутизації Angular?",
-        "exp": "Lazy loading — це завантаження модуля або компонента тільки при переході на відповідний маршрут, що зменшує початковий розмір бандлу."
-      },
-      "en": {
-        "q": "What is lazy loading in the context of Angular routing?",
-        "exp": "Lazy loading is loading a module or component only when navigating to its route, which reduces the initial bundle size."
-      },
-      "pl": {
-        "q": "Czym jest lazy loading w kontekście routingu Angular?",
-        "exp": "Lazy loading to ładowanie modułu lub komponentu tylko przy nawigacji do jego trasy, co zmniejsza początkowy rozmiar paczki."
-      },
-      "answers": [
-        {
-          "uk": "Завантаження всіх компонентів при старті",
-          "en": "Loading all components at startup",
-          "pl": "Ładowanie wszystkich komponentów przy starcie",
-          "correct": false
-        },
-        {
-          "uk": "Завантаження модуля/компонента тільки при переході на маршрут",
-          "en": "Loading module/component only when navigating to the route",
-          "pl": "Ładowanie modułu/komponentu tylko przy nawigacji do trasy",
-          "correct": true
-        },
-        {
-          "uk": "Кешування даних маршруту",
-          "en": "Caching route data",
-          "pl": "Cache'owanie danych trasy",
-          "correct": false
-        },
-        {
-          "uk": "Попереднє завантаження зображень",
-          "en": "Preloading images",
-          "pl": "Wstępne ładowanie obrazów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q24",
-      "order": 24,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовуються Route Guards?",
-        "exp": "Route Guards (canActivate, canDeactivate, canLoad) контролюють доступ до маршрутів — наприклад, перевіряють авторизацію перед переходом."
-      },
-      "en": {
-        "q": "What are Route Guards used for?",
-        "exp": "Route Guards (canActivate, canDeactivate, canLoad) control access to routes — for example, checking authorization before navigation."
-      },
-      "pl": {
-        "q": "Do czego służą Route Guards?",
-        "exp": "Route Guards (canActivate, canDeactivate, canLoad) kontrolują dostęp do tras — na przykład sprawdzają autoryzację przed nawigacją."
-      },
-      "answers": [
-        {
-          "uk": "Стилізація навігаційних посилань",
-          "en": "Styling navigation links",
-          "pl": "Stylizacja linków nawigacyjnych",
-          "correct": false
-        },
-        {
-          "uk": "Кешування даних маршруту",
-          "en": "Caching route data",
-          "pl": "Cache'owanie danych trasy",
-          "correct": false
-        },
-        {
-          "uk": "Контроль доступу до маршрутів",
-          "en": "Controlling access to routes",
-          "pl": "Kontrola dostępu do tras",
-          "correct": true
-        },
-        {
-          "uk": "Анімація переходів між сторінками",
-          "en": "Animating transitions between pages",
-          "pl": "Animacja przejść między stronami",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q25",
-      "order": 25,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке ActivatedRoute і для чого він використовується?",
-        "exp": "ActivatedRoute надає доступ до інформації про активний маршрут: параметри, query-параметри, дані з resolve та інше."
-      },
-      "en": {
-        "q": "What is ActivatedRoute and what is it used for?",
-        "exp": "ActivatedRoute provides access to information about the active route: parameters, query parameters, resolve data, and more."
-      },
-      "pl": {
-        "q": "Czym jest ActivatedRoute i do czego służy?",
-        "exp": "ActivatedRoute zapewnia dostęp do informacji o aktywnej trasie: parametry, query parameters, dane z resolve i więcej."
-      },
-      "answers": [
-        {
-          "uk": "Сервіс для HTTP-запитів",
-          "en": "A service for HTTP requests",
-          "pl": "Serwis do żądań HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Сервіс для доступу до параметрів та даних активного маршруту",
-          "en": "A service for accessing parameters and data of the active route",
-          "pl": "Serwis do dostępu do parametrów i danych aktywnej trasy",
-          "correct": true
-        },
-        {
-          "uk": "Декоратор для компонентів",
-          "en": "A decorator for components",
-          "pl": "Dekorator dla komponentów",
-          "correct": false
-        },
-        {
-          "uk": "Метод для зміни маршруту",
-          "en": "A method for changing routes",
-          "pl": "Metoda do zmiany tras",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q26",
-      "order": 26,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Який сервіс використовується для HTTP-запитів в Angular?",
-        "exp": "HttpClient — це сервіс для виконання HTTP-запитів. Він автоматично парсить JSON і повертає Observable."
-      },
-      "en": {
-        "q": "Which service is used for HTTP requests in Angular?",
-        "exp": "HttpClient is a service for making HTTP requests. It automatically parses JSON and returns Observables."
-      },
-      "pl": {
-        "q": "Który serwis służy do żądań HTTP w Angular?",
-        "exp": "HttpClient to serwis do wykonywania żądań HTTP. Automatycznie parsuje JSON i zwraca Observable."
-      },
-      "answers": [
-        {
-          "uk": "HttpService",
-          "en": "HttpService",
-          "pl": "HttpService",
-          "correct": false
-        },
-        {
-          "uk": "HttpClient",
-          "en": "HttpClient",
-          "pl": "HttpClient",
-          "correct": true
-        },
-        {
-          "uk": "RequestService",
-          "en": "RequestService",
-          "pl": "RequestService",
-          "correct": false
-        },
-        {
-          "uk": "ApiClient",
-          "en": "ApiClient",
-          "pl": "ApiClient",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як обробити помилки HTTP-запитів в Angular?",
-        "exp": "Помилки обробляються через RxJS оператор catchError у pipe(). Це дозволяє перехопити помилку та повернути альтернативне значення або логувати."
-      },
-      "en": {
-        "q": "How do you handle HTTP request errors in Angular?",
-        "exp": "Errors are handled via the RxJS catchError operator in pipe(). This allows intercepting errors and returning alternative values or logging."
-      },
-      "pl": {
-        "q": "Jak obsługiwać błędy żądań HTTP w Angular?",
-        "exp": "Błędy obsługuje się przez operator RxJS catchError w pipe(). Pozwala to przechwycić błąd i zwrócić alternatywną wartość lub logować."
-      },
-      "answers": [
-        {
-          "uk": "Через try-catch блок",
-          "en": "Using try-catch block",
-          "pl": "Przez blok try-catch",
-          "correct": false
-        },
-        {
-          "uk": "Через оператор catchError у pipe()",
-          "en": "Using catchError operator in pipe()",
-          "pl": "Przez operator catchError w pipe()",
-          "correct": true
-        },
-        {
-          "uk": "Angular автоматично обробляє всі помилки",
-          "en": "Angular automatically handles all errors",
-          "pl": "Angular automatycznie obsługuje wszystkie błędy",
-          "correct": false
-        },
-        {
-          "uk": "Через декоратор @ErrorHandler",
-          "en": "Using @ErrorHandler decorator",
-          "pl": "Przez dekorator @ErrorHandler",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q28",
-      "order": 28,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке async pipe і яку проблему він вирішує?",
-        "exp": "async pipe автоматично підписується на Observable/Promise, оновлює шаблон при нових значеннях і відписується при знищенні — запобігає memory leaks."
-      },
-      "en": {
-        "q": "What is async pipe and what problem does it solve?",
-        "exp": "async pipe automatically subscribes to Observable/Promise, updates template on new values, and unsubscribes on destroy — prevents memory leaks."
-      },
-      "pl": {
-        "q": "Czym jest async pipe i jaki problem rozwiązuje?",
-        "exp": "async pipe automatycznie subskrybuje Observable/Promise, aktualizuje szablon przy nowych wartościach i odsubskrybowuje przy zniszczeniu — zapobiega wyciekom pamięci."
-      },
-      "answers": [
-        {
-          "uk": "Pipe для форматування дат",
-          "en": "A pipe for formatting dates",
-          "pl": "Pipe do formatowania dat",
-          "correct": false
-        },
-        {
-          "uk": "Pipe для асинхронної валідації",
-          "en": "A pipe for async validation",
-          "pl": "Pipe do asynchronicznej walidacji",
-          "correct": false
-        },
-        {
-          "uk": "Pipe для автоматичної підписки на Observable з авто-відпискою",
-          "en": "A pipe for automatic Observable subscription with auto-unsubscribe",
-          "pl": "Pipe do automatycznej subskrypcji Observable z auto-odsubskrypcją",
-          "correct": true
-        },
-        {
-          "uk": "Pipe для шифрування даних",
-          "en": "A pipe for encrypting data",
-          "pl": "Pipe do szyfrowania danych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q29",
-      "order": 29,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Signals в Angular?",
-        "exp": "Signals — це новий реактивний примітив для керування станом. На відміну від Zone.js, вони забезпечують точкове оновлення UI без глобального change detection."
-      },
-      "en": {
-        "q": "What are Signals in Angular?",
-        "exp": "Signals are a new reactive primitive for state management. Unlike Zone.js, they enable fine-grained UI updates without global change detection."
-      },
-      "pl": {
-        "q": "Czym są Signals w Angular?",
-        "exp": "Signals to nowy reaktywny prymityw do zarządzania stanem. W przeciwieństwie do Zone.js, umożliwiają precyzyjne aktualizacje UI bez globalnego change detection."
-      },
-      "answers": [
-        {
-          "uk": "Система сповіщень для користувачів",
-          "en": "A notification system for users",
-          "pl": "System powiadomień dla użytkowników",
-          "correct": false
-        },
-        {
-          "uk": "Реактивний примітив для керування станом з точковим оновленням UI",
-          "en": "A reactive primitive for state management with fine-grained UI updates",
-          "pl": "Reaktywny prymityw do zarządzania stanem z precyzyjnymi aktualizacjami UI",
-          "correct": true
-        },
-        {
-          "uk": "Метод відправки HTTP-запитів",
-          "en": "A method for sending HTTP requests",
-          "pl": "Metoda wysyłania żądań HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Декоратор для подій",
-          "en": "A decorator for events",
-          "pl": "Dekorator dla zdarzeń",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q30",
-      "order": 30,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке change detection в Angular?",
-        "exp": "Change detection — це процес, яким Angular визначає зміни даних у компонентах і оновлює відповідні частини UI. Може використовувати Zone.js або Signals."
-      },
-      "en": {
-        "q": "What is change detection in Angular?",
-        "exp": "Change detection is the process Angular uses to detect data changes in components and update corresponding UI parts. Can use Zone.js or Signals."
-      },
-      "pl": {
-        "q": "Czym jest change detection w Angular?",
-        "exp": "Change detection to proces, którym Angular wykrywa zmiany danych w komponentach i aktualizuje odpowiednie części UI. Może używać Zone.js lub Signals."
-      },
-      "answers": [
-        {
-          "uk": "Процес виявлення помилок у коді",
-          "en": "A process for detecting code errors",
-          "pl": "Proces wykrywania błędów w kodzie",
-          "correct": false
-        },
-        {
-          "uk": "Процес виявлення змін даних і оновлення UI",
-          "en": "A process for detecting data changes and updating UI",
-          "pl": "Proces wykrywania zmian danych i aktualizacji UI",
-          "correct": true
-        },
-        {
-          "uk": "Метод валідації форм",
-          "en": "A form validation method",
-          "pl": "Metoda walidacji formularzy",
-          "correct": false
-        },
-        {
-          "uk": "Система керування версіями",
-          "en": "A version control system",
-          "pl": "System kontroli wersji",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/angular/beginner_medium/angular-quiz-part4.json b/json/quizzes/angular/beginner_medium/angular-quiz-part4.json
deleted file mode 100644
index 85bfae88..00000000
--- a/json/quizzes/angular/beginner_medium/angular-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "angular-q31",
-      "order": 31,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яке значення ViewEncapsulation використовується за замовчуванням?",
-        "exp": "За замовчуванням використовується ViewEncapsulation.Emulated — Angular імітує Shadow DOM, додаючи унікальні атрибути до елементів для ізоляції стилів."
-      },
-      "en": {
-        "q": "Which ViewEncapsulation value is used by default?",
-        "exp": "By default, ViewEncapsulation.Emulated is used — Angular emulates Shadow DOM by adding unique attributes to elements for style isolation."
-      },
-      "pl": {
-        "q": "Która wartość ViewEncapsulation jest używana domyślnie?",
-        "exp": "Domyślnie używane jest ViewEncapsulation.Emulated — Angular emuluje Shadow DOM, dodając unikalne atrybuty do elementów dla izolacji stylów."
-      },
-      "answers": [
-        {
-          "uk": "ViewEncapsulation.None",
-          "en": "ViewEncapsulation.None",
-          "pl": "ViewEncapsulation.None",
-          "correct": false
-        },
-        {
-          "uk": "ViewEncapsulation.ShadowDom",
-          "en": "ViewEncapsulation.ShadowDom",
-          "pl": "ViewEncapsulation.ShadowDom",
-          "correct": false
-        },
-        {
-          "uk": "ViewEncapsulation.Emulated",
-          "en": "ViewEncapsulation.Emulated",
-          "pl": "ViewEncapsulation.Emulated",
-          "correct": true
-        },
-        {
-          "uk": "ViewEncapsulation.Global",
-          "en": "ViewEncapsulation.Global",
-          "pl": "ViewEncapsulation.Global",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q32",
-      "order": 32,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується BehaviorSubject у сервісах Angular?",
-        "exp": "BehaviorSubject зберігає останнє значення і автоматично надає його новим підписникам. Ідеально підходить для поточного стану (авторизація, вибраний користувач)."
-      },
-      "en": {
-        "q": "What is BehaviorSubject used for in Angular services?",
-        "exp": "BehaviorSubject stores the latest value and automatically provides it to new subscribers. Ideal for current state (auth, selected user)."
-      },
-      "pl": {
-        "q": "Do czego służy BehaviorSubject w serwisach Angular?",
-        "exp": "BehaviorSubject przechowuje ostatnią wartość i automatycznie przekazuje ją nowym subskrybentom. Idealny do bieżącego stanu (autoryzacja, wybrany użytkownik)."
-      },
-      "answers": [
-        {
-          "uk": "Для одноразової передачі даних",
-          "en": "For one-time data transmission",
-          "pl": "Do jednorazowej transmisji danych",
-          "correct": false
-        },
-        {
-          "uk": "Для зберігання та передачі останнього значення новим підписникам",
-          "en": "For storing and providing the latest value to new subscribers",
-          "pl": "Do przechowywania i przekazywania ostatniej wartości nowym subskrybentom",
-          "correct": true
-        },
-        {
-          "uk": "Для валідації форм",
-          "en": "For form validation",
-          "pl": "Do walidacji formularzy",
-          "correct": false
-        },
-        {
-          "uk": "Для HTTP-запитів",
-          "en": "For HTTP requests",
-          "pl": "Do żądań HTTP",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q33",
-      "order": 33,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Zone.js і яку роль він відіграє в Angular?",
-        "exp": "Zone.js перехоплює асинхронні операції (події, таймери, проміси) і автоматично запускає change detection. У нових версіях замінюється на Signals."
-      },
-      "en": {
-        "q": "What is Zone.js and what role does it play in Angular?",
-        "exp": "Zone.js intercepts async operations (events, timers, promises) and automatically triggers change detection. Being replaced by Signals in newer versions."
-      },
-      "pl": {
-        "q": "Czym jest Zone.js i jaką rolę pełni w Angular?",
-        "exp": "Zone.js przechwytuje operacje asynchroniczne (zdarzenia, timery, promisy) i automatycznie wyzwala change detection. W nowszych wersjach zastępowany przez Signals."
-      },
-      "answers": [
-        {
-          "uk": "Бібліотека для роботи з часовими зонами",
-          "en": "A library for working with time zones",
-          "pl": "Biblioteka do pracy ze strefami czasowymi",
-          "correct": false
-        },
-        {
-          "uk": "Механізм перехоплення асинхронних операцій для автозапуску change detection",
-          "en": "A mechanism for intercepting async operations to auto-trigger change detection",
-          "pl": "Mechanizm przechwytywania operacji asynchronicznych do automatycznego wyzwalania change detection",
-          "correct": true
-        },
-        {
-          "uk": "Інструмент для тестування",
-          "en": "A testing tool",
-          "pl": "Narzędzie do testowania",
-          "correct": false
-        },
-        {
-          "uk": "CSS-фреймворк",
-          "en": "A CSS framework",
-          "pl": "Framework CSS",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між AOT та JIT компіляцією?",
-        "exp": "AOT компілює шаблони під час збірки (швидший старт, менший бандл). JIT компілює в браузері під час виконання (зручно для розробки)."
-      },
-      "en": {
-        "q": "What is the difference between AOT and JIT compilation?",
-        "exp": "AOT compiles templates during build (faster startup, smaller bundle). JIT compiles in browser at runtime (convenient for development)."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między kompilacją AOT i JIT?",
-        "exp": "AOT kompiluje szablony podczas budowania (szybszy start, mniejszy bundle). JIT kompiluje w przeglądarce w czasie wykonania (wygodne do rozwoju)."
-      },
-      "answers": [
-        {
-          "uk": "AOT швидше компілює, JIT дає менший бандл",
-          "en": "AOT compiles faster, JIT gives smaller bundle",
-          "pl": "AOT kompiluje szybciej, JIT daje mniejszy bundle",
-          "correct": false
-        },
-        {
-          "uk": "AOT компілює при збірці (production), JIT — у браузері (development)",
-          "en": "AOT compiles at build (production), JIT in browser (development)",
-          "pl": "AOT kompiluje przy budowaniu (production), JIT — w przeglądarce (development)",
-          "correct": true
-        },
-        {
-          "uk": "JIT використовується тільки для тестування",
-          "en": "JIT is only used for testing",
-          "pl": "JIT jest używany tylko do testowania",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q35",
-      "order": 35,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка команда Angular CLI використовується для створення нового компонента?",
-        "exp": "Команда ng generate component (або ng g c) створює новий компонент з усіма необхідними файлами: клас, шаблон, стилі, тест."
-      },
-      "en": {
-        "q": "Which Angular CLI command is used to create a new component?",
-        "exp": "The ng generate component (or ng g c) command creates a new component with all necessary files: class, template, styles, test."
-      },
-      "pl": {
-        "q": "Która komenda Angular CLI służy do tworzenia nowego komponentu?",
-        "exp": "Komenda ng generate component (lub ng g c) tworzy nowy komponent ze wszystkimi niezbędnymi plikami: klasa, szablon, style, test."
-      },
-      "answers": [
-        {
-          "uk": "ng new component",
-          "en": "ng new component",
-          "pl": "ng new component",
-          "correct": false
-        },
-        {
-          "uk": "ng create component",
-          "en": "ng create component",
-          "pl": "ng create component",
-          "correct": false
-        },
-        {
-          "uk": "ng generate component",
-          "en": "ng generate component",
-          "pl": "ng generate component",
-          "correct": true
-        },
-        {
-          "uk": "ng add component",
-          "en": "ng add component",
-          "pl": "ng add component",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q36",
-      "order": 36,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується Renderer2 замість прямого доступу до DOM?",
-        "exp": "Renderer2 — безпечна абстракція над DOM. Він захищає від XSS, працює з SSR і є кросплатформенним, на відміну від прямого nativeElement."
-      },
-      "en": {
-        "q": "Why use Renderer2 instead of direct DOM access?",
-        "exp": "Renderer2 is a safe DOM abstraction. It protects against XSS, works with SSR, and is cross-platform, unlike direct nativeElement access."
-      },
-      "pl": {
-        "q": "Dlaczego używać Renderer2 zamiast bezpośredniego dostępu do DOM?",
-        "exp": "Renderer2 to bezpieczna abstrakcja nad DOM. Chroni przed XSS, działa z SSR i jest wieloplatformowy, w przeciwieństwie do bezpośredniego nativeElement."
-      },
-      "answers": [
-        {
-          "uk": "Renderer2 швидший",
-          "en": "Renderer2 is faster",
-          "pl": "Renderer2 jest szybszy",
-          "correct": false
-        },
-        {
-          "uk": "Для безпеки (XSS), SSR-сумісності та кросплатформенності",
-          "en": "For security (XSS), SSR compatibility, and cross-platform support",
-          "pl": "Dla bezpieczeństwa (XSS), kompatybilności z SSR i wieloplatformowości",
-          "correct": true
-        },
-        {
-          "uk": "Renderer2 простіший у використанні",
-          "en": "Renderer2 is easier to use",
-          "pl": "Renderer2 jest łatwiejszy w użyciu",
-          "correct": false
-        },
-        {
-          "uk": "Прямий доступ до DOM заборонений в Angular",
-          "en": "Direct DOM access is forbidden in Angular",
-          "pl": "Bezpośredni dostęp do DOM jest zabroniony w Angular",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q37",
-      "order": 37,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке NgRx і коли його варто використовувати?",
-        "exp": "NgRx — бібліотека для управління станом на основі Redux та RxJS. Підходить для великих застосунків зі складним shared-state та багатьма асинхронними операціями."
-      },
-      "en": {
-        "q": "What is NgRx and when should it be used?",
-        "exp": "NgRx is a state management library based on Redux and RxJS. Suitable for large applications with complex shared state and many async operations."
-      },
-      "pl": {
-        "q": "Czym jest NgRx i kiedy należy go używać?",
-        "exp": "NgRx to biblioteka do zarządzania stanem oparta na Redux i RxJS. Nadaje się do dużych aplikacji ze złożonym współdzielonym stanem i wieloma operacjami asynchronicznymi."
-      },
-      "answers": [
-        {
-          "uk": "CSS-фреймворк для Angular",
-          "en": "A CSS framework for Angular",
-          "pl": "Framework CSS dla Angular",
-          "correct": false
-        },
-        {
-          "uk": "Бібліотека для управління станом у великих застосунках",
-          "en": "A state management library for large applications",
-          "pl": "Biblioteka do zarządzania stanem w dużych aplikacjach",
-          "correct": true
-        },
-        {
-          "uk": "Інструмент для тестування",
-          "en": "A testing tool",
-          "pl": "Narzędzie do testowania",
-          "correct": false
-        },
-        {
-          "uk": "Система маршрутизації",
-          "en": "A routing system",
-          "pl": "System routingu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як trackBy оптимізує роботу @for (ngFor)?",
-        "exp": "trackBy дозволяє Angular ідентифікувати елементи за унікальним ключем, запобігаючи повному перерендеру списку при змінах — оновлюються тільки змінені елементи."
-      },
-      "en": {
-        "q": "How does trackBy optimize @for (ngFor) performance?",
-        "exp": "trackBy allows Angular to identify elements by unique key, preventing full list re-render on changes — only changed elements are updated."
-      },
-      "pl": {
-        "q": "Jak trackBy optymalizuje działanie @for (ngFor)?",
-        "exp": "trackBy pozwala Angular identyfikować elementy przez unikalny klucz, zapobiegając pełnemu re-renderowi listy przy zmianach — aktualizowane są tylko zmienione elementy."
-      },
-      "answers": [
-        {
-          "uk": "Сортує елементи автоматично",
-          "en": "Sorts elements automatically",
-          "pl": "Sortuje elementy automatycznie",
-          "correct": false
-        },
-        {
-          "uk": "Кешує дані списку",
-          "en": "Caches list data",
-          "pl": "Cache'uje dane listy",
-          "correct": false
-        },
-        {
-          "uk": "Ідентифікує елементи за ключем для точкового оновлення",
-          "en": "Identifies elements by key for targeted updates",
-          "pl": "Identyfikuje elementy po kluczu dla punktowych aktualizacji",
-          "correct": true
-        },
-        {
-          "uk": "Завантажує елементи асинхронно",
-          "en": "Loads elements asynchronously",
-          "pl": "Ładuje elementy asynchronicznie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q39",
-      "order": 39,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке @HostBinding та @HostListener?",
-        "exp": "@HostBinding прив'язує властивість до host-елемента (наприклад, клас). @HostListener підписується на події host-елемента. Використовуються в директивах."
-      },
-      "en": {
-        "q": "What are @HostBinding and @HostListener?",
-        "exp": "@HostBinding binds a property to the host element (e.g., class). @HostListener subscribes to host element events. Used in directives."
-      },
-      "pl": {
-        "q": "Czym są @HostBinding i @HostListener?",
-        "exp": "@HostBinding wiąże właściwość z elementem host (np. klasę). @HostListener subskrybuje zdarzenia elementu host. Używane w dyrektywach."
-      },
-      "answers": [
-        {
-          "uk": "Декоратори для HTTP-запитів",
-          "en": "Decorators for HTTP requests",
-          "pl": "Dekoratory do żądań HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Декоратори для прив'язки властивостей та подій до host-елемента",
-          "en": "Decorators for binding properties and events to host element",
-          "pl": "Dekoratory do wiązania właściwości i zdarzeń z elementem host",
-          "correct": true
-        },
-        {
-          "uk": "Декоратори для роботи з формами",
-          "en": "Decorators for working with forms",
-          "pl": "Dekoratory do pracy z formularzami",
-          "correct": false
-        },
-        {
-          "uk": "Декоратори для маршрутизації",
-          "en": "Decorators for routing",
-          "pl": "Dekoratory do routingu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "angular-q40",
-      "order": 40,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як увімкнути SSR в Angular за допомогою Angular Universal?",
-        "exp": "SSR вмикається командою ng add @angular/ssr, яка автоматично налаштовує сервер, bootstrap і hydration для серверного рендерингу."
-      },
-      "en": {
-        "q": "How do you enable SSR in Angular using Angular Universal?",
-        "exp": "SSR is enabled with ng add @angular/ssr command, which automatically configures server, bootstrap, and hydration for server-side rendering."
-      },
-      "pl": {
-        "q": "Jak włączyć SSR w Angular używając Angular Universal?",
-        "exp": "SSR włącza się komendą ng add @angular/ssr, która automatycznie konfiguruje serwer, bootstrap i hydration do renderowania po stronie serwera."
-      },
-      "answers": [
-        {
-          "uk": "ng add @angular/http",
-          "en": "ng add @angular/http",
-          "pl": "ng add @angular/http",
-          "correct": false
-        },
-        {
-          "uk": "ng add @angular/ssr",
-          "en": "ng add @angular/ssr",
-          "pl": "ng add @angular/ssr",
-          "correct": true
-        },
-        {
-          "uk": "ng generate ssr",
-          "en": "ng generate ssr",
-          "pl": "ng generate ssr",
-          "correct": false
-        },
-        {
-          "uk": "SSR налаштовується тільки вручну",
-          "en": "SSR is only configured manually",
-          "pl": "SSR konfiguruje się tylko ręcznie",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/angular/beginner_medium/seed-quiz-angular.ts b/json/quizzes/angular/beginner_medium/seed-quiz-angular.ts
deleted file mode 100644
index 26c0cf9b..00000000
--- a/json/quizzes/angular/beginner_medium/seed-quiz-angular.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-import { eq } from 'drizzle-orm';
-import { readFileSync } from 'fs';
-import { join } from 'path';
-import { db } from './index';
-import { categories } from './schema/categories';
-import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
-  quizAnswers,
-  quizAnswerTranslations,
-  quizAttempts,
-} from './schema/quiz';
-
-type Locale = 'uk' | 'en' | 'pl';
-const LOCALES: Locale[] = ['uk', 'en', 'pl'];
-
-interface QuestionData {
-  id: string;
-  order: number;
-  difficulty: 'beginner' | 'medium' | 'advanced';
-  uk: { q: string; exp: string };
-  en: { q: string; exp: string };
-  pl: { q: string; exp: string };
-  answers: {
-    uk: string;
-    en: string;
-    pl: string;
-    correct: boolean;
-  }[];
-}
-
-interface QuizPartData {
-  questions: QuestionData[];
-}
-
-const CATEGORY_SLUG = 'angular';
-
-const QUIZ_METADATA = {
-  slug: 'angular-fundamentals',
-  questionsCount: 40,
-  timeLimitSeconds: 1800,
-  translations: {
-    uk: {
-      title: 'Основи Angular',
-      description: 'Перевірте свої знання базових концепцій Angular: компоненти, директиви, сервіси, DI, маршрутизація, форми, Signals та RxJS.',
-    },
-    en: {
-      title: 'Angular Fundamentals',
-      description: 'Test your knowledge of Angular basics: components, directives, services, DI, routing, forms, Signals, and RxJS.',
-    },
-    pl: {
-      title: 'Podstawy Angular',
-      description: 'Sprawdź swoją wiedzę o podstawach Angular: komponenty, dyrektywy, serwisy, DI, routing, formularze, Signals i RxJS.',
-    },
-  },
-};
-
-function createExplanation(text: string) {
-  return [{ type: 'paragraph' as const, children: [{ text }] }];
-}
-
-async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'data', `angular-quiz-part${partNumber}.json`);
-  const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
-  return partData.questions;
-}
-
-async function ensureQuizExists(): Promise<string> {
-  console.log('Ensuring quiz exists...');
-
-  // Find category by slug
-  const [category] = await db
-    .select()
-    .from(categories)
-    .where(eq(categories.slug, CATEGORY_SLUG))
-    .limit(1);
-
-  if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
-  }
-
-  // Clean up old quiz by slug
-  const existing = await db.query.quizzes.findFirst({
-    where: eq(quizzes.slug, QUIZ_METADATA.slug),
-  });
-  if (existing) {
-    const existingAttempt = await db.query.quizAttempts.findFirst({
-      where: eq(quizAttempts.quizId, existing.id),
-    });
-    if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
-    }
-
-    await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 1,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
-
-    const quizId = existing.id;
-    for (const locale of LOCALES) {
-      await db.insert(quizTranslations).values({
-        quizId,
-        locale,
-        title: QUIZ_METADATA.translations[locale].title,
-        description: QUIZ_METADATA.translations[locale].description,
-      });
-    }
-
-    return quizId;
-  }
-
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 1,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
-
-  for (const locale of LOCALES) {
-    await db.insert(quizTranslations).values({
-      quizId: quiz.id,
-      locale,
-      title: QUIZ_METADATA.translations[locale].title,
-      description: QUIZ_METADATA.translations[locale].description,
-    });
-  }
-
-  return quiz.id;
-}
-
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
-
-  for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
-
-    for (const locale of LOCALES) {
-      await db.insert(quizQuestionContent).values({
-        quizQuestionId: q.id,
-        locale,
-        questionText: question[locale].q,
-        explanation: createExplanation(question[locale].exp),
-      });
-    }
-
-    for (let i = 0; i < question.answers.length; i++) {
-      const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
-
-      for (const locale of LOCALES) {
-        await db.insert(quizAnswerTranslations).values({
-          quizAnswerId: a.id,
-          locale,
-          answerText: answer[locale],
-        });
-      }
-    }
-  }
-
-  console.log(`Part ${partNumber} completed (${questions.length} questions)`);
-}
-
-async function seedQuizFromJson() {
-  const args = process.argv.slice(2);
-  const partArg = args[0];
-
-  if (!partArg) {
-    console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-angular.ts <part-number>');
-    console.log('Example: npx tsx db/seeds/seed-quiz-angular.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-angular.ts all');
-    process.exit(1);
-  }
-
-  console.log('Starting Angular quiz seed...\n');
-
-  try {
-    const quizId = await ensureQuizExists();
-
-    if (partArg.toLowerCase() === 'all') {
-      console.log('Uploading all parts...\n');
-      let totalQuestions = 0;
-
-      for (let i = 1; i <= 4; i++) {
-        const questions = await loadQuestions(i);
-        await seedQuestions(questions, quizId, i);
-        totalQuestions += questions.length;
-      }
-
-      console.log('\nAll parts seeded successfully!');
-      console.log(`   - 1 quiz with ${LOCALES.length} translations`);
-      console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
-    } else {
-      const partNumber = parseInt(partArg, 10);
-
-      if (isNaN(partNumber) || partNumber < 1 || partNumber > 4) {
-        console.error('Error: Part number must be between 1 and 4');
-        process.exit(1);
-      }
-
-      const questions = await loadQuestions(partNumber);
-      await seedQuestions(questions, quizId, partNumber);
-
-      console.log('\nPart seeded successfully!');
-      console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
-      console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
-    }
-  } catch (error) {
-    console.error('\nError seeding quiz:', error);
-    throw error;
-  }
-}
-
-seedQuizFromJson()
-  .then(() => process.exit(0))
-  .catch((error) => {
-    console.error(error);
-    process.exit(1);
-  });
diff --git a/json/quizzes/css/advanced/css-advanced-quiz-part1.json b/json/quizzes/css/advanced/css-advanced-quiz-part1.json
deleted file mode 100644
index 1d4ccd0f..00000000
--- a/json/quizzes/css/advanced/css-advanced-quiz-part1.json
+++ /dev/null
@@ -1,234 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "css-adv-q01",
-      "order": 1,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка директива CSS дозволяє підключити власний шрифт з локального файлу?",
-        "exp": "@font-face дозволяє оголосити кастомний шрифт, вказавши його ім'я та шлях до файлу, після чого його можна використовувати у font-family."
-      },
-      "en": {
-        "q": "Which CSS directive allows you to include a custom font from a local file?",
-        "exp": "@font-face allows you to declare a custom font by specifying its name and file path, after which it can be used in font-family."
-      },
-      "pl": {
-        "q": "Która dyrektywa CSS pozwala dołączyć własną czcionkę z lokalnego pliku?",
-        "exp": "@font-face pozwala zadeklarować własną czcionkę, podając jej nazwę i ścieżkę do pliku, po czym można jej użyć w font-family."
-      },
-      "answers": [
-        { "uk": "@font-face", "en": "@font-face", "pl": "@font-face", "correct": true },
-        { "uk": "@import", "en": "@import", "pl": "@import", "correct": false },
-        { "uk": "@font-family", "en": "@font-family", "pl": "@font-family", "correct": false },
-        { "uk": "@font-src", "en": "@font-src", "pl": "@font-src", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q02",
-      "order": 2,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що є обов'язковими значеннями при використанні скороченої властивості font?",
-        "exp": "При використанні shorthand font обов'язково потрібно вказати font-size та font-family, інакше браузер проігнорує весь запис."
-      },
-      "en": {
-        "q": "What are the required values when using the font shorthand property?",
-        "exp": "When using the font shorthand, font-size and font-family are required; otherwise, the browser will ignore the entire declaration."
-      },
-      "pl": {
-        "q": "Jakie wartości są wymagane przy użyciu skróconej właściwości font?",
-        "exp": "Przy użyciu skrótu font wymagane są font-size i font-family, w przeciwnym razie przeglądarka zignoruje całą deklarację."
-      },
-      "answers": [
-        { "uk": "font-size та font-family", "en": "font-size and font-family", "pl": "font-size i font-family", "correct": true },
-        { "uk": "font-weight та font-style", "en": "font-weight and font-style", "pl": "font-weight i font-style", "correct": false },
-        { "uk": "line-height та font-size", "en": "line-height and font-size", "pl": "line-height i font-size", "correct": false },
-        { "uk": "font-family та font-variant", "en": "font-family and font-variant", "pl": "font-family i font-variant", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q03",
-      "order": 3,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який формат шрифту є найоптимальнішим для веб через мінімальний розмір файлу?",
-        "exp": "WOFF2 забезпечує найкращу компресію серед веб-форматів шрифтів і має широку підтримку в сучасних браузерах."
-      },
-      "en": {
-        "q": "Which font format is most optimal for the web due to minimal file size?",
-        "exp": "WOFF2 provides the best compression among web font formats and has broad support in modern browsers."
-      },
-      "pl": {
-        "q": "Który format czcionki jest najbardziej optymalny dla sieci ze względu na minimalny rozmiar pliku?",
-        "exp": "WOFF2 zapewnia najlepszą kompresję wśród formatów czcionek internetowych i ma szerokie wsparcie w nowoczesnych przeglądarkach."
-      },
-      "answers": [
-        { "uk": "WOFF2", "en": "WOFF2", "pl": "WOFF2", "correct": true },
-        { "uk": "TTF", "en": "TTF", "pl": "TTF", "correct": false },
-        { "uk": "OTF", "en": "OTF", "pl": "OTF", "correct": false },
-        { "uk": "EOT", "en": "EOT", "pl": "EOT", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q04",
-      "order": 4,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як у CSS задати кілька фонових зображень для одного елемента?",
-        "exp": "Множинні фони вказуються через кому в background-image. Перший — верхній шар, останній — нижній (базовий)."
-      },
-      "en": {
-        "q": "How do you specify multiple background images for a single element in CSS?",
-        "exp": "Multiple backgrounds are specified with commas in background-image. The first is the top layer, the last is the bottom (base) layer."
-      },
-      "pl": {
-        "q": "Jak określić wiele obrazów tła dla jednego elementu w CSS?",
-        "exp": "Wiele teł określa się przecinkami w background-image. Pierwszy to górna warstwa, ostatni to dolna (bazowa) warstwa."
-      },
-      "answers": [
-        { "uk": "Через кому в background-image", "en": "With commas in background-image", "pl": "Przecinkami w background-image", "correct": true },
-        { "uk": "Через крапку з комою", "en": "With semicolons", "pl": "Średnikami", "correct": false },
-        { "uk": "Через пробіл", "en": "With spaces", "pl": "Spacjami", "correct": false },
-        { "uk": "Неможливо задати кілька фонів", "en": "Multiple backgrounds are not possible", "pl": "Niemożliwe jest ustawienie wielu teł", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q05",
-      "order": 5,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить властивість flex-shrink у Flexbox?",
-        "exp": "flex-shrink визначає, наскільки елемент може зменшуватися відносно інших flex-елементів, коли простору в контейнері недостатньо."
-      },
-      "en": {
-        "q": "What does the flex-shrink property do in Flexbox?",
-        "exp": "flex-shrink determines how much an element can shrink relative to other flex items when there is not enough space in the container."
-      },
-      "pl": {
-        "q": "Co robi właściwość flex-shrink w Flexbox?",
-        "exp": "flex-shrink określa, o ile element może się zmniejszyć w stosunku do innych elementów flex, gdy w kontenerze brakuje miejsca."
-      },
-      "answers": [
-        { "uk": "Визначає здатність елемента зменшуватися", "en": "Determines the element's ability to shrink", "pl": "Określa zdolność elementu do zmniejszania się", "correct": true },
-        { "uk": "Визначає здатність елемента збільшуватися", "en": "Determines the element's ability to grow", "pl": "Określa zdolność elementu do powiększania się", "correct": false },
-        { "uk": "Встановлює базовий розмір елемента", "en": "Sets the element's base size", "pl": "Ustawia bazowy rozmiar elementu", "correct": false },
-        { "uk": "Змінює напрямок flex-контейнера", "en": "Changes the flex container direction", "pl": "Zmienia kierunek kontenera flex", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q06",
-      "order": 6,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується властивість align-self у Flexbox?",
-        "exp": "align-self дозволяє перевизначити вирівнювання окремого елемента по поперечній осі, незалежно від align-items контейнера."
-      },
-      "en": {
-        "q": "What is the align-self property used for in Flexbox?",
-        "exp": "align-self allows overriding the alignment of an individual element on the cross axis, independent of the container's align-items."
-      },
-      "pl": {
-        "q": "Do czego służy właściwość align-self w Flexbox?",
-        "exp": "align-self pozwala nadpisać wyrównanie pojedynczego elementu na osi poprzecznej, niezależnie od align-items kontenera."
-      },
-      "answers": [
-        { "uk": "Перевизначити вирівнювання окремого елемента", "en": "Override alignment of an individual element", "pl": "Nadpisać wyrównanie pojedynczego elementu", "correct": true },
-        { "uk": "Вирівняти всі елементи контейнера", "en": "Align all container elements", "pl": "Wyrównać wszystkie elementy kontenera", "correct": false },
-        { "uk": "Змінити розмір елемента", "en": "Change element size", "pl": "Zmienić rozmiar elementu", "correct": false },
-        { "uk": "Задати порядок відображення", "en": "Set display order", "pl": "Ustawić kolejność wyświetlania", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q07",
-      "order": 7,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як створити колонки однакової ширини у Flexbox незалежно від вмісту?",
-        "exp": "Задавши flex: 1 кожному елементу (що означає flex-grow: 1, flex-shrink: 1, flex-basis: 0), всі колонки ділять простір порівну."
-      },
-      "en": {
-        "q": "How do you create equal-width columns in Flexbox regardless of content?",
-        "exp": "By setting flex: 1 on each element (meaning flex-grow: 1, flex-shrink: 1, flex-basis: 0), all columns share space equally."
-      },
-      "pl": {
-        "q": "Jak stworzyć kolumny o równej szerokości w Flexbox niezależnie od zawartości?",
-        "exp": "Ustawiając flex: 1 na każdym elemencie (czyli flex-grow: 1, flex-shrink: 1, flex-basis: 0), wszystkie kolumny dzielą przestrzeń równo."
-      },
-      "answers": [
-        { "uk": "flex: 1 для кожного елемента", "en": "flex: 1 for each element", "pl": "flex: 1 dla każdego elementu", "correct": true },
-        { "uk": "width: auto для кожного елемента", "en": "width: auto for each element", "pl": "width: auto dla każdego elementu", "correct": false },
-        { "uk": "flex-grow: 0 для кожного елемента", "en": "flex-grow: 0 for each element", "pl": "flex-grow: 0 dla każdego elementu", "correct": false },
-        { "uk": "justify-content: space-evenly", "en": "justify-content: space-evenly", "pl": "justify-content: space-evenly", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q08",
-      "order": 8,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується grid-template-areas у CSS Grid?",
-        "exp": "grid-template-areas дозволяє задати візуальне розміщення іменованих областей у сітці для зручного позиціонування елементів за назвами."
-      },
-      "en": {
-        "q": "What is grid-template-areas used for in CSS Grid?",
-        "exp": "grid-template-areas allows defining visual placement of named areas in a grid for convenient element positioning by names."
-      },
-      "pl": {
-        "q": "Do czego służy grid-template-areas w CSS Grid?",
-        "exp": "grid-template-areas pozwala definiować wizualne rozmieszczenie nazwanych obszarów w siatce dla wygodnego pozycjonowania elementów według nazw."
-      },
-      "answers": [
-        { "uk": "Задати іменовані області для позиціонування", "en": "Define named areas for positioning", "pl": "Definiować nazwane obszary do pozycjonowania", "correct": true },
-        { "uk": "Визначити кількість колонок", "en": "Define number of columns", "pl": "Określić liczbę kolumn", "correct": false },
-        { "uk": "Встановити проміжки між елементами", "en": "Set gaps between elements", "pl": "Ustawić odstępy między elementami", "correct": false },
-        { "uk": "Змінити напрямок сітки", "en": "Change grid direction", "pl": "Zmienić kierunek siatki", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q09",
-      "order": 9,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як розмістити елемент у конкретних клітинках CSS Grid?",
-        "exp": "Властивості grid-row і grid-column дозволяють вказати позицію елемента у сітці, наприклад grid-column: 2 / 4 займе колонки 2-3."
-      },
-      "en": {
-        "q": "How do you place an element in specific CSS Grid cells?",
-        "exp": "The grid-row and grid-column properties allow specifying element position in the grid, e.g., grid-column: 2 / 4 spans columns 2-3."
-      },
-      "pl": {
-        "q": "Jak umieścić element w konkretnych komórkach CSS Grid?",
-        "exp": "Właściwości grid-row i grid-column pozwalają określić pozycję elementu w siatce, np. grid-column: 2 / 4 zajmuje kolumny 2-3."
-      },
-      "answers": [
-        { "uk": "Через grid-row та grid-column", "en": "Using grid-row and grid-column", "pl": "Przez grid-row i grid-column", "correct": true },
-        { "uk": "Через position: absolute", "en": "Using position: absolute", "pl": "Przez position: absolute", "correct": false },
-        { "uk": "Через margin та padding", "en": "Using margin and padding", "pl": "Przez margin i padding", "correct": false },
-        { "uk": "Через float: left", "en": "Using float: left", "pl": "Przez float: left", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q10",
-      "order": 10,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як CSS Grid обробляє перекриття елементів, які займають одну область?",
-        "exp": "Елементи перекриваються у порядку появи в HTML (останній — зверху), але можна керувати шарами через z-index."
-      },
-      "en": {
-        "q": "How does CSS Grid handle overlapping elements that occupy the same area?",
-        "exp": "Elements overlap in HTML order (last on top), but layering can be controlled with z-index."
-      },
-      "pl": {
-        "q": "Jak CSS Grid obsługuje nakładające się elementy zajmujące ten sam obszar?",
-        "exp": "Elementy nakładają się w kolejności HTML (ostatni na górze), ale warstwowanie można kontrolować za pomocą z-index."
-      },
-      "answers": [
-        { "uk": "Накладаються у порядку HTML, керуються z-index", "en": "Overlap in HTML order, controlled by z-index", "pl": "Nakładają się w kolejności HTML, kontrolowane przez z-index", "correct": true },
-        { "uk": "Grid автоматично розсуває елементи", "en": "Grid automatically separates elements", "pl": "Grid automatycznie rozsuwa elementy", "correct": false },
-        { "uk": "Перекриття неможливе у Grid", "en": "Overlapping is not possible in Grid", "pl": "Nakładanie jest niemożliwe w Grid", "correct": false },
-        { "uk": "Завжди перший елемент зверху", "en": "First element is always on top", "pl": "Zawsze pierwszy element jest na górze", "correct": false }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/css/advanced/css-advanced-quiz-part2.json b/json/quizzes/css/advanced/css-advanced-quiz-part2.json
deleted file mode 100644
index a17c8ac7..00000000
--- a/json/quizzes/css/advanced/css-advanced-quiz-part2.json
+++ /dev/null
@@ -1,234 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "css-adv-q11",
-      "order": 11,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується мета-тег viewport в адаптивному дизайні?",
-        "exp": "Мета-тег viewport керує масштабуванням сторінки на мобільних пристроях. Без нього сторінка відображається з масштабом як для десктопа."
-      },
-      "en": {
-        "q": "What is the viewport meta tag used for in responsive design?",
-        "exp": "The viewport meta tag controls page scaling on mobile devices. Without it, the page displays at desktop scale."
-      },
-      "pl": {
-        "q": "Do czego służy meta tag viewport w responsywnym designie?",
-        "exp": "Meta tag viewport kontroluje skalowanie strony na urządzeniach mobilnych. Bez niego strona wyświetla się w skali desktopowej."
-      },
-      "answers": [
-        { "uk": "Керування масштабуванням на мобільних", "en": "Controlling scaling on mobile devices", "pl": "Kontrolowanie skalowania na urządzeniach mobilnych", "correct": true },
-        { "uk": "Підключення CSS-файлів", "en": "Connecting CSS files", "pl": "Podłączanie plików CSS", "correct": false },
-        { "uk": "Визначення кодування сторінки", "en": "Defining page encoding", "pl": "Definiowanie kodowania strony", "correct": false },
-        { "uk": "Налаштування SEO-параметрів", "en": "Setting SEO parameters", "pl": "Ustawianie parametrów SEO", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q12",
-      "order": 12,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка функція timing визначає рівномірну швидкість CSS-анімації?",
-        "exp": "linear забезпечує постійну швидкість анімації від початку до кінця, без прискорення чи уповільнення."
-      },
-      "en": {
-        "q": "Which timing function defines a uniform CSS animation speed?",
-        "exp": "linear provides constant animation speed from start to end, without acceleration or deceleration."
-      },
-      "pl": {
-        "q": "Która funkcja czasowa określa jednolitą prędkość animacji CSS?",
-        "exp": "linear zapewnia stałą prędkość animacji od początku do końca, bez przyspieszenia lub spowolnienia."
-      },
-      "answers": [
-        { "uk": "linear", "en": "linear", "pl": "linear", "correct": true },
-        { "uk": "ease", "en": "ease", "pl": "ease", "correct": false },
-        { "uk": "ease-in-out", "en": "ease-in-out", "pl": "ease-in-out", "correct": false },
-        { "uk": "steps", "en": "steps", "pl": "steps", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q13",
-      "order": 13,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як зробити CSS-анімацію нескінченною?",
-        "exp": "Властивість animation-iteration-count: infinite змушує анімацію повторюватися нескінченно."
-      },
-      "en": {
-        "q": "How do you make a CSS animation infinite?",
-        "exp": "The property animation-iteration-count: infinite makes the animation repeat indefinitely."
-      },
-      "pl": {
-        "q": "Jak sprawić, aby animacja CSS była nieskończona?",
-        "exp": "Właściwość animation-iteration-count: infinite sprawia, że animacja powtarza się w nieskończoność."
-      },
-      "answers": [
-        { "uk": "animation-iteration-count: infinite", "en": "animation-iteration-count: infinite", "pl": "animation-iteration-count: infinite", "correct": true },
-        { "uk": "animation-repeat: always", "en": "animation-repeat: always", "pl": "animation-repeat: always", "correct": false },
-        { "uk": "animation-loop: true", "en": "animation-loop: true", "pl": "animation-loop: true", "correct": false },
-        { "uk": "animation-duration: forever", "en": "animation-duration: forever", "pl": "animation-duration: forever", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q14",
-      "order": 14,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке CSS-препроцесор?",
-        "exp": "CSS-препроцесор (Sass, LESS, Stylus) розширює можливості CSS: додає змінні, вкладені селектори, міксіни та функції для кращої організації коду."
-      },
-      "en": {
-        "q": "What is a CSS preprocessor?",
-        "exp": "A CSS preprocessor (Sass, LESS, Stylus) extends CSS capabilities: adds variables, nested selectors, mixins, and functions for better code organization."
-      },
-      "pl": {
-        "q": "Czym jest preprocesor CSS?",
-        "exp": "Preprocesor CSS (Sass, LESS, Stylus) rozszerza możliwości CSS: dodaje zmienne, zagnieżdżone selektory, mixiny i funkcje dla lepszej organizacji kodu."
-      },
-      "answers": [
-        { "uk": "Інструмент з розширеним синтаксисом CSS", "en": "Tool with extended CSS syntax", "pl": "Narzędzie z rozszerzonym składnią CSS", "correct": true },
-        { "uk": "Браузерний компілятор CSS", "en": "Browser CSS compiler", "pl": "Kompilator CSS w przeglądarce", "correct": false },
-        { "uk": "Плагін для мініфікації CSS", "en": "Plugin for CSS minification", "pl": "Wtyczka do minifikacji CSS", "correct": false },
-        { "uk": "Фреймворк для стилізації", "en": "Styling framework", "pl": "Framework do stylizacji", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q15",
-      "order": 15,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка перевага CSS-модулів у React-застосунках?",
-        "exp": "CSS-модулі автоматично обмежують область видимості стилів до компонента, уникаючи конфліктів імен класів у глобальному просторі."
-      },
-      "en": {
-        "q": "What is the advantage of CSS Modules in React applications?",
-        "exp": "CSS Modules automatically scope styles to the component, avoiding class name conflicts in the global namespace."
-      },
-      "pl": {
-        "q": "Jaka jest zaleta CSS Modules w aplikacjach React?",
-        "exp": "CSS Modules automatycznie ograniczają zakres stylów do komponentu, unikając konfliktów nazw klas w globalnej przestrzeni nazw."
-      },
-      "answers": [
-        { "uk": "Ізоляція стилів на рівні компонента", "en": "Style isolation at component level", "pl": "Izolacja stylów na poziomie komponentu", "correct": true },
-        { "uk": "Швидша компіляція стилів", "en": "Faster style compilation", "pl": "Szybsza kompilacja stylów", "correct": false },
-        { "uk": "Автоматична мініфікація", "en": "Automatic minification", "pl": "Automatyczna minifikacja", "correct": false },
-        { "uk": "Вбудована підтримка анімацій", "en": "Built-in animation support", "pl": "Wbudowane wsparcie animacji", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q16",
-      "order": 16,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що характеризує підхід CSS-in-JS?",
-        "exp": "CSS-in-JS — це підхід, коли стилі пишуться безпосередньо в JavaScript-файлах, часто прив'язані до компонентів (styled-components, Emotion)."
-      },
-      "en": {
-        "q": "What characterizes the CSS-in-JS approach?",
-        "exp": "CSS-in-JS is an approach where styles are written directly in JavaScript files, often tied to components (styled-components, Emotion)."
-      },
-      "pl": {
-        "q": "Co charakteryzuje podejście CSS-in-JS?",
-        "exp": "CSS-in-JS to podejście, w którym style są pisane bezpośrednio w plikach JavaScript, często powiązane z komponentami (styled-components, Emotion)."
-      },
-      "answers": [
-        { "uk": "Стилі пишуться у JavaScript-файлах", "en": "Styles are written in JavaScript files", "pl": "Style są pisane w plikach JavaScript", "correct": true },
-        { "uk": "JavaScript генерується з CSS", "en": "JavaScript is generated from CSS", "pl": "JavaScript jest generowany z CSS", "correct": false },
-        { "uk": "CSS компілюється на сервері", "en": "CSS is compiled on the server", "pl": "CSS jest kompilowany na serwerze", "correct": false },
-        { "uk": "Стилі завантажуються асинхронно", "en": "Styles are loaded asynchronously", "pl": "Style są ładowane asynchronicznie", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q17",
-      "order": 17,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який інструмент використовується для лінтингу CSS?",
-        "exp": "Stylelint — інструмент для перевірки якості CSS-коду та відповідності стилів заданим стандартам і правилам."
-      },
-      "en": {
-        "q": "Which tool is used for CSS linting?",
-        "exp": "Stylelint is a tool for checking CSS code quality and ensuring styles comply with defined standards and rules."
-      },
-      "pl": {
-        "q": "Jakie narzędzie służy do lintingu CSS?",
-        "exp": "Stylelint to narzędzie do sprawdzania jakości kodu CSS i zapewnienia zgodności stylów z określonymi standardami i regułami."
-      },
-      "answers": [
-        { "uk": "Stylelint", "en": "Stylelint", "pl": "Stylelint", "correct": true },
-        { "uk": "ESLint", "en": "ESLint", "pl": "ESLint", "correct": false },
-        { "uk": "Webpack", "en": "Webpack", "pl": "Webpack", "correct": false },
-        { "uk": "Babel", "en": "Babel", "pl": "Babel", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q18",
-      "order": 18,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як стилізувати кастомні чекбокси за допомогою CSS?",
-        "exp": "Приховують стандартний input і стилізують пов'язаний label або псевдоелементи ::before/::after, використовуючи :checked для зміни стану."
-      },
-      "en": {
-        "q": "How do you style custom checkboxes with CSS?",
-        "exp": "Hide the standard input and style the associated label or ::before/::after pseudo-elements, using :checked to change state."
-      },
-      "pl": {
-        "q": "Jak stylizować własne checkboxy za pomocą CSS?",
-        "exp": "Ukryj standardowy input i stylizuj powiązany label lub pseudoelementy ::before/::after, używając :checked do zmiany stanu."
-      },
-      "answers": [
-        { "uk": "Приховати input, стилізувати label і псевдоелементи", "en": "Hide input, style label and pseudo-elements", "pl": "Ukryć input, stylizować label i pseudoelementy", "correct": true },
-        { "uk": "Змінити appearance: custom", "en": "Change appearance: custom", "pl": "Zmienić appearance: custom", "correct": false },
-        { "uk": "Використати input-style: custom", "en": "Use input-style: custom", "pl": "Użyć input-style: custom", "correct": false },
-        { "uk": "Застосувати checkbox-design: custom", "en": "Apply checkbox-design: custom", "pl": "Zastosować checkbox-design: custom", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q19",
-      "order": 19,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який псевдоелемент використовується для стилізації placeholder у полях введення?",
-        "exp": "::placeholder дозволяє змінювати стиль тексту-заповнювача в input та textarea елементах."
-      },
-      "en": {
-        "q": "Which pseudo-element is used to style placeholders in input fields?",
-        "exp": "::placeholder allows styling the placeholder text in input and textarea elements."
-      },
-      "pl": {
-        "q": "Który pseudoelement służy do stylizacji placeholder w polach wprowadzania?",
-        "exp": "::placeholder pozwala stylizować tekst zastępczy w elementach input i textarea."
-      },
-      "answers": [
-        { "uk": "::placeholder", "en": "::placeholder", "pl": "::placeholder", "correct": true },
-        { "uk": ":placeholder", "en": ":placeholder", "pl": ":placeholder", "correct": false },
-        { "uk": "::input-placeholder", "en": "::input-placeholder", "pl": "::input-placeholder", "correct": false },
-        { "uk": ":input-text", "en": ":input-text", "pl": ":input-text", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q20",
-      "order": 20,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "У чому перевага :focus-visible над :focus для доступності?",
-        "exp": ":focus-visible застосовує стилі фокусу лише при клавіатурній навігації, уникаючи візуального шуму при кліках мишею."
-      },
-      "en": {
-        "q": "What is the advantage of :focus-visible over :focus for accessibility?",
-        "exp": ":focus-visible applies focus styles only during keyboard navigation, avoiding visual noise from mouse clicks."
-      },
-      "pl": {
-        "q": "Jaka jest przewaga :focus-visible nad :focus dla dostępności?",
-        "exp": ":focus-visible stosuje style fokusu tylko podczas nawigacji klawiaturą, unikając wizualnego szumu od kliknięć myszą."
-      },
-      "answers": [
-        { "uk": "Показує фокус лише при клавіатурній навігації", "en": "Shows focus only during keyboard navigation", "pl": "Pokazuje fokus tylko podczas nawigacji klawiaturą", "correct": true },
-        { "uk": "Працює швидше ніж :focus", "en": "Works faster than :focus", "pl": "Działa szybciej niż :focus", "correct": false },
-        { "uk": "Підтримує більше браузерів", "en": "Supports more browsers", "pl": "Obsługuje więcej przeglądarek", "correct": false },
-        { "uk": "Застосовується до всіх елементів автоматично", "en": "Applies to all elements automatically", "pl": "Stosuje się do wszystkich elementów automatycznie", "correct": false }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/css/advanced/css-advanced-quiz-part3.json b/json/quizzes/css/advanced/css-advanced-quiz-part3.json
deleted file mode 100644
index 887e8279..00000000
--- a/json/quizzes/css/advanced/css-advanced-quiz-part3.json
+++ /dev/null
@@ -1,234 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "css-adv-q21",
-      "order": 21,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Які властивості CSS використовуються для 3D-обертання елемента?",
-        "exp": "rotateX(), rotateY(), rotateZ() у властивості transform дозволяють обертати елемент навколо відповідних осей у 3D-просторі."
-      },
-      "en": {
-        "q": "Which CSS properties are used for 3D rotation of an element?",
-        "exp": "rotateX(), rotateY(), rotateZ() in the transform property allow rotating an element around corresponding axes in 3D space."
-      },
-      "pl": {
-        "q": "Jakie właściwości CSS służą do obrotu 3D elementu?",
-        "exp": "rotateX(), rotateY(), rotateZ() we właściwości transform pozwalają obracać element wokół odpowiednich osi w przestrzeni 3D."
-      },
-      "answers": [
-        { "uk": "transform: rotateX/Y/Z()", "en": "transform: rotateX/Y/Z()", "pl": "transform: rotateX/Y/Z()", "correct": true },
-        { "uk": "rotate-3d: x y z", "en": "rotate-3d: x y z", "pl": "rotate-3d: x y z", "correct": false },
-        { "uk": "animation-rotate: 3d", "en": "animation-rotate: 3d", "pl": "animation-rotate: 3d", "correct": false },
-        { "uk": "position-3d: rotate", "en": "position-3d: rotate", "pl": "position-3d: rotate", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q22",
-      "order": 22,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що робить властивість perspective у CSS?",
-        "exp": "perspective задає відстань від глядача до площини елемента, створюючи ефект глибини для 3D-перетворень. Менше значення — сильніша перспектива."
-      },
-      "en": {
-        "q": "What does the perspective property do in CSS?",
-        "exp": "perspective sets the distance from the viewer to the element plane, creating a depth effect for 3D transforms. Smaller value means stronger perspective."
-      },
-      "pl": {
-        "q": "Co robi właściwość perspective w CSS?",
-        "exp": "perspective ustawia odległość od widza do płaszczyzny elementu, tworząc efekt głębi dla transformacji 3D. Mniejsza wartość oznacza silniejszą perspektywę."
-      },
-      "answers": [
-        { "uk": "Створює ефект глибини для 3D-перетворень", "en": "Creates depth effect for 3D transforms", "pl": "Tworzy efekt głębi dla transformacji 3D", "correct": true },
-        { "uk": "Змінює прозорість елемента", "en": "Changes element opacity", "pl": "Zmienia przezroczystość elementu", "correct": false },
-        { "uk": "Встановлює точку трансформації", "en": "Sets transformation origin", "pl": "Ustawia punkt transformacji", "correct": false },
-        { "uk": "Визначає видиму область елемента", "en": "Defines visible area of element", "pl": "Określa widoczny obszar elementu", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q23",
-      "order": 23,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Для чого використовується backface-visibility: hidden?",
-        "exp": "backface-visibility: hidden приховує задню сторону елемента при 3D-обертанні, що важливо для ефектів типу перевернутої картки."
-      },
-      "en": {
-        "q": "What is backface-visibility: hidden used for?",
-        "exp": "backface-visibility: hidden hides the back side of an element during 3D rotation, essential for effects like card flip."
-      },
-      "pl": {
-        "q": "Do czego służy backface-visibility: hidden?",
-        "exp": "backface-visibility: hidden ukrywa tylną stronę elementu podczas obrotu 3D, co jest niezbędne dla efektów typu odwracana karta."
-      },
-      "answers": [
-        { "uk": "Приховати задню сторону при 3D-обертанні", "en": "Hide back side during 3D rotation", "pl": "Ukryć tylną stronę podczas obrotu 3D", "correct": true },
-        { "uk": "Приховати елемент повністю", "en": "Hide element completely", "pl": "Ukryć element całkowicie", "correct": false },
-        { "uk": "Вимкнути анімацію", "en": "Disable animation", "pl": "Wyłączyć animację", "correct": false },
-        { "uk": "Зробити елемент невидимим для скрін-рідерів", "en": "Make element invisible to screen readers", "pl": "Uczynić element niewidocznym dla czytników ekranu", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q24",
-      "order": 24,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Які CSS-властивості потрібні для ефекту перевернутої картки (card flip)?",
-        "exp": "Потрібні: perspective на контейнері, transform-style: preserve-3d на картці, transform: rotateY(180deg) при hover, і backface-visibility: hidden на обох сторонах."
-      },
-      "en": {
-        "q": "Which CSS properties are needed for a card flip effect?",
-        "exp": "Required: perspective on container, transform-style: preserve-3d on card, transform: rotateY(180deg) on hover, and backface-visibility: hidden on both sides."
-      },
-      "pl": {
-        "q": "Jakie właściwości CSS są potrzebne do efektu odwracanej karty?",
-        "exp": "Potrzebne: perspective na kontenerze, transform-style: preserve-3d na karcie, transform: rotateY(180deg) przy hover i backface-visibility: hidden po obu stronach."
-      },
-      "answers": [
-        { "uk": "perspective, transform-style, backface-visibility", "en": "perspective, transform-style, backface-visibility", "pl": "perspective, transform-style, backface-visibility", "correct": true },
-        { "uk": "flip, card-side, rotate", "en": "flip, card-side, rotate", "pl": "flip, card-side, rotate", "correct": false },
-        { "uk": "animation, keyframes, transition", "en": "animation, keyframes, transition", "pl": "animation, keyframes, transition", "correct": false },
-        { "uk": "opacity, display, visibility", "en": "opacity, display, visibility", "pl": "opacity, display, visibility", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q25",
-      "order": 25,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Для чого використовується властивість will-change?",
-        "exp": "will-change повідомляє браузеру про майбутні зміни властивостей, дозволяючи заздалегідь оптимізувати рендеринг і виносити елемент на окремий шар GPU."
-      },
-      "en": {
-        "q": "What is the will-change property used for?",
-        "exp": "will-change informs the browser about upcoming property changes, allowing it to pre-optimize rendering and move the element to a separate GPU layer."
-      },
-      "pl": {
-        "q": "Do czego służy właściwość will-change?",
-        "exp": "will-change informuje przeglądarkę o nadchodzących zmianach właściwości, pozwalając wcześniej zoptymalizować renderowanie i przenieść element na osobną warstwę GPU."
-      },
-      "answers": [
-        { "uk": "Оптимізувати рендеринг для майбутніх змін", "en": "Optimize rendering for upcoming changes", "pl": "Optymalizować renderowanie dla nadchodzących zmian", "correct": true },
-        { "uk": "Змінити значення властивості динамічно", "en": "Change property value dynamically", "pl": "Dynamicznie zmieniać wartość właściwości", "correct": false },
-        { "uk": "Запобігти змінам властивостей", "en": "Prevent property changes", "pl": "Zapobiegać zmianom właściwości", "correct": false },
-        { "uk": "Визначити умови для медіа-запитів", "en": "Define conditions for media queries", "pl": "Definiować warunki dla zapytań medialnych", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q26",
-      "order": 26,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "У чому різниця між reflow та repaint у браузері?",
-        "exp": "Reflow — перерахунок позицій і розмірів елементів (при зміні layout). Repaint — перемальовування зовнішнього вигляду без зміни геометрії. Reflow дорожчий."
-      },
-      "en": {
-        "q": "What is the difference between reflow and repaint in the browser?",
-        "exp": "Reflow recalculates positions and sizes (when layout changes). Repaint redraws appearance without geometry changes. Reflow is more expensive."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między reflow a repaint w przeglądarce?",
-        "exp": "Reflow przelicza pozycje i rozmiary (przy zmianie layoutu). Repaint przerysowuje wygląd bez zmian geometrii. Reflow jest droższy."
-      },
-      "answers": [
-        { "uk": "Reflow — геометрія, repaint — лише вигляд", "en": "Reflow — geometry, repaint — appearance only", "pl": "Reflow — geometria, repaint — tylko wygląd", "correct": true },
-        { "uk": "Repaint дорожчий за reflow", "en": "Repaint is more expensive than reflow", "pl": "Repaint jest droższy niż reflow", "correct": false },
-        { "uk": "Reflow стосується лише кольорів", "en": "Reflow only affects colors", "pl": "Reflow dotyczy tylko kolorów", "correct": false },
-        { "uk": "Це синоніми одного процесу", "en": "They are synonyms for the same process", "pl": "To synonimy tego samego procesu", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q27",
-      "order": 27,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке Critical CSS і навіщо він потрібен?",
-        "exp": "Critical CSS — це мінімальний набір стилів для рендерингу above-the-fold контенту. Вбудовується inline у <head> для швидшого першого відображення сторінки."
-      },
-      "en": {
-        "q": "What is Critical CSS and why is it needed?",
-        "exp": "Critical CSS is the minimal set of styles for rendering above-the-fold content. It's inlined in <head> for faster initial page display."
-      },
-      "pl": {
-        "q": "Czym jest Critical CSS i dlaczego jest potrzebny?",
-        "exp": "Critical CSS to minimalny zestaw stylów do renderowania zawartości above-the-fold. Jest wbudowany inline w <head> dla szybszego pierwszego wyświetlenia strony."
-      },
-      "answers": [
-        { "uk": "Мінімальні стилі для першого екрану, вбудовані inline", "en": "Minimal styles for first screen, inlined", "pl": "Minimalne style dla pierwszego ekranu, wbudowane inline", "correct": true },
-        { "uk": "Стилі для критичних помилок", "en": "Styles for critical errors", "pl": "Style dla krytycznych błędów", "correct": false },
-        { "uk": "CSS для друку документів", "en": "CSS for document printing", "pl": "CSS do drukowania dokumentów", "correct": false },
-        { "uk": "Стилі з найвищим пріоритетом", "en": "Styles with highest priority", "pl": "Style z najwyższym priorytetem", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q28",
-      "order": 28,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Чому складні CSS-селектори впливають на продуктивність?",
-        "exp": "Браузер читає селектори справа наліво, тому глибокі вкладення (div ul li a) збільшують час обходу DOM для пошуку відповідних елементів."
-      },
-      "en": {
-        "q": "Why do complex CSS selectors affect performance?",
-        "exp": "The browser reads selectors right-to-left, so deep nesting (div ul li a) increases DOM traversal time to find matching elements."
-      },
-      "pl": {
-        "q": "Dlaczego złożone selektory CSS wpływają na wydajność?",
-        "exp": "Przeglądarka czyta selektory od prawej do lewej, więc głębokie zagnieżdżanie (div ul li a) wydłuża czas przechodzenia DOM w poszukiwaniu pasujących elementów."
-      },
-      "answers": [
-        { "uk": "Браузер читає справа наліво, глибокі вкладення уповільнюють пошук", "en": "Browser reads right-to-left, deep nesting slows search", "pl": "Przeglądarka czyta od prawej do lewej, głębokie zagnieżdżanie spowalnia wyszukiwanie", "correct": true },
-        { "uk": "Складні селектори займають більше пам'яті", "en": "Complex selectors use more memory", "pl": "Złożone selektory zajmują więcej pamięci", "correct": false },
-        { "uk": "Браузер компілює їх повільніше", "en": "Browser compiles them slower", "pl": "Przeglądarka kompiluje je wolniej", "correct": false },
-        { "uk": "Вони блокують завантаження сторінки", "en": "They block page loading", "pl": "Blokują ładowanie strony", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q29",
-      "order": 29,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке OOCSS (Object-Oriented CSS)?",
-        "exp": "OOCSS — методологія, що базується на розділенні стилів на структуру і шкіру (theme), та повторному використанні класів як об'єктів для зменшення дублювання."
-      },
-      "en": {
-        "q": "What is OOCSS (Object-Oriented CSS)?",
-        "exp": "OOCSS is a methodology based on separating styles into structure and skin (theme), and reusing classes as objects to reduce duplication."
-      },
-      "pl": {
-        "q": "Czym jest OOCSS (Object-Oriented CSS)?",
-        "exp": "OOCSS to metodologia oparta na rozdzieleniu stylów na strukturę i skórkę (theme) oraz ponownym użyciu klas jako obiektów w celu redukcji duplikacji."
-      },
-      "answers": [
-        { "uk": "Розділення структури і теми, повторне використання класів", "en": "Separating structure and theme, reusing classes", "pl": "Rozdzielenie struktury i tematu, ponowne użycie klas", "correct": true },
-        { "uk": "Використання JavaScript для стилізації", "en": "Using JavaScript for styling", "pl": "Używanie JavaScript do stylizacji", "correct": false },
-        { "uk": "Об'єктна модель CSS у браузері", "en": "CSS object model in browser", "pl": "Obiektowy model CSS w przeglądarce", "correct": false },
-        { "uk": "Автоматична генерація стилів", "en": "Automatic style generation", "pl": "Automatyczne generowanie stylów", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q30",
-      "order": 30,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Яка методологія CSS пропонує ієрархію шарів від глобальних до компонентних стилів?",
-        "exp": "ITCSS (Inverted Triangle CSS) організовує стилі у вигляді перевернутого трикутника: від загальних налаштувань до специфічних компонентів."
-      },
-      "en": {
-        "q": "Which CSS methodology proposes a hierarchy of layers from global to component styles?",
-        "exp": "ITCSS (Inverted Triangle CSS) organizes styles as an inverted triangle: from general settings to specific components."
-      },
-      "pl": {
-        "q": "Która metodologia CSS proponuje hierarchię warstw od globalnych do stylów komponentów?",
-        "exp": "ITCSS (Inverted Triangle CSS) organizuje style jako odwrócony trójkąt: od ogólnych ustawień do konkretnych komponentów."
-      },
-      "answers": [
-        { "uk": "ITCSS", "en": "ITCSS", "pl": "ITCSS", "correct": true },
-        { "uk": "BEM", "en": "BEM", "pl": "BEM", "correct": false },
-        { "uk": "OOCSS", "en": "OOCSS", "pl": "OOCSS", "correct": false },
-        { "uk": "Atomic CSS", "en": "Atomic CSS", "pl": "Atomic CSS", "correct": false }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/css/advanced/css-advanced-quiz-part4.json b/json/quizzes/css/advanced/css-advanced-quiz-part4.json
deleted file mode 100644
index 5eb3c267..00000000
--- a/json/quizzes/css/advanced/css-advanced-quiz-part4.json
+++ /dev/null
@@ -1,234 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "css-adv-q31",
-      "order": 31,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка CSS-властивість дозволяє задати співвідношення сторін елемента?",
-        "exp": "aspect-ratio дозволяє задати пропорції елемента (наприклад, 16/9), і браузер автоматично розрахує висоту відносно ширини."
-      },
-      "en": {
-        "q": "Which CSS property allows setting an element's aspect ratio?",
-        "exp": "aspect-ratio allows setting element proportions (e.g., 16/9), and the browser automatically calculates height relative to width."
-      },
-      "pl": {
-        "q": "Która właściwość CSS pozwala ustawić proporcje elementu?",
-        "exp": "aspect-ratio pozwala ustawić proporcje elementu (np. 16/9), a przeglądarka automatycznie oblicza wysokość względem szerokości."
-      },
-      "answers": [
-        { "uk": "aspect-ratio", "en": "aspect-ratio", "pl": "aspect-ratio", "correct": true },
-        { "uk": "ratio", "en": "ratio", "pl": "ratio", "correct": false },
-        { "uk": "proportions", "en": "proportions", "pl": "proportions", "correct": false },
-        { "uk": "size-ratio", "en": "size-ratio", "pl": "size-ratio", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q32",
-      "order": 32,
-      "difficulty": "medium",
-      "uk": {
-        "q": "У чому різниця між :first-child та :first-of-type?",
-        "exp": ":first-child вибирає елемент, якщо він перший серед усіх дочірніх. :first-of-type — якщо він перший серед елементів свого типу."
-      },
-      "en": {
-        "q": "What is the difference between :first-child and :first-of-type?",
-        "exp": ":first-child selects an element if it's the first among all children. :first-of-type selects if it's the first of its element type."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między :first-child a :first-of-type?",
-        "exp": ":first-child wybiera element, jeśli jest pierwszym wśród wszystkich dzieci. :first-of-type wybiera, jeśli jest pierwszym swojego typu."
-      },
-      "answers": [
-        { "uk": ":first-child — серед усіх, :first-of-type — серед свого типу", "en": ":first-child — among all, :first-of-type — among its type", "pl": ":first-child — wśród wszystkich, :first-of-type — wśród swojego typu", "correct": true },
-        { "uk": "Це синоніми", "en": "They are synonyms", "pl": "Są synonimami", "correct": false },
-        { "uk": ":first-of-type працює лише з класами", "en": ":first-of-type only works with classes", "pl": ":first-of-type działa tylko z klasami", "correct": false },
-        { "uk": ":first-child працює лише з ID", "en": ":first-child only works with IDs", "pl": ":first-child działa tylko z ID", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q33",
-      "order": 33,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить псевдоклас :not() у CSS?",
-        "exp": ":not(селектор) вибирає елементи, які НЕ відповідають вказаному селектору, дозволяючи виключати певні елементи з правила."
-      },
-      "en": {
-        "q": "What does the :not() pseudo-class do in CSS?",
-        "exp": ":not(selector) selects elements that do NOT match the specified selector, allowing exclusion of certain elements from a rule."
-      },
-      "pl": {
-        "q": "Co robi pseudoklasa :not() w CSS?",
-        "exp": ":not(selektor) wybiera elementy, które NIE pasują do określonego selektora, pozwalając wykluczyć pewne elementy z reguły."
-      },
-      "answers": [
-        { "uk": "Вибирає елементи, що не відповідають селектору", "en": "Selects elements that don't match the selector", "pl": "Wybiera elementy, które nie pasują do selektora", "correct": true },
-        { "uk": "Інвертує всі стилі елемента", "en": "Inverts all element styles", "pl": "Odwraca wszystkie style elementu", "correct": false },
-        { "uk": "Видаляє елемент з DOM", "en": "Removes element from DOM", "pl": "Usuwa element z DOM", "correct": false },
-        { "uk": "Приховує елемент візуально", "en": "Hides element visually", "pl": "Ukrywa element wizualnie", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка властивість керує розривами сторінок при друку в сучасному CSS?",
-        "exp": "break-before, break-after, break-inside — сучасні властивості для керування розривами сторінок, які замінили застарілі page-break-*."
-      },
-      "en": {
-        "q": "Which property controls page breaks in printing in modern CSS?",
-        "exp": "break-before, break-after, break-inside are modern properties for controlling page breaks, replacing the deprecated page-break-*."
-      },
-      "pl": {
-        "q": "Która właściwość kontroluje łamanie stron przy druku we współczesnym CSS?",
-        "exp": "break-before, break-after, break-inside to nowoczesne właściwości do kontroli łamania stron, zastępujące przestarzałe page-break-*."
-      },
-      "answers": [
-        { "uk": "break-before, break-after, break-inside", "en": "break-before, break-after, break-inside", "pl": "break-before, break-after, break-inside", "correct": true },
-        { "uk": "print-break", "en": "print-break", "pl": "print-break", "correct": false },
-        { "uk": "page-split", "en": "page-split", "pl": "page-split", "correct": false },
-        { "uk": "document-break", "en": "document-break", "pl": "document-break", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q35",
-      "order": 35,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як створити masonry-макет за допомогою CSS columns?",
-        "exp": "Використовуючи column-count для кількості колонок і break-inside: avoid на елементах, щоб вони не розривались між колонками."
-      },
-      "en": {
-        "q": "How do you create a masonry layout using CSS columns?",
-        "exp": "Using column-count for number of columns and break-inside: avoid on elements to prevent them from breaking across columns."
-      },
-      "pl": {
-        "q": "Jak stworzyć układ masonry za pomocą CSS columns?",
-        "exp": "Używając column-count dla liczby kolumn i break-inside: avoid na elementach, aby nie łamały się między kolumnami."
-      },
-      "answers": [
-        { "uk": "column-count і break-inside: avoid", "en": "column-count and break-inside: avoid", "pl": "column-count i break-inside: avoid", "correct": true },
-        { "uk": "display: masonry", "en": "display: masonry", "pl": "display: masonry", "correct": false },
-        { "uk": "grid-template-rows: masonry", "en": "grid-template-rows: masonry", "pl": "grid-template-rows: masonry", "correct": false },
-        { "uk": "flex-wrap: masonry", "en": "flex-wrap: masonry", "pl": "flex-wrap: masonry", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q36",
-      "order": 36,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "У чому різниця між auto-fill та auto-fit у CSS Grid?",
-        "exp": "auto-fill створює порожні колонки, якщо елементів менше. auto-fit розтягує існуючі елементи на весь доступний простір."
-      },
-      "en": {
-        "q": "What is the difference between auto-fill and auto-fit in CSS Grid?",
-        "exp": "auto-fill creates empty columns if there are fewer elements. auto-fit stretches existing elements to fill all available space."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między auto-fill a auto-fit w CSS Grid?",
-        "exp": "auto-fill tworzy puste kolumny, jeśli jest mniej elementów. auto-fit rozciąga istniejące elementy na całą dostępną przestrzeń."
-      },
-      "answers": [
-        { "uk": "auto-fill — порожні колонки, auto-fit — розтягує елементи", "en": "auto-fill — empty columns, auto-fit — stretches elements", "pl": "auto-fill — puste kolumny, auto-fit — rozciąga elementy", "correct": true },
-        { "uk": "Це синоніми", "en": "They are synonyms", "pl": "Są synonimami", "correct": false },
-        { "uk": "auto-fit працює лише з фіксованими розмірами", "en": "auto-fit only works with fixed sizes", "pl": "auto-fit działa tylko ze stałymi rozmiarami", "correct": false },
-        { "uk": "auto-fill не підтримує minmax()", "en": "auto-fill doesn't support minmax()", "pl": "auto-fill nie obsługuje minmax()", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q37",
-      "order": 37,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що робить CSS-функція clamp()?",
-        "exp": "clamp(min, preferred, max) обмежує значення між мінімумом і максимумом, дозволяючи адаптивне масштабування в заданих межах."
-      },
-      "en": {
-        "q": "What does the CSS clamp() function do?",
-        "exp": "clamp(min, preferred, max) constrains a value between minimum and maximum, allowing responsive scaling within defined bounds."
-      },
-      "pl": {
-        "q": "Co robi funkcja CSS clamp()?",
-        "exp": "clamp(min, preferred, max) ogranicza wartość między minimum a maksimum, pozwalając na responsywne skalowanie w określonych granicach."
-      },
-      "answers": [
-        { "uk": "Обмежує значення між min і max", "en": "Constrains value between min and max", "pl": "Ogranicza wartość między min a max", "correct": true },
-        { "uk": "Обчислює середнє з трьох значень", "en": "Calculates average of three values", "pl": "Oblicza średnią z trzech wartości", "correct": false },
-        { "uk": "Вибирає мінімальне з трьох значень", "en": "Selects minimum of three values", "pl": "Wybiera minimum z trzech wartości", "correct": false },
-        { "uk": "Множить три значення", "en": "Multiplies three values", "pl": "Mnoży trzy wartości", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка властивість контролює, як зображення заповнює контейнер?",
-        "exp": "object-fit визначає, як вміст (зображення, відео) масштабується в контейнері: cover, contain, fill, none, scale-down."
-      },
-      "en": {
-        "q": "Which property controls how an image fills its container?",
-        "exp": "object-fit determines how content (image, video) scales within a container: cover, contain, fill, none, scale-down."
-      },
-      "pl": {
-        "q": "Która właściwość kontroluje, jak obraz wypełnia kontener?",
-        "exp": "object-fit określa, jak zawartość (obraz, wideo) skaluje się w kontenerze: cover, contain, fill, none, scale-down."
-      },
-      "answers": [
-        { "uk": "object-fit", "en": "object-fit", "pl": "object-fit", "correct": true },
-        { "uk": "image-fit", "en": "image-fit", "pl": "image-fit", "correct": false },
-        { "uk": "background-size", "en": "background-size", "pl": "background-size", "correct": false },
-        { "uk": "content-fit", "en": "content-fit", "pl": "content-fit", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q39",
-      "order": 39,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як перевірити підтримку CSS-селектора :has() у браузері?",
-        "exp": "@supports selector(:has(*)) { } дозволяє перевірити підтримку селектора :has() і застосувати стилі лише у підтримуваних браузерах."
-      },
-      "en": {
-        "q": "How do you check browser support for the CSS :has() selector?",
-        "exp": "@supports selector(:has(*)) { } allows checking :has() selector support and applying styles only in supported browsers."
-      },
-      "pl": {
-        "q": "Jak sprawdzić wsparcie przeglądarki dla selektora CSS :has()?",
-        "exp": "@supports selector(:has(*)) { } pozwala sprawdzić wsparcie selektora :has() i stosować style tylko w obsługiwanych przeglądarkach."
-      },
-      "answers": [
-        { "uk": "@supports selector(:has(*))", "en": "@supports selector(:has(*))", "pl": "@supports selector(:has(*))", "correct": true },
-        { "uk": "@supports :has", "en": "@supports :has", "pl": "@supports :has", "correct": false },
-        { "uk": "@media has-support", "en": "@media has-support", "pl": "@media has-support", "correct": false },
-        { "uk": "@check selector(:has)", "en": "@check selector(:has)", "pl": "@check selector(:has)", "correct": false }
-      ]
-    },
-    {
-      "id": "css-adv-q40",
-      "order": 40,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як CSS custom properties успадковуються у вкладених елементах?",
-        "exp": "CSS-змінні (--var) успадковуються від батьківських елементів до дочірніх. Значення можна перевизначити на будь-якому рівні вкладеності."
-      },
-      "en": {
-        "q": "How are CSS custom properties inherited in nested elements?",
-        "exp": "CSS variables (--var) inherit from parent to child elements. Values can be overridden at any nesting level."
-      },
-      "pl": {
-        "q": "Jak CSS custom properties są dziedziczone w zagnieżdżonych elementach?",
-        "exp": "Zmienne CSS (--var) dziedziczą się od elementów rodzicielskich do potomnych. Wartości można nadpisać na każdym poziomie zagnieżdżenia."
-      },
-      "answers": [
-        { "uk": "Успадковуються від батька до дитини, можна перевизначити", "en": "Inherit from parent to child, can be overridden", "pl": "Dziedziczą się od rodzica do dziecka, można nadpisać", "correct": true },
-        { "uk": "Не успадковуються, доступні лише в :root", "en": "Don't inherit, only available in :root", "pl": "Nie dziedziczą się, dostępne tylko w :root", "correct": false },
-        { "uk": "Успадковуються лише текстові властивості", "en": "Only text properties inherit", "pl": "Dziedziczą się tylko właściwości tekstowe", "correct": false },
-        { "uk": "Потрібно явно вказувати inherit", "en": "Need to explicitly specify inherit", "pl": "Trzeba jawnie podać inherit", "correct": false }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/css/advanced/seed-quiz-css-advanced.ts b/json/quizzes/css/advanced/seed-quiz-css-advanced.ts
deleted file mode 100644
index 4786b3c9..00000000
--- a/json/quizzes/css/advanced/seed-quiz-css-advanced.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-import { eq } from 'drizzle-orm';
-import { readFileSync } from 'fs';
-import { join } from 'path';
-import { db } from './index';
-import { categories } from './schema/categories';
-import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
-  quizAnswers,
-  quizAnswerTranslations,
-  quizAttempts,
-} from './schema/quiz';
-
-type Locale = 'uk' | 'en' | 'pl';
-const LOCALES: Locale[] = ['uk', 'en', 'pl'];
-
-interface QuestionData {
-  id: string;
-  order: number;
-  difficulty: 'beginner' | 'medium' | 'advanced';
-  uk: { q: string; exp: string };
-  en: { q: string; exp: string };
-  pl: { q: string; exp: string };
-  answers: {
-    uk: string;
-    en: string;
-    pl: string;
-    correct: boolean;
-  }[];
-}
-
-interface QuizPartData {
-  questions: QuestionData[];
-}
-
-const CATEGORY_SLUG = 'css';
-
-const QUIZ_METADATA = {
-  slug: 'css-advanced',
-  questionsCount: 40,
-  timeLimitSeconds: 2400,
-  translations: {
-    uk: {
-      title: 'CSS Advanced',
-      description: 'Поглиблені концепції CSS: 3D-трансформації, оптимізація продуктивності, методології архітектури, препроцесори, CSS-in-JS та сучасні можливості.',
-    },
-    en: {
-      title: 'CSS Advanced',
-      description: 'Advanced CSS concepts: 3D transforms, performance optimization, architecture methodologies, preprocessors, CSS-in-JS, and modern features.',
-    },
-    pl: {
-      title: 'CSS Zaawansowany',
-      description: 'Zaawansowane koncepcje CSS: transformacje 3D, optymalizacja wydajności, metodologie architektury, preprocesory, CSS-in-JS i nowoczesne funkcje.',
-    },
-  },
-};
-
-function createExplanation(text: string) {
-  return [{ type: 'paragraph' as const, children: [{ text }] }];
-}
-
-async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'data', `css-advanced-quiz-part${partNumber}.json`);
-  const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
-  return partData.questions;
-}
-
-async function ensureQuizExists(): Promise<string> {
-  console.log('Ensuring quiz exists...');
-
-  // Find category by slug
-  const [category] = await db
-    .select()
-    .from(categories)
-    .where(eq(categories.slug, CATEGORY_SLUG))
-    .limit(1);
-
-  if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
-  }
-
-  // Clean up old quiz by slug
-  const existing = await db.query.quizzes.findFirst({
-    where: eq(quizzes.slug, QUIZ_METADATA.slug),
-  });
-  if (existing) {
-    const existingAttempt = await db.query.quizAttempts.findFirst({
-      where: eq(quizAttempts.quizId, existing.id),
-    });
-    if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
-    }
-
-    await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 3,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
-
-    const quizId = existing.id;
-    for (const locale of LOCALES) {
-      await db.insert(quizTranslations).values({
-        quizId,
-        locale,
-        title: QUIZ_METADATA.translations[locale].title,
-        description: QUIZ_METADATA.translations[locale].description,
-      });
-    }
-
-    return quizId;
-  }
-
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 3,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
-
-  for (const locale of LOCALES) {
-    await db.insert(quizTranslations).values({
-      quizId: quiz.id,
-      locale,
-      title: QUIZ_METADATA.translations[locale].title,
-      description: QUIZ_METADATA.translations[locale].description,
-    });
-  }
-
-  return quiz.id;
-}
-
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
-
-  for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
-
-    for (const locale of LOCALES) {
-      await db.insert(quizQuestionContent).values({
-        quizQuestionId: q.id,
-        locale,
-        questionText: question[locale].q,
-        explanation: createExplanation(question[locale].exp),
-      });
-    }
-
-    for (let i = 0; i < question.answers.length; i++) {
-      const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
-
-      for (const locale of LOCALES) {
-        await db.insert(quizAnswerTranslations).values({
-          quizAnswerId: a.id,
-          locale,
-          answerText: answer[locale],
-        });
-      }
-    }
-  }
-
-  console.log(`Part ${partNumber} completed (${questions.length} questions)`);
-}
-
-async function seedQuizFromJson() {
-  const args = process.argv.slice(2);
-  const partArg = args[0];
-
-  if (!partArg) {
-    console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-css-advanced.ts <part-number>');
-    console.log('Example: npx tsx db/seeds/seed-quiz-css-advanced.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-css-advanced.ts all');
-    process.exit(1);
-  }
-
-  console.log('Starting CSS Advanced quiz seed...\n');
-
-  try {
-    const quizId = await ensureQuizExists();
-
-    if (partArg.toLowerCase() === 'all') {
-      console.log('Uploading all parts...\n');
-      let totalQuestions = 0;
-
-      for (let i = 1; i <= 4; i++) {
-        const questions = await loadQuestions(i);
-        await seedQuestions(questions, quizId, i);
-        totalQuestions += questions.length;
-      }
-
-      console.log('\nAll parts seeded successfully!');
-      console.log(`   - 1 quiz with ${LOCALES.length} translations`);
-      console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
-    } else {
-      const partNumber = parseInt(partArg, 10);
-
-      if (isNaN(partNumber) || partNumber < 1 || partNumber > 4) {
-        console.error('Error: Part number must be between 1 and 4');
-        process.exit(1);
-      }
-
-      const questions = await loadQuestions(partNumber);
-      await seedQuestions(questions, quizId, partNumber);
-
-      console.log('\nPart seeded successfully!');
-      console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
-      console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
-    }
-  } catch (error) {
-    console.error('\nError seeding quiz:', error);
-    throw error;
-  }
-}
-
-seedQuizFromJson()
-  .then(() => process.exit(0))
-  .catch((error) => {
-    console.error(error);
-    process.exit(1);
-  });
diff --git a/json/quizzes/css/fundamentals/css-quiz-part1.json b/json/quizzes/css/fundamentals/css-quiz-part1.json
deleted file mode 100644
index ffa475fd..00000000
--- a/json/quizzes/css/fundamentals/css-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "css-q01",
-      "order": 1,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке CSS і яка його основна функція у веб-розробці?",
-        "exp": "CSS (Cascading Style Sheets) — це мова стилів для опису зовнішнього вигляду HTML-документів, включаючи кольори, шрифти, відступи та розташування елементів."
-      },
-      "en": {
-        "q": "What is CSS and what is its main function in web development?",
-        "exp": "CSS (Cascading Style Sheets) is a styling language for describing the appearance of HTML documents, including colors, fonts, spacing, and element layout."
-      },
-      "pl": {
-        "q": "Czym jest CSS i jaka jest jego główna funkcja w tworzeniu stron internetowych?",
-        "exp": "CSS (Cascading Style Sheets) to język stylów do opisywania wyglądu dokumentów HTML, w tym kolorów, czcionek, odstępów i układu elementów."
-      },
-      "answers": [
-        {
-          "uk": "Мова програмування для створення бази даних",
-          "en": "A programming language for creating databases",
-          "pl": "Język programowania do tworzenia baz danych",
-          "correct": false
-        },
-        {
-          "uk": "Мова стилів для опису візуального оформлення веб-сторінок",
-          "en": "A styling language for describing the visual appearance of web pages",
-          "pl": "Język stylów do opisywania wizualnego wyglądu stron internetowych",
-          "correct": true
-        },
-        {
-          "uk": "Фреймворк для серверної розробки",
-          "en": "A framework for server-side development",
-          "pl": "Framework do programowania po stronie serwera",
-          "correct": false
-        },
-        {
-          "uk": "Система контролю версій для коду",
-          "en": "A version control system for code",
-          "pl": "System kontroli wersji dla kodu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q02",
-      "order": 2,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Який спосіб підключення CSS має найвищий пріоритет?",
-        "exp": "Inline-стилі (атрибут style) мають найвищий пріоритет, оскільки застосовуються безпосередньо до елемента."
-      },
-      "en": {
-        "q": "Which method of including CSS has the highest priority?",
-        "exp": "Inline styles (the style attribute) have the highest priority because they are applied directly to the element."
-      },
-      "pl": {
-        "q": "Który sposób dołączania CSS ma najwyższy priorytet?",
-        "exp": "Style inline (atrybut style) mają najwyższy priorytet, ponieważ są stosowane bezpośrednio do elementu."
-      },
-      "answers": [
-        {
-          "uk": "Зовнішній CSS-файл через тег link",
-          "en": "External CSS file via link tag",
-          "pl": "Zewnętrzny plik CSS przez tag link",
-          "correct": false
-        },
-        {
-          "uk": "Внутрішній CSS у тегу style",
-          "en": "Internal CSS in style tag",
-          "pl": "Wewnętrzny CSS w tagu style",
-          "correct": false
-        },
-        {
-          "uk": "Inline-стилі через атрибут style",
-          "en": "Inline styles via style attribute",
-          "pl": "Style inline przez atrybut style",
-          "correct": true
-        },
-        {
-          "uk": "Усі способи мають однаковий пріоритет",
-          "en": "All methods have equal priority",
-          "pl": "Wszystkie sposoby mają równy priorytet",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q03",
-      "order": 3,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "З яких компонентів складається блокова модель CSS (Box Model)?",
-        "exp": "Box Model складається з: content (вміст), padding (внутрішній відступ), border (рамка) та margin (зовнішній відступ)."
-      },
-      "en": {
-        "q": "What components make up the CSS Box Model?",
-        "exp": "The Box Model consists of: content, padding (inner spacing), border, and margin (outer spacing)."
-      },
-      "pl": {
-        "q": "Z jakich komponentów składa się model pudełkowy CSS (Box Model)?",
-        "exp": "Model pudełkowy składa się z: content (zawartość), padding (wewnętrzny odstęp), border (ramka) i margin (zewnętrzny odstęp)."
-      },
-      "answers": [
-        {
-          "uk": "Header, body, footer, sidebar",
-          "en": "Header, body, footer, sidebar",
-          "pl": "Header, body, footer, sidebar",
-          "correct": false
-        },
-        {
-          "uk": "Content, padding, border, margin",
-          "en": "Content, padding, border, margin",
-          "pl": "Content, padding, border, margin",
-          "correct": true
-        },
-        {
-          "uk": "Width, height, color, background",
-          "en": "Width, height, color, background",
-          "pl": "Width, height, color, background",
-          "correct": false
-        },
-        {
-          "uk": "Display, position, float, clear",
-          "en": "Display, position, float, clear",
-          "pl": "Display, position, float, clear",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q04",
-      "order": 4,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між margin і padding?",
-        "exp": "Margin створює зовнішній відступ між елементом і сусідніми елементами. Padding створює внутрішній відступ між вмістом і рамкою елемента."
-      },
-      "en": {
-        "q": "What is the difference between margin and padding?",
-        "exp": "Margin creates outer spacing between the element and neighboring elements. Padding creates inner spacing between the content and the element's border."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między margin a padding?",
-        "exp": "Margin tworzy zewnętrzny odstęp między elementem a sąsiednimi elementami. Padding tworzy wewnętrzny odstęp między zawartością a ramką elementu."
-      },
-      "answers": [
-        {
-          "uk": "Margin — внутрішній відступ, padding — зовнішній",
-          "en": "Margin is inner spacing, padding is outer",
-          "pl": "Margin to wewnętrzny odstęp, padding to zewnętrzny",
-          "correct": false
-        },
-        {
-          "uk": "Margin — зовнішній відступ, padding — внутрішній",
-          "en": "Margin is outer spacing, padding is inner",
-          "pl": "Margin to zewnętrzny odstęp, padding to wewnętrzny",
-          "correct": true
-        },
-        {
-          "uk": "Обидві властивості впливають тільки на ширину",
-          "en": "Both properties only affect width",
-          "pl": "Obie właściwości wpływają tylko na szerokość",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає, це синоніми",
-          "en": "There is no difference, they are synonyms",
-          "pl": "Nie ma różnicy, to synonimy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q05",
-      "order": 5,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що робить властивість box-sizing: border-box?",
-        "exp": "При border-box ширина і висота елемента включають padding і border, що спрощує розрахунок розмірів і робить верстку передбачуванішою."
-      },
-      "en": {
-        "q": "What does box-sizing: border-box do?",
-        "exp": "With border-box, the element's width and height include padding and border, simplifying size calculations and making layouts more predictable."
-      },
-      "pl": {
-        "q": "Co robi właściwość box-sizing: border-box?",
-        "exp": "Przy border-box szerokość i wysokość elementu zawierają padding i border, co upraszcza obliczenia rozmiaru i sprawia, że układy są bardziej przewidywalne."
-      },
-      "answers": [
-        {
-          "uk": "Додає рамку навколо елемента",
-          "en": "Adds a border around the element",
-          "pl": "Dodaje ramkę wokół elementu",
-          "correct": false
-        },
-        {
-          "uk": "Включає padding і border у загальну ширину та висоту елемента",
-          "en": "Includes padding and border in the total width and height",
-          "pl": "Włącza padding i border do całkowitej szerokości i wysokości",
-          "correct": true
-        },
-        {
-          "uk": "Видаляє всі відступи елемента",
-          "en": "Removes all element spacing",
-          "pl": "Usuwa wszystkie odstępy elementu",
-          "correct": false
-        },
-        {
-          "uk": "Фіксує елемент на сторінці",
-          "en": "Fixes the element on the page",
-          "pl": "Naprawia element na stronie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q06",
-      "order": 6,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між селектором класу (.) і селектором ID (#)?",
-        "exp": "Клас можна застосовувати до багатьох елементів і має нижчу специфічність. ID має бути унікальним на сторінці та має вищу специфічність."
-      },
-      "en": {
-        "q": "What is the difference between class selector (.) and ID selector (#)?",
-        "exp": "A class can be applied to many elements and has lower specificity. An ID should be unique on the page and has higher specificity."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między selektorem klasy (.) a selektorem ID (#)?",
-        "exp": "Klasę można stosować do wielu elementów i ma niższą specyficzność. ID powinno być unikalne na stronie i ma wyższą specyficzność."
-      },
-      "answers": [
-        {
-          "uk": "Клас — для одного елемента, ID — для групи",
-          "en": "Class is for one element, ID is for groups",
-          "pl": "Klasa jest dla jednego elementu, ID dla grup",
-          "correct": false
-        },
-        {
-          "uk": "ID — унікальний з вищою специфічністю, клас — повторюваний з нижчою",
-          "en": "ID is unique with higher specificity, class is reusable with lower",
-          "pl": "ID jest unikalne z wyższą specyficznością, klasa jest wielokrotnego użytku z niższą",
-          "correct": true
-        },
-        {
-          "uk": "Різниці немає, вони працюють однаково",
-          "en": "No difference, they work the same",
-          "pl": "Nie ma różnicy, działają tak samo",
-          "correct": false
-        },
-        {
-          "uk": "Клас працює швидше за ID",
-          "en": "Class works faster than ID",
-          "pl": "Klasa działa szybciej niż ID",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q07",
-      "order": 7,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між display: none та visibility: hidden?",
-        "exp": "display: none повністю видаляє елемент з потоку документа, він не займає місця. visibility: hidden робить елемент невидимим, але місце залишається."
-      },
-      "en": {
-        "q": "What is the difference between display: none and visibility: hidden?",
-        "exp": "display: none completely removes the element from document flow, taking no space. visibility: hidden makes the element invisible but preserves its space."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między display: none a visibility: hidden?",
-        "exp": "display: none całkowicie usuwa element z przepływu dokumentu, nie zajmując miejsca. visibility: hidden sprawia, że element jest niewidoczny, ale zachowuje jego miejsce."
-      },
-      "answers": [
-        {
-          "uk": "display: none приховує, але залишає місце; visibility: hidden видаляє",
-          "en": "display: none hides but keeps space; visibility: hidden removes",
-          "pl": "display: none ukrywa, ale zachowuje miejsce; visibility: hidden usuwa",
-          "correct": false
-        },
-        {
-          "uk": "display: none видаляє з потоку; visibility: hidden приховує, але місце залишається",
-          "en": "display: none removes from flow; visibility: hidden hides but keeps space",
-          "pl": "display: none usuwa z przepływu; visibility: hidden ukrywa, ale miejsce pozostaje",
-          "correct": true
-        },
-        {
-          "uk": "Обидва працюють однаково",
-          "en": "Both work the same way",
-          "pl": "Oba działają tak samo",
-          "correct": false
-        },
-        {
-          "uk": "Обидва видаляють елемент з DOM",
-          "en": "Both remove the element from DOM",
-          "pl": "Oba usuwają element z DOM",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q08",
-      "order": 8,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке каскадність у CSS?",
-        "exp": "Каскадність — це механізм, який визначає пріоритет стилів, коли кілька правил застосовуються до одного елемента. Пріоритет залежить від специфічності, важливості та порядку."
-      },
-      "en": {
-        "q": "What is cascading in CSS?",
-        "exp": "Cascading is a mechanism that determines style priority when multiple rules apply to the same element. Priority depends on specificity, importance, and order."
-      },
-      "pl": {
-        "q": "Czym jest kaskadowość w CSS?",
-        "exp": "Kaskadowość to mechanizm określający priorytet stylów, gdy wiele reguł dotyczy tego samego elementu. Priorytet zależy od specyficzności, ważności i kolejności."
-      },
-      "answers": [
-        {
-          "uk": "Спосіб створення випадаючих меню",
-          "en": "A way to create dropdown menus",
-          "pl": "Sposób tworzenia rozwijanych menu",
-          "correct": false
-        },
-        {
-          "uk": "Механізм визначення пріоритету стилів для елемента",
-          "en": "A mechanism for determining style priority for an element",
-          "pl": "Mechanizm określania priorytetu stylów dla elementu",
-          "correct": true
-        },
-        {
-          "uk": "Техніка анімації елементів",
-          "en": "A technique for animating elements",
-          "pl": "Technika animowania elementów",
-          "correct": false
-        },
-        {
-          "uk": "Метод створення градієнтів",
-          "en": "A method for creating gradients",
-          "pl": "Metoda tworzenia gradientów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q09",
-      "order": 9,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Коли властивість z-index не працюватиме?",
-        "exp": "z-index працює тільки для елементів з position: relative, absolute, fixed або sticky. Для статичних елементів (position: static) він ігнорується."
-      },
-      "en": {
-        "q": "When will the z-index property not work?",
-        "exp": "z-index only works for elements with position: relative, absolute, fixed, or sticky. For static elements (position: static), it is ignored."
-      },
-      "pl": {
-        "q": "Kiedy właściwość z-index nie będzie działać?",
-        "exp": "z-index działa tylko dla elementów z position: relative, absolute, fixed lub sticky. Dla elementów statycznych (position: static) jest ignorowany."
-      },
-      "answers": [
-        {
-          "uk": "Коли значення від'ємне",
-          "en": "When the value is negative",
-          "pl": "Gdy wartość jest ujemna",
-          "correct": false
-        },
-        {
-          "uk": "Коли елемент має position: static",
-          "en": "When the element has position: static",
-          "pl": "Gdy element ma position: static",
-          "correct": true
-        },
-        {
-          "uk": "Коли елемент знаходиться у flex-контейнері",
-          "en": "When the element is in a flex container",
-          "pl": "Gdy element znajduje się w kontenerze flex",
-          "correct": false
-        },
-        {
-          "uk": "Коли є кілька елементів з однаковим z-index",
-          "en": "When there are multiple elements with the same z-index",
-          "pl": "Gdy jest wiele elementów z tym samym z-index",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q10",
-      "order": 10,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між inline та block елементами?",
-        "exp": "Block-елементи займають всю ширину батька і починаються з нового рядка. Inline-елементи займають тільки необхідну ширину і розташовуються в рядку."
-      },
-      "en": {
-        "q": "What is the difference between inline and block elements?",
-        "exp": "Block elements take full parent width and start on a new line. Inline elements take only the needed width and flow within the line."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między elementami inline i block?",
-        "exp": "Elementy block zajmują całą szerokość rodzica i zaczynają się od nowej linii. Elementy inline zajmują tylko potrzebną szerokość i płyną w linii."
-      },
-      "answers": [
-        {
-          "uk": "Block — у рядку, inline — з нового рядка",
-          "en": "Block flows in line, inline starts new line",
-          "pl": "Block płynie w linii, inline zaczyna nową linię",
-          "correct": false
-        },
-        {
-          "uk": "Block — з нового рядка на всю ширину, inline — у рядку на ширину вмісту",
-          "en": "Block starts new line with full width, inline flows in line with content width",
-          "pl": "Block zaczyna nową linię z pełną szerokością, inline płynie w linii z szerokością zawartości",
-          "correct": true
-        },
-        {
-          "uk": "Обидва типи працюють однаково",
-          "en": "Both types work the same way",
-          "pl": "Oba typy działają tak samo",
-          "correct": false
-        },
-        {
-          "uk": "Block можна стилізувати, inline — ні",
-          "en": "Block can be styled, inline cannot",
-          "pl": "Block można stylizować, inline nie można",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/css/fundamentals/css-quiz-part2.json b/json/quizzes/css/fundamentals/css-quiz-part2.json
deleted file mode 100644
index f93996da..00000000
--- a/json/quizzes/css/fundamentals/css-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "css-q11",
-      "order": 11,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між position: absolute та position: fixed?",
-        "exp": "absolute позиціонується відносно найближчого позиціонованого предка. fixed позиціонується відносно вікна браузера і залишається на місці при прокрутці."
-      },
-      "en": {
-        "q": "What is the difference between position: absolute and position: fixed?",
-        "exp": "absolute is positioned relative to the nearest positioned ancestor. fixed is positioned relative to the browser window and stays in place when scrolling."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między position: absolute a position: fixed?",
-        "exp": "absolute jest pozycjonowane względem najbliższego pozycjonowanego przodka. fixed jest pozycjonowane względem okna przeglądarki i pozostaje na miejscu podczas przewijania."
-      },
-      "answers": [
-        {
-          "uk": "absolute залишається при прокрутці, fixed прокручується",
-          "en": "absolute stays when scrolling, fixed scrolls",
-          "pl": "absolute pozostaje podczas przewijania, fixed przewija się",
-          "correct": false
-        },
-        {
-          "uk": "absolute — відносно предка, fixed — відносно вікна браузера",
-          "en": "absolute is relative to ancestor, fixed is relative to browser window",
-          "pl": "absolute jest względem przodka, fixed jest względem okna przeglądarki",
-          "correct": true
-        },
-        {
-          "uk": "Обидва працюють однаково",
-          "en": "Both work the same way",
-          "pl": "Oba działają tak samo",
-          "correct": false
-        },
-        {
-          "uk": "fixed працює тільки з z-index",
-          "en": "fixed only works with z-index",
-          "pl": "fixed działa tylko z z-index",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q12",
-      "order": 12,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як працює position: sticky?",
-        "exp": "sticky — це гібрид relative і fixed. Елемент поводиться як relative, поки не досягне заданої позиції при прокрутці, після чого 'прилипає' і стає fixed."
-      },
-      "en": {
-        "q": "How does position: sticky work?",
-        "exp": "sticky is a hybrid of relative and fixed. The element behaves as relative until it reaches a specified position when scrolling, then it 'sticks' and becomes fixed."
-      },
-      "pl": {
-        "q": "Jak działa position: sticky?",
-        "exp": "sticky jest hybrydą relative i fixed. Element zachowuje się jak relative, dopóki nie osiągnie określonej pozycji podczas przewijania, wtedy 'przykleja się' i staje się fixed."
-      },
-      "answers": [
-        {
-          "uk": "Елемент завжди залишається в одному місці",
-          "en": "The element always stays in one place",
-          "pl": "Element zawsze pozostaje w jednym miejscu",
-          "correct": false
-        },
-        {
-          "uk": "Елемент прилипає до курсора миші",
-          "en": "The element sticks to the mouse cursor",
-          "pl": "Element przykleja się do kursora myszy",
-          "correct": false
-        },
-        {
-          "uk": "Поводиться як relative, потім прилипає як fixed при прокрутці",
-          "en": "Behaves as relative, then sticks like fixed when scrolling",
-          "pl": "Zachowuje się jak relative, potem przykleja się jak fixed podczas przewijania",
-          "correct": true
-        },
-        {
-          "uk": "Працює тільки для мобільних пристроїв",
-          "en": "Works only for mobile devices",
-          "pl": "Działa tylko dla urządzeń mobilnych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q13",
-      "order": 13,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка властивість активує Flexbox-контейнер?",
-        "exp": "Щоб активувати Flexbox, потрібно задати батьківському елементу display: flex. Після цього дочірні елементи стають flex-елементами."
-      },
-      "en": {
-        "q": "Which property activates a Flexbox container?",
-        "exp": "To activate Flexbox, you need to set display: flex on the parent element. After that, child elements become flex items."
-      },
-      "pl": {
-        "q": "Która właściwość aktywuje kontener Flexbox?",
-        "exp": "Aby aktywować Flexbox, należy ustawić display: flex na elemencie nadrzędnym. Następnie elementy potomne stają się elementami flex."
-      },
-      "answers": [
-        {
-          "uk": "flex: 1",
-          "en": "flex: 1",
-          "pl": "flex: 1",
-          "correct": false
-        },
-        {
-          "uk": "display: flex",
-          "en": "display: flex",
-          "pl": "display: flex",
-          "correct": true
-        },
-        {
-          "uk": "position: flex",
-          "en": "position: flex",
-          "pl": "position: flex",
-          "correct": false
-        },
-        {
-          "uk": "flexbox: enable",
-          "en": "flexbox: enable",
-          "pl": "flexbox: enable",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q14",
-      "order": 14,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить justify-content у Flexbox?",
-        "exp": "justify-content вирівнює flex-елементи вздовж головної осі (за замовчуванням горизонтальної). Значення: flex-start, center, space-between, space-around."
-      },
-      "en": {
-        "q": "What does justify-content do in Flexbox?",
-        "exp": "justify-content aligns flex items along the main axis (horizontal by default). Values include: flex-start, center, space-between, space-around."
-      },
-      "pl": {
-        "q": "Co robi justify-content we Flexbox?",
-        "exp": "justify-content wyrównuje elementy flex wzdłuż osi głównej (domyślnie poziomej). Wartości: flex-start, center, space-between, space-around."
-      },
-      "answers": [
-        {
-          "uk": "Вирівнює елементи по поперечній осі",
-          "en": "Aligns items along the cross axis",
-          "pl": "Wyrównuje elementy wzdłuż osi poprzecznej",
-          "correct": false
-        },
-        {
-          "uk": "Вирівнює елементи вздовж головної осі",
-          "en": "Aligns items along the main axis",
-          "pl": "Wyrównuje elementy wzdłuż osi głównej",
-          "correct": true
-        },
-        {
-          "uk": "Змінює напрямок flex-контейнера",
-          "en": "Changes the direction of the flex container",
-          "pl": "Zmienia kierunek kontenera flex",
-          "correct": false
-        },
-        {
-          "uk": "Задає розмір flex-елементів",
-          "en": "Sets the size of flex items",
-          "pl": "Ustawia rozmiar elementów flex",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q15",
-      "order": 15,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між justify-content і align-items у Flexbox?",
-        "exp": "justify-content вирівнює елементи по головній осі. align-items вирівнює елементи по поперечній (перпендикулярній) осі."
-      },
-      "en": {
-        "q": "What is the difference between justify-content and align-items in Flexbox?",
-        "exp": "justify-content aligns items along the main axis. align-items aligns items along the cross (perpendicular) axis."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między justify-content a align-items we Flexbox?",
-        "exp": "justify-content wyrównuje elementy wzdłuż osi głównej. align-items wyrównuje elementy wzdłuż osi poprzecznej (prostopadłej)."
-      },
-      "answers": [
-        {
-          "uk": "Обидві властивості працюють по горизонталі",
-          "en": "Both properties work horizontally",
-          "pl": "Obie właściwości działają poziomo",
-          "correct": false
-        },
-        {
-          "uk": "justify-content — по головній осі, align-items — по поперечній",
-          "en": "justify-content is for main axis, align-items is for cross axis",
-          "pl": "justify-content dla osi głównej, align-items dla osi poprzecznej",
-          "correct": true
-        },
-        {
-          "uk": "justify-content — для тексту, align-items — для зображень",
-          "en": "justify-content is for text, align-items is for images",
-          "pl": "justify-content dla tekstu, align-items dla obrazów",
-          "correct": false
-        },
-        {
-          "uk": "Немає різниці, це синоніми",
-          "en": "No difference, they are synonyms",
-          "pl": "Nie ma różnicy, to synonimy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q16",
-      "order": 16,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить властивість flex-grow?",
-        "exp": "flex-grow визначає, наскільки flex-елемент може збільшуватись, щоб зайняти вільний простір. Значення — пропорція розподілу вільного місця."
-      },
-      "en": {
-        "q": "What does the flex-grow property do?",
-        "exp": "flex-grow determines how much a flex item can grow to fill available space. The value is a proportion for distributing free space."
-      },
-      "pl": {
-        "q": "Co robi właściwość flex-grow?",
-        "exp": "flex-grow określa, jak bardzo element flex może się powiększyć, aby wypełnić dostępną przestrzeń. Wartość to proporcja dystrybucji wolnej przestrzeni."
-      },
-      "answers": [
-        {
-          "uk": "Задає мінімальний розмір елемента",
-          "en": "Sets the minimum size of an element",
-          "pl": "Ustawia minimalny rozmiar elementu",
-          "correct": false
-        },
-        {
-          "uk": "Визначає, як елемент збільшується для заповнення вільного простору",
-          "en": "Determines how an item grows to fill available space",
-          "pl": "Określa, jak element rośnie, aby wypełnić dostępną przestrzeń",
-          "correct": true
-        },
-        {
-          "uk": "Змінює напрямок розташування елементів",
-          "en": "Changes the direction of element layout",
-          "pl": "Zmienia kierunek układu elementów",
-          "correct": false
-        },
-        {
-          "uk": "Додає анімацію до елемента",
-          "en": "Adds animation to the element",
-          "pl": "Dodaje animację do elementu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q17",
-      "order": 17,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовується псевдоклас :hover?",
-        "exp": ":hover застосовує стилі, коли користувач наводить курсор миші на елемент. Найчастіше використовується для інтерактивних елементів: кнопок, посилань."
-      },
-      "en": {
-        "q": "What is the :hover pseudo-class used for?",
-        "exp": ":hover applies styles when the user hovers the mouse cursor over an element. It is most commonly used for interactive elements: buttons, links."
-      },
-      "pl": {
-        "q": "Do czego służy pseudoklasa :hover?",
-        "exp": ":hover stosuje style, gdy użytkownik najeżdża kursorem myszy na element. Najczęściej używana dla elementów interaktywnych: przycisków, linków."
-      },
-      "answers": [
-        {
-          "uk": "Для стилізації при натисканні",
-          "en": "For styling when clicked",
-          "pl": "Do stylizacji przy kliknięciu",
-          "correct": false
-        },
-        {
-          "uk": "Для стилізації при наведенні курсора",
-          "en": "For styling when cursor hovers",
-          "pl": "Do stylizacji przy najechaniu kursorem",
-          "correct": true
-        },
-        {
-          "uk": "Для стилізації при фокусі",
-          "en": "For styling when focused",
-          "pl": "Do stylizacji przy fokusie",
-          "correct": false
-        },
-        {
-          "uk": "Для стилізації першого елемента",
-          "en": "For styling the first element",
-          "pl": "Do stylizacji pierwszego elementu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q18",
-      "order": 18,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між :nth-child(n) та :nth-of-type(n)?",
-        "exp": ":nth-child(n) вибирає n-й дочірній елемент серед усіх дітей. :nth-of-type(n) вибирає n-й елемент певного типу серед елементів того ж типу."
-      },
-      "en": {
-        "q": "What is the difference between :nth-child(n) and :nth-of-type(n)?",
-        "exp": ":nth-child(n) selects the nth child among all children. :nth-of-type(n) selects the nth element of a specific type among elements of that type."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między :nth-child(n) a :nth-of-type(n)?",
-        "exp": ":nth-child(n) wybiera n-te dziecko spośród wszystkich dzieci. :nth-of-type(n) wybiera n-ty element określonego typu spośród elementów tego typu."
-      },
-      "answers": [
-        {
-          "uk": ":nth-child — по типу, :nth-of-type — по позиції",
-          "en": ":nth-child is by type, :nth-of-type is by position",
-          "pl": ":nth-child jest według typu, :nth-of-type według pozycji",
-          "correct": false
-        },
-        {
-          "uk": ":nth-child — серед усіх дітей, :nth-of-type — серед елементів одного типу",
-          "en": ":nth-child is among all children, :nth-of-type is among elements of same type",
-          "pl": ":nth-child jest wśród wszystkich dzieci, :nth-of-type wśród elementów tego samego typu",
-          "correct": true
-        },
-        {
-          "uk": "Обидва працюють однаково",
-          "en": "Both work the same way",
-          "pl": "Oba działają tak samo",
-          "correct": false
-        },
-        {
-          "uk": ":nth-of-type застарілий, не використовується",
-          "en": ":nth-of-type is deprecated, not used",
-          "pl": ":nth-of-type jest przestarzały, nie jest używany",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q19",
-      "order": 19,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовуються псевдоелементи ::before і ::after?",
-        "exp": "::before і ::after створюють віртуальні елементи до або після вмісту елемента без зміни HTML. Використовуються для декоративного контенту."
-      },
-      "en": {
-        "q": "What are the ::before and ::after pseudo-elements used for?",
-        "exp": "::before and ::after create virtual elements before or after an element's content without changing HTML. They are used for decorative content."
-      },
-      "pl": {
-        "q": "Do czego służą pseudoelementy ::before i ::after?",
-        "exp": "::before i ::after tworzą wirtualne elementy przed lub po zawartości elementu bez zmiany HTML. Służą do treści dekoracyjnych."
-      },
-      "answers": [
-        {
-          "uk": "Для створення анімацій",
-          "en": "For creating animations",
-          "pl": "Do tworzenia animacji",
-          "correct": false
-        },
-        {
-          "uk": "Для додавання декоративного контенту без зміни HTML",
-          "en": "For adding decorative content without changing HTML",
-          "pl": "Do dodawania treści dekoracyjnych bez zmiany HTML",
-          "correct": true
-        },
-        {
-          "uk": "Для зміни структури DOM",
-          "en": "For changing DOM structure",
-          "pl": "Do zmiany struktury DOM",
-          "correct": false
-        },
-        {
-          "uk": "Для обробки подій JavaScript",
-          "en": "For handling JavaScript events",
-          "pl": "Do obsługi zdarzeń JavaScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q20",
-      "order": 20,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке схлопування відступів (margin collapsing)?",
-        "exp": "Margin collapsing — це коли вертикальні відступи сусідніх блоків зливаються в один. Застосовується найбільший з відступів, а не їх сума."
-      },
-      "en": {
-        "q": "What is margin collapsing?",
-        "exp": "Margin collapsing is when vertical margins of adjacent blocks merge into one. The larger margin is applied, not their sum."
-      },
-      "pl": {
-        "q": "Czym jest zwijanie marginesów (margin collapsing)?",
-        "exp": "Margin collapsing to zjawisko, gdy pionowe marginesy sąsiednich bloków łączą się w jeden. Stosowany jest większy margines, a nie ich suma."
-      },
-      "answers": [
-        {
-          "uk": "Горизонтальні відступи додаються разом",
-          "en": "Horizontal margins are added together",
-          "pl": "Poziome marginesy są sumowane",
-          "correct": false
-        },
-        {
-          "uk": "Вертикальні відступи зливаються, залишається найбільший",
-          "en": "Vertical margins merge, the largest one remains",
-          "pl": "Pionowe marginesy łączą się, pozostaje największy",
-          "correct": true
-        },
-        {
-          "uk": "Усі відступи видаляються",
-          "en": "All margins are removed",
-          "pl": "Wszystkie marginesy są usuwane",
-          "correct": false
-        },
-        {
-          "uk": "Відступи перетворюються на padding",
-          "en": "Margins are converted to padding",
-          "pl": "Marginesy są konwertowane na padding",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/css/fundamentals/css-quiz-part3.json b/json/quizzes/css/fundamentals/css-quiz-part3.json
deleted file mode 100644
index 9a5e8e2b..00000000
--- a/json/quizzes/css/fundamentals/css-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "css-q21",
-      "order": 21,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке CSS Grid і для чого він використовується?",
-        "exp": "CSS Grid — це двовимірна система макетування, яка дозволяє створювати складні сітки з рядками та колонками для розташування елементів."
-      },
-      "en": {
-        "q": "What is CSS Grid and what is it used for?",
-        "exp": "CSS Grid is a two-dimensional layout system that allows creating complex grids with rows and columns for element placement."
-      },
-      "pl": {
-        "q": "Czym jest CSS Grid i do czego służy?",
-        "exp": "CSS Grid to dwuwymiarowy system układu, który pozwala tworzyć złożone siatki z wierszami i kolumnami do rozmieszczania elementów."
-      },
-      "answers": [
-        {
-          "uk": "Одновимірна система для розташування в рядок",
-          "en": "One-dimensional system for row layout",
-          "pl": "Jednowymiarowy system dla układu wierszowego",
-          "correct": false
-        },
-        {
-          "uk": "Двовимірна система для створення сіток з рядками і колонками",
-          "en": "Two-dimensional system for creating grids with rows and columns",
-          "pl": "Dwuwymiarowy system do tworzenia siatek z wierszami i kolumnami",
-          "correct": true
-        },
-        {
-          "uk": "Бібліотека для анімацій",
-          "en": "A library for animations",
-          "pl": "Biblioteka do animacji",
-          "correct": false
-        },
-        {
-          "uk": "Препроцесор CSS",
-          "en": "A CSS preprocessor",
-          "pl": "Preprocesor CSS",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q22",
-      "order": 22,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між Flexbox і CSS Grid?",
-        "exp": "Flexbox — одновимірна модель для вирівнювання в ряд або колонку. Grid — двовимірна модель для створення складних сіток з рядками та колонками одночасно."
-      },
-      "en": {
-        "q": "What is the difference between Flexbox and CSS Grid?",
-        "exp": "Flexbox is a one-dimensional model for alignment in a row or column. Grid is a two-dimensional model for creating complex grids with rows and columns simultaneously."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między Flexbox a CSS Grid?",
-        "exp": "Flexbox to jednowymiarowy model do wyrównywania w wierszu lub kolumnie. Grid to dwuwymiarowy model do tworzenia złożonych siatek z wierszami i kolumnami jednocześnie."
-      },
-      "answers": [
-        {
-          "uk": "Flexbox — двовимірний, Grid — одновимірний",
-          "en": "Flexbox is two-dimensional, Grid is one-dimensional",
-          "pl": "Flexbox jest dwuwymiarowy, Grid jest jednowymiarowy",
-          "correct": false
-        },
-        {
-          "uk": "Flexbox — одновимірний, Grid — двовимірний",
-          "en": "Flexbox is one-dimensional, Grid is two-dimensional",
-          "pl": "Flexbox jest jednowymiarowy, Grid jest dwuwymiarowy",
-          "correct": true
-        },
-        {
-          "uk": "Grid працює тільки з таблицями",
-          "en": "Grid works only with tables",
-          "pl": "Grid działa tylko z tabelami",
-          "correct": false
-        },
-        {
-          "uk": "Flexbox застарілий, треба використовувати тільки Grid",
-          "en": "Flexbox is deprecated, only Grid should be used",
-          "pl": "Flexbox jest przestarzały, należy używać tylko Grid",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q23",
-      "order": 23,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як визначити колонки в CSS Grid?",
-        "exp": "Колонки визначаються через властивість grid-template-columns. Наприклад: grid-template-columns: 1fr 2fr створить дві колонки з пропорцією 1:2."
-      },
-      "en": {
-        "q": "How do you define columns in CSS Grid?",
-        "exp": "Columns are defined using the grid-template-columns property. For example: grid-template-columns: 1fr 2fr creates two columns with a 1:2 ratio."
-      },
-      "pl": {
-        "q": "Jak definiować kolumny w CSS Grid?",
-        "exp": "Kolumny definiuje się za pomocą właściwości grid-template-columns. Na przykład: grid-template-columns: 1fr 2fr tworzy dwie kolumny w proporcji 1:2."
-      },
-      "answers": [
-        {
-          "uk": "grid-columns: 2",
-          "en": "grid-columns: 2",
-          "pl": "grid-columns: 2",
-          "correct": false
-        },
-        {
-          "uk": "grid-template-columns",
-          "en": "grid-template-columns",
-          "pl": "grid-template-columns",
-          "correct": true
-        },
-        {
-          "uk": "columns: auto",
-          "en": "columns: auto",
-          "pl": "columns: auto",
-          "correct": false
-        },
-        {
-          "uk": "flex-columns: 1fr",
-          "en": "flex-columns: 1fr",
-          "pl": "flex-columns: 1fr",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q24",
-      "order": 24,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовуються медіа-запити (@media)?",
-        "exp": "Медіа-запити дозволяють застосовувати різні стилі залежно від характеристик пристрою: ширини екрана, орієнтації, роздільної здатності."
-      },
-      "en": {
-        "q": "What are media queries (@media) used for?",
-        "exp": "Media queries allow applying different styles based on device characteristics: screen width, orientation, resolution."
-      },
-      "pl": {
-        "q": "Do czego służą zapytania o media (@media)?",
-        "exp": "Zapytania o media pozwalają stosować różne style w zależności od cech urządzenia: szerokości ekranu, orientacji, rozdzielczości."
-      },
-      "answers": [
-        {
-          "uk": "Для підключення зображень",
-          "en": "For including images",
-          "pl": "Do dołączania obrazów",
-          "correct": false
-        },
-        {
-          "uk": "Для застосування стилів залежно від характеристик пристрою",
-          "en": "For applying styles based on device characteristics",
-          "pl": "Do stosowania stylów w zależności od cech urządzenia",
-          "correct": true
-        },
-        {
-          "uk": "Для створення анімацій",
-          "en": "For creating animations",
-          "pl": "Do tworzenia animacji",
-          "correct": false
-        },
-        {
-          "uk": "Для підключення шрифтів",
-          "en": "For including fonts",
-          "pl": "Do dołączania czcionek",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q25",
-      "order": 25,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між min-width і max-width у медіа-запитах?",
-        "exp": "min-width застосовує стилі від заданої ширини і вище (mobile-first). max-width застосовує стилі до заданої ширини включно (desktop-first)."
-      },
-      "en": {
-        "q": "What is the difference between min-width and max-width in media queries?",
-        "exp": "min-width applies styles from the specified width and above (mobile-first). max-width applies styles up to the specified width inclusive (desktop-first)."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między min-width a max-width w zapytaniach o media?",
-        "exp": "min-width stosuje style od określonej szerokości wzwyż (mobile-first). max-width stosuje style do określonej szerokości włącznie (desktop-first)."
-      },
-      "answers": [
-        {
-          "uk": "min-width — для мінімальної висоти, max-width — для максимальної",
-          "en": "min-width is for minimum height, max-width is for maximum",
-          "pl": "min-width dla minimalnej wysokości, max-width dla maksymalnej",
-          "correct": false
-        },
-        {
-          "uk": "min-width — від заданої ширини і вище, max-width — до заданої ширини",
-          "en": "min-width is from specified width and up, max-width is up to specified width",
-          "pl": "min-width od określonej szerokości wzwyż, max-width do określonej szerokości",
-          "correct": true
-        },
-        {
-          "uk": "Обидва працюють однаково",
-          "en": "Both work the same way",
-          "pl": "Oba działają tak samo",
-          "correct": false
-        },
-        {
-          "uk": "max-width застарів, треба використовувати min-width",
-          "en": "max-width is deprecated, use min-width",
-          "pl": "max-width jest przestarzały, używaj min-width",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q26",
-      "order": 26,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між transition і animation у CSS?",
-        "exp": "transition активується при зміні стану (hover, focus) і анімує перехід. animation запускається автоматично через @keyframes і може мати кілька етапів."
-      },
-      "en": {
-        "q": "What is the difference between transition and animation in CSS?",
-        "exp": "transition activates on state change (hover, focus) and animates the transition. animation runs automatically via @keyframes and can have multiple stages."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między transition a animation w CSS?",
-        "exp": "transition aktywuje się przy zmianie stanu (hover, focus) i animuje przejście. animation uruchamia się automatycznie przez @keyframes i może mieć wiele etapów."
-      },
-      "answers": [
-        {
-          "uk": "transition — для складних анімацій, animation — для простих",
-          "en": "transition is for complex animations, animation is for simple ones",
-          "pl": "transition dla złożonych animacji, animation dla prostych",
-          "correct": false
-        },
-        {
-          "uk": "transition — при зміні стану, animation — автоматично через @keyframes",
-          "en": "transition is on state change, animation runs automatically via @keyframes",
-          "pl": "transition przy zmianie stanu, animation automatycznie przez @keyframes",
-          "correct": true
-        },
-        {
-          "uk": "animation працює тільки в Chrome",
-          "en": "animation works only in Chrome",
-          "pl": "animation działa tylko w Chrome",
-          "correct": false
-        },
-        {
-          "uk": "Обидві властивості ідентичні",
-          "en": "Both properties are identical",
-          "pl": "Obie właściwości są identyczne",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується @keyframes у CSS?",
-        "exp": "@keyframes визначає проміжні стани анімації. Ви задаєте стилі на різних етапах (from/to або відсотки), і браузер анімує перехід між ними."
-      },
-      "en": {
-        "q": "What is @keyframes used for in CSS?",
-        "exp": "@keyframes defines intermediate animation states. You set styles at different stages (from/to or percentages), and the browser animates transitions between them."
-      },
-      "pl": {
-        "q": "Do czego służy @keyframes w CSS?",
-        "exp": "@keyframes definiuje pośrednie stany animacji. Ustawiasz style na różnych etapach (from/to lub procenty), a przeglądarka animuje przejścia między nimi."
-      },
-      "answers": [
-        {
-          "uk": "Для створення медіа-запитів",
-          "en": "For creating media queries",
-          "pl": "Do tworzenia zapytań o media",
-          "correct": false
-        },
-        {
-          "uk": "Для визначення проміжних станів анімації",
-          "en": "For defining intermediate animation states",
-          "pl": "Do definiowania pośrednich stanów animacji",
-          "correct": true
-        },
-        {
-          "uk": "Для підключення шрифтів",
-          "en": "For including fonts",
-          "pl": "Do dołączania czcionek",
-          "correct": false
-        },
-        {
-          "uk": "Для створення змінних",
-          "en": "For creating variables",
-          "pl": "Do tworzenia zmiennych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q28",
-      "order": 28,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Коли краще використовувати transform: translate() замість top/left?",
-        "exp": "translate() використовує GPU, не викликає reflow і забезпечує плавніші анімації. top/left змушують браузер перераховувати макет."
-      },
-      "en": {
-        "q": "When is it better to use transform: translate() instead of top/left?",
-        "exp": "translate() uses the GPU, doesn't trigger reflow, and provides smoother animations. top/left force the browser to recalculate layout."
-      },
-      "pl": {
-        "q": "Kiedy lepiej używać transform: translate() zamiast top/left?",
-        "exp": "translate() używa GPU, nie wywołuje reflow i zapewnia płynniejsze animacje. top/left zmuszają przeglądarkę do przeliczania układu."
-      },
-      "answers": [
-        {
-          "uk": "Коли потрібно позиціонувати статичний елемент",
-          "en": "When positioning a static element",
-          "pl": "Przy pozycjonowaniu elementu statycznego",
-          "correct": false
-        },
-        {
-          "uk": "Для плавних анімацій і кращої продуктивності",
-          "en": "For smooth animations and better performance",
-          "pl": "Dla płynnych animacji i lepszej wydajności",
-          "correct": true
-        },
-        {
-          "uk": "top/left завжди швидше",
-          "en": "top/left is always faster",
-          "pl": "top/left jest zawsze szybsze",
-          "correct": false
-        },
-        {
-          "uk": "translate() не підтримується сучасними браузерами",
-          "en": "translate() is not supported by modern browsers",
-          "pl": "translate() nie jest obsługiwane przez nowoczesne przeglądarki",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q29",
-      "order": 29,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між em і rem одиницями вимірювання?",
-        "exp": "em залежить від font-size батьківського елемента. rem завжди залежить від font-size кореневого елемента (html), що робить його передбачуванішим."
-      },
-      "en": {
-        "q": "What is the difference between em and rem units?",
-        "exp": "em depends on the parent element's font-size. rem always depends on the root element's (html) font-size, making it more predictable."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między jednostkami em i rem?",
-        "exp": "em zależy od font-size elementu nadrzędnego. rem zawsze zależy od font-size elementu głównego (html), co czyni go bardziej przewidywalnym."
-      },
-      "answers": [
-        {
-          "uk": "em — для пікселів, rem — для відсотків",
-          "en": "em is for pixels, rem is for percentages",
-          "pl": "em dla pikseli, rem dla procentów",
-          "correct": false
-        },
-        {
-          "uk": "em — відносно батька, rem — відносно кореневого елемента",
-          "en": "em is relative to parent, rem is relative to root element",
-          "pl": "em względem rodzica, rem względem elementu głównego",
-          "correct": true
-        },
-        {
-          "uk": "rem застарів, краще використовувати em",
-          "en": "rem is deprecated, use em instead",
-          "pl": "rem jest przestarzały, lepiej używać em",
-          "correct": false
-        },
-        {
-          "uk": "Обидві одиниці ідентичні",
-          "en": "Both units are identical",
-          "pl": "Obie jednostki są identyczne",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q30",
-      "order": 30,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовуються CSS-змінні (custom properties)?",
-        "exp": "CSS-змінні (--var-name) дозволяють зберігати значення в одному місці та використовувати повторно. Спрощують темізацію та підтримку стилів."
-      },
-      "en": {
-        "q": "What are CSS custom properties (variables) used for?",
-        "exp": "CSS variables (--var-name) allow storing values in one place and reusing them. They simplify theming and style maintenance."
-      },
-      "pl": {
-        "q": "Do czego służą zmienne CSS (właściwości niestandardowe)?",
-        "exp": "Zmienne CSS (--var-name) pozwalają przechowywać wartości w jednym miejscu i używać ich wielokrotnie. Upraszczają tematyzację i utrzymanie stylów."
-      },
-      "answers": [
-        {
-          "uk": "Для створення анімацій",
-          "en": "For creating animations",
-          "pl": "Do tworzenia animacji",
-          "correct": false
-        },
-        {
-          "uk": "Для зберігання та повторного використання значень",
-          "en": "For storing and reusing values",
-          "pl": "Do przechowywania i wielokrotnego używania wartości",
-          "correct": true
-        },
-        {
-          "uk": "Для визначення медіа-запитів",
-          "en": "For defining media queries",
-          "pl": "Do definiowania zapytań o media",
-          "correct": false
-        },
-        {
-          "uk": "Для підключення JavaScript",
-          "en": "For including JavaScript",
-          "pl": "Do dołączania JavaScript",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/css/fundamentals/css-quiz-part4.json b/json/quizzes/css/fundamentals/css-quiz-part4.json
deleted file mode 100644
index 7f774976..00000000
--- a/json/quizzes/css/fundamentals/css-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "css-q31",
-      "order": 31,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке RGBA у CSS і що означає літера A?",
-        "exp": "RGBA — це формат кольору, де R (червоний), G (зелений), B (синій) та A (альфа-прозорість). A визначає прозорість від 0 (повністю прозорий) до 1 (непрозорий)."
-      },
-      "en": {
-        "q": "What is RGBA in CSS and what does the letter A stand for?",
-        "exp": "RGBA is a color format where R (red), G (green), B (blue), and A (alpha transparency). A defines transparency from 0 (fully transparent) to 1 (opaque)."
-      },
-      "pl": {
-        "q": "Czym jest RGBA w CSS i co oznacza litera A?",
-        "exp": "RGBA to format koloru, gdzie R (czerwony), G (zielony), B (niebieski) i A (przezroczystość alfa). A określa przezroczystość od 0 (całkowicie przezroczysty) do 1 (nieprzezroczysty)."
-      },
-      "answers": [
-        {
-          "uk": "A означає Animation — для анімацій кольору",
-          "en": "A stands for Animation — for color animations",
-          "pl": "A oznacza Animation — dla animacji koloru",
-          "correct": false
-        },
-        {
-          "uk": "A означає Alpha — рівень прозорості",
-          "en": "A stands for Alpha — transparency level",
-          "pl": "A oznacza Alpha — poziom przezroczystości",
-          "correct": true
-        },
-        {
-          "uk": "A означає Absolute — абсолютний колір",
-          "en": "A stands for Absolute — absolute color",
-          "pl": "A oznacza Absolute — kolor absolutny",
-          "correct": false
-        },
-        {
-          "uk": "A означає Accent — акцентний колір",
-          "en": "A stands for Accent — accent color",
-          "pl": "A oznacza Accent — kolor akcentu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q32",
-      "order": 32,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як створити лінійний градієнт у CSS?",
-        "exp": "Лінійний градієнт створюється через background: linear-gradient(напрямок, колір1, колір2). Наприклад: linear-gradient(to right, red, blue)."
-      },
-      "en": {
-        "q": "How do you create a linear gradient in CSS?",
-        "exp": "A linear gradient is created using background: linear-gradient(direction, color1, color2). For example: linear-gradient(to right, red, blue)."
-      },
-      "pl": {
-        "q": "Jak stworzyć gradient liniowy w CSS?",
-        "exp": "Gradient liniowy tworzy się za pomocą background: linear-gradient(kierunek, kolor1, kolor2). Na przykład: linear-gradient(to right, red, blue)."
-      },
-      "answers": [
-        {
-          "uk": "background-gradient: linear(red, blue)",
-          "en": "background-gradient: linear(red, blue)",
-          "pl": "background-gradient: linear(red, blue)",
-          "correct": false
-        },
-        {
-          "uk": "background: linear-gradient(напрямок, колір1, колір2)",
-          "en": "background: linear-gradient(direction, color1, color2)",
-          "pl": "background: linear-gradient(kierunek, kolor1, kolor2)",
-          "correct": true
-        },
-        {
-          "uk": "gradient: colors(red, blue)",
-          "en": "gradient: colors(red, blue)",
-          "pl": "gradient: colors(red, blue)",
-          "correct": false
-        },
-        {
-          "uk": "color: gradient(linear, red, blue)",
-          "en": "color: gradient(linear, red, blue)",
-          "pl": "color: gradient(linear, red, blue)",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q33",
-      "order": 33,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які CSS-фільтри можна застосовувати до елементів?",
-        "exp": "CSS-фільтри включають: blur() (розмиття), brightness() (яскравість), contrast() (контраст), grayscale() (чорно-біле), sepia(), invert(), saturate()."
-      },
-      "en": {
-        "q": "Which CSS filters can be applied to elements?",
-        "exp": "CSS filters include: blur() (blurring), brightness(), contrast(), grayscale() (black and white), sepia(), invert(), saturate()."
-      },
-      "pl": {
-        "q": "Jakie filtry CSS można stosować do elementów?",
-        "exp": "Filtry CSS obejmują: blur() (rozmycie), brightness() (jasność), contrast() (kontrast), grayscale() (czarno-białe), sepia(), invert(), saturate()."
-      },
-      "answers": [
-        {
-          "uk": "Тільки blur і opacity",
-          "en": "Only blur and opacity",
-          "pl": "Tylko blur i opacity",
-          "correct": false
-        },
-        {
-          "uk": "blur, brightness, contrast, grayscale, sepia, invert та інші",
-          "en": "blur, brightness, contrast, grayscale, sepia, invert and others",
-          "pl": "blur, brightness, contrast, grayscale, sepia, invert i inne",
-          "correct": true
-        },
-        {
-          "uk": "CSS не підтримує фільтри",
-          "en": "CSS does not support filters",
-          "pl": "CSS nie obsługuje filtrów",
-          "correct": false
-        },
-        {
-          "uk": "Тільки color і background",
-          "en": "Only color and background",
-          "pl": "Tylko color i background",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке псевдоклас :has() і що він дозволяє робити?",
-        "exp": ":has() — це 'батьківський селектор', який дозволяє стилізувати елемент на основі його вмісту або дочірніх елементів. Наприклад: .card:has(img) стилізує картку, що містить зображення."
-      },
-      "en": {
-        "q": "What is the :has() pseudo-class and what does it allow?",
-        "exp": ":has() is a 'parent selector' that allows styling an element based on its content or children. For example: .card:has(img) styles a card containing an image."
-      },
-      "pl": {
-        "q": "Czym jest pseudoklasa :has() i co umożliwia?",
-        "exp": ":has() to 'selektor rodzica', który pozwala stylizować element na podstawie jego zawartości lub dzieci. Na przykład: .card:has(img) stylizuje kartę zawierającą obraz."
-      },
-      "answers": [
-        {
-          "uk": "Вибирає елементи, які мають атрибут",
-          "en": "Selects elements that have an attribute",
-          "pl": "Wybiera elementy, które mają atrybut",
-          "correct": false
-        },
-        {
-          "uk": "Дозволяє стилізувати батьківський елемент на основі його вмісту",
-          "en": "Allows styling a parent element based on its content",
-          "pl": "Pozwala stylizować element nadrzędny na podstawie jego zawartości",
-          "correct": true
-        },
-        {
-          "uk": "Застосовується тільки до форм",
-          "en": "Applies only to forms",
-          "pl": "Stosuje się tylko do formularzy",
-          "correct": false
-        },
-        {
-          "uk": "Це застаріла функція, яку не підтримують браузери",
-          "en": "This is a deprecated feature not supported by browsers",
-          "pl": "To przestarzała funkcja, która nie jest obsługiwana przez przeglądarki",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q35",
-      "order": 35,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке mobile-first підхід у CSS?",
-        "exp": "Mobile-first — це підхід, коли спочатку створюються стилі для мобільних пристроїв, а потім через min-width медіа-запити додаються стилі для більших екранів."
-      },
-      "en": {
-        "q": "What is the mobile-first approach in CSS?",
-        "exp": "Mobile-first is an approach where styles are first created for mobile devices, then styles for larger screens are added via min-width media queries."
-      },
-      "pl": {
-        "q": "Czym jest podejście mobile-first w CSS?",
-        "exp": "Mobile-first to podejście, gdzie najpierw tworzy się style dla urządzeń mobilnych, a następnie przez zapytania min-width dodaje się style dla większych ekranów."
-      },
-      "answers": [
-        {
-          "uk": "Стилі спочатку для десктопа, потім для мобільних",
-          "en": "Styles first for desktop, then for mobile",
-          "pl": "Style najpierw dla desktop, potem dla mobilnych",
-          "correct": false
-        },
-        {
-          "uk": "Стилі спочатку для мобільних, потім розширюються для більших екранів",
-          "en": "Styles first for mobile, then expanded for larger screens",
-          "pl": "Style najpierw dla mobilnych, potem rozszerzane dla większych ekranów",
-          "correct": true
-        },
-        {
-          "uk": "Створення окремих сайтів для мобільних",
-          "en": "Creating separate sites for mobile",
-          "pl": "Tworzenie oddzielnych stron dla mobilnych",
-          "correct": false
-        },
-        {
-          "uk": "Використання тільки відсоткових одиниць",
-          "en": "Using only percentage units",
-          "pl": "Używanie tylko jednostek procentowych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q36",
-      "order": 36,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке @supports у CSS і для чого він використовується?",
-        "exp": "@supports дозволяє перевіряти, чи підтримується CSS-властивість браузером, і застосовувати стилі умовно. Корисно для прогресивного покращення."
-      },
-      "en": {
-        "q": "What is @supports in CSS and what is it used for?",
-        "exp": "@supports allows checking if a CSS property is supported by the browser and applying styles conditionally. Useful for progressive enhancement."
-      },
-      "pl": {
-        "q": "Czym jest @supports w CSS i do czego służy?",
-        "exp": "@supports pozwala sprawdzić, czy właściwość CSS jest obsługiwana przez przeglądarkę, i warunkowo stosować style. Przydatne do progresywnego ulepszania."
-      },
-      "answers": [
-        {
-          "uk": "Для створення анімацій",
-          "en": "For creating animations",
-          "pl": "Do tworzenia animacji",
-          "correct": false
-        },
-        {
-          "uk": "Для перевірки підтримки CSS-властивості браузером",
-          "en": "For checking if a CSS property is supported by the browser",
-          "pl": "Do sprawdzania, czy właściwość CSS jest obsługiwana przez przeglądarkę",
-          "correct": true
-        },
-        {
-          "uk": "Для підключення зовнішніх файлів",
-          "en": "For including external files",
-          "pl": "Do dołączania zewnętrznych plików",
-          "correct": false
-        },
-        {
-          "uk": "Для визначення змінних",
-          "en": "For defining variables",
-          "pl": "Do definiowania zmiennych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q37",
-      "order": 37,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке BEM у CSS і які його основні частини?",
-        "exp": "BEM — методологія іменування класів. Block (блок) — незалежний компонент, Element (елемент) — частина блоку, Modifier (модифікатор) — варіант стану."
-      },
-      "en": {
-        "q": "What is BEM in CSS and what are its main parts?",
-        "exp": "BEM is a class naming methodology. Block — an independent component, Element — part of a block, Modifier — a state variant."
-      },
-      "pl": {
-        "q": "Czym jest BEM w CSS i jakie są jego główne części?",
-        "exp": "BEM to metodologia nazewnictwa klas. Block (blok) — niezależny komponent, Element — część bloku, Modifier (modyfikator) — wariant stanu."
-      },
-      "answers": [
-        {
-          "uk": "Box, Edge, Margin — структура відступів",
-          "en": "Box, Edge, Margin — spacing structure",
-          "pl": "Box, Edge, Margin — struktura odstępów",
-          "correct": false
-        },
-        {
-          "uk": "Block, Element, Modifier — методологія іменування класів",
-          "en": "Block, Element, Modifier — class naming methodology",
-          "pl": "Block, Element, Modifier — metodologia nazewnictwa klas",
-          "correct": true
-        },
-        {
-          "uk": "Browser, Engine, Module — архітектура браузера",
-          "en": "Browser, Engine, Module — browser architecture",
-          "pl": "Browser, Engine, Module — architektura przeglądarki",
-          "correct": false
-        },
-        {
-          "uk": "Border, Effect, Media — стилі оформлення",
-          "en": "Border, Effect, Media — styling properties",
-          "pl": "Border, Effect, Media — właściwości stylizacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Чому важливо зберігати видимий :focus стиль для елементів?",
-        "exp": "Видимий :focus стиль необхідний для доступності — він допомагає користувачам з клавіатурною навігацією бачити, який елемент зараз активний."
-      },
-      "en": {
-        "q": "Why is it important to keep visible :focus styles for elements?",
-        "exp": "Visible :focus styles are necessary for accessibility — they help keyboard navigation users see which element is currently active."
-      },
-      "pl": {
-        "q": "Dlaczego ważne jest zachowanie widocznego stylu :focus dla elementów?",
-        "exp": "Widoczne style :focus są niezbędne dla dostępności — pomagają użytkownikom nawigującym klawiaturą widzieć, który element jest obecnie aktywny."
-      },
-      "answers": [
-        {
-          "uk": "Це покращує SEO сайту",
-          "en": "It improves the site's SEO",
-          "pl": "Poprawia SEO strony",
-          "correct": false
-        },
-        {
-          "uk": "Для доступності та клавіатурної навігації",
-          "en": "For accessibility and keyboard navigation",
-          "pl": "Dla dostępności i nawigacji klawiaturą",
-          "correct": true
-        },
-        {
-          "uk": "Це обов'язкова вимога HTML",
-          "en": "It is a mandatory HTML requirement",
-          "pl": "To obowiązkowy wymóg HTML",
-          "correct": false
-        },
-        {
-          "uk": "Для покращення швидкості завантаження",
-          "en": "To improve loading speed",
-          "pl": "Aby poprawić prędkość ładowania",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q39",
-      "order": 39,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між Reset CSS і Normalize CSS?",
-        "exp": "Reset CSS повністю скидає всі браузерні стилі до нуля. Normalize CSS зберігає корисні стилі, але уніфікує їх між різними браузерами."
-      },
-      "en": {
-        "q": "What is the difference between Reset CSS and Normalize CSS?",
-        "exp": "Reset CSS completely removes all browser styles to zero. Normalize CSS keeps useful styles but unifies them across different browsers."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między Reset CSS a Normalize CSS?",
-        "exp": "Reset CSS całkowicie usuwa wszystkie style przeglądarki do zera. Normalize CSS zachowuje przydatne style, ale ujednolica je w różnych przeglądarkach."
-      },
-      "answers": [
-        {
-          "uk": "Reset додає стилі, Normalize видаляє",
-          "en": "Reset adds styles, Normalize removes",
-          "pl": "Reset dodaje style, Normalize usuwa",
-          "correct": false
-        },
-        {
-          "uk": "Reset скидає все до нуля, Normalize уніфікує корисні стилі",
-          "en": "Reset removes everything, Normalize unifies useful styles",
-          "pl": "Reset usuwa wszystko, Normalize ujednolica przydatne style",
-          "correct": true
-        },
-        {
-          "uk": "Обидва працюють однаково",
-          "en": "Both work the same way",
-          "pl": "Oba działają tak samo",
-          "correct": false
-        },
-        {
-          "uk": "Normalize застарілий, треба використовувати Reset",
-          "en": "Normalize is deprecated, use Reset",
-          "pl": "Normalize jest przestarzały, używaj Reset",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "css-q40",
-      "order": 40,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як правильно центрувати елемент горизонтально і вертикально за допомогою Flexbox?",
-        "exp": "Для центрування використовуйте на контейнері: display: flex; justify-content: center; align-items: center; та задайте height контейнеру."
-      },
-      "en": {
-        "q": "How do you properly center an element horizontally and vertically using Flexbox?",
-        "exp": "For centering, use on the container: display: flex; justify-content: center; align-items: center; and set the container's height."
-      },
-      "pl": {
-        "q": "Jak prawidłowo wyśrodkować element poziomo i pionowo za pomocą Flexbox?",
-        "exp": "Do wyśrodkowania użyj na kontenerze: display: flex; justify-content: center; align-items: center; i ustaw wysokość kontenera."
-      },
-      "answers": [
-        {
-          "uk": "text-align: center; vertical-align: middle",
-          "en": "text-align: center; vertical-align: middle",
-          "pl": "text-align: center; vertical-align: middle",
-          "correct": false
-        },
-        {
-          "uk": "display: flex; justify-content: center; align-items: center",
-          "en": "display: flex; justify-content: center; align-items: center",
-          "pl": "display: flex; justify-content: center; align-items: center",
-          "correct": true
-        },
-        {
-          "uk": "margin: auto; padding: auto",
-          "en": "margin: auto; padding: auto",
-          "pl": "margin: auto; padding: auto",
-          "correct": false
-        },
-        {
-          "uk": "center: both",
-          "en": "center: both",
-          "pl": "center: both",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/css/fundamentals/seed-quiz-css.ts b/json/quizzes/css/fundamentals/seed-quiz-css.ts
deleted file mode 100644
index abf9bca0..00000000
--- a/json/quizzes/css/fundamentals/seed-quiz-css.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-import { eq } from 'drizzle-orm';
-import { readFileSync } from 'fs';
-import { join } from 'path';
-import { db } from './index';
-import { categories } from './schema/categories';
-import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
-  quizAnswers,
-  quizAnswerTranslations,
-  quizAttempts,
-} from './schema/quiz';
-
-type Locale = 'uk' | 'en' | 'pl';
-const LOCALES: Locale[] = ['uk', 'en', 'pl'];
-
-interface QuestionData {
-  id: string;
-  order: number;
-  difficulty: 'beginner' | 'medium' | 'advanced';
-  uk: { q: string; exp: string };
-  en: { q: string; exp: string };
-  pl: { q: string; exp: string };
-  answers: {
-    uk: string;
-    en: string;
-    pl: string;
-    correct: boolean;
-  }[];
-}
-
-interface QuizPartData {
-  questions: QuestionData[];
-}
-
-const CATEGORY_SLUG = 'css';
-
-const QUIZ_METADATA = {
-  slug: 'css-fundamentals',
-  questionsCount: 40,
-  timeLimitSeconds: 1800,
-  translations: {
-    uk: {
-      title: 'Основи CSS',
-      description: 'Перевірте свої знання базових концепцій CSS: селектори, блокова модель, Flexbox, Grid, позиціонування, анімації та адаптивний дизайн.',
-    },
-    en: {
-      title: 'CSS Fundamentals',
-      description: 'Test your knowledge of CSS basics: selectors, box model, Flexbox, Grid, positioning, animations, and responsive design.',
-    },
-    pl: {
-      title: 'Podstawy CSS',
-      description: 'Sprawdź swoją wiedzę o podstawach CSS: selektory, model pudełkowy, Flexbox, Grid, pozycjonowanie, animacje i responsywny design.',
-    },
-  },
-};
-
-function createExplanation(text: string) {
-  return [{ type: 'paragraph' as const, children: [{ text }] }];
-}
-
-async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'data', `css-quiz-part${partNumber}.json`);
-  const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
-  return partData.questions;
-}
-
-async function ensureQuizExists(): Promise<string> {
-  console.log('Ensuring quiz exists...');
-
-  // Find category by slug
-  const [category] = await db
-    .select()
-    .from(categories)
-    .where(eq(categories.slug, CATEGORY_SLUG))
-    .limit(1);
-
-  if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
-  }
-
-  // Clean up old quiz by slug
-  const existing = await db.query.quizzes.findFirst({
-    where: eq(quizzes.slug, QUIZ_METADATA.slug),
-  });
-  if (existing) {
-    const existingAttempt = await db.query.quizAttempts.findFirst({
-      where: eq(quizAttempts.quizId, existing.id),
-    });
-    if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
-    }
-
-    await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 2,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
-
-    const quizId = existing.id;
-    for (const locale of LOCALES) {
-      await db.insert(quizTranslations).values({
-        quizId,
-        locale,
-        title: QUIZ_METADATA.translations[locale].title,
-        description: QUIZ_METADATA.translations[locale].description,
-      });
-    }
-
-    return quizId;
-  }
-
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 2,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
-
-  for (const locale of LOCALES) {
-    await db.insert(quizTranslations).values({
-      quizId: quiz.id,
-      locale,
-      title: QUIZ_METADATA.translations[locale].title,
-      description: QUIZ_METADATA.translations[locale].description,
-    });
-  }
-
-  return quiz.id;
-}
-
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
-
-  for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
-
-    for (const locale of LOCALES) {
-      await db.insert(quizQuestionContent).values({
-        quizQuestionId: q.id,
-        locale,
-        questionText: question[locale].q,
-        explanation: createExplanation(question[locale].exp),
-      });
-    }
-
-    for (let i = 0; i < question.answers.length; i++) {
-      const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
-
-      for (const locale of LOCALES) {
-        await db.insert(quizAnswerTranslations).values({
-          quizAnswerId: a.id,
-          locale,
-          answerText: answer[locale],
-        });
-      }
-    }
-  }
-
-  console.log(`Part ${partNumber} completed (${questions.length} questions)`);
-}
-
-async function seedQuizFromJson() {
-  const args = process.argv.slice(2);
-  const partArg = args[0];
-
-  if (!partArg) {
-    console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-css.ts <part-number>');
-    console.log('Example: npx tsx db/seeds/seed-quiz-css.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-css.ts all');
-    process.exit(1);
-  }
-
-  console.log('Starting CSS quiz seed...\n');
-
-  try {
-    const quizId = await ensureQuizExists();
-
-    if (partArg.toLowerCase() === 'all') {
-      console.log('Uploading all parts...\n');
-      let totalQuestions = 0;
-
-      for (let i = 1; i <= 4; i++) {
-        const questions = await loadQuestions(i);
-        await seedQuestions(questions, quizId, i);
-        totalQuestions += questions.length;
-      }
-
-      console.log('\nAll parts seeded successfully!');
-      console.log(`   - 1 quiz with ${LOCALES.length} translations`);
-      console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
-    } else {
-      const partNumber = parseInt(partArg, 10);
-
-      if (isNaN(partNumber) || partNumber < 1 || partNumber > 4) {
-        console.error('Error: Part number must be between 1 and 4');
-        process.exit(1);
-      }
-
-      const questions = await loadQuestions(partNumber);
-      await seedQuestions(questions, quizId, partNumber);
-
-      console.log('\nPart seeded successfully!');
-      console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
-      console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
-    }
-  } catch (error) {
-    console.error('\nError seeding quiz:', error);
-    throw error;
-  }
-}
-
-seedQuizFromJson()
-  .then(() => process.exit(0))
-  .catch((error) => {
-    console.error(error);
-    process.exit(1);
-  });
diff --git a/json/quizzes/git/git-quiz-part1.json b/json/quizzes/git/git-quiz-part1.json
deleted file mode 100644
index 7fe33ad6..00000000
--- a/json/quizzes/git/git-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "git-q01",
-      "order": 1,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке Git?",
-        "exp": "Git — це розподілена система контролю версій, яка дозволяє відстежувати зміни у коді, працювати в гілках та співпрацювати з командою."
-      },
-      "en": {
-        "q": "What is Git?",
-        "exp": "Git is a distributed version control system that allows you to track changes in code, work in branches, and collaborate with a team."
-      },
-      "pl": {
-        "q": "Czym jest Git?",
-        "exp": "Git to rozproszony system kontroli wersji, który pozwala śledzić zmiany w kodzie, pracować w gałęziach i współpracować z zespołem."
-      },
-      "answers": [
-        {
-          "uk": "Онлайн-сервіс для хостингу коду",
-          "en": "An online code hosting service",
-          "pl": "Usługa hostingu kodu online",
-          "correct": false
-        },
-        {
-          "uk": "Розподілена система контролю версій для відстеження змін у коді",
-          "en": "A distributed version control system for tracking code changes",
-          "pl": "Rozproszony system kontroli wersji do śledzenia zmian w kodzie",
-          "correct": true
-        },
-        {
-          "uk": "Текстовий редактор для програмістів",
-          "en": "A text editor for programmers",
-          "pl": "Edytor tekstu dla programistów",
-          "correct": false
-        },
-        {
-          "uk": "Мова програмування для веб-розробки",
-          "en": "A programming language for web development",
-          "pl": "Język programowania do tworzenia stron internetowych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q02",
-      "order": 2,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між Git і GitHub?",
-        "exp": "Git — це інструмент для контролю версій, а GitHub — онлайн-платформа для зберігання Git-репозиторіїв та командної співпраці."
-      },
-      "en": {
-        "q": "What is the difference between Git and GitHub?",
-        "exp": "Git is a version control tool, while GitHub is an online platform for storing Git repositories and team collaboration."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między Git a GitHub?",
-        "exp": "Git to narzędzie do kontroli wersji, a GitHub to platforma online do przechowywania repozytoriów Git i współpracy zespołowej."
-      },
-      "answers": [
-        {
-          "uk": "Git і GitHub — це одне й те саме",
-          "en": "Git and GitHub are the same thing",
-          "pl": "Git i GitHub to to samo",
-          "correct": false
-        },
-        {
-          "uk": "GitHub — це новіша версія Git",
-          "en": "GitHub is a newer version of Git",
-          "pl": "GitHub to nowsza wersja Git",
-          "correct": false
-        },
-        {
-          "uk": "Git — це система контролю версій, GitHub — платформа для хостингу репозиторіїв",
-          "en": "Git is a version control system, GitHub is a platform for hosting repositories",
-          "pl": "Git to system kontroli wersji, GitHub to platforma do hostingu repozytoriów",
-          "correct": true
-        },
-        {
-          "uk": "GitHub працює лише локально, Git — у хмарі",
-          "en": "GitHub works only locally, Git works in the cloud",
-          "pl": "GitHub działa tylko lokalnie, Git działa w chmurze",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q03",
-      "order": 3,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке репозиторій (repository) у Git?",
-        "exp": "Репозиторій — це місце зберігання коду проєкту разом із повною історією змін, гілками та метаданими."
-      },
-      "en": {
-        "q": "What is a repository in Git?",
-        "exp": "A repository is a storage location for project code along with the complete history of changes, branches, and metadata."
-      },
-      "pl": {
-        "q": "Czym jest repozytorium w Git?",
-        "exp": "Repozytorium to miejsce przechowywania kodu projektu wraz z pełną historią zmian, gałęziami i metadanymi."
-      },
-      "answers": [
-        {
-          "uk": "Тимчасовий файл для зберігання змін",
-          "en": "A temporary file for storing changes",
-          "pl": "Tymczasowy plik do przechowywania zmian",
-          "correct": false
-        },
-        {
-          "uk": "Місце зберігання коду та історії змін проєкту",
-          "en": "A storage location for code and project change history",
-          "pl": "Miejsce przechowywania kodu i historii zmian projektu",
-          "correct": true
-        },
-        {
-          "uk": "Онлайн-сервіс для обміну повідомленнями",
-          "en": "An online messaging service",
-          "pl": "Usługa do wymiany wiadomości online",
-          "correct": false
-        },
-        {
-          "uk": "Інструмент для компіляції коду",
-          "en": "A code compilation tool",
-          "pl": "Narzędzie do kompilacji kodu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q04",
-      "order": 4,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке коміт (commit) у Git?",
-        "exp": "Коміт — це збереження знімка змін у репозиторії разом із повідомленням, автором та унікальним SHA-1 хешем."
-      },
-      "en": {
-        "q": "What is a commit in Git?",
-        "exp": "A commit is a saved snapshot of changes in the repository along with a message, author, and unique SHA-1 hash."
-      },
-      "pl": {
-        "q": "Czym jest commit w Git?",
-        "exp": "Commit to zapisana migawka zmian w repozytorium wraz z wiadomością, autorem i unikalnym hashem SHA-1."
-      },
-      "answers": [
-        {
-          "uk": "Команда для видалення файлів",
-          "en": "A command to delete files",
-          "pl": "Polecenie do usuwania plików",
-          "correct": false
-        },
-        {
-          "uk": "Збереження знімка змін у репозиторії з повідомленням та унікальним ідентифікатором",
-          "en": "Saving a snapshot of changes in the repository with a message and unique identifier",
-          "pl": "Zapisanie migawki zmian w repozytorium z wiadomością i unikalnym identyfikatorem",
-          "correct": true
-        },
-        {
-          "uk": "Створення нової гілки",
-          "en": "Creating a new branch",
-          "pl": "Tworzenie nowej gałęzi",
-          "correct": false
-        },
-        {
-          "uk": "Відправлення коду на сервер",
-          "en": "Sending code to a server",
-          "pl": "Wysyłanie kodu na serwer",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q05",
-      "order": 5,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка роль staging area (індексу) у Git?",
-        "exp": "Staging area — це проміжна область, де ви готуєте зміни до коміту, обираючи, які файли включити в наступний коміт."
-      },
-      "en": {
-        "q": "What is the role of the staging area (index) in Git?",
-        "exp": "The staging area is an intermediate area where you prepare changes for a commit, selecting which files to include in the next commit."
-      },
-      "pl": {
-        "q": "Jaka jest rola staging area (indeksu) w Git?",
-        "exp": "Staging area to pośredni obszar, w którym przygotowujesz zmiany do commita, wybierając które pliki uwzględnić w następnym commicie."
-      },
-      "answers": [
-        {
-          "uk": "Зберігає резервні копії файлів",
-          "en": "Stores backup copies of files",
-          "pl": "Przechowuje kopie zapasowe plików",
-          "correct": false
-        },
-        {
-          "uk": "Проміжна область для підготовки змін до коміту",
-          "en": "An intermediate area for preparing changes for a commit",
-          "pl": "Pośredni obszar do przygotowania zmian do commita",
-          "correct": true
-        },
-        {
-          "uk": "Місце для зберігання видалених файлів",
-          "en": "A place for storing deleted files",
-          "pl": "Miejsce do przechowywania usuniętych plików",
-          "correct": false
-        },
-        {
-          "uk": "Область для автоматичного злиття гілок",
-          "en": "An area for automatic branch merging",
-          "pl": "Obszar do automatycznego łączenia gałęzi",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q06",
-      "order": 6,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке гілка (branch) у Git?",
-        "exp": "Гілка — це окрема лінія розробки, яка дозволяє працювати над новими функціями або виправленнями, не зачіпаючи основний код."
-      },
-      "en": {
-        "q": "What is a branch in Git?",
-        "exp": "A branch is a separate line of development that allows you to work on new features or fixes without affecting the main code."
-      },
-      "pl": {
-        "q": "Czym jest gałąź (branch) w Git?",
-        "exp": "Gałąź to oddzielna linia rozwoju, która pozwala pracować nad nowymi funkcjami lub poprawkami bez wpływu na główny kod."
-      },
-      "answers": [
-        {
-          "uk": "Копія репозиторію на віддаленому сервері",
-          "en": "A copy of the repository on a remote server",
-          "pl": "Kopia repozytorium na zdalnym serwerze",
-          "correct": false
-        },
-        {
-          "uk": "Окрема лінія розробки для паралельної роботи над кодом",
-          "en": "A separate line of development for parallel work on code",
-          "pl": "Oddzielna linia rozwoju do równoległej pracy nad kodem",
-          "correct": true
-        },
-        {
-          "uk": "Інструмент для видалення історії комітів",
-          "en": "A tool for deleting commit history",
-          "pl": "Narzędzie do usuwania historii commitów",
-          "correct": false
-        },
-        {
-          "uk": "Спосіб шифрування коду",
-          "en": "A method of encrypting code",
-          "pl": "Metoda szyfrowania kodu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q07",
-      "order": 7,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке HEAD у Git?",
-        "exp": "HEAD — це вказівник на поточний коміт, з яким ви працюєте. Зазвичай він вказує на гілку, а гілка — на останній коміт."
-      },
-      "en": {
-        "q": "What is HEAD in Git?",
-        "exp": "HEAD is a pointer to the current commit you are working with. Usually, it points to a branch, and the branch points to the latest commit."
-      },
-      "pl": {
-        "q": "Czym jest HEAD w Git?",
-        "exp": "HEAD to wskaźnik na bieżący commit, z którym pracujesz. Zwykle wskazuje na gałąź, a gałąź wskazuje na ostatni commit."
-      },
-      "answers": [
-        {
-          "uk": "Назва головної гілки репозиторію",
-          "en": "The name of the main branch of the repository",
-          "pl": "Nazwa głównej gałęzi repozytorium",
-          "correct": false
-        },
-        {
-          "uk": "Вказівник на поточний коміт, з яким ви працюєте",
-          "en": "A pointer to the current commit you are working with",
-          "pl": "Wskaźnik na bieżący commit, z którym pracujesz",
-          "correct": true
-        },
-        {
-          "uk": "Перший коміт у репозиторії",
-          "en": "The first commit in the repository",
-          "pl": "Pierwszy commit w repozytorium",
-          "correct": false
-        },
-        {
-          "uk": "Команда для перегляду історії",
-          "en": "A command for viewing history",
-          "pl": "Polecenie do przeglądania historii",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q08",
-      "order": 8,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка команда створює новий локальний репозиторій Git?",
-        "exp": "Команда git init створює приховану папку .git у поточному каталозі, перетворюючи його на Git-репозиторій."
-      },
-      "en": {
-        "q": "Which command creates a new local Git repository?",
-        "exp": "The git init command creates a hidden .git folder in the current directory, turning it into a Git repository."
-      },
-      "pl": {
-        "q": "Które polecenie tworzy nowe lokalne repozytorium Git?",
-        "exp": "Polecenie git init tworzy ukryty folder .git w bieżącym katalogu, przekształcając go w repozytorium Git."
-      },
-      "answers": [
-        {
-          "uk": "git create",
-          "en": "git create",
-          "pl": "git create",
-          "correct": false
-        },
-        {
-          "uk": "git new",
-          "en": "git new",
-          "pl": "git new",
-          "correct": false
-        },
-        {
-          "uk": "git init",
-          "en": "git init",
-          "pl": "git init",
-          "correct": true
-        },
-        {
-          "uk": "git start",
-          "en": "git start",
-          "pl": "git start",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q09",
-      "order": 9,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що робить команда git clone?",
-        "exp": "git clone створює повну копію віддаленого репозиторію на вашому комп'ютері, включаючи всі файли, історію та гілки."
-      },
-      "en": {
-        "q": "What does the git clone command do?",
-        "exp": "git clone creates a complete copy of a remote repository on your computer, including all files, history, and branches."
-      },
-      "pl": {
-        "q": "Co robi polecenie git clone?",
-        "exp": "git clone tworzy pełną kopię zdalnego repozytorium na twoim komputerze, włącznie ze wszystkimi plikami, historią i gałęziami."
-      },
-      "answers": [
-        {
-          "uk": "Створює нову гілку",
-          "en": "Creates a new branch",
-          "pl": "Tworzy nową gałąź",
-          "correct": false
-        },
-        {
-          "uk": "Створює повну копію віддаленого репозиторію локально",
-          "en": "Creates a complete copy of a remote repository locally",
-          "pl": "Tworzy pełną kopię zdalnego repozytorium lokalnie",
-          "correct": true
-        },
-        {
-          "uk": "Видаляє локальний репозиторій",
-          "en": "Deletes the local repository",
-          "pl": "Usuwa lokalne repozytorium",
-          "correct": false
-        },
-        {
-          "uk": "Об'єднує дві гілки",
-          "en": "Merges two branches",
-          "pl": "Łączy dwie gałęzie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q10",
-      "order": 10,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що показує команда git status?",
-        "exp": "git status показує поточний стан робочого каталогу: змінені файли, файли в staging area та файли, які не відстежуються."
-      },
-      "en": {
-        "q": "What does the git status command show?",
-        "exp": "git status shows the current state of the working directory: modified files, files in the staging area, and untracked files."
-      },
-      "pl": {
-        "q": "Co pokazuje polecenie git status?",
-        "exp": "git status pokazuje bieżący stan katalogu roboczego: zmienione pliki, pliki w staging area i nieśledzone pliki."
-      },
-      "answers": [
-        {
-          "uk": "Історію всіх комітів",
-          "en": "The history of all commits",
-          "pl": "Historię wszystkich commitów",
-          "correct": false
-        },
-        {
-          "uk": "Список усіх гілок",
-          "en": "A list of all branches",
-          "pl": "Listę wszystkich gałęzi",
-          "correct": false
-        },
-        {
-          "uk": "Поточний стан робочого каталогу та staging area",
-          "en": "The current state of the working directory and staging area",
-          "pl": "Bieżący stan katalogu roboczego i staging area",
-          "correct": true
-        },
-        {
-          "uk": "Налаштування конфігурації Git",
-          "en": "Git configuration settings",
-          "pl": "Ustawienia konfiguracji Git",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/git/git-quiz-part2.json b/json/quizzes/git/git-quiz-part2.json
deleted file mode 100644
index 9f7e0c79..00000000
--- a/json/quizzes/git/git-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "git-q11",
-      "order": 11,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між git push і git pull?",
-        "exp": "git push відправляє локальні коміти у віддалений репозиторій, а git pull отримує зміни з віддаленого репозиторію та інтегрує їх локально."
-      },
-      "en": {
-        "q": "What is the difference between git push and git pull?",
-        "exp": "git push sends local commits to the remote repository, while git pull retrieves changes from the remote repository and integrates them locally."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między git push a git pull?",
-        "exp": "git push wysyła lokalne commity do zdalnego repozytorium, a git pull pobiera zmiany ze zdalnego repozytorium i integruje je lokalnie."
-      },
-      "answers": [
-        {
-          "uk": "Обидві команди роблять одне й те саме",
-          "en": "Both commands do the same thing",
-          "pl": "Oba polecenia robią to samo",
-          "correct": false
-        },
-        {
-          "uk": "push відправляє зміни на сервер, pull отримує зміни з сервера",
-          "en": "push sends changes to the server, pull retrieves changes from the server",
-          "pl": "push wysyła zmiany na serwer, pull pobiera zmiany z serwera",
-          "correct": true
-        },
-        {
-          "uk": "push створює гілку, pull видаляє гілку",
-          "en": "push creates a branch, pull deletes a branch",
-          "pl": "push tworzy gałąź, pull usuwa gałąź",
-          "correct": false
-        },
-        {
-          "uk": "pull працює локально, push працює віддалено",
-          "en": "pull works locally, push works remotely",
-          "pl": "pull działa lokalnie, push działa zdalnie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q12",
-      "order": 12,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить команда git fetch і чим вона відрізняється від git pull?",
-        "exp": "git fetch завантажує зміни з віддаленого репозиторію, але не інтегрує їх. git pull — це git fetch плюс git merge."
-      },
-      "en": {
-        "q": "What does git fetch do and how does it differ from git pull?",
-        "exp": "git fetch downloads changes from the remote repository but does not integrate them. git pull is git fetch plus git merge."
-      },
-      "pl": {
-        "q": "Co robi git fetch i czym różni się od git pull?",
-        "exp": "git fetch pobiera zmiany ze zdalnego repozytorium, ale ich nie integruje. git pull to git fetch plus git merge."
-      },
-      "answers": [
-        {
-          "uk": "fetch і pull — це синоніми",
-          "en": "fetch and pull are synonyms",
-          "pl": "fetch i pull to synonimy",
-          "correct": false
-        },
-        {
-          "uk": "fetch завантажує зміни без злиття, pull завантажує і зливає",
-          "en": "fetch downloads changes without merging, pull downloads and merges",
-          "pl": "fetch pobiera zmiany bez łączenia, pull pobiera i łączy",
-          "correct": true
-        },
-        {
-          "uk": "fetch видаляє локальні зміни, pull зберігає їх",
-          "en": "fetch deletes local changes, pull preserves them",
-          "pl": "fetch usuwa lokalne zmiany, pull je zachowuje",
-          "correct": false
-        },
-        {
-          "uk": "fetch працює швидше, ніж pull",
-          "en": "fetch works faster than pull",
-          "pl": "fetch działa szybciej niż pull",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q13",
-      "order": 13,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке merge conflict і коли він виникає?",
-        "exp": "Merge conflict виникає, коли дві гілки змінюють один і той самий рядок коду по-різному, і Git не може автоматично об'єднати зміни."
-      },
-      "en": {
-        "q": "What is a merge conflict and when does it occur?",
-        "exp": "A merge conflict occurs when two branches change the same line of code differently, and Git cannot automatically merge the changes."
-      },
-      "pl": {
-        "q": "Czym jest konflikt scalania i kiedy występuje?",
-        "exp": "Konflikt scalania występuje, gdy dwie gałęzie zmieniają tę samą linię kodu w różny sposób i Git nie może automatycznie połączyć zmian."
-      },
-      "answers": [
-        {
-          "uk": "Помилка при створенні нової гілки",
-          "en": "An error when creating a new branch",
-          "pl": "Błąd przy tworzeniu nowej gałęzi",
-          "correct": false
-        },
-        {
-          "uk": "Ситуація, коли дві гілки змінюють один рядок коду несумісним способом",
-          "en": "A situation where two branches change the same line of code incompatibly",
-          "pl": "Sytuacja, gdy dwie gałęzie zmieniają tę samą linię kodu w niekompatybilny sposób",
-          "correct": true
-        },
-        {
-          "uk": "Проблема з підключенням до віддаленого сервера",
-          "en": "A connection problem with the remote server",
-          "pl": "Problem z połączeniem ze zdalnym serwerem",
-          "correct": false
-        },
-        {
-          "uk": "Помилка в синтаксисі команди git merge",
-          "en": "A syntax error in the git merge command",
-          "pl": "Błąd składni w poleceniu git merge",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q14",
-      "order": 14,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке fast-forward merge у Git?",
-        "exp": "Fast-forward merge — це злиття, коли Git просто переміщує вказівник гілки вперед, оскільки історія лінійна і немає розходжень."
-      },
-      "en": {
-        "q": "What is a fast-forward merge in Git?",
-        "exp": "A fast-forward merge is when Git simply moves the branch pointer forward because the history is linear with no divergence."
-      },
-      "pl": {
-        "q": "Czym jest fast-forward merge w Git?",
-        "exp": "Fast-forward merge to sytuacja, gdy Git po prostu przesuwa wskaźnik gałęzi do przodu, ponieważ historia jest liniowa bez rozbieżności."
-      },
-      "answers": [
-        {
-          "uk": "Злиття, яке завжди створює новий merge-коміт",
-          "en": "A merge that always creates a new merge commit",
-          "pl": "Scalanie, które zawsze tworzy nowy commit scalający",
-          "correct": false
-        },
-        {
-          "uk": "Злиття, яке просто переміщує вказівник гілки без створення merge-коміту",
-          "en": "A merge that simply moves the branch pointer without creating a merge commit",
-          "pl": "Scalanie, które po prostu przesuwa wskaźnik gałęzi bez tworzenia commita scalającego",
-          "correct": true
-        },
-        {
-          "uk": "Злиття, яке відбувається автоматично при кожному push",
-          "en": "A merge that happens automatically on every push",
-          "pl": "Scalanie, które następuje automatycznie przy każdym push",
-          "correct": false
-        },
-        {
-          "uk": "Злиття, яке видаляє історію старіших комітів",
-          "en": "A merge that deletes the history of older commits",
-          "pl": "Scalanie, które usuwa historię starszych commitów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q15",
-      "order": 15,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка основна різниця між git merge і git rebase?",
-        "exp": "merge зберігає історію та створює merge-коміт, а rebase переписує історію, роблячи її лінійною без merge-комітів."
-      },
-      "en": {
-        "q": "What is the main difference between git merge and git rebase?",
-        "exp": "merge preserves history and creates a merge commit, while rebase rewrites history, making it linear without merge commits."
-      },
-      "pl": {
-        "q": "Jaka jest główna różnica między git merge a git rebase?",
-        "exp": "merge zachowuje historię i tworzy commit scalający, a rebase przepisuje historię, czyniąc ją liniową bez commitów scalających."
-      },
-      "answers": [
-        {
-          "uk": "merge і rebase — це одне й те саме",
-          "en": "merge and rebase are the same thing",
-          "pl": "merge i rebase to to samo",
-          "correct": false
-        },
-        {
-          "uk": "merge зберігає історію, rebase переписує історію для лінійності",
-          "en": "merge preserves history, rebase rewrites history for linearity",
-          "pl": "merge zachowuje historię, rebase przepisuje historię dla liniowości",
-          "correct": true
-        },
-        {
-          "uk": "rebase працює лише з віддаленими гілками",
-          "en": "rebase only works with remote branches",
-          "pl": "rebase działa tylko ze zdalnymi gałęziami",
-          "correct": false
-        },
-        {
-          "uk": "merge швидший за rebase",
-          "en": "merge is faster than rebase",
-          "pl": "merge jest szybszy niż rebase",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q16",
-      "order": 16,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовується файл .gitignore?",
-        "exp": ".gitignore визначає, які файли та папки Git має ігнорувати і не відстежувати, наприклад node_modules, .env чи build-артефакти."
-      },
-      "en": {
-        "q": "What is the .gitignore file used for?",
-        "exp": ".gitignore defines which files and folders Git should ignore and not track, such as node_modules, .env, or build artifacts."
-      },
-      "pl": {
-        "q": "Do czego służy plik .gitignore?",
-        "exp": ".gitignore określa, które pliki i foldery Git powinien ignorować i nie śledzić, np. node_modules, .env lub artefakty budowania."
-      },
-      "answers": [
-        {
-          "uk": "Для зберігання конфігурації Git",
-          "en": "For storing Git configuration",
-          "pl": "Do przechowywania konfiguracji Git",
-          "correct": false
-        },
-        {
-          "uk": "Для визначення файлів і папок, які Git повинен ігнорувати",
-          "en": "For defining files and folders that Git should ignore",
-          "pl": "Do określania plików i folderów, które Git powinien ignorować",
-          "correct": true
-        },
-        {
-          "uk": "Для автоматичного видалення файлів",
-          "en": "For automatically deleting files",
-          "pl": "Do automatycznego usuwania plików",
-          "correct": false
-        },
-        {
-          "uk": "Для шифрування чутливих даних",
-          "en": "For encrypting sensitive data",
-          "pl": "Do szyfrowania wrażliwych danych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q17",
-      "order": 17,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить команда git stash?",
-        "exp": "git stash тимчасово зберігає незавершені зміни, щоб ви могли переключитися на іншу гілку без коміту. Потім зміни можна повернути."
-      },
-      "en": {
-        "q": "What does the git stash command do?",
-        "exp": "git stash temporarily saves uncommitted changes so you can switch to another branch without committing. Changes can be restored later."
-      },
-      "pl": {
-        "q": "Co robi polecenie git stash?",
-        "exp": "git stash tymczasowo zapisuje niezatwierdzone zmiany, abyś mógł przejść na inną gałąź bez commitowania. Zmiany można później przywrócić."
-      },
-      "answers": [
-        {
-          "uk": "Видаляє всі локальні зміни",
-          "en": "Deletes all local changes",
-          "pl": "Usuwa wszystkie lokalne zmiany",
-          "correct": false
-        },
-        {
-          "uk": "Тимчасово зберігає незавершені зміни для подальшого відновлення",
-          "en": "Temporarily saves uncommitted changes for later restoration",
-          "pl": "Tymczasowo zapisuje niezatwierdzone zmiany do późniejszego przywrócenia",
-          "correct": true
-        },
-        {
-          "uk": "Створює новий коміт з поточними змінами",
-          "en": "Creates a new commit with current changes",
-          "pl": "Tworzy nowy commit z bieżącymi zmianami",
-          "correct": false
-        },
-        {
-          "uk": "Об'єднує поточну гілку з main",
-          "en": "Merges the current branch with main",
-          "pl": "Łączy bieżącą gałąź z main",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q18",
-      "order": 18,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка команда показує історію комітів у Git?",
-        "exp": "git log показує історію комітів з хешами, авторами, датами та повідомленнями. Можна додати прапорці для компактного виводу."
-      },
-      "en": {
-        "q": "Which command shows the commit history in Git?",
-        "exp": "git log shows the commit history with hashes, authors, dates, and messages. You can add flags for compact output."
-      },
-      "pl": {
-        "q": "Które polecenie pokazuje historię commitów w Git?",
-        "exp": "git log pokazuje historię commitów z hashami, autorami, datami i wiadomościami. Można dodać flagi dla kompaktowego wyjścia."
-      },
-      "answers": [
-        {
-          "uk": "git history",
-          "en": "git history",
-          "pl": "git history",
-          "correct": false
-        },
-        {
-          "uk": "git log",
-          "en": "git log",
-          "pl": "git log",
-          "correct": true
-        },
-        {
-          "uk": "git commits",
-          "en": "git commits",
-          "pl": "git commits",
-          "correct": false
-        },
-        {
-          "uk": "git show-all",
-          "en": "git show-all",
-          "pl": "git show-all",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q19",
-      "order": 19,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить команда git blame?",
-        "exp": "git blame показує, хто і коли вніс кожен рядок у файлі, що допомагає знайти відповідального за конкретні зміни."
-      },
-      "en": {
-        "q": "What does the git blame command do?",
-        "exp": "git blame shows who and when made each line in a file, helping to find who is responsible for specific changes."
-      },
-      "pl": {
-        "q": "Co robi polecenie git blame?",
-        "exp": "git blame pokazuje, kto i kiedy wprowadził każdą linię w pliku, pomagając znaleźć osobę odpowiedzialną za konkretne zmiany."
-      },
-      "answers": [
-        {
-          "uk": "Видаляє авторство з комітів",
-          "en": "Removes authorship from commits",
-          "pl": "Usuwa autorstwo z commitów",
-          "correct": false
-        },
-        {
-          "uk": "Показує, хто і коли вніс кожен рядок у файлі",
-          "en": "Shows who and when made each line in a file",
-          "pl": "Pokazuje, kto i kiedy wprowadził każdą linię w pliku",
-          "correct": true
-        },
-        {
-          "uk": "Надсилає повідомлення про помилку автору коміту",
-          "en": "Sends an error message to the commit author",
-          "pl": "Wysyła wiadomość o błędzie do autora commita",
-          "correct": false
-        },
-        {
-          "uk": "Позначає файли як проблемні",
-          "en": "Marks files as problematic",
-          "pl": "Oznacza pliki jako problematyczne",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q20",
-      "order": 20,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як змінити повідомлення останнього коміту?",
-        "exp": "Використовуйте git commit --amend -m 'Нове повідомлення'. Якщо коміт вже запушено, потрібен --force push."
-      },
-      "en": {
-        "q": "How do you change the message of the last commit?",
-        "exp": "Use git commit --amend -m 'New message'. If the commit is already pushed, you need a --force push."
-      },
-      "pl": {
-        "q": "Jak zmienić wiadomość ostatniego commita?",
-        "exp": "Użyj git commit --amend -m 'Nowa wiadomość'. Jeśli commit jest już wypchnięty, potrzebujesz --force push."
-      },
-      "answers": [
-        {
-          "uk": "git message --edit",
-          "en": "git message --edit",
-          "pl": "git message --edit",
-          "correct": false
-        },
-        {
-          "uk": "git commit --amend -m 'Нове повідомлення'",
-          "en": "git commit --amend -m 'New message'",
-          "pl": "git commit --amend -m 'Nowa wiadomość'",
-          "correct": true
-        },
-        {
-          "uk": "git rewrite-commit",
-          "en": "git rewrite-commit",
-          "pl": "git rewrite-commit",
-          "correct": false
-        },
-        {
-          "uk": "Неможливо змінити повідомлення після коміту",
-          "en": "It's impossible to change a message after committing",
-          "pl": "Nie można zmienić wiadomości po zacommitowaniu",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/git/git-quiz-part3.json b/json/quizzes/git/git-quiz-part3.json
deleted file mode 100644
index e8e24efb..00000000
--- a/json/quizzes/git/git-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "git-q21",
-      "order": 21,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовуються теги (tags) у Git?",
-        "exp": "Теги — це фіксовані маркери на певних комітах, зазвичай для позначення релізів (v1.0, v2.0). Вони не переміщуються, на відміну від гілок."
-      },
-      "en": {
-        "q": "What are tags used for in Git?",
-        "exp": "Tags are fixed markers on specific commits, usually for marking releases (v1.0, v2.0). Unlike branches, they don't move."
-      },
-      "pl": {
-        "q": "Do czego służą tagi w Git?",
-        "exp": "Tagi to stałe znaczniki na konkretnych commitach, zwykle do oznaczania wydań (v1.0, v2.0). W przeciwieństwie do gałęzi, nie przesuwają się."
-      },
-      "answers": [
-        {
-          "uk": "Для автоматичного злиття гілок",
-          "en": "For automatic branch merging",
-          "pl": "Do automatycznego łączenia gałęzi",
-          "correct": false
-        },
-        {
-          "uk": "Для позначення важливих точок у історії, наприклад релізів",
-          "en": "For marking important points in history, such as releases",
-          "pl": "Do oznaczania ważnych punktów w historii, np. wydań",
-          "correct": true
-        },
-        {
-          "uk": "Для видалення старих комітів",
-          "en": "For deleting old commits",
-          "pl": "Do usuwania starych commitów",
-          "correct": false
-        },
-        {
-          "uk": "Для шифрування комітів",
-          "en": "For encrypting commits",
-          "pl": "Do szyfrowania commitów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q22",
-      "order": 22,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Gitflow Workflow?",
-        "exp": "Gitflow — це модель роботи з Git з чіткими правилами: main для продакшну, develop для розробки, feature/ для фіч, release/ для релізів, hotfix/ для виправлень."
-      },
-      "en": {
-        "q": "What is Gitflow Workflow?",
-        "exp": "Gitflow is a Git workflow model with clear rules: main for production, develop for development, feature/ for features, release/ for releases, hotfix/ for fixes."
-      },
-      "pl": {
-        "q": "Czym jest Gitflow Workflow?",
-        "exp": "Gitflow to model pracy z Git z jasnymi regułami: main dla produkcji, develop dla rozwoju, feature/ dla funkcji, release/ dla wydań, hotfix/ dla poprawek."
-      },
-      "answers": [
-        {
-          "uk": "Інструмент для автоматичного тестування коду",
-          "en": "A tool for automatic code testing",
-          "pl": "Narzędzie do automatycznego testowania kodu",
-          "correct": false
-        },
-        {
-          "uk": "Модель роботи з Git з чіткою структурою гілок для різних типів задач",
-          "en": "A Git workflow model with a clear branch structure for different types of tasks",
-          "pl": "Model pracy z Git z jasną strukturą gałęzi dla różnych typów zadań",
-          "correct": true
-        },
-        {
-          "uk": "Команда для прискорення операцій Git",
-          "en": "A command for speeding up Git operations",
-          "pl": "Polecenie do przyspieszania operacji Git",
-          "correct": false
-        },
-        {
-          "uk": "Онлайн-сервіс для хостингу репозиторіїв",
-          "en": "An online service for hosting repositories",
-          "pl": "Usługa online do hostingu repozytoriów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q23",
-      "order": 23,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Pull Request (PR)?",
-        "exp": "Pull Request — це запит на внесення змін з однієї гілки в іншу через платформи GitHub/GitLab, що дозволяє провести code review перед злиттям."
-      },
-      "en": {
-        "q": "What is a Pull Request (PR)?",
-        "exp": "A Pull Request is a request to merge changes from one branch to another through platforms like GitHub/GitLab, allowing code review before merging."
-      },
-      "pl": {
-        "q": "Czym jest Pull Request (PR)?",
-        "exp": "Pull Request to prośba o scalenie zmian z jednej gałęzi do drugiej przez platformy takie jak GitHub/GitLab, umożliwiająca przegląd kodu przed scaleniem."
-      },
-      "answers": [
-        {
-          "uk": "Команда для завантаження змін з сервера",
-          "en": "A command for downloading changes from the server",
-          "pl": "Polecenie do pobierania zmian z serwera",
-          "correct": false
-        },
-        {
-          "uk": "Запит на злиття змін з code review через веб-платформу",
-          "en": "A request to merge changes with code review through a web platform",
-          "pl": "Prośba o scalenie zmian z przeglądem kodu przez platformę internetową",
-          "correct": true
-        },
-        {
-          "uk": "Автоматичне оновлення локального репозиторію",
-          "en": "Automatic update of the local repository",
-          "pl": "Automatyczna aktualizacja lokalnego repozytorium",
-          "correct": false
-        },
-        {
-          "uk": "Інструмент для видалення гілок",
-          "en": "A tool for deleting branches",
-          "pl": "Narzędzie do usuwania gałęzi",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q24",
-      "order": 24,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Git hooks?",
-        "exp": "Git hooks — це скрипти, які автоматично виконуються при певних подіях, наприклад pre-commit для перевірки коду перед комітом."
-      },
-      "en": {
-        "q": "What are Git hooks?",
-        "exp": "Git hooks are scripts that run automatically on certain events, such as pre-commit for checking code before a commit."
-      },
-      "pl": {
-        "q": "Czym są Git hooks?",
-        "exp": "Git hooks to skrypty uruchamiane automatycznie przy określonych zdarzeniach, np. pre-commit do sprawdzania kodu przed commitem."
-      },
-      "answers": [
-        {
-          "uk": "Способи підключення до віддалених репозиторіїв",
-          "en": "Ways to connect to remote repositories",
-          "pl": "Sposoby łączenia się ze zdalnymi repozytoriami",
-          "correct": false
-        },
-        {
-          "uk": "Скрипти, які автоматично виконуються при певних Git-подіях",
-          "en": "Scripts that run automatically on certain Git events",
-          "pl": "Skrypty uruchamiane automatycznie przy określonych zdarzeniach Git",
-          "correct": true
-        },
-        {
-          "uk": "Команди для об'єднання гілок",
-          "en": "Commands for merging branches",
-          "pl": "Polecenia do łączenia gałęzi",
-          "correct": false
-        },
-        {
-          "uk": "Розширення для IDE",
-          "en": "Extensions for IDE",
-          "pl": "Rozszerzenia dla IDE",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q25",
-      "order": 25,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке git revert і чим він відрізняється від git reset?",
-        "exp": "git revert створює новий коміт, що відміняє зміни попереднього, зберігаючи історію. git reset переписує історію, видаляючи коміти."
-      },
-      "en": {
-        "q": "What is git revert and how does it differ from git reset?",
-        "exp": "git revert creates a new commit that undoes changes from a previous one, preserving history. git reset rewrites history, removing commits."
-      },
-      "pl": {
-        "q": "Czym jest git revert i czym różni się od git reset?",
-        "exp": "git revert tworzy nowy commit, który cofa zmiany z poprzedniego, zachowując historię. git reset przepisuje historię, usuwając commity."
-      },
-      "answers": [
-        {
-          "uk": "revert і reset — це синоніми",
-          "en": "revert and reset are synonyms",
-          "pl": "revert i reset to synonimy",
-          "correct": false
-        },
-        {
-          "uk": "revert створює новий коміт-відкат, reset видаляє коміти з історії",
-          "en": "revert creates a new rollback commit, reset removes commits from history",
-          "pl": "revert tworzy nowy commit cofający, reset usuwa commity z historii",
-          "correct": true
-        },
-        {
-          "uk": "reset працює локально, revert — віддалено",
-          "en": "reset works locally, revert works remotely",
-          "pl": "reset działa lokalnie, revert działa zdalnie",
-          "correct": false
-        },
-        {
-          "uk": "revert швидший за reset",
-          "en": "revert is faster than reset",
-          "pl": "revert jest szybszy niż reset",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q26",
-      "order": 26,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке detached HEAD у Git?",
-        "exp": "Detached HEAD — це стан, коли HEAD вказує безпосередньо на коміт, а не на гілку. Нові коміти не будуть прив'язані до жодної гілки."
-      },
-      "en": {
-        "q": "What is detached HEAD in Git?",
-        "exp": "Detached HEAD is a state where HEAD points directly to a commit, not a branch. New commits won't be attached to any branch."
-      },
-      "pl": {
-        "q": "Czym jest detached HEAD w Git?",
-        "exp": "Detached HEAD to stan, gdy HEAD wskazuje bezpośrednio na commit, a nie na gałąź. Nowe commity nie będą przypisane do żadnej gałęzi."
-      },
-      "answers": [
-        {
-          "uk": "Помилка, яка означає пошкодження репозиторію",
-          "en": "An error indicating repository corruption",
-          "pl": "Błąd oznaczający uszkodzenie repozytorium",
-          "correct": false
-        },
-        {
-          "uk": "Стан, коли HEAD вказує на коміт, а не на гілку",
-          "en": "A state where HEAD points to a commit, not a branch",
-          "pl": "Stan, gdy HEAD wskazuje na commit, a nie na gałąź",
-          "correct": true
-        },
-        {
-          "uk": "Режим для видалення гілок",
-          "en": "A mode for deleting branches",
-          "pl": "Tryb do usuwania gałęzi",
-          "correct": false
-        },
-        {
-          "uk": "Спеціальний режим для злиття",
-          "en": "A special mode for merging",
-          "pl": "Specjalny tryb do scalania",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як об'єднати кілька комітів в один (squash)?",
-        "exp": "Використовуйте git rebase -i HEAD~N, де N — кількість комітів. У редакторі змініть pick на squash для комітів, які хочете об'єднати."
-      },
-      "en": {
-        "q": "How do you combine multiple commits into one (squash)?",
-        "exp": "Use git rebase -i HEAD~N, where N is the number of commits. In the editor, change pick to squash for commits you want to combine."
-      },
-      "pl": {
-        "q": "Jak połączyć wiele commitów w jeden (squash)?",
-        "exp": "Użyj git rebase -i HEAD~N, gdzie N to liczba commitów. W edytorze zmień pick na squash dla commitów, które chcesz połączyć."
-      },
-      "answers": [
-        {
-          "uk": "git merge --squash",
-          "en": "git merge --squash",
-          "pl": "git merge --squash",
-          "correct": false
-        },
-        {
-          "uk": "git rebase -i з позначенням комітів як squash",
-          "en": "git rebase -i marking commits as squash",
-          "pl": "git rebase -i oznaczając commity jako squash",
-          "correct": true
-        },
-        {
-          "uk": "git combine",
-          "en": "git combine",
-          "pl": "git combine",
-          "correct": false
-        },
-        {
-          "uk": "Неможливо об'єднати коміти",
-          "en": "It's impossible to combine commits",
-          "pl": "Nie można połączyć commitów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q28",
-      "order": 28,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке git bisect і для чого він використовується?",
-        "exp": "git bisect — інструмент для бінарного пошуку коміту, який ввів баг. Він автоматично звужує діапазон між 'good' і 'bad' комітами."
-      },
-      "en": {
-        "q": "What is git bisect and what is it used for?",
-        "exp": "git bisect is a tool for binary searching the commit that introduced a bug. It automatically narrows down between 'good' and 'bad' commits."
-      },
-      "pl": {
-        "q": "Czym jest git bisect i do czego służy?",
-        "exp": "git bisect to narzędzie do binarnego wyszukiwania commita, który wprowadził błąd. Automatycznie zawęża zakres między 'good' a 'bad' commitami."
-      },
-      "answers": [
-        {
-          "uk": "Команда для розділення репозиторію на частини",
-          "en": "A command for splitting a repository into parts",
-          "pl": "Polecenie do dzielenia repozytorium na części",
-          "correct": false
-        },
-        {
-          "uk": "Інструмент для бінарного пошуку коміту з багом",
-          "en": "A tool for binary searching the commit with a bug",
-          "pl": "Narzędzie do binarnego wyszukiwania commita z błędem",
-          "correct": true
-        },
-        {
-          "uk": "Команда для створення резервних копій",
-          "en": "A command for creating backups",
-          "pl": "Polecenie do tworzenia kopii zapasowych",
-          "correct": false
-        },
-        {
-          "uk": "Інструмент для порівняння двох гілок",
-          "en": "A tool for comparing two branches",
-          "pl": "Narzędzie do porównywania dwóch gałęzi",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q29",
-      "order": 29,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що робить команда git diff?",
-        "exp": "git diff показує різницю між робочим каталогом і staging area, або між комітами. Це допомагає побачити, що саме змінено."
-      },
-      "en": {
-        "q": "What does the git diff command do?",
-        "exp": "git diff shows the difference between the working directory and staging area, or between commits. It helps see what exactly has changed."
-      },
-      "pl": {
-        "q": "Co robi polecenie git diff?",
-        "exp": "git diff pokazuje różnicę między katalogiem roboczym a staging area lub między commitami. Pomaga zobaczyć, co dokładnie zostało zmienione."
-      },
-      "answers": [
-        {
-          "uk": "Видаляє різницю між файлами",
-          "en": "Deletes the difference between files",
-          "pl": "Usuwa różnicę między plikami",
-          "correct": false
-        },
-        {
-          "uk": "Показує різницю між файлами або комітами",
-          "en": "Shows the difference between files or commits",
-          "pl": "Pokazuje różnicę między plikami lub commitami",
-          "correct": true
-        },
-        {
-          "uk": "Об'єднує різні версії файлів",
-          "en": "Merges different versions of files",
-          "pl": "Łączy różne wersje plików",
-          "correct": false
-        },
-        {
-          "uk": "Створює нову гілку на основі різниці",
-          "en": "Creates a new branch based on the difference",
-          "pl": "Tworzy nową gałąź na podstawie różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q30",
-      "order": 30,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке семантичне версіонування (SemVer)?",
-        "exp": "SemVer — це система нумерації версій у форматі MAJOR.MINOR.PATCH. MAJOR — несумісні зміни, MINOR — нові функції, PATCH — виправлення багів."
-      },
-      "en": {
-        "q": "What is semantic versioning (SemVer)?",
-        "exp": "SemVer is a version numbering system in MAJOR.MINOR.PATCH format. MAJOR for incompatible changes, MINOR for new features, PATCH for bug fixes."
-      },
-      "pl": {
-        "q": "Czym jest wersjonowanie semantyczne (SemVer)?",
-        "exp": "SemVer to system numeracji wersji w formacie MAJOR.MINOR.PATCH. MAJOR dla niekompatybilnych zmian, MINOR dla nowych funkcji, PATCH dla poprawek błędów."
-      },
-      "answers": [
-        {
-          "uk": "Спосіб іменування гілок у Git",
-          "en": "A way of naming branches in Git",
-          "pl": "Sposób nazywania gałęzi w Git",
-          "correct": false
-        },
-        {
-          "uk": "Система нумерації версій у форматі MAJOR.MINOR.PATCH",
-          "en": "A version numbering system in MAJOR.MINOR.PATCH format",
-          "pl": "System numeracji wersji w formacie MAJOR.MINOR.PATCH",
-          "correct": true
-        },
-        {
-          "uk": "Алгоритм хешування комітів",
-          "en": "A commit hashing algorithm",
-          "pl": "Algorytm haszowania commitów",
-          "correct": false
-        },
-        {
-          "uk": "Метод шифрування репозиторіїв",
-          "en": "A repository encryption method",
-          "pl": "Metoda szyfrowania repozytoriów",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/git/git-quiz-part4.json b/json/quizzes/git/git-quiz-part4.json
deleted file mode 100644
index 40418df5..00000000
--- a/json/quizzes/git/git-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "git-q31",
-      "order": 31,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Git LFS і для чого він використовується?",
-        "exp": "Git LFS (Large File Storage) — розширення для зберігання великих файлів поза основним репозиторієм. У Git зберігаються лише посилання на файли."
-      },
-      "en": {
-        "q": "What is Git LFS and what is it used for?",
-        "exp": "Git LFS (Large File Storage) is an extension for storing large files outside the main repository. Only file references are stored in Git."
-      },
-      "pl": {
-        "q": "Czym jest Git LFS i do czego służy?",
-        "exp": "Git LFS (Large File Storage) to rozszerzenie do przechowywania dużych plików poza głównym repozytorium. W Git przechowywane są tylko odniesienia do plików."
-      },
-      "answers": [
-        {
-          "uk": "Команда для прискорення клонування",
-          "en": "A command for faster cloning",
-          "pl": "Polecenie do szybszego klonowania",
-          "correct": false
-        },
-        {
-          "uk": "Розширення для зберігання великих файлів поза репозиторієм",
-          "en": "An extension for storing large files outside the repository",
-          "pl": "Rozszerzenie do przechowywania dużych plików poza repozytorium",
-          "correct": true
-        },
-        {
-          "uk": "Система для автоматичного бекапу",
-          "en": "A system for automatic backup",
-          "pl": "System do automatycznego tworzenia kopii zapasowych",
-          "correct": false
-        },
-        {
-          "uk": "Інструмент для стиснення комітів",
-          "en": "A tool for compressing commits",
-          "pl": "Narzędzie do kompresji commitów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q32",
-      "order": 32,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке shallow clone у Git?",
-        "exp": "Shallow clone — це клон репозиторію з обмеженою історією комітів (--depth N). Швидше клонується, але без повної історії."
-      },
-      "en": {
-        "q": "What is a shallow clone in Git?",
-        "exp": "A shallow clone is a repository clone with limited commit history (--depth N). It clones faster but without complete history."
-      },
-      "pl": {
-        "q": "Czym jest shallow clone w Git?",
-        "exp": "Shallow clone to klon repozytorium z ograniczoną historią commitów (--depth N). Klonuje się szybciej, ale bez pełnej historii."
-      },
-      "answers": [
-        {
-          "uk": "Клон без файлів, лише з метаданими",
-          "en": "A clone without files, only metadata",
-          "pl": "Klon bez plików, tylko z metadanymi",
-          "correct": false
-        },
-        {
-          "uk": "Клон репозиторію з обмеженою кількістю комітів в історії",
-          "en": "A repository clone with a limited number of commits in history",
-          "pl": "Klon repozytorium z ograniczoną liczbą commitów w historii",
-          "correct": true
-        },
-        {
-          "uk": "Клон лише однієї гілки",
-          "en": "A clone of only one branch",
-          "pl": "Klon tylko jednej gałęzi",
-          "correct": false
-        },
-        {
-          "uk": "Клон без можливості пушу",
-          "en": "A clone without push capability",
-          "pl": "Klon bez możliwości push",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q33",
-      "order": 33,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як налаштувати ім'я користувача та email у Git?",
-        "exp": "Використовуйте git config --global user.name та git config --global user.email для глобальних налаштувань усіх репозиторіїв."
-      },
-      "en": {
-        "q": "How do you configure username and email in Git?",
-        "exp": "Use git config --global user.name and git config --global user.email for global settings across all repositories."
-      },
-      "pl": {
-        "q": "Jak skonfigurować nazwę użytkownika i email w Git?",
-        "exp": "Użyj git config --global user.name i git config --global user.email dla globalnych ustawień we wszystkich repozytoriach."
-      },
-      "answers": [
-        {
-          "uk": "git setup --user",
-          "en": "git setup --user",
-          "pl": "git setup --user",
-          "correct": false
-        },
-        {
-          "uk": "git config --global user.name та user.email",
-          "en": "git config --global user.name and user.email",
-          "pl": "git config --global user.name i user.email",
-          "correct": true
-        },
-        {
-          "uk": "git init --username",
-          "en": "git init --username",
-          "pl": "git init --username",
-          "correct": false
-        },
-        {
-          "uk": "Налаштування редагуються вручну в .git",
-          "en": "Settings are edited manually in .git",
-          "pl": "Ustawienia edytuje się ręcznie w .git",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які три рівні конфігурації існують у Git?",
-        "exp": "System (для всіх користувачів), Global (для поточного користувача), Local (для конкретного репозиторію). Пріоритет: local > global > system."
-      },
-      "en": {
-        "q": "What are the three configuration levels in Git?",
-        "exp": "System (for all users), Global (for current user), Local (for specific repository). Priority: local > global > system."
-      },
-      "pl": {
-        "q": "Jakie są trzy poziomy konfiguracji w Git?",
-        "exp": "System (dla wszystkich użytkowników), Global (dla bieżącego użytkownika), Local (dla konkretnego repozytorium). Priorytet: local > global > system."
-      },
-      "answers": [
-        {
-          "uk": "User, Admin, Root",
-          "en": "User, Admin, Root",
-          "pl": "User, Admin, Root",
-          "correct": false
-        },
-        {
-          "uk": "System, Global, Local",
-          "en": "System, Global, Local",
-          "pl": "System, Global, Local",
-          "correct": true
-        },
-        {
-          "uk": "Basic, Standard, Premium",
-          "en": "Basic, Standard, Premium",
-          "pl": "Basic, Standard, Premium",
-          "correct": false
-        },
-        {
-          "uk": "Main, Develop, Feature",
-          "en": "Main, Develop, Feature",
-          "pl": "Main, Develop, Feature",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q35",
-      "order": 35,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка команда видаляє гілку на віддаленому сервері?",
-        "exp": "Використовуйте git push origin --delete branch_name для видалення гілки на віддаленому репозиторії."
-      },
-      "en": {
-        "q": "Which command deletes a branch on the remote server?",
-        "exp": "Use git push origin --delete branch_name to delete a branch on the remote repository."
-      },
-      "pl": {
-        "q": "Które polecenie usuwa gałąź na zdalnym serwerze?",
-        "exp": "Użyj git push origin --delete branch_name, aby usunąć gałąź w zdalnym repozytorium."
-      },
-      "answers": [
-        {
-          "uk": "git delete remote branch_name",
-          "en": "git delete remote branch_name",
-          "pl": "git delete remote branch_name",
-          "correct": false
-        },
-        {
-          "uk": "git push origin --delete branch_name",
-          "en": "git push origin --delete branch_name",
-          "pl": "git push origin --delete branch_name",
-          "correct": true
-        },
-        {
-          "uk": "git remove origin/branch_name",
-          "en": "git remove origin/branch_name",
-          "pl": "git remove origin/branch_name",
-          "correct": false
-        },
-        {
-          "uk": "git branch -r -d branch_name",
-          "en": "git branch -r -d branch_name",
-          "pl": "git branch -r -d branch_name",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q36",
-      "order": 36,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить команда git clean?",
-        "exp": "git clean видаляє незатрековані файли з робочого каталогу. Використовуйте -n для dry-run, -f для видалення, -fd для файлів і каталогів."
-      },
-      "en": {
-        "q": "What does the git clean command do?",
-        "exp": "git clean removes untracked files from the working directory. Use -n for dry-run, -f to delete, -fd for files and directories."
-      },
-      "pl": {
-        "q": "Co robi polecenie git clean?",
-        "exp": "git clean usuwa nieśledzone pliki z katalogu roboczego. Użyj -n dla dry-run, -f do usunięcia, -fd dla plików i katalogów."
-      },
-      "answers": [
-        {
-          "uk": "Очищає історію комітів",
-          "en": "Clears commit history",
-          "pl": "Czyści historię commitów",
-          "correct": false
-        },
-        {
-          "uk": "Видаляє незатрековані файли з робочого каталогу",
-          "en": "Removes untracked files from the working directory",
-          "pl": "Usuwa nieśledzone pliki z katalogu roboczego",
-          "correct": true
-        },
-        {
-          "uk": "Форматує код у репозиторії",
-          "en": "Formats code in the repository",
-          "pl": "Formatuje kod w repozytorium",
-          "correct": false
-        },
-        {
-          "uk": "Видаляє всі локальні зміни",
-          "en": "Deletes all local changes",
-          "pl": "Usuwa wszystkie lokalne zmiany",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q37",
-      "order": 37,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Forking Workflow?",
-        "exp": "Forking Workflow — підхід, коли розробник працює зі своєю копією (fork) репозиторію і надсилає Pull Request в основний репозиторій."
-      },
-      "en": {
-        "q": "What is Forking Workflow?",
-        "exp": "Forking Workflow is an approach where a developer works with their own copy (fork) of the repository and sends a Pull Request to the main repository."
-      },
-      "pl": {
-        "q": "Czym jest Forking Workflow?",
-        "exp": "Forking Workflow to podejście, w którym programista pracuje z własną kopią (fork) repozytorium i wysyła Pull Request do głównego repozytorium."
-      },
-      "answers": [
-        {
-          "uk": "Робота з кількома гілками одночасно",
-          "en": "Working with multiple branches simultaneously",
-          "pl": "Praca z wieloma gałęziami jednocześnie",
-          "correct": false
-        },
-        {
-          "uk": "Робота зі своєю копією репозиторію та надсилання PR в основний",
-          "en": "Working with your own repository copy and sending PR to the main one",
-          "pl": "Praca z własną kopią repozytorium i wysyłanie PR do głównego",
-          "correct": true
-        },
-        {
-          "uk": "Автоматичне розділення великих комітів",
-          "en": "Automatic splitting of large commits",
-          "pl": "Automatyczne dzielenie dużych commitów",
-          "correct": false
-        },
-        {
-          "uk": "Спеціальний режим для вирішення конфліктів",
-          "en": "A special mode for resolving conflicts",
-          "pl": "Specjalny tryb do rozwiązywania konfliktów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка команда дозволяє перенести конкретний коміт з однієї гілки в іншу?",
-        "exp": "git cherry-pick дозволяє вибрати конкретний коміт і застосувати його до поточної гілки, не виконуючи повного злиття."
-      },
-      "en": {
-        "q": "Which command allows you to move a specific commit from one branch to another?",
-        "exp": "git cherry-pick allows you to select a specific commit and apply it to the current branch without a full merge."
-      },
-      "pl": {
-        "q": "Które polecenie pozwala przenieść konkretny commit z jednej gałęzi do drugiej?",
-        "exp": "git cherry-pick pozwala wybrać konkretny commit i zastosować go do bieżącej gałęzi bez pełnego scalania."
-      },
-      "answers": [
-        {
-          "uk": "git move-commit",
-          "en": "git move-commit",
-          "pl": "git move-commit",
-          "correct": false
-        },
-        {
-          "uk": "git cherry-pick",
-          "en": "git cherry-pick",
-          "pl": "git cherry-pick",
-          "correct": true
-        },
-        {
-          "uk": "git copy",
-          "en": "git copy",
-          "pl": "git copy",
-          "correct": false
-        },
-        {
-          "uk": "git transfer",
-          "en": "git transfer",
-          "pl": "git transfer",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q39",
-      "order": 39,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Git submodule?",
-        "exp": "Git submodule — механізм для вбудовування одного репозиторію в інший як залежність, зберігаючи посилання на конкретний коміт."
-      },
-      "en": {
-        "q": "What is a Git submodule?",
-        "exp": "A Git submodule is a mechanism for embedding one repository into another as a dependency, maintaining a reference to a specific commit."
-      },
-      "pl": {
-        "q": "Czym jest Git submodule?",
-        "exp": "Git submodule to mechanizm do osadzania jednego repozytorium w drugim jako zależność, zachowując odniesienie do konkretnego commita."
-      },
-      "answers": [
-        {
-          "uk": "Окрема гілка для модульного тестування",
-          "en": "A separate branch for unit testing",
-          "pl": "Oddzielna gałąź do testów jednostkowych",
-          "correct": false
-        },
-        {
-          "uk": "Механізм для вбудовування одного репозиторію в інший",
-          "en": "A mechanism for embedding one repository into another",
-          "pl": "Mechanizm do osadzania jednego repozytorium w drugim",
-          "correct": true
-        },
-        {
-          "uk": "Тип файлу для зберігання налаштувань",
-          "en": "A file type for storing settings",
-          "pl": "Typ pliku do przechowywania ustawień",
-          "correct": false
-        },
-        {
-          "uk": "Команда для розділення великих файлів",
-          "en": "A command for splitting large files",
-          "pl": "Polecenie do dzielenia dużych plików",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "git-q40",
-      "order": 40,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Чому небезпечно зберігати секретні дані (паролі, API-ключі) у Git-репозиторії?",
-        "exp": "Дані залишаються в історії Git назавжди, навіть після видалення. Їх можуть знайти через пошук в історії або у форках репозиторію."
-      },
-      "en": {
-        "q": "Why is it dangerous to store secrets (passwords, API keys) in a Git repository?",
-        "exp": "Data remains in Git history forever, even after deletion. It can be found through history search or in repository forks."
-      },
-      "pl": {
-        "q": "Dlaczego niebezpieczne jest przechowywanie sekretów (haseł, kluczy API) w repozytorium Git?",
-        "exp": "Dane pozostają w historii Git na zawsze, nawet po usunięciu. Można je znaleźć przez przeszukiwanie historii lub w forkach repozytorium."
-      },
-      "answers": [
-        {
-          "uk": "Git не підтримує текстові дані",
-          "en": "Git doesn't support text data",
-          "pl": "Git nie obsługuje danych tekstowych",
-          "correct": false
-        },
-        {
-          "uk": "Секрети займають багато місця",
-          "en": "Secrets take up a lot of space",
-          "pl": "Sekrety zajmują dużo miejsca",
-          "correct": false
-        },
-        {
-          "uk": "Дані залишаються в історії назавжди і можуть бути знайдені",
-          "en": "Data remains in history forever and can be found",
-          "pl": "Dane pozostają w historii na zawsze i mogą zostać znalezione",
-          "correct": true
-        },
-        {
-          "uk": "Git автоматично публікує всі файли",
-          "en": "Git automatically publishes all files",
-          "pl": "Git automatycznie publikuje wszystkie pliki",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/html/advanced/html-advanced-quiz-part1.json b/json/quizzes/html/advanced/html-advanced-quiz-part1.json
deleted file mode 100644
index b1808166..00000000
--- a/json/quizzes/html/advanced/html-advanced-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "html-adv-q01",
-      "order": 1,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між елементами <canvas> та <svg>?",
-        "exp": "<canvas> — растрова графіка (пікселі), малюється через JavaScript API. <svg> — векторна графіка (математичні об'єкти), масштабується без втрати якості, можна стилізувати CSS."
-      },
-      "en": {
-        "q": "What is the difference between <canvas> and <svg> elements?",
-        "exp": "<canvas> is raster graphics (pixels), drawn via JavaScript API. <svg> is vector graphics (mathematical objects), scales without quality loss, can be styled with CSS."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między elementami <canvas> a <svg>?",
-        "exp": "<canvas> to grafika rastrowa (piksele), rysowana przez JavaScript API. <svg> to grafika wektorowa (obiekty matematyczne), skaluje się bez utraty jakości, można ją stylizować CSS."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає, обидва для векторної графіки",
-          "en": "No difference, both are for vector graphics",
-          "pl": "Nie ma różnicy, oba są dla grafiki wektorowej",
-          "correct": false
-        },
-        {
-          "uk": "<canvas> — растрова графіка через JS, <svg> — векторна з підтримкою CSS",
-          "en": "<canvas> is raster graphics via JS, <svg> is vector with CSS support",
-          "pl": "<canvas> to grafika rastrowa przez JS, <svg> to wektorowa z obsługą CSS",
-          "correct": true
-        },
-        {
-          "uk": "<svg> використовується тільки для анімацій",
-          "en": "<svg> is only used for animations",
-          "pl": "<svg> jest używany tylko do animacji",
-          "correct": false
-        },
-        {
-          "uk": "<canvas> краще масштабується без втрати якості",
-          "en": "<canvas> scales better without quality loss",
-          "pl": "<canvas> lepiej się skaluje bez utraty jakości",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q02",
-      "order": 2,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які способи додавання SVG на сторінку існують?",
-        "exp": "SVG можна додати: inline в HTML, через <img src>, як CSS background-image, через <object> або <embed>. Inline дає повний контроль CSS/JS, <img> кешується але без стилізації."
-      },
-      "en": {
-        "q": "What ways exist to add SVG to a page?",
-        "exp": "SVG can be added: inline in HTML, via <img src>, as CSS background-image, via <object> or <embed>. Inline gives full CSS/JS control, <img> is cached but without styling."
-      },
-      "pl": {
-        "q": "Jakie sposoby dodawania SVG na stronę istnieją?",
-        "exp": "SVG można dodać: inline w HTML, przez <img src>, jako CSS background-image, przez <object> lub <embed>. Inline daje pełną kontrolę CSS/JS, <img> jest cachowany ale bez stylizacji."
-      },
-      "answers": [
-        {
-          "uk": "Тільки через тег <img>",
-          "en": "Only via <img> tag",
-          "pl": "Tylko przez tag <img>",
-          "correct": false
-        },
-        {
-          "uk": "Inline, <img>, CSS background, <object>, <embed>",
-          "en": "Inline, <img>, CSS background, <object>, <embed>",
-          "pl": "Inline, <img>, CSS background, <object>, <embed>",
-          "correct": true
-        },
-        {
-          "uk": "Тільки inline або через JavaScript",
-          "en": "Only inline or via JavaScript",
-          "pl": "Tylko inline lub przez JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "SVG не підтримується сучасними браузерами",
-          "en": "SVG is not supported by modern browsers",
-          "pl": "SVG nie jest obsługiwany przez nowoczesne przeglądarki",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q03",
-      "order": 3,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як додати субтитри до відео в HTML?",
-        "exp": "Використовується тег <track> всередині <video> з атрибутами src (файл .vtt), kind (subtitles/captions), srclang (мова), label (назва в меню)."
-      },
-      "en": {
-        "q": "How do you add subtitles to video in HTML?",
-        "exp": "Use the <track> tag inside <video> with attributes src (.vtt file), kind (subtitles/captions), srclang (language), label (menu name)."
-      },
-      "pl": {
-        "q": "Jak dodać napisy do wideo w HTML?",
-        "exp": "Używa się tagu <track> wewnątrz <video> z atrybutami src (plik .vtt), kind (subtitles/captions), srclang (język), label (nazwa w menu)."
-      },
-      "answers": [
-        {
-          "uk": "Через атрибут subtitles у тегу <video>",
-          "en": "Via subtitles attribute in <video> tag",
-          "pl": "Przez atrybut subtitles w tagu <video>",
-          "correct": false
-        },
-        {
-          "uk": "Через тег <track> з файлом .vtt",
-          "en": "Via <track> tag with .vtt file",
-          "pl": "Przez tag <track> z plikiem .vtt",
-          "correct": true
-        },
-        {
-          "uk": "Субтитри неможливо додати в HTML",
-          "en": "Subtitles cannot be added in HTML",
-          "pl": "Napisy nie mogą być dodane w HTML",
-          "correct": false
-        },
-        {
-          "uk": "Тільки через JavaScript API",
-          "en": "Only via JavaScript API",
-          "pl": "Tylko przez JavaScript API",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q04",
-      "order": 4,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які атрибути має тег <video> для керування відтворенням?",
-        "exp": "Основні атрибути: controls (елементи керування), autoplay (автовідтворення), loop (повтор), muted (без звуку), preload (попереднє завантаження), poster (зображення-заставка)."
-      },
-      "en": {
-        "q": "What attributes does the <video> tag have for playback control?",
-        "exp": "Main attributes: controls (player controls), autoplay (auto-play), loop (repeat), muted (no sound), preload (preloading), poster (preview image)."
-      },
-      "pl": {
-        "q": "Jakie atrybuty ma tag <video> do kontroli odtwarzania?",
-        "exp": "Główne atrybuty: controls (elementy sterowania), autoplay (automatyczne odtwarzanie), loop (powtarzanie), muted (bez dźwięku), preload (wstępne ładowanie), poster (obraz podglądu)."
-      },
-      "answers": [
-        {
-          "uk": "Тільки src і width",
-          "en": "Only src and width",
-          "pl": "Tylko src i width",
-          "correct": false
-        },
-        {
-          "uk": "controls, autoplay, loop, muted, preload, poster",
-          "en": "controls, autoplay, loop, muted, preload, poster",
-          "pl": "controls, autoplay, loop, muted, preload, poster",
-          "correct": true
-        },
-        {
-          "uk": "play, pause, stop, volume",
-          "en": "play, pause, stop, volume",
-          "pl": "play, pause, stop, volume",
-          "correct": false
-        },
-        {
-          "uk": "Відео не має спеціальних атрибутів",
-          "en": "Video has no special attributes",
-          "pl": "Wideo nie ma specjalnych atrybutów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q05",
-      "order": 5,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як працює атрибут srcset для адаптивних зображень?",
-        "exp": "srcset надає браузеру список зображень різної роздільності. Браузер автоматично обирає оптимальний варіант залежно від розміру екрана та pixel density. Дескриптори: w (ширина) або x (density)."
-      },
-      "en": {
-        "q": "How does the srcset attribute work for responsive images?",
-        "exp": "srcset provides the browser with a list of images at different resolutions. The browser automatically selects the optimal one based on screen size and pixel density. Descriptors: w (width) or x (density)."
-      },
-      "pl": {
-        "q": "Jak działa atrybut srcset dla responsywnych obrazów?",
-        "exp": "srcset dostarcza przeglądarce listę obrazów o różnych rozdzielczościach. Przeglądarka automatycznie wybiera optymalny wariant w zależności od rozmiaru ekranu i gęstości pikseli. Deskryptory: w (szerokość) lub x (gęstość)."
-      },
-      "answers": [
-        {
-          "uk": "Змінює src залежно від часу доби",
-          "en": "Changes src depending on time of day",
-          "pl": "Zmienia src w zależności od pory dnia",
-          "correct": false
-        },
-        {
-          "uk": "Надає список зображень, з яких браузер обирає оптимальне для екрана",
-          "en": "Provides a list of images from which browser selects optimal for screen",
-          "pl": "Dostarcza listę obrazów, z których przeglądarka wybiera optymalny dla ekranu",
-          "correct": true
-        },
-        {
-          "uk": "Автоматично стискає зображення",
-          "en": "Automatically compresses images",
-          "pl": "Automatycznie kompresuje obrazy",
-          "correct": false
-        },
-        {
-          "uk": "Завантажує всі зображення одночасно",
-          "en": "Loads all images simultaneously",
-          "pl": "Ładuje wszystkie obrazy jednocześnie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q06",
-      "order": 6,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Для чого використовується елемент <picture>?",
-        "exp": "<picture> надає більше контролю над адаптивними зображеннями: дозволяє використовувати різні формати (WebP, AVIF) і показувати різні зображення на різних пристроях (art direction)."
-      },
-      "en": {
-        "q": "What is the <picture> element used for?",
-        "exp": "<picture> provides more control over responsive images: allows using different formats (WebP, AVIF) and showing different images on different devices (art direction)."
-      },
-      "pl": {
-        "q": "Do czego służy element <picture>?",
-        "exp": "<picture> daje większą kontrolę nad responsywnymi obrazami: pozwala używać różnych formatów (WebP, AVIF) i pokazywać różne obrazy na różnych urządzeniach (art direction)."
-      },
-      "answers": [
-        {
-          "uk": "Тільки для галерей зображень",
-          "en": "Only for image galleries",
-          "pl": "Tylko dla galerii obrazów",
-          "correct": false
-        },
-        {
-          "uk": "Для art direction та підтримки різних форматів зображень",
-          "en": "For art direction and supporting different image formats",
-          "pl": "Dla art direction i obsługi różnych formatów obrazów",
-          "correct": true
-        },
-        {
-          "uk": "Для створення фоторамок",
-          "en": "For creating photo frames",
-          "pl": "Do tworzenia ramek na zdjęcia",
-          "correct": false
-        },
-        {
-          "uk": "Замінює тег <img> повністю",
-          "en": "Completely replaces <img> tag",
-          "pl": "Całkowicie zastępuje tag <img>",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q07",
-      "order": 7,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке iframe і які його основні атрибути безпеки?",
-        "exp": "<iframe> вбудовує іншу HTML-сторінку. Атрибути безпеки: sandbox (обмежує можливості), referrerpolicy (контроль referrer), allow (дозволи для API). Рекомендовано для YouTube, карт, віджетів."
-      },
-      "en": {
-        "q": "What is iframe and what are its main security attributes?",
-        "exp": "<iframe> embeds another HTML page. Security attributes: sandbox (restricts capabilities), referrerpolicy (referrer control), allow (API permissions). Recommended for YouTube, maps, widgets."
-      },
-      "pl": {
-        "q": "Czym jest iframe i jakie są jego główne atrybuty bezpieczeństwa?",
-        "exp": "<iframe> osadza inną stronę HTML. Atrybuty bezpieczeństwa: sandbox (ogranicza możliwości), referrerpolicy (kontrola referrer), allow (uprawnienia API). Zalecany dla YouTube, map, widgetów."
-      },
-      "answers": [
-        {
-          "uk": "iframe не має атрибутів безпеки",
-          "en": "iframe has no security attributes",
-          "pl": "iframe nie ma atrybutów bezpieczeństwa",
-          "correct": false
-        },
-        {
-          "uk": "sandbox, referrerpolicy, allow",
-          "en": "sandbox, referrerpolicy, allow",
-          "pl": "sandbox, referrerpolicy, allow",
-          "correct": true
-        },
-        {
-          "uk": "Тільки src і width",
-          "en": "Only src and width",
-          "pl": "Tylko src i width",
-          "correct": false
-        },
-        {
-          "uk": "secure і protected",
-          "en": "secure and protected",
-          "pl": "secure i protected",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q08",
-      "order": 8,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між атрибутами async та defer для скриптів?",
-        "exp": "async — скрипт завантажується паралельно і виконується одразу після завантаження (порядок не гарантований). defer — завантажується паралельно, але виконується після парсингу HTML (порядок збережено)."
-      },
-      "en": {
-        "q": "What is the difference between async and defer attributes for scripts?",
-        "exp": "async — script loads in parallel and executes immediately after loading (order not guaranteed). defer — loads in parallel but executes after HTML parsing (order preserved)."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między atrybutami async a defer dla skryptów?",
-        "exp": "async — skrypt ładuje się równolegle i wykonuje natychmiast po załadowaniu (kolejność nie gwarantowana). defer — ładuje się równolegle, ale wykonuje po parsowaniu HTML (kolejność zachowana)."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        },
-        {
-          "uk": "async виконується одразу, defer — після парсингу HTML",
-          "en": "async executes immediately, defer — after HTML parsing",
-          "pl": "async wykonuje natychmiast, defer — po parsowaniu HTML",
-          "correct": true
-        },
-        {
-          "uk": "async тільки для зовнішніх скриптів",
-          "en": "async only for external scripts",
-          "pl": "async tylko dla zewnętrznych skryptów",
-          "correct": false
-        },
-        {
-          "uk": "defer застарів у HTML5",
-          "en": "defer is deprecated in HTML5",
-          "pl": "defer jest przestarzały w HTML5",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q09",
-      "order": 9,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як створити карту зображення (image map) в HTML?",
-        "exp": "Використовується <img usemap=\"#mapname\"> і <map name=\"mapname\"> з елементами <area>. Area має атрибути shape (rect, circle, poly), coords (координати), href (посилання)."
-      },
-      "en": {
-        "q": "How do you create an image map in HTML?",
-        "exp": "Use <img usemap=\"#mapname\"> and <map name=\"mapname\"> with <area> elements. Area has attributes shape (rect, circle, poly), coords (coordinates), href (link)."
-      },
-      "pl": {
-        "q": "Jak utworzyć mapę obrazu (image map) w HTML?",
-        "exp": "Używa się <img usemap=\"#mapname\"> i <map name=\"mapname\"> z elementami <area>. Area ma atrybuty shape (rect, circle, poly), coords (współrzędne), href (link)."
-      },
-      "answers": [
-        {
-          "uk": "Через CSS grid на зображенні",
-          "en": "Via CSS grid on image",
-          "pl": "Przez CSS grid na obrazie",
-          "correct": false
-        },
-        {
-          "uk": "<img usemap> + <map> з елементами <area>",
-          "en": "<img usemap> + <map> with <area> elements",
-          "pl": "<img usemap> + <map> z elementami <area>",
-          "correct": true
-        },
-        {
-          "uk": "Тільки через JavaScript",
-          "en": "Only via JavaScript",
-          "pl": "Tylko przez JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Image maps не підтримуються в HTML5",
-          "en": "Image maps are not supported in HTML5",
-          "pl": "Mapy obrazów nie są obsługiwane w HTML5",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q10",
-      "order": 10,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між елементами <meter> та <progress>?",
-        "exp": "<meter> — для виміряних значень у діапазоні (рівень батареї, рейтинг, заповнення диска). <progress> — для прогресу завдань (завантаження файлів, виконання процесів)."
-      },
-      "en": {
-        "q": "What is the difference between <meter> and <progress> elements?",
-        "exp": "<meter> is for measured values in a range (battery level, rating, disk usage). <progress> is for task progress (file uploads, process completion)."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między elementami <meter> a <progress>?",
-        "exp": "<meter> służy do mierzonych wartości w zakresie (poziom baterii, ocena, użycie dysku). <progress> służy do postępu zadań (przesyłanie plików, ukończenie procesów)."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає, це синоніми",
-          "en": "No difference, they are synonyms",
-          "pl": "Nie ma różnicy, to synonimy",
-          "correct": false
-        },
-        {
-          "uk": "<meter> для вимірів у діапазоні, <progress> для прогресу завдань",
-          "en": "<meter> for measurements in range, <progress> for task progress",
-          "pl": "<meter> dla pomiarów w zakresie, <progress> dla postępu zadań",
-          "correct": true
-        },
-        {
-          "uk": "<progress> застарів у HTML5",
-          "en": "<progress> is deprecated in HTML5",
-          "pl": "<progress> jest przestarzały w HTML5",
-          "correct": false
-        },
-        {
-          "uk": "<meter> тільки для числових значень",
-          "en": "<meter> only for numeric values",
-          "pl": "<meter> tylko dla wartości liczbowych",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/html/advanced/html-advanced-quiz-part2.json b/json/quizzes/html/advanced/html-advanced-quiz-part2.json
deleted file mode 100644
index 4b8a3722..00000000
--- a/json/quizzes/html/advanced/html-advanced-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "html-adv-q11",
-      "order": 11,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Яка різниця між localStorage та sessionStorage?",
-        "exp": "localStorage зберігає дані безстроково (до ручного видалення). sessionStorage — тільки в межах сесії браузера (закрив вкладку = дані зникають). Обидва працюють тільки з рядками."
-      },
-      "en": {
-        "q": "What is the difference between localStorage and sessionStorage?",
-        "exp": "localStorage stores data indefinitely (until manual deletion). sessionStorage — only within browser session (close tab = data gone). Both work only with strings."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między localStorage a sessionStorage?",
-        "exp": "localStorage przechowuje dane bezterminowo (do ręcznego usunięcia). sessionStorage — tylko w ramach sesji przeglądarki (zamknij kartę = dane znikają). Oba działają tylko z ciągami znaków."
-      },
-      "answers": [
-        {
-          "uk": "localStorage швидший за sessionStorage",
-          "en": "localStorage is faster than sessionStorage",
-          "pl": "localStorage jest szybszy niż sessionStorage",
-          "correct": false
-        },
-        {
-          "uk": "localStorage — безстроково, sessionStorage — тільки в межах сесії",
-          "en": "localStorage — indefinitely, sessionStorage — only within session",
-          "pl": "localStorage — bezterminowo, sessionStorage — tylko w ramach sesji",
-          "correct": true
-        },
-        {
-          "uk": "sessionStorage зберігає більше даних",
-          "en": "sessionStorage stores more data",
-          "pl": "sessionStorage przechowuje więcej danych",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q12",
-      "order": 12,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке Geolocation API і які його основні методи?",
-        "exp": "Geolocation API дозволяє отримати географічне положення користувача. Методи: getCurrentPosition() — поточна позиція, watchPosition() — відстеження змін, clearWatch() — зупинка відстеження."
-      },
-      "en": {
-        "q": "What is Geolocation API and what are its main methods?",
-        "exp": "Geolocation API allows getting user's geographic location. Methods: getCurrentPosition() — current position, watchPosition() — track changes, clearWatch() — stop tracking."
-      },
-      "pl": {
-        "q": "Czym jest Geolocation API i jakie są jego główne metody?",
-        "exp": "Geolocation API pozwala uzyskać położenie geograficzne użytkownika. Metody: getCurrentPosition() — bieżąca pozycja, watchPosition() — śledzenie zmian, clearWatch() — zatrzymanie śledzenia."
-      },
-      "answers": [
-        {
-          "uk": "getLocation(), setLocation(), removeLocation()",
-          "en": "getLocation(), setLocation(), removeLocation()",
-          "pl": "getLocation(), setLocation(), removeLocation()",
-          "correct": false
-        },
-        {
-          "uk": "getCurrentPosition(), watchPosition(), clearWatch()",
-          "en": "getCurrentPosition(), watchPosition(), clearWatch()",
-          "pl": "getCurrentPosition(), watchPosition(), clearWatch()",
-          "correct": true
-        },
-        {
-          "uk": "findPosition(), trackPosition(), stopTracking()",
-          "en": "findPosition(), trackPosition(), stopTracking()",
-          "pl": "findPosition(), trackPosition(), stopTracking()",
-          "correct": false
-        },
-        {
-          "uk": "Geolocation API не має методів",
-          "en": "Geolocation API has no methods",
-          "pl": "Geolocation API nie ma metod",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q13",
-      "order": 13,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як працює Drag and Drop API в HTML5?",
-        "exp": "Елемент отримує атрибут draggable=\"true\". Ключові події: dragstart (початок), dragover (над зоною), drop (скидання), dragend (завершення). Дані передаються через event.dataTransfer."
-      },
-      "en": {
-        "q": "How does Drag and Drop API work in HTML5?",
-        "exp": "Element gets draggable=\"true\" attribute. Key events: dragstart (start), dragover (over zone), drop (drop), dragend (finish). Data transferred via event.dataTransfer."
-      },
-      "pl": {
-        "q": "Jak działa Drag and Drop API w HTML5?",
-        "exp": "Element otrzymuje atrybut draggable=\"true\". Kluczowe zdarzenia: dragstart (początek), dragover (nad strefą), drop (upuszczenie), dragend (koniec). Dane przekazywane przez event.dataTransfer."
-      },
-      "answers": [
-        {
-          "uk": "Тільки через CSS властивості",
-          "en": "Only via CSS properties",
-          "pl": "Tylko przez właściwości CSS",
-          "correct": false
-        },
-        {
-          "uk": "draggable=\"true\" + події dragstart, dragover, drop, dragend",
-          "en": "draggable=\"true\" + events dragstart, dragover, drop, dragend",
-          "pl": "draggable=\"true\" + zdarzenia dragstart, dragover, drop, dragend",
-          "correct": true
-        },
-        {
-          "uk": "Через атрибут movable",
-          "en": "Via movable attribute",
-          "pl": "Przez atrybut movable",
-          "correct": false
-        },
-        {
-          "uk": "Drag and Drop не підтримується в HTML5",
-          "en": "Drag and Drop is not supported in HTML5",
-          "pl": "Drag and Drop nie jest obsługiwany w HTML5",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q14",
-      "order": 14,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке атрибут tabindex і як він впливає на навігацію?",
-        "exp": "tabindex визначає порядок фокусування при Tab. tabindex=\"0\" — природний порядок, tabindex=\"-1\" — недоступний через Tab але можна сфокусувати JS, позитивні значення визначають порядок."
-      },
-      "en": {
-        "q": "What is the tabindex attribute and how does it affect navigation?",
-        "exp": "tabindex determines focus order when pressing Tab. tabindex=\"0\" — natural order, tabindex=\"-1\" — not accessible via Tab but can be focused with JS, positive values define order."
-      },
-      "pl": {
-        "q": "Czym jest atrybut tabindex i jak wpływa na nawigację?",
-        "exp": "tabindex określa kolejność fokusowania przy Tab. tabindex=\"0\" — naturalny porządek, tabindex=\"-1\" — niedostępny przez Tab ale można fokusować JS, dodatnie wartości definiują kolejność."
-      },
-      "answers": [
-        {
-          "uk": "tabindex визначає індекс таблиці",
-          "en": "tabindex defines table index",
-          "pl": "tabindex definiuje indeks tabeli",
-          "correct": false
-        },
-        {
-          "uk": "tabindex=\"0\" — природний порядок, tabindex=\"-1\" — тільки програмний фокус",
-          "en": "tabindex=\"0\" — natural order, tabindex=\"-1\" — programmatic focus only",
-          "pl": "tabindex=\"0\" — naturalny porządek, tabindex=\"-1\" — tylko programowy fokus",
-          "correct": true
-        },
-        {
-          "uk": "tabindex працює тільки з посиланнями",
-          "en": "tabindex only works with links",
-          "pl": "tabindex działa tylko z linkami",
-          "correct": false
-        },
-        {
-          "uk": "tabindex застарів у HTML5",
-          "en": "tabindex is deprecated in HTML5",
-          "pl": "tabindex jest przestarzały w HTML5",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q15",
-      "order": 15,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Які основні ARIA-атрибути та для чого вони використовуються?",
-        "exp": "ARIA покращує доступність. role — визначає тип елемента, aria-label — опис для скрінрідерів, aria-labelledby/describedby — пов'язує з текстом, aria-hidden — ховає від асистивних технологій."
-      },
-      "en": {
-        "q": "What are the main ARIA attributes and what are they used for?",
-        "exp": "ARIA improves accessibility. role — defines element type, aria-label — description for screen readers, aria-labelledby/describedby — links to text, aria-hidden — hides from assistive tech."
-      },
-      "pl": {
-        "q": "Jakie są główne atrybuty ARIA i do czego służą?",
-        "exp": "ARIA poprawia dostępność. role — określa typ elementu, aria-label — opis dla czytników ekranu, aria-labelledby/describedby — łączy z tekstem, aria-hidden — ukrywa przed technologiami asystującymi."
-      },
-      "answers": [
-        {
-          "uk": "ARIA використовується тільки для стилізації",
-          "en": "ARIA is only used for styling",
-          "pl": "ARIA jest używane tylko do stylizacji",
-          "correct": false
-        },
-        {
-          "uk": "role, aria-label, aria-labelledby, aria-describedby, aria-hidden",
-          "en": "role, aria-label, aria-labelledby, aria-describedby, aria-hidden",
-          "pl": "role, aria-label, aria-labelledby, aria-describedby, aria-hidden",
-          "correct": true
-        },
-        {
-          "uk": "ARIA замінює семантичний HTML",
-          "en": "ARIA replaces semantic HTML",
-          "pl": "ARIA zastępuje semantyczny HTML",
-          "correct": false
-        },
-        {
-          "uk": "ARIA-атрибути не підтримуються браузерами",
-          "en": "ARIA attributes are not supported by browsers",
-          "pl": "Atrybuty ARIA nie są obsługiwane przez przeglądarki",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q16",
-      "order": 16,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як зробити таблицю доступною для скрінрідерів?",
-        "exp": "Використовувати <caption> для опису, scope=\"col\"/\"row\" у <th>, семантичні теги thead/tbody/tfoot. Уникати зайвого colspan/rowspan, забезпечити контраст та фокуси."
-      },
-      "en": {
-        "q": "How do you make a table accessible for screen readers?",
-        "exp": "Use <caption> for description, scope=\"col\"/\"row\" in <th>, semantic tags thead/tbody/tfoot. Avoid excessive colspan/rowspan, ensure contrast and focus states."
-      },
-      "pl": {
-        "q": "Jak uczynić tabelę dostępną dla czytników ekranu?",
-        "exp": "Używaj <caption> dla opisu, scope=\"col\"/\"row\" w <th>, semantyczne tagi thead/tbody/tfoot. Unikaj nadmiernego colspan/rowspan, zapewnij kontrast i stany fokusa."
-      },
-      "answers": [
-        {
-          "uk": "Таблиці завжди доступні автоматично",
-          "en": "Tables are always accessible automatically",
-          "pl": "Tabele są zawsze dostępne automatycznie",
-          "correct": false
-        },
-        {
-          "uk": "<caption>, scope у <th>, семантичні теги thead/tbody/tfoot",
-          "en": "<caption>, scope in <th>, semantic tags thead/tbody/tfoot",
-          "pl": "<caption>, scope w <th>, semantyczne tagi thead/tbody/tfoot",
-          "correct": true
-        },
-        {
-          "uk": "Додати aria-table до кожної комірки",
-          "en": "Add aria-table to every cell",
-          "pl": "Dodaj aria-table do każdej komórki",
-          "correct": false
-        },
-        {
-          "uk": "Використовувати div замість table",
-          "en": "Use div instead of table",
-          "pl": "Używaj div zamiast table",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q17",
-      "order": 17,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке атрибути colspan і rowspan у таблицях?",
-        "exp": "colspan об'єднує комірку по кількох стовпцях (горизонтально). rowspan об'єднує комірку по кількох рядках (вертикально). Значення вказує кількість об'єднаних комірок."
-      },
-      "en": {
-        "q": "What are colspan and rowspan attributes in tables?",
-        "exp": "colspan merges a cell across multiple columns (horizontally). rowspan merges a cell across multiple rows (vertically). Value specifies number of merged cells."
-      },
-      "pl": {
-        "q": "Czym są atrybuty colspan i rowspan w tabelach?",
-        "exp": "colspan łączy komórkę w wielu kolumnach (poziomo). rowspan łączy komórkę w wielu wierszach (pionowo). Wartość określa liczbę połączonych komórek."
-      },
-      "answers": [
-        {
-          "uk": "colspan — ширина стовпця, rowspan — висота рядка",
-          "en": "colspan — column width, rowspan — row height",
-          "pl": "colspan — szerokość kolumny, rowspan — wysokość wiersza",
-          "correct": false
-        },
-        {
-          "uk": "colspan — об'єднання по горизонталі, rowspan — по вертикалі",
-          "en": "colspan — merge horizontally, rowspan — vertically",
-          "pl": "colspan — łączenie poziome, rowspan — pionowe",
-          "correct": true
-        },
-        {
-          "uk": "Це застарілі атрибути HTML4",
-          "en": "These are deprecated HTML4 attributes",
-          "pl": "To przestarzałe atrybuty HTML4",
-          "correct": false
-        },
-        {
-          "uk": "colspan і rowspan — синоніми",
-          "en": "colspan and rowspan are synonyms",
-          "pl": "colspan i rowspan to synonimy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q18",
-      "order": 18,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке Server-Sent Events (SSE) і чим вони відрізняються від WebSocket?",
-        "exp": "SSE — односпрямована комунікація від сервера до клієнта через HTTP. WebSocket — двостороння комунікація. SSE простіше, автоматичне перепідключення, але тільки текстові дані."
-      },
-      "en": {
-        "q": "What are Server-Sent Events (SSE) and how do they differ from WebSocket?",
-        "exp": "SSE is one-way communication from server to client via HTTP. WebSocket is bidirectional. SSE is simpler, has auto-reconnect, but only text data."
-      },
-      "pl": {
-        "q": "Czym są Server-Sent Events (SSE) i czym różnią się od WebSocket?",
-        "exp": "SSE to jednokierunkowa komunikacja od serwera do klienta przez HTTP. WebSocket to komunikacja dwukierunkowa. SSE jest prostsze, ma auto-reconnect, ale tylko dane tekstowe."
-      },
-      "answers": [
-        {
-          "uk": "SSE і WebSocket — це одне й те саме",
-          "en": "SSE and WebSocket are the same thing",
-          "pl": "SSE i WebSocket to to samo",
-          "correct": false
-        },
-        {
-          "uk": "SSE — односпрямований від сервера, WebSocket — двосторонній",
-          "en": "SSE — one-way from server, WebSocket — bidirectional",
-          "pl": "SSE — jednokierunkowy od serwera, WebSocket — dwukierunkowy",
-          "correct": true
-        },
-        {
-          "uk": "WebSocket застарів, SSE замінив його",
-          "en": "WebSocket is deprecated, SSE replaced it",
-          "pl": "WebSocket jest przestarzały, SSE go zastąpił",
-          "correct": false
-        },
-        {
-          "uk": "SSE швидший за WebSocket",
-          "en": "SSE is faster than WebSocket",
-          "pl": "SSE jest szybszy niż WebSocket",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q19",
-      "order": 19,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Fullscreen API і як його використовувати?",
-        "exp": "Fullscreen API дозволяє елементу переходити в повноекранний режим. Методи: element.requestFullscreen() — увійти, document.exitFullscreen() — вийти. Подія fullscreenchange відстежує зміни."
-      },
-      "en": {
-        "q": "What is Fullscreen API and how do you use it?",
-        "exp": "Fullscreen API allows an element to enter fullscreen mode. Methods: element.requestFullscreen() — enter, document.exitFullscreen() — exit. Event fullscreenchange tracks changes."
-      },
-      "pl": {
-        "q": "Czym jest Fullscreen API i jak go używać?",
-        "exp": "Fullscreen API pozwala elementowi wejść w tryb pełnoekranowy. Metody: element.requestFullscreen() — wejście, document.exitFullscreen() — wyjście. Zdarzenie fullscreenchange śledzi zmiany."
-      },
-      "answers": [
-        {
-          "uk": "Fullscreen API не існує в браузерах",
-          "en": "Fullscreen API doesn't exist in browsers",
-          "pl": "Fullscreen API nie istnieje w przeglądarkach",
-          "correct": false
-        },
-        {
-          "uk": "requestFullscreen() для входу, exitFullscreen() для виходу",
-          "en": "requestFullscreen() to enter, exitFullscreen() to exit",
-          "pl": "requestFullscreen() do wejścia, exitFullscreen() do wyjścia",
-          "correct": true
-        },
-        {
-          "uk": "Через CSS властивість fullscreen: true",
-          "en": "Via CSS property fullscreen: true",
-          "pl": "Przez właściwość CSS fullscreen: true",
-          "correct": false
-        },
-        {
-          "uk": "Тільки для відео елементів",
-          "en": "Only for video elements",
-          "pl": "Tylko dla elementów wideo",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q20",
-      "order": 20,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як приховати елемент без CSS і JavaScript?",
-        "exp": "Використати атрибут hidden — це булевий атрибут, який повністю видаляє елемент з візуального потоку. Еквівалент CSS display: none. Можна змінювати через element.hidden = true/false."
-      },
-      "en": {
-        "q": "How do you hide an element without CSS and JavaScript?",
-        "exp": "Use the hidden attribute — a boolean attribute that completely removes element from visual flow. Equivalent to CSS display: none. Can be changed via element.hidden = true/false."
-      },
-      "pl": {
-        "q": "Jak ukryć element bez CSS i JavaScript?",
-        "exp": "Użyj atrybutu hidden — to atrybut logiczny, który całkowicie usuwa element z przepływu wizualnego. Odpowiednik CSS display: none. Można zmieniać przez element.hidden = true/false."
-      },
-      "answers": [
-        {
-          "uk": "Неможливо приховати без CSS або JS",
-          "en": "Impossible to hide without CSS or JS",
-          "pl": "Niemożliwe do ukrycia bez CSS lub JS",
-          "correct": false
-        },
-        {
-          "uk": "Атрибут hidden",
-          "en": "hidden attribute",
-          "pl": "Atrybut hidden",
-          "correct": true
-        },
-        {
-          "uk": "Атрибут invisible",
-          "en": "invisible attribute",
-          "pl": "Atrybut invisible",
-          "correct": false
-        },
-        {
-          "uk": "Атрибут display=\"none\"",
-          "en": "display=\"none\" attribute",
-          "pl": "Atrybut display=\"none\"",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/html/advanced/html-advanced-quiz-part3.json b/json/quizzes/html/advanced/html-advanced-quiz-part3.json
deleted file mode 100644
index a9009a1a..00000000
--- a/json/quizzes/html/advanced/html-advanced-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "html-adv-q21",
-      "order": 21,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке Web Components і з яких частин вони складаються?",
-        "exp": "Web Components — нативна технологія для створення повторно використовуваних UI-компонентів. Складаються з: Custom Elements (власні теги), Shadow DOM (ізоляція стилів), HTML Templates (заготовки розмітки)."
-      },
-      "en": {
-        "q": "What are Web Components and what parts do they consist of?",
-        "exp": "Web Components is a native technology for creating reusable UI components. Consists of: Custom Elements (custom tags), Shadow DOM (style isolation), HTML Templates (markup templates)."
-      },
-      "pl": {
-        "q": "Czym są Web Components i z jakich części się składają?",
-        "exp": "Web Components to natywna technologia do tworzenia wielokrotnie używalnych komponentów UI. Składa się z: Custom Elements (własne tagi), Shadow DOM (izolacja stylów), HTML Templates (szablony znaczników)."
-      },
-      "answers": [
-        {
-          "uk": "Web Components працюють тільки з React",
-          "en": "Web Components only work with React",
-          "pl": "Web Components działają tylko z React",
-          "correct": false
-        },
-        {
-          "uk": "Custom Elements, Shadow DOM, HTML Templates",
-          "en": "Custom Elements, Shadow DOM, HTML Templates",
-          "pl": "Custom Elements, Shadow DOM, HTML Templates",
-          "correct": true
-        },
-        {
-          "uk": "Modules, Classes, Functions",
-          "en": "Modules, Classes, Functions",
-          "pl": "Modules, Classes, Functions",
-          "correct": false
-        },
-        {
-          "uk": "Web Components застаріли в HTML5",
-          "en": "Web Components are deprecated in HTML5",
-          "pl": "Web Components są przestarzałe w HTML5",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q22",
-      "order": 22,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке Shadow DOM і для чого він використовується?",
-        "exp": "Shadow DOM — механізм інкапсуляції DOM і стилів. Приховує внутрішню реалізацію компонента, запобігає конфліктам CSS. Створюється через attachShadow({mode: 'open'|'closed'})."
-      },
-      "en": {
-        "q": "What is Shadow DOM and what is it used for?",
-        "exp": "Shadow DOM is a mechanism for encapsulating DOM and styles. Hides component's internal implementation, prevents CSS conflicts. Created via attachShadow({mode: 'open'|'closed'})."
-      },
-      "pl": {
-        "q": "Czym jest Shadow DOM i do czego służy?",
-        "exp": "Shadow DOM to mechanizm enkapsulacji DOM i stylów. Ukrywa wewnętrzną implementację komponentu, zapobiega konfliktom CSS. Tworzony przez attachShadow({mode: 'open'|'closed'})."
-      },
-      "answers": [
-        {
-          "uk": "Shadow DOM — це темна тема для сайту",
-          "en": "Shadow DOM is a dark theme for website",
-          "pl": "Shadow DOM to ciemny motyw dla strony",
-          "correct": false
-        },
-        {
-          "uk": "Механізм інкапсуляції DOM і стилів для ізоляції компонентів",
-          "en": "Mechanism for encapsulating DOM and styles to isolate components",
-          "pl": "Mechanizm enkapsulacji DOM i stylów do izolacji komponentów",
-          "correct": true
-        },
-        {
-          "uk": "Shadow DOM — це віртуальний DOM",
-          "en": "Shadow DOM is virtual DOM",
-          "pl": "Shadow DOM to wirtualny DOM",
-          "correct": false
-        },
-        {
-          "uk": "Shadow DOM працює тільки у Firefox",
-          "en": "Shadow DOM only works in Firefox",
-          "pl": "Shadow DOM działa tylko w Firefox",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q23",
-      "order": 23,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як створити Custom Element (власний HTML-елемент)?",
-        "exp": "Створити клас що наслідує HTMLElement, реалізувати lifecycle методи (connectedCallback, disconnectedCallback, attributeChangedCallback), зареєструвати через customElements.define('my-tag', MyClass)."
-      },
-      "en": {
-        "q": "How do you create a Custom Element?",
-        "exp": "Create a class extending HTMLElement, implement lifecycle methods (connectedCallback, disconnectedCallback, attributeChangedCallback), register via customElements.define('my-tag', MyClass)."
-      },
-      "pl": {
-        "q": "Jak utworzyć Custom Element (własny element HTML)?",
-        "exp": "Utwórz klasę dziedziczącą HTMLElement, zaimplementuj metody lifecycle (connectedCallback, disconnectedCallback, attributeChangedCallback), zarejestruj przez customElements.define('my-tag', MyClass)."
-      },
-      "answers": [
-        {
-          "uk": "Через атрибут custom у звичайних тегах",
-          "en": "Via custom attribute in regular tags",
-          "pl": "Przez atrybut custom w zwykłych tagach",
-          "correct": false
-        },
-        {
-          "uk": "Клас extends HTMLElement + customElements.define()",
-          "en": "Class extends HTMLElement + customElements.define()",
-          "pl": "Klasa extends HTMLElement + customElements.define()",
-          "correct": true
-        },
-        {
-          "uk": "Тільки через React або Vue",
-          "en": "Only via React or Vue",
-          "pl": "Tylko przez React lub Vue",
-          "correct": false
-        },
-        {
-          "uk": "Custom Elements не підтримуються браузерами",
-          "en": "Custom Elements are not supported by browsers",
-          "pl": "Custom Elements nie są obsługiwane przez przeglądarki",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q24",
-      "order": 24,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовується тег <template>?",
-        "exp": "<template> визначає розмітку, яка не відображається до програмного клонування. Вміст не рендериться при завантаженні. Клонується через template.content.cloneNode(true)."
-      },
-      "en": {
-        "q": "What is the <template> tag used for?",
-        "exp": "<template> defines markup that is not displayed until programmatically cloned. Content is not rendered on load. Cloned via template.content.cloneNode(true)."
-      },
-      "pl": {
-        "q": "Do czego służy tag <template>?",
-        "exp": "<template> definiuje znaczniki, które nie są wyświetlane do programowego sklonowania. Zawartość nie jest renderowana przy ładowaniu. Klonowane przez template.content.cloneNode(true)."
-      },
-      "answers": [
-        {
-          "uk": "<template> відображає шаблон на сторінці",
-          "en": "<template> displays a template on page",
-          "pl": "<template> wyświetla szablon na stronie",
-          "correct": false
-        },
-        {
-          "uk": "Невидима розмітка для програмного клонування",
-          "en": "Invisible markup for programmatic cloning",
-          "pl": "Niewidoczne znaczniki do programowego klonowania",
-          "correct": true
-        },
-        {
-          "uk": "<template> — це застарілий тег",
-          "en": "<template> is a deprecated tag",
-          "pl": "<template> to przestarzały tag",
-          "correct": false
-        },
-        {
-          "uk": "Тільки для email шаблонів",
-          "en": "Only for email templates",
-          "pl": "Tylko dla szablonów email",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q25",
-      "order": 25,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке структуровані дані (Schema.org) і як вони впливають на SEO?",
-        "exp": "Структуровані дані — спеціальна розмітка (JSON-LD, microdata) що пояснює пошуковикам значення контенту. Дозволяє показувати rich snippets (рейтинг, ціна, FAQ). Покращує CTR у видачі."
-      },
-      "en": {
-        "q": "What are structured data (Schema.org) and how do they affect SEO?",
-        "exp": "Structured data is special markup (JSON-LD, microdata) explaining content meaning to search engines. Enables rich snippets (rating, price, FAQ). Improves CTR in search results."
-      },
-      "pl": {
-        "q": "Czym są dane strukturalne (Schema.org) i jak wpływają na SEO?",
-        "exp": "Dane strukturalne to specjalne znaczniki (JSON-LD, microdata) wyjaśniające wyszukiwarkom znaczenie treści. Umożliwiają rich snippets (ocena, cena, FAQ). Poprawiają CTR w wynikach wyszukiwania."
-      },
-      "answers": [
-        {
-          "uk": "Структуровані дані не впливають на SEO",
-          "en": "Structured data don't affect SEO",
-          "pl": "Dane strukturalne nie wpływają na SEO",
-          "correct": false
-        },
-        {
-          "uk": "Розмітка для пошуковиків, що дозволяє rich snippets та покращує CTR",
-          "en": "Markup for search engines enabling rich snippets and improving CTR",
-          "pl": "Znaczniki dla wyszukiwarek umożliwiające rich snippets i poprawiające CTR",
-          "correct": true
-        },
-        {
-          "uk": "Структуровані дані — це CSS стилі",
-          "en": "Structured data is CSS styles",
-          "pl": "Dane strukturalne to style CSS",
-          "correct": false
-        },
-        {
-          "uk": "Schema.org працює тільки з Google",
-          "en": "Schema.org only works with Google",
-          "pl": "Schema.org działa tylko z Google",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q26",
-      "order": 26,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яке значення мають заголовки h1-h6 для SEO?",
-        "exp": "<h1> — головний заголовок, рекомендовано один на сторінку для SEO (хоча HTML5 дозволяє кілька в межах секцій). <h2>-<h6> структурують контент ієрархічно. Використання ключових слів у заголовках покращує релевантність."
-      },
-      "en": {
-        "q": "What importance do h1-h6 headings have for SEO?",
-        "exp": "<h1> is the main heading, one per page is recommended for SEO (though HTML5 allows multiple within sections). <h2>-<h6> structure content hierarchically. Using keywords in headings improves relevance."
-      },
-      "pl": {
-        "q": "Jakie znaczenie mają nagłówki h1-h6 dla SEO?",
-        "exp": "<h1> to główny nagłówek, jeden na stronę jest zalecany dla SEO (choć HTML5 pozwala na wiele w sekcjach). <h2>-<h6> strukturyzują treść hierarchicznie. Używanie słów kluczowych w nagłówkach poprawia trafność."
-      },
-      "answers": [
-        {
-          "uk": "Заголовки не впливають на SEO",
-          "en": "Headings don't affect SEO",
-          "pl": "Nagłówki nie wpływają na SEO",
-          "correct": false
-        },
-        {
-          "uk": "h1 рекомендовано один на сторінку, ієрархія h2-h6 структурує контент",
-          "en": "h1 recommended one per page, h2-h6 hierarchy structures content",
-          "pl": "h1 zalecany jeden na stronę, hierarchia h2-h6 strukturyzuje treść",
-          "correct": true
-        },
-        {
-          "uk": "Кілька h1 — найкраща практика для SEO",
-          "en": "Multiple h1 is best practice for SEO",
-          "pl": "Wiele h1 to najlepsza praktyka dla SEO",
-          "correct": false
-        },
-        {
-          "uk": "Тільки h1 і h2 впливають на SEO",
-          "en": "Only h1 and h2 affect SEO",
-          "pl": "Tylko h1 i h2 wpływają na SEO",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке атрибут rel=\"nofollow\" і коли його використовувати?",
-        "exp": "rel=\"nofollow\" вказує пошуковикам не передавати \"link juice\" на цільову сторінку. Використовується для рекламних посилань, ненадійних сайтів, захисту від спаму в коментарях."
-      },
-      "en": {
-        "q": "What is rel=\"nofollow\" attribute and when to use it?",
-        "exp": "rel=\"nofollow\" tells search engines not to pass \"link juice\" to target page. Used for ad links, untrusted sites, protection from comment spam."
-      },
-      "pl": {
-        "q": "Czym jest atrybut rel=\"nofollow\" i kiedy go używać?",
-        "exp": "rel=\"nofollow\" informuje wyszukiwarki, aby nie przekazywać \"link juice\" na stronę docelową. Używane dla linków reklamowych, niezaufanych stron, ochrony przed spamem w komentarzach."
-      },
-      "answers": [
-        {
-          "uk": "rel=\"nofollow\" прискорює завантаження посилань",
-          "en": "rel=\"nofollow\" speeds up link loading",
-          "pl": "rel=\"nofollow\" przyspiesza ładowanie linków",
-          "correct": false
-        },
-        {
-          "uk": "Вказує пошуковикам не передавати рейтинг на цільову сторінку",
-          "en": "Tells search engines not to pass ranking to target page",
-          "pl": "Informuje wyszukiwarki, aby nie przekazywać rankingu na stronę docelową",
-          "correct": true
-        },
-        {
-          "uk": "rel=\"nofollow\" ховає посилання від користувачів",
-          "en": "rel=\"nofollow\" hides links from users",
-          "pl": "rel=\"nofollow\" ukrywa linki przed użytkownikami",
-          "correct": false
-        },
-        {
-          "uk": "Застарілий атрибут, не використовується",
-          "en": "Deprecated attribute, not used",
-          "pl": "Przestarzały atrybut, nieużywany",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q28",
-      "order": 28,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які способи покращення продуктивності HTML-сторінки ви знаєте?",
-        "exp": "Мінімізація HTML, gzip/brotli стиснення, lazy-loading зображень (loading=\"lazy\"), defer/async для скриптів, оптимізація DOM (менше елементів), Critical CSS inline, кешування."
-      },
-      "en": {
-        "q": "What ways to improve HTML page performance do you know?",
-        "exp": "Minify HTML, gzip/brotli compression, lazy-loading images (loading=\"lazy\"), defer/async for scripts, DOM optimization (fewer elements), Critical CSS inline, caching."
-      },
-      "pl": {
-        "q": "Jakie sposoby poprawy wydajności strony HTML znasz?",
-        "exp": "Minifikacja HTML, kompresja gzip/brotli, lazy-loading obrazów (loading=\"lazy\"), defer/async dla skryptów, optymalizacja DOM (mniej elementów), Critical CSS inline, cachowanie."
-      },
-      "answers": [
-        {
-          "uk": "Продуктивність залежить тільки від сервера",
-          "en": "Performance depends only on server",
-          "pl": "Wydajność zależy tylko od serwera",
-          "correct": false
-        },
-        {
-          "uk": "Мінімізація, стиснення, lazy-loading, defer/async, оптимізація DOM",
-          "en": "Minification, compression, lazy-loading, defer/async, DOM optimization",
-          "pl": "Minifikacja, kompresja, lazy-loading, defer/async, optymalizacja DOM",
-          "correct": true
-        },
-        {
-          "uk": "Тільки через CDN",
-          "en": "Only via CDN",
-          "pl": "Tylko przez CDN",
-          "correct": false
-        },
-        {
-          "uk": "Видалити всі зображення",
-          "en": "Remove all images",
-          "pl": "Usunąć wszystkie obrazy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q29",
-      "order": 29,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке атрибут loading=\"lazy\" для зображень?",
-        "exp": "loading=\"lazy\" відкладає завантаження зображень поки вони не потраплять у viewport. Покращує початкову швидкість завантаження сторінки. Нативна підтримка браузерами без JavaScript."
-      },
-      "en": {
-        "q": "What is the loading=\"lazy\" attribute for images?",
-        "exp": "loading=\"lazy\" defers image loading until they enter the viewport. Improves initial page load speed. Native browser support without JavaScript."
-      },
-      "pl": {
-        "q": "Czym jest atrybut loading=\"lazy\" dla obrazów?",
-        "exp": "loading=\"lazy\" opóźnia ładowanie obrazów dopóki nie znajdą się w viewport. Poprawia początkową szybkość ładowania strony. Natywna obsługa przeglądarek bez JavaScript."
-      },
-      "answers": [
-        {
-          "uk": "Сповільнює завантаження зображень",
-          "en": "Slows down image loading",
-          "pl": "Spowalnia ładowanie obrazów",
-          "correct": false
-        },
-        {
-          "uk": "Відкладає завантаження до появи у viewport",
-          "en": "Defers loading until appearing in viewport",
-          "pl": "Opóźnia ładowanie do pojawienia się w viewport",
-          "correct": true
-        },
-        {
-          "uk": "Завантажує зображення в низькій якості",
-          "en": "Loads images in low quality",
-          "pl": "Ładuje obrazy w niskiej jakości",
-          "correct": false
-        },
-        {
-          "uk": "Цей атрибут не існує",
-          "en": "This attribute doesn't exist",
-          "pl": "Ten atrybut nie istnieje",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q30",
-      "order": 30,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке категорії контенту в HTML5?",
-        "exp": "Категорії класифікують елементи за роллю: Flow content (більшість елементів), Sectioning (article, section), Heading (h1-h6), Phrasing (inline), Embedded (img, video), Interactive (button, input), Metadata (meta, link)."
-      },
-      "en": {
-        "q": "What are content categories in HTML5?",
-        "exp": "Categories classify elements by role: Flow content (most elements), Sectioning (article, section), Heading (h1-h6), Phrasing (inline), Embedded (img, video), Interactive (button, input), Metadata (meta, link)."
-      },
-      "pl": {
-        "q": "Czym są kategorie treści w HTML5?",
-        "exp": "Kategorie klasyfikują elementy według roli: Flow content (większość elementów), Sectioning (article, section), Heading (h1-h6), Phrasing (inline), Embedded (img, video), Interactive (button, input), Metadata (meta, link)."
-      },
-      "answers": [
-        {
-          "uk": "Категорії — це CSS класи",
-          "en": "Categories are CSS classes",
-          "pl": "Kategorie to klasy CSS",
-          "correct": false
-        },
-        {
-          "uk": "Flow, Sectioning, Heading, Phrasing, Embedded, Interactive, Metadata",
-          "en": "Flow, Sectioning, Heading, Phrasing, Embedded, Interactive, Metadata",
-          "pl": "Flow, Sectioning, Heading, Phrasing, Embedded, Interactive, Metadata",
-          "correct": true
-        },
-        {
-          "uk": "В HTML5 немає категорій контенту",
-          "en": "HTML5 has no content categories",
-          "pl": "HTML5 nie ma kategorii treści",
-          "correct": false
-        },
-        {
-          "uk": "Тільки Block і Inline",
-          "en": "Only Block and Inline",
-          "pl": "Tylko Block i Inline",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/html/advanced/html-advanced-quiz-part4.json b/json/quizzes/html/advanced/html-advanced-quiz-part4.json
deleted file mode 100644
index bca4a84a..00000000
--- a/json/quizzes/html/advanced/html-advanced-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "html-adv-q31",
-      "order": 31,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як підтримувати напрямок тексту RTL (справа наліво) в HTML?",
-        "exp": "Використовується атрибут dir=\"rtl\" для тексту справа наліво (арабська, іврит) і dir=\"ltr\" для зліва направо. Можна ставити на <html> або окремі елементи. Комбінувати з CSS для вирівнювання."
-      },
-      "en": {
-        "q": "How do you support RTL (right-to-left) text direction in HTML?",
-        "exp": "Use dir=\"rtl\" attribute for right-to-left text (Arabic, Hebrew) and dir=\"ltr\" for left-to-right. Can be set on <html> or individual elements. Combine with CSS for alignment."
-      },
-      "pl": {
-        "q": "Jak obsługiwać kierunek tekstu RTL (od prawej do lewej) w HTML?",
-        "exp": "Używa się atrybutu dir=\"rtl\" dla tekstu od prawej do lewej (arabski, hebrajski) i dir=\"ltr\" dla od lewej do prawej. Można ustawić na <html> lub poszczególnych elementach. Łączyć z CSS dla wyrównania."
-      },
-      "answers": [
-        {
-          "uk": "Тільки через CSS direction",
-          "en": "Only via CSS direction",
-          "pl": "Tylko przez CSS direction",
-          "correct": false
-        },
-        {
-          "uk": "Атрибут dir=\"rtl\" або dir=\"ltr\"",
-          "en": "dir=\"rtl\" or dir=\"ltr\" attribute",
-          "pl": "Atrybut dir=\"rtl\" lub dir=\"ltr\"",
-          "correct": true
-        },
-        {
-          "uk": "RTL не підтримується в HTML",
-          "en": "RTL is not supported in HTML",
-          "pl": "RTL nie jest obsługiwany w HTML",
-          "correct": false
-        },
-        {
-          "uk": "Через атрибут text-direction",
-          "en": "Via text-direction attribute",
-          "pl": "Przez atrybut text-direction",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q32",
-      "order": 32,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке атрибут inputmode і для чого він використовується?",
-        "exp": "inputmode вказує тип введення для віртуальної клавіатури на мобільних. Значення: text, numeric, decimal, tel, email, url, search. Не змінює валідацію, тільки вигляд клавіатури."
-      },
-      "en": {
-        "q": "What is the inputmode attribute and what is it used for?",
-        "exp": "inputmode specifies input type for virtual keyboard on mobile. Values: text, numeric, decimal, tel, email, url, search. Doesn't change validation, only keyboard appearance."
-      },
-      "pl": {
-        "q": "Czym jest atrybut inputmode i do czego służy?",
-        "exp": "inputmode określa typ wprowadzania dla wirtualnej klawiatury na urządzeniach mobilnych. Wartości: text, numeric, decimal, tel, email, url, search. Nie zmienia walidacji, tylko wygląd klawiatury."
-      },
-      "answers": [
-        {
-          "uk": "Визначає режим роботи форми",
-          "en": "Defines form operation mode",
-          "pl": "Określa tryb pracy formularza",
-          "correct": false
-        },
-        {
-          "uk": "Вказує тип віртуальної клавіатури на мобільних",
-          "en": "Specifies virtual keyboard type on mobile",
-          "pl": "Określa typ wirtualnej klawiatury na urządzeniach mobilnych",
-          "correct": true
-        },
-        {
-          "uk": "Валідує введені дані",
-          "en": "Validates entered data",
-          "pl": "Waliduje wprowadzone dane",
-          "correct": false
-        },
-        {
-          "uk": "inputmode застарів у HTML5",
-          "en": "inputmode is deprecated in HTML5",
-          "pl": "inputmode jest przestarzały w HTML5",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q33",
-      "order": 33,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке атрибут pattern у формах і як він працює?",
-        "exp": "pattern задає регулярний вираз для перевірки введеного значення. Браузер не дозволить відправити форму якщо значення не відповідає патерну. Атрибут title показує підказку."
-      },
-      "en": {
-        "q": "What is the pattern attribute in forms and how does it work?",
-        "exp": "pattern sets a regular expression to validate entered value. Browser won't submit form if value doesn't match pattern. title attribute shows hint."
-      },
-      "pl": {
-        "q": "Czym jest atrybut pattern w formularzach i jak działa?",
-        "exp": "pattern ustawia wyrażenie regularne do walidacji wprowadzonej wartości. Przeglądarka nie wyśle formularza jeśli wartość nie pasuje do wzorca. Atrybut title pokazuje podpowiedź."
-      },
-      "answers": [
-        {
-          "uk": "Задає візуальний стиль поля",
-          "en": "Sets visual style of field",
-          "pl": "Ustawia wizualny styl pola",
-          "correct": false
-        },
-        {
-          "uk": "Регулярний вираз для валідації значення",
-          "en": "Regular expression for value validation",
-          "pl": "Wyrażenie regularne do walidacji wartości",
-          "correct": true
-        },
-        {
-          "uk": "Визначає порядок полів форми",
-          "en": "Defines form fields order",
-          "pl": "Określa kolejność pól formularza",
-          "correct": false
-        },
-        {
-          "uk": "pattern працює тільки з JavaScript",
-          "en": "pattern only works with JavaScript",
-          "pl": "pattern działa tylko z JavaScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке атрибут enterkeyhint?",
-        "exp": "enterkeyhint дає браузеру підказку, що робити при натисканні Enter на віртуальній клавіатурі. Значення: enter, done, go, next, previous, search, send. Змінює вигляд кнопки Enter."
-      },
-      "en": {
-        "q": "What is the enterkeyhint attribute?",
-        "exp": "enterkeyhint gives browser a hint about what to do when pressing Enter on virtual keyboard. Values: enter, done, go, next, previous, search, send. Changes Enter button appearance."
-      },
-      "pl": {
-        "q": "Czym jest atrybut enterkeyhint?",
-        "exp": "enterkeyhint daje przeglądarce podpowiedź co robić po naciśnięciu Enter na wirtualnej klawiaturze. Wartości: enter, done, go, next, previous, search, send. Zmienia wygląd przycisku Enter."
-      },
-      "answers": [
-        {
-          "uk": "Визначає розмір шрифту клавіатури",
-          "en": "Defines keyboard font size",
-          "pl": "Określa rozmiar czcionki klawiatury",
-          "correct": false
-        },
-        {
-          "uk": "Підказка для вигляду кнопки Enter на віртуальній клавіатурі",
-          "en": "Hint for Enter button appearance on virtual keyboard",
-          "pl": "Podpowiedź dla wyglądu przycisku Enter na wirtualnej klawiaturze",
-          "correct": true
-        },
-        {
-          "uk": "Блокує клавішу Enter",
-          "en": "Blocks Enter key",
-          "pl": "Blokuje klawisz Enter",
-          "correct": false
-        },
-        {
-          "uk": "enterkeyhint не існує",
-          "en": "enterkeyhint doesn't exist",
-          "pl": "enterkeyhint nie istnieje",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q35",
-      "order": 35,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке атрибут capture для input type=\"file\"?",
-        "exp": "capture запускає камеру або мікрофон замість вибору файлу з пам'яті. Значення: camera (фото), user (фронтальна камера), environment (задня камера), microphone (звук). Корисно для мобільних."
-      },
-      "en": {
-        "q": "What is the capture attribute for input type=\"file\"?",
-        "exp": "capture launches camera or microphone instead of file picker. Values: camera (photo), user (front camera), environment (back camera), microphone (audio). Useful for mobile."
-      },
-      "pl": {
-        "q": "Czym jest atrybut capture dla input type=\"file\"?",
-        "exp": "capture uruchamia kamerę lub mikrofon zamiast wyboru pliku. Wartości: camera (zdjęcie), user (przednia kamera), environment (tylna kamera), microphone (dźwięk). Przydatny dla urządzeń mobilnych."
-      },
-      "answers": [
-        {
-          "uk": "Захоплює екран користувача",
-          "en": "Captures user's screen",
-          "pl": "Przechwytuje ekran użytkownika",
-          "correct": false
-        },
-        {
-          "uk": "Запускає камеру або мікрофон замість вибору файлу",
-          "en": "Launches camera or microphone instead of file picker",
-          "pl": "Uruchamia kamerę lub mikrofon zamiast wyboru pliku",
-          "correct": true
-        },
-        {
-          "uk": "Зберігає файл автоматично",
-          "en": "Saves file automatically",
-          "pl": "Zapisuje plik automatycznie",
-          "correct": false
-        },
-        {
-          "uk": "capture працює тільки на десктопі",
-          "en": "capture only works on desktop",
-          "pl": "capture działa tylko na komputerze",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q36",
-      "order": 36,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке атрибут decoding для зображень?",
-        "exp": "decoding визначає як браузер має обробляти зображення. sync — синхронно (блокує рендеринг), async — асинхронно (не блокує), auto — браузер вирішує сам. Покращує продуктивність."
-      },
-      "en": {
-        "q": "What is the decoding attribute for images?",
-        "exp": "decoding defines how browser should process image. sync — synchronously (blocks rendering), async — asynchronously (non-blocking), auto — browser decides. Improves performance."
-      },
-      "pl": {
-        "q": "Czym jest atrybut decoding dla obrazów?",
-        "exp": "decoding określa jak przeglądarka ma przetwarzać obraz. sync — synchronicznie (blokuje renderowanie), async — asynchronicznie (nie blokuje), auto — przeglądarka decyduje. Poprawia wydajność."
-      },
-      "answers": [
-        {
-          "uk": "Визначає формат декодування зображення",
-          "en": "Defines image decoding format",
-          "pl": "Określa format dekodowania obrazu",
-          "correct": false
-        },
-        {
-          "uk": "sync — блокує рендеринг, async — не блокує, auto — браузер вирішує",
-          "en": "sync — blocks rendering, async — non-blocking, auto — browser decides",
-          "pl": "sync — blokuje renderowanie, async — nie blokuje, auto — przeglądarka decyduje",
-          "correct": true
-        },
-        {
-          "uk": "decoding шифрує зображення",
-          "en": "decoding encrypts image",
-          "pl": "decoding szyfruje obraz",
-          "correct": false
-        },
-        {
-          "uk": "decoding застарів",
-          "en": "decoding is deprecated",
-          "pl": "decoding jest przestarzały",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q37",
-      "order": 37,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке властивість valueAsNumber у полях форм?",
-        "exp": "valueAsNumber повертає значення input як число (number), а не рядок. Доступна для input type=\"number\", \"range\" та дат. Якщо значення не число — повертає NaN. Зручно для розрахунків."
-      },
-      "en": {
-        "q": "What is the valueAsNumber property in form fields?",
-        "exp": "valueAsNumber returns input value as number, not string. Available for input type=\"number\", \"range\" and dates. If value isn't a number — returns NaN. Convenient for calculations."
-      },
-      "pl": {
-        "q": "Czym jest właściwość valueAsNumber w polach formularza?",
-        "exp": "valueAsNumber zwraca wartość input jako liczbę, nie ciąg znaków. Dostępna dla input type=\"number\", \"range\" i dat. Jeśli wartość nie jest liczbą — zwraca NaN. Wygodna do obliczeń."
-      },
-      "answers": [
-        {
-          "uk": "Конвертує текст у число автоматично при відправці",
-          "en": "Converts text to number automatically on submit",
-          "pl": "Konwertuje tekst na liczbę automatycznie przy wysyłaniu",
-          "correct": false
-        },
-        {
-          "uk": "Повертає значення input як число замість рядка",
-          "en": "Returns input value as number instead of string",
-          "pl": "Zwraca wartość input jako liczbę zamiast ciągu znaków",
-          "correct": true
-        },
-        {
-          "uk": "Встановлює мінімальне числове значення",
-          "en": "Sets minimum numeric value",
-          "pl": "Ustawia minimalną wartość liczbową",
-          "correct": false
-        },
-        {
-          "uk": "valueAsNumber не існує",
-          "en": "valueAsNumber doesn't exist",
-          "pl": "valueAsNumber nie istnieje",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q38",
-      "order": 38,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке теги <details> і <summary> та як їх використовувати?",
-        "exp": "<details> створює розкривний елемент, <summary> — його заголовок. Нативна підтримка без JavaScript. Атрибут open показує вміст за замовчуванням. Використовується для FAQ, акордеонів."
-      },
-      "en": {
-        "q": "What are <details> and <summary> tags and how to use them?",
-        "exp": "<details> creates a collapsible element, <summary> is its heading. Native support without JavaScript. open attribute shows content by default. Used for FAQ, accordions."
-      },
-      "pl": {
-        "q": "Czym są tagi <details> i <summary> i jak ich używać?",
-        "exp": "<details> tworzy rozwijalny element, <summary> to jego nagłówek. Natywna obsługa bez JavaScript. Atrybut open pokazuje zawartość domyślnie. Używane dla FAQ, akordeonów."
-      },
-      "answers": [
-        {
-          "uk": "<details> і <summary> потребують JavaScript",
-          "en": "<details> and <summary> require JavaScript",
-          "pl": "<details> i <summary> wymagają JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "<details> — розкривний елемент, <summary> — його заголовок, без JS",
-          "en": "<details> is collapsible element, <summary> is its heading, no JS needed",
-          "pl": "<details> to rozwijalny element, <summary> to jego nagłówek, bez JS",
-          "correct": true
-        },
-        {
-          "uk": "Це застарілі теги HTML4",
-          "en": "These are deprecated HTML4 tags",
-          "pl": "To przestarzałe tagi HTML4",
-          "correct": false
-        },
-        {
-          "uk": "<summary> використовується для підсумків таблиць",
-          "en": "<summary> is used for table summaries",
-          "pl": "<summary> jest używany dla podsumowań tabel",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q39",
-      "order": 39,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Які типи валідації HTML-документа існують?",
-        "exp": "Типи валідації: синтаксична (структура тегів), атрибутів (правильність використання), доступності (WCAG), SEO (мета-теги, заголовки), сумісності (крос-браузерність), продуктивності (швидкість)."
-      },
-      "en": {
-        "q": "What types of HTML document validation exist?",
-        "exp": "Validation types: syntactic (tag structure), attributes (correct usage), accessibility (WCAG), SEO (meta tags, headings), compatibility (cross-browser), performance (speed)."
-      },
-      "pl": {
-        "q": "Jakie typy walidacji dokumentu HTML istnieją?",
-        "exp": "Typy walidacji: składniowa (struktura tagów), atrybutów (poprawne użycie), dostępności (WCAG), SEO (meta tagi, nagłówki), zgodności (cross-browser), wydajności (szybkość)."
-      },
-      "answers": [
-        {
-          "uk": "Тільки синтаксична валідація",
-          "en": "Only syntactic validation",
-          "pl": "Tylko walidacja składniowa",
-          "correct": false
-        },
-        {
-          "uk": "Синтаксична, атрибутів, доступності, SEO, сумісності, продуктивності",
-          "en": "Syntactic, attributes, accessibility, SEO, compatibility, performance",
-          "pl": "Składniowa, atrybutów, dostępności, SEO, zgodności, wydajności",
-          "correct": true
-        },
-        {
-          "uk": "Валідація не потрібна для HTML5",
-          "en": "Validation is not needed for HTML5",
-          "pl": "Walidacja nie jest potrzebna dla HTML5",
-          "correct": false
-        },
-        {
-          "uk": "Тільки W3C валідація",
-          "en": "Only W3C validation",
-          "pl": "Tylko walidacja W3C",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-adv-q40",
-      "order": 40,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що замінило застарілий ApplicationCache для офлайн-функціональності?",
-        "exp": "ApplicationCache замінено на Service Workers — потужніший API для офлайн-функціональності. Дозволяє кешувати ресурси, перехоплювати мережеві запити, працювати у фоні. Використовується з Cache API."
-      },
-      "en": {
-        "q": "What replaced deprecated ApplicationCache for offline functionality?",
-        "exp": "ApplicationCache was replaced by Service Workers — more powerful API for offline functionality. Allows caching resources, intercepting network requests, working in background. Used with Cache API."
-      },
-      "pl": {
-        "q": "Co zastąpiło przestarzały ApplicationCache dla funkcjonalności offline?",
-        "exp": "ApplicationCache został zastąpiony przez Service Workers — potężniejsze API dla funkcjonalności offline. Pozwala cachować zasoby, przechwytywać żądania sieciowe, pracować w tle. Używany z Cache API."
-      },
-      "answers": [
-        {
-          "uk": "LocalStorage",
-          "en": "LocalStorage",
-          "pl": "LocalStorage",
-          "correct": false
-        },
-        {
-          "uk": "Service Workers з Cache API",
-          "en": "Service Workers with Cache API",
-          "pl": "Service Workers z Cache API",
-          "correct": true
-        },
-        {
-          "uk": "IndexedDB",
-          "en": "IndexedDB",
-          "pl": "IndexedDB",
-          "correct": false
-        },
-        {
-          "uk": "ApplicationCache все ще використовується",
-          "en": "ApplicationCache is still used",
-          "pl": "ApplicationCache jest nadal używany",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/html/fundamentals/html-quiz-part1.json b/json/quizzes/html/fundamentals/html-quiz-part1.json
deleted file mode 100644
index ab3907be..00000000
--- a/json/quizzes/html/fundamentals/html-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "html-q01",
-      "order": 1,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що означає абревіатура HTML?",
-        "exp": "HTML — HyperText Markup Language (мова гіпертекстової розмітки) для структурування вмісту вебсторінок."
-      },
-      "en": {
-        "q": "What does the abbreviation HTML stand for?",
-        "exp": "HTML stands for HyperText Markup Language, used for structuring web page content."
-      },
-      "pl": {
-        "q": "Co oznacza skrót HTML?",
-        "exp": "HTML to HyperText Markup Language (hipertekstowy język znaczników) do strukturyzowania treści stron internetowych."
-      },
-      "answers": [
-        {
-          "uk": "High Tech Modern Language",
-          "en": "High Tech Modern Language",
-          "pl": "High Tech Modern Language",
-          "correct": false
-        },
-        {
-          "uk": "HyperText Markup Language",
-          "en": "HyperText Markup Language",
-          "pl": "HyperText Markup Language",
-          "correct": true
-        },
-        {
-          "uk": "Home Tool Markup Language",
-          "en": "Home Tool Markup Language",
-          "pl": "Home Tool Markup Language",
-          "correct": false
-        },
-        {
-          "uk": "Hyper Transfer Markup Language",
-          "en": "Hyper Transfer Markup Language",
-          "pl": "Hyper Transfer Markup Language",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q02",
-      "order": 2,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка роль HTML у веб-розробці порівняно з CSS та JavaScript?",
-        "exp": "HTML описує структуру сторінки (що є), CSS — оформлення (як виглядає), JavaScript — динаміку та інтерактивність (що робить)."
-      },
-      "en": {
-        "q": "What is the role of HTML in web development compared to CSS and JavaScript?",
-        "exp": "HTML describes page structure (what exists), CSS handles styling (how it looks), JavaScript adds dynamics and interactivity (what it does)."
-      },
-      "pl": {
-        "q": "Jaka jest rola HTML w tworzeniu stron internetowych w porównaniu z CSS i JavaScript?",
-        "exp": "HTML opisuje strukturę strony (co jest), CSS odpowiada za styl (jak wygląda), JavaScript dodaje dynamikę i interaktywność (co robi)."
-      },
-      "answers": [
-        {
-          "uk": "HTML відповідає за анімації на сторінці",
-          "en": "HTML is responsible for animations on the page",
-          "pl": "HTML odpowiada za animacje na stronie",
-          "correct": false
-        },
-        {
-          "uk": "HTML описує структуру, CSS — стилі, JavaScript — інтерактивність",
-          "en": "HTML describes structure, CSS handles styles, JavaScript handles interactivity",
-          "pl": "HTML opisuje strukturę, CSS obsługuje style, JavaScript obsługuje interaktywność",
-          "correct": true
-        },
-        {
-          "uk": "HTML і CSS виконують однакову роль",
-          "en": "HTML and CSS perform the same role",
-          "pl": "HTML i CSS pełnią tę samą rolę",
-          "correct": false
-        },
-        {
-          "uk": "HTML використовується тільки для серверної логіки",
-          "en": "HTML is only used for server-side logic",
-          "pl": "HTML jest używany tylko do logiki serwerowej",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q03",
-      "order": 3,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке HTML тег?",
-        "exp": "HTML тег — це інструкція у кутових дужках < >, яка визначає структуру та зміст веб-сторінки. Більшість тегів мають відкриваючу та закриваючу частини."
-      },
-      "en": {
-        "q": "What is an HTML tag?",
-        "exp": "An HTML tag is an instruction in angle brackets < > that defines the structure and content of a web page. Most tags have opening and closing parts."
-      },
-      "pl": {
-        "q": "Czym jest tag HTML?",
-        "exp": "Tag HTML to instrukcja w nawiasach kątowych < >, która określa strukturę i zawartość strony internetowej. Większość tagów ma część otwierającą i zamykającą."
-      },
-      "answers": [
-        {
-          "uk": "Інструкція у кутових дужках для визначення структури сторінки",
-          "en": "An instruction in angle brackets for defining page structure",
-          "pl": "Instrukcja w nawiasach kątowych do określania struktury strony",
-          "correct": true
-        },
-        {
-          "uk": "Спеціальний файл для зберігання стилів",
-          "en": "A special file for storing styles",
-          "pl": "Specjalny plik do przechowywania stylów",
-          "correct": false
-        },
-        {
-          "uk": "Програма для обробки даних на сервері",
-          "en": "A program for processing data on the server",
-          "pl": "Program do przetwarzania danych na serwerze",
-          "correct": false
-        },
-        {
-          "uk": "Посилання на зовнішній ресурс",
-          "en": "A link to an external resource",
-          "pl": "Odnośnik do zewnętrznego zasobu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q04",
-      "order": 4,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке DOCTYPE і навіщо його використовують?",
-        "exp": "DOCTYPE — декларація типу документа, яка повідомляє браузеру версію HTML. Для HTML5 використовується <!DOCTYPE html>."
-      },
-      "en": {
-        "q": "What is DOCTYPE and why is it used?",
-        "exp": "DOCTYPE is a document type declaration that tells the browser which HTML version is used. For HTML5, <!DOCTYPE html> is used."
-      },
-      "pl": {
-        "q": "Czym jest DOCTYPE i dlaczego się go używa?",
-        "exp": "DOCTYPE to deklaracja typu dokumentu, która informuje przeglądarkę o wersji HTML. Dla HTML5 używa się <!DOCTYPE html>."
-      },
-      "answers": [
-        {
-          "uk": "Тег для створення заголовка сторінки",
-          "en": "A tag for creating page header",
-          "pl": "Tag do tworzenia nagłówka strony",
-          "correct": false
-        },
-        {
-          "uk": "Декларація, яка повідомляє браузеру версію HTML документа",
-          "en": "A declaration that tells the browser the HTML version of the document",
-          "pl": "Deklaracja informująca przeglądarkę o wersji dokumentu HTML",
-          "correct": true
-        },
-        {
-          "uk": "Команда для підключення JavaScript",
-          "en": "A command for connecting JavaScript",
-          "pl": "Polecenie do podłączania JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Атрибут для стилізації елементів",
-          "en": "An attribute for styling elements",
-          "pl": "Atrybut do stylizowania elementów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q05",
-      "order": 5,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка структура базового HTML-документа?",
-        "exp": "Базовий HTML-документ містить: <!DOCTYPE html>, <html> (кореневий елемент), <head> (метадані), <body> (видимий вміст)."
-      },
-      "en": {
-        "q": "What is the structure of a basic HTML document?",
-        "exp": "A basic HTML document contains: <!DOCTYPE html>, <html> (root element), <head> (metadata), <body> (visible content)."
-      },
-      "pl": {
-        "q": "Jaka jest struktura podstawowego dokumentu HTML?",
-        "exp": "Podstawowy dokument HTML zawiera: <!DOCTYPE html>, <html> (element główny), <head> (metadane), <body> (widoczna treść)."
-      },
-      "answers": [
-        {
-          "uk": "Тільки тег <body> з контентом",
-          "en": "Only the <body> tag with content",
-          "pl": "Tylko tag <body> z treścią",
-          "correct": false
-        },
-        {
-          "uk": "<!DOCTYPE html>, <html>, <head>, <body>",
-          "en": "<!DOCTYPE html>, <html>, <head>, <body>",
-          "pl": "<!DOCTYPE html>, <html>, <head>, <body>",
-          "correct": true
-        },
-        {
-          "uk": "<html>, <style>, <script>",
-          "en": "<html>, <style>, <script>",
-          "pl": "<html>, <style>, <script>",
-          "correct": false
-        },
-        {
-          "uk": "<header>, <main>, <footer>",
-          "en": "<header>, <main>, <footer>",
-          "pl": "<header>, <main>, <footer>",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q06",
-      "order": 6,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між тегами <head> та <body>?",
-        "exp": "<head> містить метадані (назва, стилі, скрипти) і не відображається. <body> містить видимий контент для користувача."
-      },
-      "en": {
-        "q": "What is the difference between the <head> and <body> tags?",
-        "exp": "<head> contains metadata (title, styles, scripts) and is not displayed. <body> contains visible content for the user."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między tagami <head> a <body>?",
-        "exp": "<head> zawiera metadane (tytuł, style, skrypty) i nie jest wyświetlany. <body> zawiera widoczną treść dla użytkownika."
-      },
-      "answers": [
-        {
-          "uk": "<head> для метаданих, <body> для видимого контенту",
-          "en": "<head> for metadata, <body> for visible content",
-          "pl": "<head> dla metadanych, <body> dla widocznej treści",
-          "correct": true
-        },
-        {
-          "uk": "Обидва теги відображають контент на сторінці",
-          "en": "Both tags display content on the page",
-          "pl": "Oba tagi wyświetlają treść na stronie",
-          "correct": false
-        },
-        {
-          "uk": "<head> для заголовків тексту, <body> для параграфів",
-          "en": "<head> for text headers, <body> for paragraphs",
-          "pl": "<head> dla nagłówków tekstu, <body> dla akapitów",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає, це синоніми",
-          "en": "No difference, they are synonyms",
-          "pl": "Nie ma różnicy, to synonimy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q07",
-      "order": 7,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке порожні (void) елементи в HTML?",
-        "exp": "Порожні елементи — це теги без контенту і закриваючого тега, наприклад: <br>, <hr>, <img>, <input>, <meta>, <link>."
-      },
-      "en": {
-        "q": "What are void (empty) elements in HTML?",
-        "exp": "Void elements are tags without content and closing tag, for example: <br>, <hr>, <img>, <input>, <meta>, <link>."
-      },
-      "pl": {
-        "q": "Czym są puste (void) elementy w HTML?",
-        "exp": "Puste elementy to tagi bez treści i tagu zamykającego, na przykład: <br>, <hr>, <img>, <input>, <meta>, <link>."
-      },
-      "answers": [
-        {
-          "uk": "Теги, які потребують обов'язкового закриття",
-          "en": "Tags that require mandatory closing",
-          "pl": "Tagi wymagające obowiązkowego zamknięcia",
-          "correct": false
-        },
-        {
-          "uk": "Теги без контенту і закриваючого тега",
-          "en": "Tags without content and closing tag",
-          "pl": "Tagi bez treści i tagu zamykającego",
-          "correct": true
-        },
-        {
-          "uk": "Теги для створення порожнього простору",
-          "en": "Tags for creating empty space",
-          "pl": "Tagi do tworzenia pustej przestrzeni",
-          "correct": false
-        },
-        {
-          "uk": "Застарілі теги, які більше не підтримуються",
-          "en": "Deprecated tags that are no longer supported",
-          "pl": "Przestarzałe tagi, które nie są już wspierane",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q08",
-      "order": 8,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "У чому різниця між елементами <div> і <span>?",
-        "exp": "<div> — блоковий елемент, займає всю ширину і починається з нового рядка. <span> — вбудований, займає тільки необхідну ширину."
-      },
-      "en": {
-        "q": "What is the difference between <div> and <span> elements?",
-        "exp": "<div> is a block element that takes full width and starts on a new line. <span> is inline and takes only necessary width."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między elementami <div> a <span>?",
-        "exp": "<div> to element blokowy, zajmuje pełną szerokość i zaczyna się od nowej linii. <span> jest inline i zajmuje tylko niezbędną szerokość."
-      },
-      "answers": [
-        {
-          "uk": "<div> і <span> виконують однакову функцію",
-          "en": "<div> and <span> perform the same function",
-          "pl": "<div> i <span> pełnią tę samą funkcję",
-          "correct": false
-        },
-        {
-          "uk": "<div> — блоковий елемент, <span> — вбудований (inline)",
-          "en": "<div> is a block element, <span> is inline",
-          "pl": "<div> to element blokowy, <span> jest inline",
-          "correct": true
-        },
-        {
-          "uk": "<span> використовується тільки для зображень",
-          "en": "<span> is only used for images",
-          "pl": "<span> jest używany tylko dla obrazów",
-          "correct": false
-        },
-        {
-          "uk": "<div> застарів і замінений на <span>",
-          "en": "<div> is deprecated and replaced by <span>",
-          "pl": "<div> jest przestarzały i zastąpiony przez <span>",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q09",
-      "order": 9,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між тегами <b> та <strong>?",
-        "exp": "<b> робить текст візуально жирним без семантичного значення. <strong> додає семантичний акцент важливості, що враховується пошуковими системами."
-      },
-      "en": {
-        "q": "What is the difference between <b> and <strong> tags?",
-        "exp": "<b> makes text visually bold without semantic meaning. <strong> adds semantic emphasis of importance, considered by search engines."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między tagami <b> a <strong>?",
-        "exp": "<b> pogrubia tekst wizualnie bez znaczenia semantycznego. <strong> dodaje semantyczny nacisk na ważność, uwzględniany przez wyszukiwarki."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає, обидва роблять текст жирним",
-          "en": "No difference, both make text bold",
-          "pl": "Nie ma różnicy, oba pogrubiają tekst",
-          "correct": false
-        },
-        {
-          "uk": "<b> — візуальне виділення, <strong> — семантичне (важливість)",
-          "en": "<b> is visual styling, <strong> is semantic (importance)",
-          "pl": "<b> to wyróżnienie wizualne, <strong> to semantyczne (ważność)",
-          "correct": true
-        },
-        {
-          "uk": "<strong> робить текст більшим за розміром",
-          "en": "<strong> makes text larger in size",
-          "pl": "<strong> zwiększa rozmiar tekstu",
-          "correct": false
-        },
-        {
-          "uk": "<b> використовується тільки в заголовках",
-          "en": "<b> is only used in headings",
-          "pl": "<b> jest używany tylko w nagłówkach",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q10",
-      "order": 10,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовується атрибут lang у тегу <html>?",
-        "exp": "Атрибут lang вказує мову вмісту сторінки для пошукових систем, скрінрідерів та інших сервісів, наприклад lang=\"uk\" для української."
-      },
-      "en": {
-        "q": "What is the lang attribute in the <html> tag used for?",
-        "exp": "The lang attribute specifies the content language for search engines, screen readers and other services, e.g., lang=\"en\" for English."
-      },
-      "pl": {
-        "q": "Do czego służy atrybut lang w tagu <html>?",
-        "exp": "Atrybut lang określa język treści dla wyszukiwarek, czytników ekranu i innych usług, np. lang=\"pl\" dla polskiego."
-      },
-      "answers": [
-        {
-          "uk": "Для підключення мовних файлів JavaScript",
-          "en": "For connecting JavaScript language files",
-          "pl": "Do podłączania plików językowych JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Для вказання мови вмісту сторінки",
-          "en": "For specifying the content language of the page",
-          "pl": "Do określania języka treści strony",
-          "correct": true
-        },
-        {
-          "uk": "Для автоматичного перекладу сторінки",
-          "en": "For automatic page translation",
-          "pl": "Do automatycznego tłumaczenia strony",
-          "correct": false
-        },
-        {
-          "uk": "Для зміни напрямку тексту",
-          "en": "For changing text direction",
-          "pl": "Do zmiany kierunku tekstu",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/html/fundamentals/html-quiz-part2.json b/json/quizzes/html/fundamentals/html-quiz-part2.json
deleted file mode 100644
index 2623f7c9..00000000
--- a/json/quizzes/html/fundamentals/html-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "html-q11",
-      "order": 11,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Які основні глобальні атрибути можна використовувати з будь-яким HTML елементом?",
-        "exp": "Глобальні атрибути: id, class, style, title, lang, hidden, data-*, tabindex. Вони працюють з усіма HTML елементами."
-      },
-      "en": {
-        "q": "What are the main global attributes that can be used with any HTML element?",
-        "exp": "Global attributes: id, class, style, title, lang, hidden, data-*, tabindex. They work with all HTML elements."
-      },
-      "pl": {
-        "q": "Jakie są główne atrybuty globalne, które można używać z dowolnym elementem HTML?",
-        "exp": "Atrybuty globalne: id, class, style, title, lang, hidden, data-*, tabindex. Działają ze wszystkimi elementami HTML."
-      },
-      "answers": [
-        {
-          "uk": "src, href, alt",
-          "en": "src, href, alt",
-          "pl": "src, href, alt",
-          "correct": false
-        },
-        {
-          "uk": "id, class, style, title, lang, data-*",
-          "en": "id, class, style, title, lang, data-*",
-          "pl": "id, class, style, title, lang, data-*",
-          "correct": true
-        },
-        {
-          "uk": "type, name, value",
-          "en": "type, name, value",
-          "pl": "type, name, value",
-          "correct": false
-        },
-        {
-          "uk": "action, method, enctype",
-          "en": "action, method, enctype",
-          "pl": "action, method, enctype",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q12",
-      "order": 12,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між атрибутами id та class?",
-        "exp": "id — унікальний ідентифікатор, може бути тільки один на сторінці. class — групує елементи, може повторюватися і один елемент може мати кілька класів."
-      },
-      "en": {
-        "q": "What is the difference between id and class attributes?",
-        "exp": "id is a unique identifier, can only be one per page. class groups elements, can repeat, and one element can have multiple classes."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między atrybutami id a class?",
-        "exp": "id to unikalny identyfikator, może być tylko jeden na stronie. class grupuje elementy, może się powtarzać, a jeden element może mieć wiele klas."
-      },
-      "answers": [
-        {
-          "uk": "id і class виконують однакову функцію",
-          "en": "id and class perform the same function",
-          "pl": "id i class pełnią tę samą funkcję",
-          "correct": false
-        },
-        {
-          "uk": "id — унікальний, class — може повторюватися",
-          "en": "id is unique, class can repeat",
-          "pl": "id jest unikalny, class może się powtarzać",
-          "correct": true
-        },
-        {
-          "uk": "class використовується тільки для JavaScript",
-          "en": "class is only used for JavaScript",
-          "pl": "class jest używany tylko dla JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "id можна використовувати кілька разів на сторінці",
-          "en": "id can be used multiple times on a page",
-          "pl": "id można używać wielokrotnie na stronie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q13",
-      "order": 13,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовуються атрибути data-* у HTML?",
-        "exp": "data-* атрибути дозволяють зберігати користувацькі дані в HTML елементах для використання в JavaScript, без впливу на відображення."
-      },
-      "en": {
-        "q": "What are data-* attributes used for in HTML?",
-        "exp": "data-* attributes allow storing custom data in HTML elements for use in JavaScript, without affecting display."
-      },
-      "pl": {
-        "q": "Do czego służą atrybuty data-* w HTML?",
-        "exp": "Atrybuty data-* pozwalają przechowywać niestandardowe dane w elementach HTML do użycia w JavaScript, bez wpływu na wyświetlanie."
-      },
-      "answers": [
-        {
-          "uk": "Для стилізації елементів",
-          "en": "For styling elements",
-          "pl": "Do stylizowania elementów",
-          "correct": false
-        },
-        {
-          "uk": "Для зберігання користувацьких даних у елементах для JavaScript",
-          "en": "For storing custom data in elements for JavaScript",
-          "pl": "Do przechowywania niestandardowych danych w elementach dla JavaScript",
-          "correct": true
-        },
-        {
-          "uk": "Для валідації форм",
-          "en": "For form validation",
-          "pl": "Do walidacji formularzy",
-          "correct": false
-        },
-        {
-          "uk": "Для SEO оптимізації",
-          "en": "For SEO optimization",
-          "pl": "Do optymalizacji SEO",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q14",
-      "order": 14,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як створити гіперпосилання в HTML?",
-        "exp": "Для створення посилання використовується тег <a> з атрибутом href, який вказує URL адресу призначення."
-      },
-      "en": {
-        "q": "How do you create a hyperlink in HTML?",
-        "exp": "To create a link, use the <a> tag with the href attribute that specifies the destination URL."
-      },
-      "pl": {
-        "q": "Jak utworzyć hiperłącze w HTML?",
-        "exp": "Do utworzenia linku używa się tagu <a> z atrybutem href, który określa docelowy URL."
-      },
-      "answers": [
-        {
-          "uk": "<link href=\"url\">Текст</link>",
-          "en": "<link href=\"url\">Text</link>",
-          "pl": "<link href=\"url\">Tekst</link>",
-          "correct": false
-        },
-        {
-          "uk": "<a href=\"url\">Текст посилання</a>",
-          "en": "<a href=\"url\">Link text</a>",
-          "pl": "<a href=\"url\">Tekst linku</a>",
-          "correct": true
-        },
-        {
-          "uk": "<url>Текст</url>",
-          "en": "<url>Text</url>",
-          "pl": "<url>Tekst</url>",
-          "correct": false
-        },
-        {
-          "uk": "<href=\"url\">Текст</href>",
-          "en": "<href=\"url\">Text</href>",
-          "pl": "<href=\"url\">Tekst</href>",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q15",
-      "order": 15,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як відкрити посилання в новій вкладці браузера?",
-        "exp": "Додати атрибут target=\"_blank\" до тега <a>. Рекомендовано також додати rel=\"noopener noreferrer\" для безпеки."
-      },
-      "en": {
-        "q": "How do you open a link in a new browser tab?",
-        "exp": "Add the target=\"_blank\" attribute to the <a> tag. It's also recommended to add rel=\"noopener noreferrer\" for security."
-      },
-      "pl": {
-        "q": "Jak otworzyć link w nowej karcie przeglądarki?",
-        "exp": "Dodaj atrybut target=\"_blank\" do tagu <a>. Zaleca się również dodanie rel=\"noopener noreferrer\" dla bezpieczeństwa."
-      },
-      "answers": [
-        {
-          "uk": "target=\"_new\"",
-          "en": "target=\"_new\"",
-          "pl": "target=\"_new\"",
-          "correct": false
-        },
-        {
-          "uk": "target=\"_blank\"",
-          "en": "target=\"_blank\"",
-          "pl": "target=\"_blank\"",
-          "correct": true
-        },
-        {
-          "uk": "newtab=\"true\"",
-          "en": "newtab=\"true\"",
-          "pl": "newtab=\"true\"",
-          "correct": false
-        },
-        {
-          "uk": "open=\"new\"",
-          "en": "open=\"new\"",
-          "pl": "open=\"new\"",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q16",
-      "order": 16,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як створити якірне посилання для переходу до певної частини сторінки?",
-        "exp": "Додати id до цільового елемента (id=\"section1\") і створити посилання з href=\"#section1\". При кліку сторінка прокрутиться до цього елемента."
-      },
-      "en": {
-        "q": "How do you create an anchor link to jump to a specific part of the page?",
-        "exp": "Add an id to the target element (id=\"section1\") and create a link with href=\"#section1\". Clicking will scroll to that element."
-      },
-      "pl": {
-        "q": "Jak utworzyć link kotwicowy do przejścia do określonej części strony?",
-        "exp": "Dodaj id do elementu docelowego (id=\"section1\") i utwórz link z href=\"#section1\". Kliknięcie przewinie do tego elementu."
-      },
-      "answers": [
-        {
-          "uk": "href=\"goto:section1\"",
-          "en": "href=\"goto:section1\"",
-          "pl": "href=\"goto:section1\"",
-          "correct": false
-        },
-        {
-          "uk": "href=\"#section1\" та id=\"section1\" на цільовому елементі",
-          "en": "href=\"#section1\" and id=\"section1\" on target element",
-          "pl": "href=\"#section1\" i id=\"section1\" na elemencie docelowym",
-          "correct": true
-        },
-        {
-          "uk": "anchor=\"section1\"",
-          "en": "anchor=\"section1\"",
-          "pl": "anchor=\"section1\"",
-          "correct": false
-        },
-        {
-          "uk": "jump=\"section1\"",
-          "en": "jump=\"section1\"",
-          "pl": "jump=\"section1\"",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q17",
-      "order": 17,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як вставити зображення на HTML-сторінку?",
-        "exp": "Використовується тег <img> з атрибутами src (шлях до зображення) та alt (альтернативний текст для доступності)."
-      },
-      "en": {
-        "q": "How do you insert an image on an HTML page?",
-        "exp": "Use the <img> tag with src (path to image) and alt (alternative text for accessibility) attributes."
-      },
-      "pl": {
-        "q": "Jak wstawić obraz na stronę HTML?",
-        "exp": "Używa się tagu <img> z atrybutami src (ścieżka do obrazu) i alt (alternatywny tekst dla dostępności)."
-      },
-      "answers": [
-        {
-          "uk": "<image src=\"photo.jpg\">",
-          "en": "<image src=\"photo.jpg\">",
-          "pl": "<image src=\"photo.jpg\">",
-          "correct": false
-        },
-        {
-          "uk": "<img src=\"photo.jpg\" alt=\"Опис\">",
-          "en": "<img src=\"photo.jpg\" alt=\"Description\">",
-          "pl": "<img src=\"photo.jpg\" alt=\"Opis\">",
-          "correct": true
-        },
-        {
-          "uk": "<picture>photo.jpg</picture>",
-          "en": "<picture>photo.jpg</picture>",
-          "pl": "<picture>photo.jpg</picture>",
-          "correct": false
-        },
-        {
-          "uk": "<photo href=\"photo.jpg\">",
-          "en": "<photo href=\"photo.jpg\">",
-          "pl": "<photo href=\"photo.jpg\">",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q18",
-      "order": 18,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яке призначення атрибута alt у тегу <img>?",
-        "exp": "alt — альтернативний текст, який показується якщо зображення не завантажилось, читається скрінрідерами та використовується для SEO."
-      },
-      "en": {
-        "q": "What is the purpose of the alt attribute in the <img> tag?",
-        "exp": "alt is alternative text shown if the image fails to load, read by screen readers, and used for SEO."
-      },
-      "pl": {
-        "q": "Jakie jest przeznaczenie atrybutu alt w tagu <img>?",
-        "exp": "alt to tekst alternatywny wyświetlany gdy obraz się nie załaduje, czytany przez czytniki ekranu i używany dla SEO."
-      },
-      "answers": [
-        {
-          "uk": "Для зміни розміру зображення",
-          "en": "To change image size",
-          "pl": "Do zmiany rozmiaru obrazu",
-          "correct": false
-        },
-        {
-          "uk": "Альтернативний текст для доступності та випадку незавантаження",
-          "en": "Alternative text for accessibility and when image fails to load",
-          "pl": "Alternatywny tekst dla dostępności i gdy obraz się nie załaduje",
-          "correct": true
-        },
-        {
-          "uk": "Для додавання рамки до зображення",
-          "en": "To add a border to the image",
-          "pl": "Do dodania ramki do obrazu",
-          "correct": false
-        },
-        {
-          "uk": "Для анімації зображення",
-          "en": "To animate the image",
-          "pl": "Do animacji obrazu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q19",
-      "order": 19,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між відносними та абсолютними URL-адресами?",
-        "exp": "Абсолютний URL містить повний шлях з протоколом (https://example.com/page). Відносний — шлях відносно поточного документа (/page, ../page)."
-      },
-      "en": {
-        "q": "What is the difference between relative and absolute URLs?",
-        "exp": "Absolute URL contains full path with protocol (https://example.com/page). Relative is a path relative to current document (/page, ../page)."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między względnymi a bezwzględnymi adresami URL?",
-        "exp": "Bezwzględny URL zawiera pełną ścieżkę z protokołem (https://example.com/page). Względny to ścieżka względem bieżącego dokumentu (/page, ../page)."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        },
-        {
-          "uk": "Абсолютний — повний шлях з протоколом, відносний — від поточного документа",
-          "en": "Absolute is full path with protocol, relative is from current document",
-          "pl": "Bezwzględny to pełna ścieżka z protokołem, względny od bieżącego dokumentu",
-          "correct": true
-        },
-        {
-          "uk": "Відносний завжди починається з https://",
-          "en": "Relative always starts with https://",
-          "pl": "Względny zawsze zaczyna się od https://",
-          "correct": false
-        },
-        {
-          "uk": "Абсолютний використовується тільки для зображень",
-          "en": "Absolute is only used for images",
-          "pl": "Bezwzględny jest używany tylko dla obrazów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q20",
-      "order": 20,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Які основні формати зображень підтримуються браузерами?",
-        "exp": "Основні формати: JPEG/JPG (фото), PNG (прозорість), GIF (анімація), WebP (сучасний з високим стисненням), SVG (векторна графіка)."
-      },
-      "en": {
-        "q": "What are the main image formats supported by browsers?",
-        "exp": "Main formats: JPEG/JPG (photos), PNG (transparency), GIF (animation), WebP (modern with high compression), SVG (vector graphics)."
-      },
-      "pl": {
-        "q": "Jakie są główne formaty obrazów obsługiwane przez przeglądarki?",
-        "exp": "Główne formaty: JPEG/JPG (zdjęcia), PNG (przezroczystość), GIF (animacja), WebP (nowoczesny z wysoką kompresją), SVG (grafika wektorowa)."
-      },
-      "answers": [
-        {
-          "uk": "Тільки JPEG та PNG",
-          "en": "Only JPEG and PNG",
-          "pl": "Tylko JPEG i PNG",
-          "correct": false
-        },
-        {
-          "uk": "JPEG, PNG, GIF, WebP, SVG",
-          "en": "JPEG, PNG, GIF, WebP, SVG",
-          "pl": "JPEG, PNG, GIF, WebP, SVG",
-          "correct": true
-        },
-        {
-          "uk": "Тільки SVG та WebP",
-          "en": "Only SVG and WebP",
-          "pl": "Tylko SVG i WebP",
-          "correct": false
-        },
-        {
-          "uk": "PSD, AI, EPS",
-          "en": "PSD, AI, EPS",
-          "pl": "PSD, AI, EPS",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/html/fundamentals/html-quiz-part3.json b/json/quizzes/html/fundamentals/html-quiz-part3.json
deleted file mode 100644
index dcd16436..00000000
--- a/json/quizzes/html/fundamentals/html-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "html-q21",
-      "order": 21,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Які типи списків доступні в HTML?",
-        "exp": "В HTML є три типи списків: нумерований (<ol>), маркований (<ul>) та список визначень (<dl> з <dt> і <dd>)."
-      },
-      "en": {
-        "q": "What types of lists are available in HTML?",
-        "exp": "HTML has three types of lists: ordered (<ol>), unordered (<ul>), and definition list (<dl> with <dt> and <dd>)."
-      },
-      "pl": {
-        "q": "Jakie typy list są dostępne w HTML?",
-        "exp": "HTML ma trzy typy list: numerowaną (<ol>), nienumerowaną (<ul>) i listę definicji (<dl> z <dt> i <dd>)."
-      },
-      "answers": [
-        {
-          "uk": "Тільки нумерований і маркований",
-          "en": "Only ordered and unordered",
-          "pl": "Tylko numerowana i nienumerowana",
-          "correct": false
-        },
-        {
-          "uk": "Нумерований (<ol>), маркований (<ul>), список визначень (<dl>)",
-          "en": "Ordered (<ol>), unordered (<ul>), definition list (<dl>)",
-          "pl": "Numerowana (<ol>), nienumerowana (<ul>), lista definicji (<dl>)",
-          "correct": true
-        },
-        {
-          "uk": "Тільки маркований список",
-          "en": "Only unordered list",
-          "pl": "Tylko lista nienumerowana",
-          "correct": false
-        },
-        {
-          "uk": "Тільки список визначень",
-          "en": "Only definition list",
-          "pl": "Tylko lista definicji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q22",
-      "order": 22,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке HTML-форма і для чого вона використовується?",
-        "exp": "HTML-форма (<form>) — елемент для збору даних від користувача та відправки їх на сервер або обробки на клієнті через JavaScript."
-      },
-      "en": {
-        "q": "What is an HTML form and what is it used for?",
-        "exp": "An HTML form (<form>) is an element for collecting data from users and sending it to a server or processing it client-side via JavaScript."
-      },
-      "pl": {
-        "q": "Czym jest formularz HTML i do czego służy?",
-        "exp": "Formularz HTML (<form>) to element do zbierania danych od użytkowników i wysyłania ich na serwer lub przetwarzania po stronie klienta przez JavaScript."
-      },
-      "answers": [
-        {
-          "uk": "Елемент для відображення таблиць",
-          "en": "An element for displaying tables",
-          "pl": "Element do wyświetlania tabel",
-          "correct": false
-        },
-        {
-          "uk": "Елемент для збору даних від користувача та відправки на сервер",
-          "en": "An element for collecting user data and sending to server",
-          "pl": "Element do zbierania danych od użytkownika i wysyłania na serwer",
-          "correct": true
-        },
-        {
-          "uk": "Елемент для створення навігації",
-          "en": "An element for creating navigation",
-          "pl": "Element do tworzenia nawigacji",
-          "correct": false
-        },
-        {
-          "uk": "Елемент для вставки зображень",
-          "en": "An element for inserting images",
-          "pl": "Element do wstawiania obrazów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q23",
-      "order": 23,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між методами GET та POST у формах?",
-        "exp": "GET додає дані до URL (видимі, обмежені за розміром, для пошуку). POST відправляє дані в тілі запиту (приховані, без обмежень, для конфіденційних даних)."
-      },
-      "en": {
-        "q": "What is the difference between GET and POST methods in forms?",
-        "exp": "GET appends data to URL (visible, size-limited, for search). POST sends data in request body (hidden, no limits, for sensitive data)."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między metodami GET a POST w formularzach?",
-        "exp": "GET dodaje dane do URL (widoczne, ograniczone rozmiarem, do wyszukiwania). POST wysyła dane w treści żądania (ukryte, bez ograniczeń, dla danych wrażliwych)."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        },
-        {
-          "uk": "GET — дані в URL, POST — дані в тілі запиту",
-          "en": "GET has data in URL, POST has data in request body",
-          "pl": "GET ma dane w URL, POST ma dane w treści żądania",
-          "correct": true
-        },
-        {
-          "uk": "GET швидший за POST",
-          "en": "GET is faster than POST",
-          "pl": "GET jest szybszy niż POST",
-          "correct": false
-        },
-        {
-          "uk": "POST використовується тільки для завантаження файлів",
-          "en": "POST is only used for file uploads",
-          "pl": "POST jest używany tylko do przesyłania plików",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q24",
-      "order": 24,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як зробити поле форми обов'язковим для заповнення?",
-        "exp": "Додати атрибут required до елемента форми. Браузер не дозволить відправити форму, поки обов'язкове поле не заповнене."
-      },
-      "en": {
-        "q": "How do you make a form field required?",
-        "exp": "Add the required attribute to the form element. The browser won't allow form submission until the required field is filled."
-      },
-      "pl": {
-        "q": "Jak uczynić pole formularza wymaganym?",
-        "exp": "Dodaj atrybut required do elementu formularza. Przeglądarka nie pozwoli na wysłanie formularza, dopóki wymagane pole nie zostanie wypełnione."
-      },
-      "answers": [
-        {
-          "uk": "mandatory=\"true\"",
-          "en": "mandatory=\"true\"",
-          "pl": "mandatory=\"true\"",
-          "correct": false
-        },
-        {
-          "uk": "required",
-          "en": "required",
-          "pl": "required",
-          "correct": true
-        },
-        {
-          "uk": "validate=\"required\"",
-          "en": "validate=\"required\"",
-          "pl": "validate=\"required\"",
-          "correct": false
-        },
-        {
-          "uk": "must=\"fill\"",
-          "en": "must=\"fill\"",
-          "pl": "must=\"fill\"",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q25",
-      "order": 25,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовується тег <label> у формах?",
-        "exp": "<label> пов'язує текстову підказку з елементом форми. Покращує доступність і дозволяє фокусувати поле при кліку на текст підказки."
-      },
-      "en": {
-        "q": "What is the <label> tag used for in forms?",
-        "exp": "<label> associates a text label with a form element. Improves accessibility and allows focusing the field when clicking the label text."
-      },
-      "pl": {
-        "q": "Do czego służy tag <label> w formularzach?",
-        "exp": "<label> wiąże etykietę tekstową z elementem formularza. Poprawia dostępność i pozwala skupić pole przy kliknięciu tekstu etykiety."
-      },
-      "answers": [
-        {
-          "uk": "Для створення кнопки відправки",
-          "en": "To create a submit button",
-          "pl": "Do tworzenia przycisku wysyłania",
-          "correct": false
-        },
-        {
-          "uk": "Для пов'язування текстової підказки з елементом форми",
-          "en": "To associate a text label with a form element",
-          "pl": "Do wiązania etykiety tekstowej z elementem formularza",
-          "correct": true
-        },
-        {
-          "uk": "Для групування полів форми",
-          "en": "To group form fields",
-          "pl": "Do grupowania pól formularza",
-          "correct": false
-        },
-        {
-          "uk": "Для валідації даних",
-          "en": "To validate data",
-          "pl": "Do walidacji danych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q26",
-      "order": 26,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які нові типи input з'явилися в HTML5?",
-        "exp": "HTML5 додав типи: email, url, tel, number, range, date, time, datetime-local, month, week, color, search та інші."
-      },
-      "en": {
-        "q": "What new input types appeared in HTML5?",
-        "exp": "HTML5 added types: email, url, tel, number, range, date, time, datetime-local, month, week, color, search and others."
-      },
-      "pl": {
-        "q": "Jakie nowe typy input pojawiły się w HTML5?",
-        "exp": "HTML5 dodał typy: email, url, tel, number, range, date, time, datetime-local, month, week, color, search i inne."
-      },
-      "answers": [
-        {
-          "uk": "Тільки text і password",
-          "en": "Only text and password",
-          "pl": "Tylko text i password",
-          "correct": false
-        },
-        {
-          "uk": "email, url, number, date, color, range та інші",
-          "en": "email, url, number, date, color, range and others",
-          "pl": "email, url, number, date, color, range i inne",
-          "correct": true
-        },
-        {
-          "uk": "Тільки file і hidden",
-          "en": "Only file and hidden",
-          "pl": "Tylko file i hidden",
-          "correct": false
-        },
-        {
-          "uk": "HTML5 не додав нових типів",
-          "en": "HTML5 didn't add new types",
-          "pl": "HTML5 nie dodał nowych typów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовуються теги <fieldset> і <legend> у формах?",
-        "exp": "<fieldset> групує пов'язані поля форми візуально та логічно. <legend> надає заголовок для цієї групи. Покращує доступність та структуру."
-      },
-      "en": {
-        "q": "What are <fieldset> and <legend> tags used for in forms?",
-        "exp": "<fieldset> groups related form fields visually and logically. <legend> provides a title for this group. Improves accessibility and structure."
-      },
-      "pl": {
-        "q": "Do czego służą tagi <fieldset> i <legend> w formularzach?",
-        "exp": "<fieldset> grupuje powiązane pola formularza wizualnie i logicznie. <legend> zapewnia tytuł dla tej grupy. Poprawia dostępność i strukturę."
-      },
-      "answers": [
-        {
-          "uk": "Для створення випадаючих списків",
-          "en": "For creating dropdown lists",
-          "pl": "Do tworzenia list rozwijanych",
-          "correct": false
-        },
-        {
-          "uk": "Для групування пов'язаних полів форми з заголовком",
-          "en": "For grouping related form fields with a title",
-          "pl": "Do grupowania powiązanych pól formularza z tytułem",
-          "correct": true
-        },
-        {
-          "uk": "Для валідації форми",
-          "en": "For form validation",
-          "pl": "Do walidacji formularza",
-          "correct": false
-        },
-        {
-          "uk": "Для стилізації кнопок",
-          "en": "For styling buttons",
-          "pl": "Do stylizowania przycisków",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q28",
-      "order": 28,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як створити таблицю в HTML?",
-        "exp": "Таблиця створюється тегом <table>. Рядки — <tr>, заголовки стовпців — <th>, комірки даних — <td>."
-      },
-      "en": {
-        "q": "How do you create a table in HTML?",
-        "exp": "A table is created with the <table> tag. Rows are <tr>, column headers are <th>, data cells are <td>."
-      },
-      "pl": {
-        "q": "Jak utworzyć tabelę w HTML?",
-        "exp": "Tabelę tworzy się tagiem <table>. Wiersze to <tr>, nagłówki kolumn to <th>, komórki danych to <td>."
-      },
-      "answers": [
-        {
-          "uk": "<grid>, <row>, <cell>",
-          "en": "<grid>, <row>, <cell>",
-          "pl": "<grid>, <row>, <cell>",
-          "correct": false
-        },
-        {
-          "uk": "<table>, <tr>, <th>, <td>",
-          "en": "<table>, <tr>, <th>, <td>",
-          "pl": "<table>, <tr>, <th>, <td>",
-          "correct": true
-        },
-        {
-          "uk": "<data>, <line>, <col>",
-          "en": "<data>, <line>, <col>",
-          "pl": "<data>, <line>, <col>",
-          "correct": false
-        },
-        {
-          "uk": "<list>, <item>, <value>",
-          "en": "<list>, <item>, <value>",
-          "pl": "<list>, <item>, <value>",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q29",
-      "order": 29,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовуються теги <thead>, <tbody> та <tfoot> у таблицях?",
-        "exp": "<thead> групує заголовки, <tbody> — основні дані, <tfoot> — підсумки. Покращують семантику, доступність та дозволяють окреме стилювання."
-      },
-      "en": {
-        "q": "What are <thead>, <tbody>, and <tfoot> tags used for in tables?",
-        "exp": "<thead> groups headers, <tbody> groups main data, <tfoot> groups summaries. Improves semantics, accessibility, and allows separate styling."
-      },
-      "pl": {
-        "q": "Do czego służą tagi <thead>, <tbody> i <tfoot> w tabelach?",
-        "exp": "<thead> grupuje nagłówki, <tbody> grupuje główne dane, <tfoot> grupuje podsumowania. Poprawia semantykę, dostępność i pozwala na oddzielne stylowanie."
-      },
-      "answers": [
-        {
-          "uk": "Це застарілі теги, які не використовуються",
-          "en": "These are deprecated tags that are not used",
-          "pl": "To przestarzałe tagi, które nie są używane",
-          "correct": false
-        },
-        {
-          "uk": "Для групування заголовків, даних та підсумків таблиці",
-          "en": "For grouping table headers, data, and summaries",
-          "pl": "Do grupowania nagłówków, danych i podsumowań tabeli",
-          "correct": true
-        },
-        {
-          "uk": "Для створення вкладених таблиць",
-          "en": "For creating nested tables",
-          "pl": "Do tworzenia zagnieżdżonych tabel",
-          "correct": false
-        },
-        {
-          "uk": "Для об'єднання комірок",
-          "en": "For merging cells",
-          "pl": "Do łączenia komórek",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q30",
-      "order": 30,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке елемент <datalist> і для чого він використовується?",
-        "exp": "<datalist> надає список готових варіантів для поля вводу, створюючи автодоповнення. Користувач може обрати зі списку або ввести власний варіант."
-      },
-      "en": {
-        "q": "What is the <datalist> element and what is it used for?",
-        "exp": "<datalist> provides a list of predefined options for an input field, creating autocomplete. Users can select from the list or enter their own value."
-      },
-      "pl": {
-        "q": "Czym jest element <datalist> i do czego służy?",
-        "exp": "<datalist> dostarcza listę predefiniowanych opcji dla pola wprowadzania, tworząc autouzupełnianie. Użytkownicy mogą wybrać z listy lub wprowadzić własną wartość."
-      },
-      "answers": [
-        {
-          "uk": "Елемент для зберігання даних у браузері",
-          "en": "An element for storing data in the browser",
-          "pl": "Element do przechowywania danych w przeglądarce",
-          "correct": false
-        },
-        {
-          "uk": "Елемент для створення автодоповнення у полях вводу",
-          "en": "An element for creating autocomplete in input fields",
-          "pl": "Element do tworzenia autouzupełniania w polach wprowadzania",
-          "correct": true
-        },
-        {
-          "uk": "Елемент для відображення даних з бази",
-          "en": "An element for displaying data from database",
-          "pl": "Element do wyświetlania danych z bazy danych",
-          "correct": false
-        },
-        {
-          "uk": "Елемент для створення таблиць",
-          "en": "An element for creating tables",
-          "pl": "Element do tworzenia tabel",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/html/fundamentals/html-quiz-part4.json b/json/quizzes/html/fundamentals/html-quiz-part4.json
deleted file mode 100644
index 7fff0f57..00000000
--- a/json/quizzes/html/fundamentals/html-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "html-q31",
-      "order": 31,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке семантичний HTML і чому він важливий?",
-        "exp": "Семантичний HTML — використання тегів за їхнім змістовим призначенням (header, main, article). Покращує SEO, доступність та читабельність коду."
-      },
-      "en": {
-        "q": "What is semantic HTML and why is it important?",
-        "exp": "Semantic HTML means using tags according to their meaningful purpose (header, main, article). Improves SEO, accessibility, and code readability."
-      },
-      "pl": {
-        "q": "Czym jest semantyczny HTML i dlaczego jest ważny?",
-        "exp": "Semantyczny HTML oznacza używanie tagów zgodnie z ich znaczeniem (header, main, article). Poprawia SEO, dostępność i czytelność kodu."
-      },
-      "answers": [
-        {
-          "uk": "Використання тільки тегів div і span",
-          "en": "Using only div and span tags",
-          "pl": "Używanie tylko tagów div i span",
-          "correct": false
-        },
-        {
-          "uk": "Використання тегів за їхнім змістовим призначенням для кращого SEO та доступності",
-          "en": "Using tags according to their meaningful purpose for better SEO and accessibility",
-          "pl": "Używanie tagów zgodnie z ich znaczeniem dla lepszego SEO i dostępności",
-          "correct": true
-        },
-        {
-          "uk": "Використання лише застарілих HTML тегів",
-          "en": "Using only deprecated HTML tags",
-          "pl": "Używanie tylko przestarzałych tagów HTML",
-          "correct": false
-        },
-        {
-          "uk": "Додавання коментарів до кожного тега",
-          "en": "Adding comments to every tag",
-          "pl": "Dodawanie komentarzy do każdego tagu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q32",
-      "order": 32,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між тегами <article> та <section>?",
-        "exp": "<article> — самостійний контент, зрозумілий поза контекстом (новини, пости). <section> — тематичний розділ, частина більшої структури сторінки."
-      },
-      "en": {
-        "q": "What is the difference between <article> and <section> tags?",
-        "exp": "<article> is standalone content understandable out of context (news, posts). <section> is a thematic division, part of a larger page structure."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między tagami <article> a <section>?",
-        "exp": "<article> to samodzielna treść zrozumiała poza kontekstem (wiadomości, posty). <section> to tematyczny podział, część większej struktury strony."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає, це синоніми",
-          "en": "No difference, they are synonyms",
-          "pl": "Nie ma różnicy, to synonimy",
-          "correct": false
-        },
-        {
-          "uk": "<article> — самостійний контент, <section> — тематичний розділ сторінки",
-          "en": "<article> is standalone content, <section> is a thematic page division",
-          "pl": "<article> to samodzielna treść, <section> to tematyczny podział strony",
-          "correct": true
-        },
-        {
-          "uk": "<section> використовується тільки в <header>",
-          "en": "<section> is only used inside <header>",
-          "pl": "<section> jest używany tylko wewnątrz <header>",
-          "correct": false
-        },
-        {
-          "uk": "<article> застарів у HTML5",
-          "en": "<article> is deprecated in HTML5",
-          "pl": "<article> jest przestarzały w HTML5",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q33",
-      "order": 33,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовуються теги <header>, <main> та <footer>?",
-        "exp": "<header> — заголовок сторінки/секції, <main> — основний унікальний контент, <footer> — нижня частина з додатковою інформацією."
-      },
-      "en": {
-        "q": "What are <header>, <main>, and <footer> tags used for?",
-        "exp": "<header> is page/section header, <main> is the main unique content, <footer> is the bottom part with additional information."
-      },
-      "pl": {
-        "q": "Do czego służą tagi <header>, <main> i <footer>?",
-        "exp": "<header> to nagłówek strony/sekcji, <main> to główna unikalna treść, <footer> to dolna część z dodatkowymi informacjami."
-      },
-      "answers": [
-        {
-          "uk": "Для стилізації сторінки",
-          "en": "For styling the page",
-          "pl": "Do stylizowania strony",
-          "correct": false
-        },
-        {
-          "uk": "Для структурування сторінки: заголовок, основний контент, підвал",
-          "en": "For structuring page: header, main content, footer",
-          "pl": "Do strukturyzowania strony: nagłówek, główna treść, stopka",
-          "correct": true
-        },
-        {
-          "uk": "Тільки для SEO оптимізації",
-          "en": "Only for SEO optimization",
-          "pl": "Tylko do optymalizacji SEO",
-          "correct": false
-        },
-        {
-          "uk": "Для створення навігації",
-          "en": "For creating navigation",
-          "pl": "Do tworzenia nawigacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовуються теги <nav> та <aside>?",
-        "exp": "<nav> — контейнер для основної навігації сайту (меню, посилання). <aside> — для побічного контенту (сайдбари, підказки, реклама)."
-      },
-      "en": {
-        "q": "What are <nav> and <aside> tags used for?",
-        "exp": "<nav> is a container for main site navigation (menus, links). <aside> is for secondary content (sidebars, tips, ads)."
-      },
-      "pl": {
-        "q": "Do czego służą tagi <nav> i <aside>?",
-        "exp": "<nav> to kontener dla głównej nawigacji strony (menu, linki). <aside> to dla treści pobocznej (paski boczne, podpowiedzi, reklamy)."
-      },
-      "answers": [
-        {
-          "uk": "<nav> — для навігації, <aside> — для побічного контенту",
-          "en": "<nav> for navigation, <aside> for secondary content",
-          "pl": "<nav> dla nawigacji, <aside> dla treści pobocznej",
-          "correct": true
-        },
-        {
-          "uk": "Обидва для створення меню",
-          "en": "Both for creating menus",
-          "pl": "Oba do tworzenia menu",
-          "correct": false
-        },
-        {
-          "uk": "<aside> для заголовків",
-          "en": "<aside> for headers",
-          "pl": "<aside> dla nagłówków",
-          "correct": false
-        },
-        {
-          "uk": "<nav> для зображень",
-          "en": "<nav> for images",
-          "pl": "<nav> dla obrazów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q35",
-      "order": 35,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як використовувати теги <figure> та <figcaption>?",
-        "exp": "<figure> — контейнер для медіа-контенту (зображення, графіки, відео). <figcaption> — підпис до цього медіа всередині <figure>."
-      },
-      "en": {
-        "q": "How do you use <figure> and <figcaption> tags?",
-        "exp": "<figure> is a container for media content (images, charts, videos). <figcaption> is a caption for that media inside <figure>."
-      },
-      "pl": {
-        "q": "Jak używać tagów <figure> i <figcaption>?",
-        "exp": "<figure> to kontener dla treści multimedialnej (obrazy, wykresy, wideo). <figcaption> to podpis do tych mediów wewnątrz <figure>."
-      },
-      "answers": [
-        {
-          "uk": "Для створення таблиць з підписами",
-          "en": "For creating tables with captions",
-          "pl": "Do tworzenia tabel z podpisami",
-          "correct": false
-        },
-        {
-          "uk": "<figure> для медіа-контенту, <figcaption> для підпису до нього",
-          "en": "<figure> for media content, <figcaption> for its caption",
-          "pl": "<figure> dla treści multimedialnej, <figcaption> dla jej podpisu",
-          "correct": true
-        },
-        {
-          "uk": "Для створення форм",
-          "en": "For creating forms",
-          "pl": "Do tworzenia formularzy",
-          "correct": false
-        },
-        {
-          "uk": "Для математичних формул",
-          "en": "For mathematical formulas",
-          "pl": "Do wzorów matematycznych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q36",
-      "order": 36,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як вбудувати відео на HTML-сторінку?",
-        "exp": "Використовується тег <video> з атрибутами src, controls, autoplay, loop. Можна додати кілька <source> для різних форматів."
-      },
-      "en": {
-        "q": "How do you embed video on an HTML page?",
-        "exp": "Use the <video> tag with src, controls, autoplay, loop attributes. You can add multiple <source> tags for different formats."
-      },
-      "pl": {
-        "q": "Jak osadzić wideo na stronie HTML?",
-        "exp": "Używa się tagu <video> z atrybutami src, controls, autoplay, loop. Można dodać wiele tagów <source> dla różnych formatów."
-      },
-      "answers": [
-        {
-          "uk": "<media src=\"video.mp4\">",
-          "en": "<media src=\"video.mp4\">",
-          "pl": "<media src=\"video.mp4\">",
-          "correct": false
-        },
-        {
-          "uk": "<video src=\"video.mp4\" controls></video>",
-          "en": "<video src=\"video.mp4\" controls></video>",
-          "pl": "<video src=\"video.mp4\" controls></video>",
-          "correct": true
-        },
-        {
-          "uk": "<movie href=\"video.mp4\">",
-          "en": "<movie href=\"video.mp4\">",
-          "pl": "<movie href=\"video.mp4\">",
-          "correct": false
-        },
-        {
-          "uk": "<embed type=\"video\" src=\"video.mp4\">",
-          "en": "<embed type=\"video\" src=\"video.mp4\">",
-          "pl": "<embed type=\"video\" src=\"video.mp4\">",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q37",
-      "order": 37,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як вбудувати аудіо на HTML-сторінку?",
-        "exp": "Використовується тег <audio> з атрибутами src, controls, autoplay, loop. Аналогічно до відео, можна додати кілька <source>."
-      },
-      "en": {
-        "q": "How do you embed audio on an HTML page?",
-        "exp": "Use the <audio> tag with src, controls, autoplay, loop attributes. Similar to video, you can add multiple <source> tags."
-      },
-      "pl": {
-        "q": "Jak osadzić audio na stronie HTML?",
-        "exp": "Używa się tagu <audio> z atrybutami src, controls, autoplay, loop. Podobnie jak wideo, można dodać wiele tagów <source>."
-      },
-      "answers": [
-        {
-          "uk": "<sound src=\"audio.mp3\">",
-          "en": "<sound src=\"audio.mp3\">",
-          "pl": "<sound src=\"audio.mp3\">",
-          "correct": false
-        },
-        {
-          "uk": "<audio src=\"audio.mp3\" controls></audio>",
-          "en": "<audio src=\"audio.mp3\" controls></audio>",
-          "pl": "<audio src=\"audio.mp3\" controls></audio>",
-          "correct": true
-        },
-        {
-          "uk": "<music href=\"audio.mp3\">",
-          "en": "<music href=\"audio.mp3\">",
-          "pl": "<music href=\"audio.mp3\">",
-          "correct": false
-        },
-        {
-          "uk": "<mp3>audio.mp3</mp3>",
-          "en": "<mp3>audio.mp3</mp3>",
-          "pl": "<mp3>audio.mp3</mp3>",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке елемент <canvas> у HTML5?",
-        "exp": "<canvas> — це контейнер для малювання графіки через JavaScript. Використовується для ігор, візуалізацій, анімацій та інтерактивної графіки."
-      },
-      "en": {
-        "q": "What is the <canvas> element in HTML5?",
-        "exp": "<canvas> is a container for drawing graphics via JavaScript. Used for games, visualizations, animations, and interactive graphics."
-      },
-      "pl": {
-        "q": "Czym jest element <canvas> w HTML5?",
-        "exp": "<canvas> to kontener do rysowania grafiki przez JavaScript. Używany do gier, wizualizacji, animacji i interaktywnej grafiki."
-      },
-      "answers": [
-        {
-          "uk": "Елемент для вбудовування PDF",
-          "en": "An element for embedding PDF",
-          "pl": "Element do osadzania PDF",
-          "correct": false
-        },
-        {
-          "uk": "Контейнер для малювання графіки через JavaScript",
-          "en": "A container for drawing graphics via JavaScript",
-          "pl": "Kontener do rysowania grafiki przez JavaScript",
-          "correct": true
-        },
-        {
-          "uk": "Елемент для зберігання даних",
-          "en": "An element for storing data",
-          "pl": "Element do przechowywania danych",
-          "correct": false
-        },
-        {
-          "uk": "Елемент для створення форм",
-          "en": "An element for creating forms",
-          "pl": "Element do tworzenia formularzy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q39",
-      "order": 39,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке meta viewport і для чого він використовується?",
-        "exp": "meta viewport контролює масштабування та розміри сторінки на мобільних пристроях. width=device-width робить сторінку адаптивною."
-      },
-      "en": {
-        "q": "What is meta viewport and what is it used for?",
-        "exp": "meta viewport controls scaling and dimensions of the page on mobile devices. width=device-width makes the page responsive."
-      },
-      "pl": {
-        "q": "Czym jest meta viewport i do czego służy?",
-        "exp": "meta viewport kontroluje skalowanie i wymiary strony na urządzeniach mobilnych. width=device-width sprawia, że strona jest responsywna."
-      },
-      "answers": [
-        {
-          "uk": "Для SEO оптимізації",
-          "en": "For SEO optimization",
-          "pl": "Do optymalizacji SEO",
-          "correct": false
-        },
-        {
-          "uk": "Для контролю масштабування та адаптивності на мобільних пристроях",
-          "en": "For controlling scaling and responsiveness on mobile devices",
-          "pl": "Do kontrolowania skalowania i responsywności na urządzeniach mobilnych",
-          "correct": true
-        },
-        {
-          "uk": "Для підключення шрифтів",
-          "en": "For connecting fonts",
-          "pl": "Do podłączania czcionek",
-          "correct": false
-        },
-        {
-          "uk": "Для валідації форм",
-          "en": "For form validation",
-          "pl": "Do walidacji formularzy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "html-q40",
-      "order": 40,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке ARIA-атрибути і для чого вони використовуються?",
-        "exp": "ARIA (Accessible Rich Internet Applications) — атрибути для покращення доступності веб-контенту для людей з обмеженими можливостями та скрінрідерів."
-      },
-      "en": {
-        "q": "What are ARIA attributes and what are they used for?",
-        "exp": "ARIA (Accessible Rich Internet Applications) are attributes for improving web content accessibility for people with disabilities and screen readers."
-      },
-      "pl": {
-        "q": "Czym są atrybuty ARIA i do czego służą?",
-        "exp": "ARIA (Accessible Rich Internet Applications) to atrybuty do poprawy dostępności treści internetowych dla osób niepełnosprawnych i czytników ekranu."
-      },
-      "answers": [
-        {
-          "uk": "Для анімації елементів",
-          "en": "For animating elements",
-          "pl": "Do animowania elementów",
-          "correct": false
-        },
-        {
-          "uk": "Для покращення доступності контенту для людей з обмеженими можливостями",
-          "en": "For improving content accessibility for people with disabilities",
-          "pl": "Do poprawy dostępności treści dla osób niepełnosprawnych",
-          "correct": true
-        },
-        {
-          "uk": "Для стилізації елементів",
-          "en": "For styling elements",
-          "pl": "Do stylizowania elementów",
-          "correct": false
-        },
-        {
-          "uk": "Для прискорення завантаження сторінки",
-          "en": "For speeding up page loading",
-          "pl": "Do przyspieszania ładowania strony",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/js/advanced/javascript-advanced-quiz-part1.json b/json/quizzes/js/advanced/javascript-advanced-quiz-part1.json
deleted file mode 100644
index ad5f23fa..00000000
--- a/json/quizzes/js/advanced/javascript-advanced-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "js-adv-q01",
-      "order": 1,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Яка різниця між методами call() і apply()?",
-        "exp": "call() приймає аргументи окремо, apply() приймає аргументи як масив. Обидва змінюють контекст this."
-      },
-      "en": {
-        "q": "What is the difference between call() and apply() methods?",
-        "exp": "call() accepts arguments separately, apply() accepts arguments as an array. Both change the this context."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między metodami call() i apply()?",
-        "exp": "call() przyjmuje argumenty osobno, apply() przyjmuje argumenty jako tablicę. Oba zmieniają kontekst this."
-      },
-      "answers": [
-        {
-          "uk": "call() швидший за apply()",
-          "en": "call() is faster than apply()",
-          "pl": "call() jest szybszy niż apply()",
-          "correct": false
-        },
-        {
-          "uk": "call() приймає аргументи окремо, apply() приймає масив аргументів",
-          "en": "call() accepts arguments separately, apply() accepts array of arguments",
-          "pl": "call() przyjmuje argumenty osobno, apply() przyjmuje tablicę argumentów",
-          "correct": true
-        },
-        {
-          "uk": "apply() не змінює контекст this",
-          "en": "apply() doesn't change this context",
-          "pl": "apply() nie zmienia kontekstu this",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q02",
-      "order": 2,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Що повертає метод bind()?",
-        "exp": "bind() повертає нову функцію з прив'язаним контекстом this, яку можна викликати пізніше. Не викликає функцію одразу."
-      },
-      "en": {
-        "q": "What does the bind() method return?",
-        "exp": "bind() returns a new function with bound this context that can be called later. Doesn't invoke the function immediately."
-      },
-      "pl": {
-        "q": "Co zwraca metoda bind()?",
-        "exp": "bind() zwraca nową funkcję z powiązanym kontekstem this, którą można wywołać później. Nie wywołuje funkcji natychmiast."
-      },
-      "answers": [
-        {
-          "uk": "Результат виконання функції",
-          "en": "Result of function execution",
-          "pl": "Wynik wykonania funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Нову функцію з прив'язаним контекстом this",
-          "en": "New function with bound this context",
-          "pl": "Nową funkcję z powiązanym kontekstem this",
-          "correct": true
-        },
-        {
-          "uk": "Оригінальну функцію без змін",
-          "en": "Original function without changes",
-          "pl": "Oryginalną funkcję bez zmian",
-          "correct": false
-        },
-        {
-          "uk": "undefined",
-          "en": "undefined",
-          "pl": "undefined",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q03",
-      "order": 3,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Що робить метод масиву reduce()?",
-        "exp": "reduce() агрегує масив в одне значення, виконуючи функцію для кожного елемента з акумулятором."
-      },
-      "en": {
-        "q": "What does the array method reduce() do?",
-        "exp": "reduce() aggregates an array into a single value by executing a function for each element with an accumulator."
-      },
-      "pl": {
-        "q": "Co robi metoda tablicy reduce()?",
-        "exp": "reduce() agreguje tablicę do pojedynczej wartości, wykonując funkcję dla każdego elementu z akumulatorem."
-      },
-      "answers": [
-        {
-          "uk": "Фільтрує елементи масиву за умовою",
-          "en": "Filters array elements by condition",
-          "pl": "Filtruje elementy tablicy według warunku",
-          "correct": false
-        },
-        {
-          "uk": "Створює новий масив з перетвореними елементами",
-          "en": "Creates new array with transformed elements",
-          "pl": "Tworzy nową tablicę z przekształconymi elementami",
-          "correct": false
-        },
-        {
-          "uk": "Агрегує масив в одне значення з використанням акумулятора",
-          "en": "Aggregates array into single value using accumulator",
-          "pl": "Agreguje tablicę do pojedynczej wartości używając akumulatora",
-          "correct": true
-        },
-        {
-          "uk": "Зменшує розмір масиву вдвічі",
-          "en": "Reduces array size by half",
-          "pl": "Zmniejsza rozmiar tablicy o połowę",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q04",
-      "order": 4,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між == та === операторами?",
-        "exp": "== виконує приведення типів перед порівнянням, === порівнює без приведення типів (строге порівняння)."
-      },
-      "en": {
-        "q": "What is the difference between == and === operators?",
-        "exp": "== performs type coercion before comparison, === compares without type coercion (strict comparison)."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między operatorami == i ===?",
-        "exp": "== wykonuje konwersję typów przed porównaniem, === porównuje bez konwersji typów (ścisłe porównanie)."
-      },
-      "answers": [
-        {
-          "uk": "== швидший за ===",
-          "en": "== is faster than ===",
-          "pl": "== jest szybszy niż ===",
-          "correct": false
-        },
-        {
-          "uk": "== виконує приведення типів, === ні",
-          "en": "== performs type coercion, === doesn't",
-          "pl": "== wykonuje konwersję typów, === nie",
-          "correct": true
-        },
-        {
-          "uk": "=== може порівнювати тільки числа",
-          "en": "=== can only compare numbers",
-          "pl": "=== może porównywać tylko liczby",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q05",
-      "order": 5,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Що робить метод масиву map()?",
-        "exp": "map() створює новий масив, застосовуючи функцію до кожного елемента вихідного масиву. Не змінює оригінальний масив."
-      },
-      "en": {
-        "q": "What does the array method map() do?",
-        "exp": "map() creates a new array by applying a function to each element of the original array. Doesn't modify the original array."
-      },
-      "pl": {
-        "q": "Co robi metoda tablicy map()?",
-        "exp": "map() tworzy nową tablicę, stosując funkcję do każdego elementu oryginalnej tablicy. Nie modyfikuje oryginalnej tablicy."
-      },
-      "answers": [
-        {
-          "uk": "Змінює кожен елемент в оригінальному масиві",
-          "en": "Modifies each element in original array",
-          "pl": "Modyfikuje każdy element w oryginalnej tablicy",
-          "correct": false
-        },
-        {
-          "uk": "Створює новий масив, застосовуючи функцію до кожного елемента",
-          "en": "Creates new array by applying function to each element",
-          "pl": "Tworzy nową tablicę, stosując funkcję do każdego elementu",
-          "correct": true
-        },
-        {
-          "uk": "Фільтрує елементи масиву",
-          "en": "Filters array elements",
-          "pl": "Filtruje elementy tablicy",
-          "correct": false
-        },
-        {
-          "uk": "Шукає перший відповідний елемент",
-          "en": "Finds first matching element",
-          "pl": "Znajduje pierwszy pasujący element",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q06",
-      "order": 6,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Яка різниця між filter() та find()?",
-        "exp": "filter() повертає масив всіх елементів, що відповідають умові. find() повертає перший відповідний елемент або undefined."
-      },
-      "en": {
-        "q": "What's the difference between filter() and find()?",
-        "exp": "filter() returns array of all elements matching condition. find() returns first matching element or undefined."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między filter() a find()?",
-        "exp": "filter() zwraca tablicę wszystkich elementów spełniających warunek. find() zwraca pierwszy pasujący element lub undefined."
-      },
-      "answers": [
-        {
-          "uk": "filter() швидший за find()",
-          "en": "filter() is faster than find()",
-          "pl": "filter() jest szybszy niż find()",
-          "correct": false
-        },
-        {
-          "uk": "filter() повертає масив елементів, find() повертає перший елемент",
-          "en": "filter() returns array of elements, find() returns first element",
-          "pl": "filter() zwraca tablicę elementów, find() zwraca pierwszy element",
-          "correct": true
-        },
-        {
-          "uk": "find() може використовувати тільки стрілкові функції",
-          "en": "find() can only use arrow functions",
-          "pl": "find() może używać tylko funkcji strzałkowych",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q07",
-      "order": 7,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Що повертає метод some()?",
-        "exp": "some() повертає true, якщо хоча б один елемент масиву відповідає умові, інакше false."
-      },
-      "en": {
-        "q": "What does the some() method return?",
-        "exp": "some() returns true if at least one array element matches the condition, otherwise false."
-      },
-      "pl": {
-        "q": "Co zwraca metoda some()?",
-        "exp": "some() zwraca true, jeśli przynajmniej jeden element tablicy spełnia warunek, w przeciwnym razie false."
-      },
-      "answers": [
-        {
-          "uk": "Масив елементів, що відповідають умові",
-          "en": "Array of elements matching condition",
-          "pl": "Tablicę elementów spełniających warunek",
-          "correct": false
-        },
-        {
-          "uk": "true якщо хоча б один елемент відповідає умові",
-          "en": "true if at least one element matches condition",
-          "pl": "true jeśli przynajmniej jeden element spełnia warunek",
-          "correct": true
-        },
-        {
-          "uk": "Кількість елементів, що відповідають умові",
-          "en": "Count of elements matching condition",
-          "pl": "Liczbę elementów spełniających warunek",
-          "correct": false
-        },
-        {
-          "uk": "Індекс першого елемента, що відповідає умові",
-          "en": "Index of first matching element",
-          "pl": "Indeks pierwszego pasującego elementu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q08",
-      "order": 8,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Яка різниця між some() та every()?",
-        "exp": "some() повертає true якщо хоча б один елемент відповідає умові, every() повертає true тільки якщо всі елементи відповідають."
-      },
-      "en": {
-        "q": "What's the difference between some() and every()?",
-        "exp": "some() returns true if at least one element matches, every() returns true only if all elements match."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między some() a every()?",
-        "exp": "some() zwraca true jeśli przynajmniej jeden element pasuje, every() zwraca true tylko jeśli wszystkie elementy pasują."
-      },
-      "answers": [
-        {
-          "uk": "some() перевіряє один елемент, every() перевіряє всі",
-          "en": "some() checks one element, every() checks all",
-          "pl": "some() sprawdza jeden element, every() sprawdza wszystkie",
-          "correct": false
-        },
-        {
-          "uk": "some() для хоча б одного елемента, every() для всіх елементів",
-          "en": "some() for at least one element, every() for all elements",
-          "pl": "some() dla przynajmniej jednego elementu, every() dla wszystkich elementów",
-          "correct": true
-        },
-        {
-          "uk": "every() швидший за some()",
-          "en": "every() is faster than some()",
-          "pl": "every() jest szybszy niż some()",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q09",
-      "order": 9,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке IIFE (Immediately Invoked Function Expression)?",
-        "exp": "IIFE — це функція, яка виконується одразу після оголошення. Використовується для створення локальної області видимості."
-      },
-      "en": {
-        "q": "What is IIFE (Immediately Invoked Function Expression)?",
-        "exp": "IIFE is a function that executes immediately after declaration. Used to create local scope."
-      },
-      "pl": {
-        "q": "Czym jest IIFE (Immediately Invoked Function Expression)?",
-        "exp": "IIFE to funkcja, która wykonuje się natychmiast po deklaracji. Używana do tworzenia lokalnego zakresu."
-      },
-      "answers": [
-        {
-          "uk": "Функція, яка викликається через setInterval",
-          "en": "Function called through setInterval",
-          "pl": "Funkcja wywoływana przez setInterval",
-          "correct": false
-        },
-        {
-          "uk": "Функція, яка виконується одразу після оголошення",
-          "en": "Function that executes immediately after declaration",
-          "pl": "Funkcja wykonująca się natychmiast po deklaracji",
-          "correct": true
-        },
-        {
-          "uk": "Асинхронна функція з async/await",
-          "en": "Asynchronous function with async/await",
-          "pl": "Funkcja asynchroniczna z async/await",
-          "correct": false
-        },
-        {
-          "uk": "Стрілкова функція без параметрів",
-          "en": "Arrow function without parameters",
-          "pl": "Funkcja strzałkowa bez parametrów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q10",
-      "order": 10,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Чому об'єкти порівнюються за посиланням, а не за вмістом?",
-        "exp": "JavaScript порівнює об'єкти за посиланням в пам'яті. Два різні об'єкти з однаковими властивостями — це різні об'єкти."
-      },
-      "en": {
-        "q": "Why are objects compared by reference, not by content?",
-        "exp": "JavaScript compares objects by memory reference. Two different objects with same properties are different objects."
-      },
-      "pl": {
-        "q": "Dlaczego obiekty są porównywane przez referencję, a nie przez zawartość?",
-        "exp": "JavaScript porównuje obiekty przez referencję w pamięci. Dwa różne obiekty z tymi samymi właściwościami to różne obiekty."
-      },
-      "answers": [
-        {
-          "uk": "Для економії пам'яті",
-          "en": "To save memory",
-          "pl": "Aby zaoszczędzić pamięć",
-          "correct": false
-        },
-        {
-          "uk": "Об'єкти зберігаються в пам'яті і порівнюються за посиланням, а не за значенням",
-          "en": "Objects are stored in memory and compared by reference, not by value",
-          "pl": "Obiekty są przechowywane w pamięci i porównywane przez referencję, a nie wartość",
-          "correct": true
-        },
-        {
-          "uk": "Це помилка в JavaScript",
-          "en": "This is a bug in JavaScript",
-          "pl": "To błąd w JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Порівняння за вмістом працює повільно",
-          "en": "Content comparison works slowly",
-          "pl": "Porównanie zawartości działa wolno",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/js/advanced/javascript-advanced-quiz-part2.json b/json/quizzes/js/advanced/javascript-advanced-quiz-part2.json
deleted file mode 100644
index c7196dc8..00000000
--- a/json/quizzes/js/advanced/javascript-advanced-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "js-adv-q11",
-      "order": 11,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Що таке функції вищого порядку (Higher Order Functions)?",
-        "exp": "Функції вищого порядку приймають інші функції як аргументи або повертають функції як результат."
-      },
-      "en": {
-        "q": "What are Higher Order Functions?",
-        "exp": "Higher order functions accept other functions as arguments or return functions as result."
-      },
-      "pl": {
-        "q": "Czym są funkcje wyższego rzędu (Higher Order Functions)?",
-        "exp": "Funkcje wyższego rzędu przyjmują inne funkcje jako argumenty lub zwracają funkcje jako wynik."
-      },
-      "answers": [
-        {
-          "uk": "Функції з великою складністю алгоритму",
-          "en": "Functions with high algorithm complexity",
-          "pl": "Funkcje o wysokiej złożoności algorytmicznej",
-          "correct": false
-        },
-        {
-          "uk": "Функції, що приймають інші функції як аргументи або повертають функції",
-          "en": "Functions that accept other functions as arguments or return functions",
-          "pl": "Funkcje przyjmujące inne funkcje jako argumenty lub zwracające funkcje",
-          "correct": true
-        },
-        {
-          "uk": "Асинхронні функції з async/await",
-          "en": "Asynchronous functions with async/await",
-          "pl": "Funkcje asynchroniczne z async/await",
-          "correct": false
-        },
-        {
-          "uk": "Функції, що працюють з числами високої точності",
-          "en": "Functions working with high-precision numbers",
-          "pl": "Funkcje pracujące z liczbami o wysokiej precyzji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q12",
-      "order": 12,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Що таке об'єкт arguments у JavaScript?",
-        "exp": "arguments — це масивоподібний об'єкт всередині функції, що містить всі передані аргументи. Не доступний у стрілкових функціях."
-      },
-      "en": {
-        "q": "What is the arguments object in JavaScript?",
-        "exp": "arguments is an array-like object inside functions containing all passed arguments. Not available in arrow functions."
-      },
-      "pl": {
-        "q": "Czym jest obiekt arguments w JavaScript?",
-        "exp": "arguments to obiekt podobny do tablicy wewnątrz funkcji, zawierający wszystkie przekazane argumenty. Niedostępny w funkcjach strzałkowych."
-      },
-      "answers": [
-        {
-          "uk": "Масив параметрів функції",
-          "en": "Array of function parameters",
-          "pl": "Tablica parametrów funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Масивоподібний об'єкт з переданими аргументами, недоступний у стрілкових функціях",
-          "en": "Array-like object with passed arguments, unavailable in arrow functions",
-          "pl": "Obiekt podobny do tablicy z przekazanymi argumentami, niedostępny w funkcjach strzałkowych",
-          "correct": true
-        },
-        {
-          "uk": "Глобальний об'єкт для всіх функцій",
-          "en": "Global object for all functions",
-          "pl": "Globalny obiekt dla wszystkich funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Властивість window для доступу до URL параметрів",
-          "en": "Window property for accessing URL parameters",
-          "pl": "Właściwość window do dostępu do parametrów URL",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q13",
-      "order": 13,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка різниця між null та undefined?",
-        "exp": "null — явне присвоєння відсутності значення, undefined — змінна оголошена але не ініціалізована."
-      },
-      "en": {
-        "q": "What's the difference between null and undefined?",
-        "exp": "null is explicitly assigned absence of value, undefined is declared but not initialized variable."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między null a undefined?",
-        "exp": "null to jawnie przypisany brak wartości, undefined to zmienna zadeklarowana ale niezainicjalizowana."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        },
-        {
-          "uk": "null присвоюється явно, undefined означає неініціалізовану змінну",
-          "en": "null is assigned explicitly, undefined means uninitialized variable",
-          "pl": "null jest przypisywany jawnie, undefined oznacza niezainicjalizowaną zmienną",
-          "correct": true
-        },
-        {
-          "uk": "undefined є об'єктом, null — примітивом",
-          "en": "undefined is object, null is primitive",
-          "pl": "undefined jest obiektem, null jest prymitywem",
-          "correct": false
-        },
-        {
-          "uk": "null можна використовувати тільки з числами",
-          "en": "null can only be used with numbers",
-          "pl": "null może być używany tylko z liczbami",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q14",
-      "order": 14,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Які значення в JavaScript є хибними (falsy)?",
-        "exp": "Хибні значення: false, 0, -0, '', null, undefined, NaN. Всі інші значення — правдиві (truthy)."
-      },
-      "en": {
-        "q": "What values in JavaScript are falsy?",
-        "exp": "Falsy values: false, 0, -0, '', null, undefined, NaN. All other values are truthy."
-      },
-      "pl": {
-        "q": "Jakie wartości w JavaScript są fałszywe (falsy)?",
-        "exp": "Fałszywe wartości: false, 0, -0, '', null, undefined, NaN. Wszystkie inne wartości są prawdziwe (truthy)."
-      },
-      "answers": [
-        {
-          "uk": "Тільки false і null",
-          "en": "Only false and null",
-          "pl": "Tylko false i null",
-          "correct": false
-        },
-        {
-          "uk": "false, 0, -0, '', null, undefined, NaN",
-          "en": "false, 0, -0, '', null, undefined, NaN",
-          "pl": "false, 0, -0, '', null, undefined, NaN",
-          "correct": true
-        },
-        {
-          "uk": "Всі порожні структури даних",
-          "en": "All empty data structures",
-          "pl": "Wszystkie puste struktury danych",
-          "correct": false
-        },
-        {
-          "uk": "Негативні числа",
-          "en": "Negative numbers",
-          "pl": "Liczby ujemne",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q15",
-      "order": 15,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Що робить оператор !! (подвійне заперечення)?",
-        "exp": "Оператор !! перетворює будь-яке значення в його булевий еквівалент (true або false)."
-      },
-      "en": {
-        "q": "What does the !! (double negation) operator do?",
-        "exp": "The !! operator converts any value to its boolean equivalent (true or false)."
-      },
-      "pl": {
-        "q": "Co robi operator !! (podwójna negacja)?",
-        "exp": "Operator !! konwertuje dowolną wartość do jej logicznego odpowiednika (true lub false)."
-      },
-      "answers": [
-        {
-          "uk": "Подвоює числове значення",
-          "en": "Doubles the numeric value",
-          "pl": "Podwaja wartość numeryczną",
-          "correct": false
-        },
-        {
-          "uk": "Перетворює значення в булевий тип",
-          "en": "Converts value to boolean type",
-          "pl": "Konwertuje wartość do typu logicznego",
-          "correct": true
-        },
-        {
-          "uk": "Інвертує біт в числі",
-          "en": "Inverts bit in number",
-          "pl": "Odwraca bit w liczbie",
-          "correct": false
-        },
-        {
-          "uk": "Створює коментар в коді",
-          "en": "Creates comment in code",
-          "pl": "Tworzy komentarz w kodzie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q16",
-      "order": 16,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Як працює оператор || (логічне АБО) з непримітивними типами?",
-        "exp": "|| повертає перше truthy значення або останнє значення, якщо всі falsy. Часто використовується для значень за замовчуванням."
-      },
-      "en": {
-        "q": "How does the || (logical OR) operator work with non-primitive types?",
-        "exp": "|| returns first truthy value or last value if all falsy. Often used for default values."
-      },
-      "pl": {
-        "q": "Jak działa operator || (logiczne LUB) z typami nieprymitywnymi?",
-        "exp": "|| zwraca pierwszą prawdziwą wartość lub ostatnią wartość, jeśli wszystkie są fałszywe. Często używany dla wartości domyślnych."
-      },
-      "answers": [
-        {
-          "uk": "Завжди повертає boolean",
-          "en": "Always returns boolean",
-          "pl": "Zawsze zwraca boolean",
-          "correct": false
-        },
-        {
-          "uk": "Повертає перше truthy значення або останнє значення",
-          "en": "Returns first truthy value or last value",
-          "pl": "Zwraca pierwszą prawdziwą wartość lub ostatnią wartość",
-          "correct": true
-        },
-        {
-          "uk": "Об'єднує два значення в масив",
-          "en": "Combines two values into array",
-          "pl": "Łączy dwie wartości w tablicę",
-          "correct": false
-        },
-        {
-          "uk": "Працює тільки з булевими значеннями",
-          "en": "Works only with boolean values",
-          "pl": "Działa tylko z wartościami logicznymi",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q17",
-      "order": 17,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке WeakMap і чим він відрізняється від Map?",
-        "exp": "WeakMap зберігає ключі як слабкі посилання — об'єкти-ключі можуть бути видалені garbage collector. Ключі можуть бути тільки об'єктами."
-      },
-      "en": {
-        "q": "What is WeakMap and how does it differ from Map?",
-        "exp": "WeakMap stores keys as weak references — key objects can be garbage collected. Keys can only be objects."
-      },
-      "pl": {
-        "q": "Czym jest WeakMap i jak różni się od Map?",
-        "exp": "WeakMap przechowuje klucze jako słabe referencje — obiekty-klucze mogą być usunięte przez garbage collector. Klucze mogą być tylko obiektami."
-      },
-      "answers": [
-        {
-          "uk": "WeakMap працює повільніше за Map",
-          "en": "WeakMap works slower than Map",
-          "pl": "WeakMap działa wolniej niż Map",
-          "correct": false
-        },
-        {
-          "uk": "WeakMap зберігає слабкі посилання, ключі тільки об'єкти, підлягають garbage collection",
-          "en": "WeakMap stores weak references, keys only objects, subject to garbage collection",
-          "pl": "WeakMap przechowuje słabe referencje, klucze tylko obiekty, podlegają garbage collection",
-          "correct": true
-        },
-        {
-          "uk": "WeakMap може зберігати тільки примітивні типи",
-          "en": "WeakMap can only store primitive types",
-          "pl": "WeakMap może przechowywać tylko typy prymitywne",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q18",
-      "order": 18,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як створити об'єкт без прототипу?",
-        "exp": "Використати Object.create(null) — створює об'єкт без ланцюжка прототипів, без успадкованих методів від Object.prototype."
-      },
-      "en": {
-        "q": "How to create an object without a prototype?",
-        "exp": "Use Object.create(null) — creates object without prototype chain, without inherited methods from Object.prototype."
-      },
-      "pl": {
-        "q": "Jak stworzyć obiekt bez prototypu?",
-        "exp": "Użyć Object.create(null) — tworzy obiekt bez łańcucha prototypów, bez odziedziczonych metod z Object.prototype."
-      },
-      "answers": [
-        {
-          "uk": "const obj = {}",
-          "en": "const obj = {}",
-          "pl": "const obj = {}",
-          "correct": false
-        },
-        {
-          "uk": "Object.create(null)",
-          "en": "Object.create(null)",
-          "pl": "Object.create(null)",
-          "correct": true
-        },
-        {
-          "uk": "new Object()",
-          "en": "new Object()",
-          "pl": "new Object()",
-          "correct": false
-        },
-        {
-          "uk": "Неможливо створити об'єкт без прототипу",
-          "en": "Impossible to create object without prototype",
-          "pl": "Niemożliwe utworzenie obiektu bez prototypu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q19",
-      "order": 19,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Що таке каррінг (currying) функцій?",
-        "exp": "Каррінг — це перетворення функції з багатьма аргументами на послідовність функцій, кожна з яких приймає один аргумент."
-      },
-      "en": {
-        "q": "What is function currying?",
-        "exp": "Currying is transforming a function with multiple arguments into a sequence of functions, each taking one argument."
-      },
-      "pl": {
-        "q": "Czym jest currying funkcji?",
-        "exp": "Currying to przekształcenie funkcji z wieloma argumentami w sekwencję funkcji, z których każda przyjmuje jeden argument."
-      },
-      "answers": [
-        {
-          "uk": "Викликання функції кілька разів поспіль",
-          "en": "Calling function multiple times in a row",
-          "pl": "Wywoływanie funkcji wielokrotnie z rzędu",
-          "correct": false
-        },
-        {
-          "uk": "Перетворення функції на послідовність функцій з одним аргументом кожна",
-          "en": "Transforming function into sequence of functions with one argument each",
-          "pl": "Przekształcenie funkcji w sekwencję funkcji z jednym argumentem każda",
-          "correct": true
-        },
-        {
-          "uk": "Асинхронне виконання функції",
-          "en": "Asynchronous function execution",
-          "pl": "Asynchroniczne wykonanie funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Оптимізація функції для швидшого виконання",
-          "en": "Function optimization for faster execution",
-          "pl": "Optymalizacja funkcji dla szybszego wykonania",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-adv-q20",
-      "order": 20,
-      "difficulty": "intermediate",
-      "uk": {
-        "q": "Чому функції в JavaScript називають об'єктами першого класу?",
-        "exp": "Функції можуть бути збережені в змінних, передані як аргументи, повернуті з інших функцій і динамічно створені."
-      },
-      "en": {
-        "q": "Why are functions in JavaScript called first-class objects?",
-        "exp": "Functions can be stored in variables, passed as arguments, returned from other functions, and dynamically created."
-      },
-      "pl": {
-        "q": "Dlaczego funkcje w JavaScript są nazywane obiektami pierwszej klasy?",
-        "exp": "Funkcje mogą być przechowywane w zmiennych, przekazywane jako argumenty, zwracane z innych funkcji i dynamicznie tworzone."
-      },
-      "answers": [
-        {
-          "uk": "Вони найшвидші серед всіх типів даних",
-          "en": "They are fastest among all data types",
-          "pl": "Są najszybsze spośród wszystkich typów danych",
-          "correct": false
-        },
-        {
-          "uk": "Можуть бути збережені, передані, повернуті та динамічно створені",
-          "en": "Can be stored, passed, returned and dynamically created",
-          "pl": "Mogą być przechowywane, przekazywane, zwracane i dynamicznie tworzone",
-          "correct": true
-        },
-        {
-          "uk": "Вони завжди викликаються першими",
-          "en": "They are always called first",
-          "pl": "Są zawsze wywoływane jako pierwsze",
-          "correct": false
-        },
-        {
-          "uk": "Мають найвищий пріоритет в пам'яті",
-          "en": "Have highest priority in memory",
-          "pl": "Mają najwyższy priorytet w pamięci",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/js/advanced/javascript-advanced-quiz-part3.json b/json/quizzes/js/advanced/javascript-advanced-quiz-part3.json
deleted file mode 100644
index 4236db50..00000000
--- a/json/quizzes/js/advanced/javascript-advanced-quiz-part3.json
+++ /dev/null
@@ -1,144 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "js-adv-q21",
-      "order": 21,
-      "difficulty": "intermediate",
-      "uk": {"q": "Що робить метод forEach()?", "exp": "forEach() виконує функцію для кожного елемента масиву. Не повертає нове значення, завжди undefined."},
-      "en": {"q": "What does the forEach() method do?", "exp": "forEach() executes function for each array element. Returns no new value, always undefined."},
-      "pl": {"q": "Co robi metoda forEach()?", "exp": "forEach() wykonuje funkcję dla każdego elementu tablicy. Nie zwraca nowej wartości, zawsze undefined."},
-      "answers": [
-        {"uk": "Створює новий масив", "en": "Creates new array", "pl": "Tworzy nową tablicę", "correct": false},
-        {"uk": "Виконує функцію для кожного елемента, повертає undefined", "en": "Executes function for each element, returns undefined", "pl": "Wykonuje funkcję dla każdego elementu, zwraca undefined", "correct": true},
-        {"uk": "Фільтрує елементи масиву", "en": "Filters array elements", "pl": "Filtruje elementy tablicy", "correct": false},
-        {"uk": "Повертає перший елемент", "en": "Returns first element", "pl": "Zwraca pierwszy element", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q22",
-      "order": 22,
-      "difficulty": "intermediate",
-      "uk": {"q": "Що таке оператор опціональної послідовності (?.)? ", "exp": "?. дозволяє безпечно отримувати доступ до властивостей, навіть якщо вони null або undefined. Повертає undefined замість помилки."},
-      "en": {"q": "What is the optional chaining operator (?.)?", "exp": "?. allows safe access to properties even if they are null or undefined. Returns undefined instead of error."},
-      "pl": {"q": "Czym jest operator opcjonalnego łańcucha (?.)?", "exp": "?. pozwala na bezpieczny dostęp do właściwości, nawet jeśli są null lub undefined. Zwraca undefined zamiast błędu."},
-      "answers": [
-        {"uk": "Оператор множення", "en": "Multiplication operator", "pl": "Operator mnożenia", "correct": false},
-        {"uk": "Безпечний доступ до властивостей, повертає undefined замість помилки", "en": "Safe property access, returns undefined instead of error", "pl": "Bezpieczny dostęp do właściwości, zwraca undefined zamiast błędu", "correct": true},
-        {"uk": "Оператор конкатенації рядків", "en": "String concatenation operator", "pl": "Operator konkatenacji stringów", "correct": false},
-        {"uk": "Тернарний оператор", "en": "Ternary operator", "pl": "Operator trójargumentowy", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q23",
-      "order": 23,
-      "difficulty": "advanced",
-      "uk": {"q": "Що таке генератори (generators) у JavaScript?", "exp": "Генератори — це функції (function*), які можуть призупиняти виконання через yield та відновлювати його через next()."},
-      "en": {"q": "What are generators in JavaScript?", "exp": "Generators are functions (function*) that can pause execution via yield and resume via next()."},
-      "pl": {"q": "Czym są generatory w JavaScript?", "exp": "Generatory to funkcje (function*), które mogą wstrzymywać wykonanie przez yield i wznawiać przez next()."},
-      "answers": [
-        {"uk": "Функції для генерації випадкових чисел", "en": "Functions for generating random numbers", "pl": "Funkcje do generowania losowych liczb", "correct": false},
-        {"uk": "Функції, що можуть призупиняти та відновлювати виконання через yield/next", "en": "Functions that can pause and resume execution via yield/next", "pl": "Funkcje, które mogą wstrzymywać i wznawiać wykonanie przez yield/next", "correct": true},
-        {"uk": "Конструктори об'єктів", "en": "Object constructors", "pl": "Konstruktory obiektów", "correct": false},
-        {"uk": "Асинхронні функції", "en": "Asynchronous functions", "pl": "Funkcje asynchroniczne", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q24",
-      "order": 24,
-      "difficulty": "intermediate",
-      "uk": {"q": "Що таке Temporal Dead Zone (TDZ)?", "exp": "TDZ — це період між початком області видимості та ініціалізацією змінної let/const. Доступ до змінної в TDZ викликає ReferenceError."},
-      "en": {"q": "What is Temporal Dead Zone (TDZ)?", "exp": "TDZ is the period between start of scope and initialization of let/const variable. Accessing variable in TDZ causes ReferenceError."},
-      "pl": {"q": "Czym jest Temporal Dead Zone (TDZ)?", "exp": "TDZ to okres między początkiem zakresu a inicjalizacją zmiennej let/const. Dostęp do zmiennej w TDZ powoduje ReferenceError."},
-      "answers": [
-        {"uk": "Зона для тимчасових файлів", "en": "Zone for temporary files", "pl": "Strefa dla plików tymczasowych", "correct": false},
-        {"uk": "Період між початком області видимості та ініціалізацією let/const", "en": "Period between scope start and let/const initialization", "pl": "Okres między początkiem zakresu a inicjalizacją let/const", "correct": true},
-        {"uk": "Спеціальна пам'ять для видалених змінних", "en": "Special memory for deleted variables", "pl": "Specjalna pamięć dla usuniętych zmiennych", "correct": false},
-        {"uk": "Зона для setTimeout функцій", "en": "Zone for setTimeout functions", "pl": "Strefa dla funkcji setTimeout", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q25",
-      "order": 25,
-      "difficulty": "intermediate",
-      "uk": {"q": "Яка різниця між function declaration та function expression?", "exp": "Function declaration піднімається і доступна до оголошення. Function expression ініціалізується тільки після виконання присвоєння."},
-      "en": {"q": "What's the difference between function declaration and function expression?", "exp": "Function declaration is hoisted and available before declaration. Function expression is initialized only after assignment executes."},
-      "pl": {"q": "Jaka jest różnica między function declaration a function expression?", "exp": "Function declaration jest hoistowany i dostępny przed deklaracją. Function expression jest inicjalizowany tylko po wykonaniu przypisania."},
-      "answers": [
-        {"uk": "Різниці немає", "en": "No difference", "pl": "Nie ma różnicy", "correct": false},
-        {"uk": "Declaration піднімається і доступна раніше, expression — тільки після присвоєння", "en": "Declaration is hoisted and available earlier, expression only after assignment", "pl": "Declaration jest hoistowane i dostępne wcześniej, expression tylko po przypisaniu", "correct": true},
-        {"uk": "Expression швидша за declaration", "en": "Expression is faster than declaration", "pl": "Expression jest szybsze niż declaration", "correct": false},
-        {"uk": "Declaration працює тільки з async функціями", "en": "Declaration works only with async functions", "pl": "Declaration działa tylko z funkcjami async", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q26",
-      "order": 26,
-      "difficulty": "intermediate",
-      "uk": {"q": "Що робить метод findIndex()?", "exp": "findIndex() повертає індекс першого елемента масиву, що відповідає умові, або -1 якщо не знайдено."},
-      "en": {"q": "What does the findIndex() method do?", "exp": "findIndex() returns index of first array element matching condition, or -1 if not found."},
-      "pl": {"q": "Co robi metoda findIndex()?", "exp": "findIndex() zwraca indeks pierwszego elementu tablicy spełniającego warunek, lub -1 jeśli nie znaleziono."},
-      "answers": [
-        {"uk": "Повертає масив індексів всіх відповідних елементів", "en": "Returns array of indexes of all matching elements", "pl": "Zwraca tablicę indeksów wszystkich pasujących elementów", "correct": false},
-        {"uk": "Повертає індекс першого відповідного елемента або -1", "en": "Returns index of first matching element or -1", "pl": "Zwraca indeks pierwszego pasującego elementu lub -1", "correct": true},
-        {"uk": "Повертає сам елемент, а не його індекс", "en": "Returns element itself, not its index", "pl": "Zwraca sam element, a nie jego indeks", "correct": false},
-        {"uk": "Повертає останній індекс в масиві", "en": "Returns last index in array", "pl": "Zwraca ostatni indeks w tablicy", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q27",
-      "order": 27,
-      "difficulty": "beginner",
-      "uk": {"q": "Який найшвидший спосіб перетворення рядка на число?", "exp": "Унарний оператор + є найшвидшим способом: +\"123\" === 123. Працює швидше за parseInt() та parseFloat()."},
-      "en": {"q": "What's the fastest way to convert string to number?", "exp": "Unary + operator is fastest: +\"123\" === 123. Works faster than parseInt() and parseFloat()."},
-      "pl": {"q": "Jaki jest najszybszy sposób konwersji stringa na liczbę?", "exp": "Unarny operator + jest najszybszy: +\"123\" === 123. Działa szybciej niż parseInt() i parseFloat()."},
-      "answers": [
-        {"uk": "parseInt()", "en": "parseInt()", "pl": "parseInt()", "correct": false},
-        {"uk": "Унарний оператор +", "en": "Unary + operator", "pl": "Unarny operator +", "correct": true},
-        {"uk": "Number()", "en": "Number()", "pl": "Number()", "correct": false},
-        {"uk": "parseFloat()", "en": "parseFloat()", "pl": "parseFloat()", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q28",
-      "order": 28,
-      "difficulty": "intermediate",
-      "uk": {"q": "Що таке регулярні вирази (RegEx)?", "exp": "RegEx — це шаблони для пошуку, перевірки та маніпулювання текстом. Створюються через /pattern/flags або new RegExp()."},
-      "en": {"q": "What are Regular Expressions (RegEx)?", "exp": "RegEx are patterns for searching, validating and manipulating text. Created via /pattern/flags or new RegExp()."},
-      "pl": {"q": "Czym są wyrażenia regularne (RegEx)?", "exp": "RegEx to wzorce do wyszukiwania, walidacji i manipulacji tekstem. Tworzone przez /pattern/flags lub new RegExp()."},
-      "answers": [
-        {"uk": "Функції для роботи з числами", "en": "Functions for working with numbers", "pl": "Funkcje do pracy z liczbami", "correct": false},
-        {"uk": "Шаблони для пошуку, перевірки та маніпулювання текстом", "en": "Patterns for searching, validating and manipulating text", "pl": "Wzorce do wyszukiwania, walidacji i manipulacji tekstem", "correct": true},
-        {"uk": "Спеціальні об'єкти для зберігання даних", "en": "Special objects for storing data", "pl": "Specjalne obiekty do przechowywania danych", "correct": false},
-        {"uk": "Метод сортування масивів", "en": "Method for sorting arrays", "pl": "Metoda sortowania tablic", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q29",
-      "order": 29,
-      "difficulty": "intermediate",
-      "uk": {"q": "Що робить метод flatMap()?", "exp": "flatMap() поєднує map() та flat() — спочатку застосовує функцію, потім \"розплющує\" результат на один рівень."},
-      "en": {"q": "What does the flatMap() method do?", "exp": "flatMap() combines map() and flat() — first applies function, then flattens result by one level."},
-      "pl": {"q": "Co robi metoda flatMap()?", "exp": "flatMap() łączy map() i flat() — najpierw stosuje funkcję, potem spłaszcza wynik o jeden poziom."},
-      "answers": [
-        {"uk": "Створює плоский масив без вкладених масивів", "en": "Creates flat array without nested arrays", "pl": "Tworzy płaską tablicę bez zagnieżdżonych tablic", "correct": false},
-        {"uk": "Застосовує функцію до елементів і розплющує результат на один рівень", "en": "Applies function to elements and flattens result by one level", "pl": "Stosuje funkcję do elementów i spłaszcza wynik o jeden poziom", "correct": true},
-        {"uk": "Сортує елементи масиву", "en": "Sorts array elements", "pl": "Sortuje elementy tablicy", "correct": false},
-        {"uk": "Видаляє дублікати з масиву", "en": "Removes duplicates from array", "pl": "Usuwa duplikaty z tablicy", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q30",
-      "order": 30,
-      "difficulty": "advanced",
-      "uk": {"q": "Яка різниця між Set та Array?", "exp": "Set зберігає тільки унікальні значення без індексів, має методи add/delete/has. Array зберігає будь-які значення з індексами."},
-      "en": {"q": "What's the difference between Set and Array?", "exp": "Set stores only unique values without indexes, has add/delete/has methods. Array stores any values with indexes."},
-      "pl": {"q": "Jaka jest różnica między Set a Array?", "exp": "Set przechowuje tylko unikalne wartości bez indeksów, ma metody add/delete/has. Array przechowuje dowolne wartości z indeksami."},
-      "answers": [
-        {"uk": "Різниці немає", "en": "No difference", "pl": "Nie ma różnicy", "correct": false},
-        {"uk": "Set зберігає тільки унікальні значення, Array — будь-які з індексами", "en": "Set stores only unique values, Array stores any values with indexes", "pl": "Set przechowuje tylko unikalne wartości, Array przechowuje dowolne z indeksami", "correct": true},
-        {"uk": "Set швидший за Array", "en": "Set is faster than Array", "pl": "Set jest szybszy niż Array", "correct": false},
-        {"uk": "Array не може зберігати об'єкти", "en": "Array cannot store objects", "pl": "Array nie może przechowywać obiektów", "correct": false}
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/js/advanced/javascript-advanced-quiz-part4.json b/json/quizzes/js/advanced/javascript-advanced-quiz-part4.json
deleted file mode 100644
index 1c3cfae4..00000000
--- a/json/quizzes/js/advanced/javascript-advanced-quiz-part4.json
+++ /dev/null
@@ -1,144 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "js-adv-q31",
-      "order": 31,
-      "difficulty": "advanced",
-      "uk": {"q": "Що таке мемоїзація (memoization)?", "exp": "Мемоїзація — це техніка кешування результатів функції для уникнення повторних обчислень з тими самими аргументами."},
-      "en": {"q": "What is memoization?", "exp": "Memoization is a technique of caching function results to avoid repeated calculations with same arguments."},
-      "pl": {"q": "Czym jest memoizacja?", "exp": "Memoizacja to technika buforowania wyników funkcji, aby uniknąć powtarzających się obliczeń z tymi samymi argumentami."},
-      "answers": [
-        {"uk": "Збереження даних в LocalStorage", "en": "Storing data in LocalStorage", "pl": "Przechowywanie danych w LocalStorage", "correct": false},
-        {"uk": "Кешування результатів функції для уникнення повторних обчислень", "en": "Caching function results to avoid repeated calculations", "pl": "Buforowanie wyników funkcji aby uniknąć powtarzających się obliczeń", "correct": true},
-        {"uk": "Оптимізація циклів", "en": "Loop optimization", "pl": "Optymalizacja pętli", "correct": false},
-        {"uk": "Метод роботи з пам'яттю", "en": "Memory management method", "pl": "Metoda zarządzania pamięcią", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q32",
-      "order": 32,
-      "difficulty": "intermediate",
-      "uk": {"q": "Що робить метод Object.keys()?", "exp": "Object.keys() повертає масив власних перелічуваних ключів об'єкта (не включає успадковані властивості)."},
-      "en": {"q": "What does Object.keys() do?", "exp": "Object.keys() returns array of object's own enumerable keys (doesn't include inherited properties)."},
-      "pl": {"q": "Co robi Object.keys()?", "exp": "Object.keys() zwraca tablicę własnych wyliczalnych kluczy obiektu (nie zawiera odziedziczonych właściwości)."},
-      "answers": [
-        {"uk": "Повертає всі властивості об'єкта включно з успадкованими", "en": "Returns all object properties including inherited", "pl": "Zwraca wszystkie właściwości obiektu włącznie z odziedziczonymi", "correct": false},
-        {"uk": "Повертає масив власних перелічуваних ключів об'єкта", "en": "Returns array of object's own enumerable keys", "pl": "Zwraca tablicę własnych wyliczalnych kluczy obiektu", "correct": true},
-        {"uk": "Повертає масив значень об'єкта", "en": "Returns array of object values", "pl": "Zwraca tablicę wartości obiektu", "correct": false},
-        {"uk": "Створює новий об'єкт", "en": "Creates new object", "pl": "Tworzy nowy obiekt", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q33",
-      "order": 33,
-      "difficulty": "intermediate",
-      "uk": {"q": "Що робить метод Object.freeze()?", "exp": "Object.freeze() робить об'єкт незмінним — не можна додавати, видаляти чи змінювати властивості. Працює тільки на першому рівні (shallow)."},
-      "en": {"q": "What does Object.freeze() do?", "exp": "Object.freeze() makes object immutable — cannot add, delete or modify properties. Works only at first level (shallow)."},
-      "pl": {"q": "Co robi Object.freeze()?", "exp": "Object.freeze() czyni obiekt niezmiennym — nie można dodawać, usuwać ani modyfikować właściwości. Działa tylko na pierwszym poziomie (shallow)."},
-      "answers": [
-        {"uk": "Призупиняє виконання коду", "en": "Pauses code execution", "pl": "Wstrzymuje wykonanie kodu", "correct": false},
-        {"uk": "Робить об'єкт незмінним (тільки перший рівень)", "en": "Makes object immutable (only first level)", "pl": "Czyni obiekt niezmiennym (tylko pierwszy poziom)", "correct": true},
-        {"uk": "Видаляє всі властивості об'єкта", "en": "Deletes all object properties", "pl": "Usuwa wszystkie właściwości obiektu", "correct": false},
-        {"uk": "Клонує об'єкт", "en": "Clones object", "pl": "Klonuje obiekt", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q34",
-      "order": 34,
-      "difficulty": "advanced",
-      "uk": {"q": "Що таке дебаунсинг (debouncing)?", "exp": "Debouncing — це техніка затримки виконання функції до моменту, коли певна подія не відбувалась протягом заданого часу."},
-      "en": {"q": "What is debouncing?", "exp": "Debouncing is a technique to delay function execution until an event hasn't occurred for a specified time."},
-      "pl": {"q": "Czym jest debouncing?", "exp": "Debouncing to technika opóźniania wykonania funkcji do momentu, gdy zdarzenie nie wystąpiło przez określony czas."},
-      "answers": [
-        {"uk": "Метод оптимізації циклів", "en": "Loop optimization method", "pl": "Metoda optymalizacji pętli", "correct": false},
-        {"uk": "Затримка виконання функції до припинення події на заданий час", "en": "Delaying function execution until event stops for specified time", "pl": "Opóźnienie wykonania funkcji do zatrzymania zdarzenia na określony czas", "correct": true},
-        {"uk": "Перевірка типів даних", "en": "Data type validation", "pl": "Walidacja typów danych", "correct": false},
-        {"uk": "Видалення дублікатів з масиву", "en": "Removing duplicates from array", "pl": "Usuwanie duplikatów z tablicy", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q35",
-      "order": 35,
-      "difficulty": "advanced",
-      "uk": {"q": "Що таке тротлінг (throttling)?", "exp": "Throttling — це обмеження частоти виконання функції до одного разу за певний період часу, незалежно від кількості викликів."},
-      "en": {"q": "What is throttling?", "exp": "Throttling is limiting function execution frequency to once per time period, regardless of number of calls."},
-      "pl": {"q": "Czym jest throttling?", "exp": "Throttling to ograniczanie częstotliwości wykonania funkcji do raz na okres czasu, niezależnie od liczby wywołań."},
-      "answers": [
-        {"uk": "Зупинка виконання скрипта", "en": "Stopping script execution", "pl": "Zatrzymanie wykonania skryptu", "correct": false},
-        {"uk": "Обмеження частоти виконання функції до одного разу за період", "en": "Limiting function execution to once per period", "pl": "Ograniczanie wykonania funkcji do raz na okres", "correct": true},
-        {"uk": "Прискорення виконання асинхронних операцій", "en": "Speeding up async operations", "pl": "Przyspieszanie operacji asynchronicznych", "correct": false},
-        {"uk": "Видалення непотрібних змінних", "en": "Removing unnecessary variables", "pl": "Usuwanie niepotrzebnych zmiennych", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q36",
-      "order": 36,
-      "difficulty": "intermediate",
-      "uk": {"q": "Що робить метод Array.from()?", "exp": "Array.from() створює новий масив з ітерабельного або масивоподібного об'єкта (наприклад, NodeList, arguments, рядок)."},
-      "en": {"q": "What does Array.from() do?", "exp": "Array.from() creates new array from iterable or array-like object (e.g., NodeList, arguments, string)."},
-      "pl": {"q": "Co robi Array.from()?", "exp": "Array.from() tworzy nową tablicę z iterowalnego lub podobnego do tablicy obiektu (np. NodeList, arguments, string)."},
-      "answers": [
-        {"uk": "Клонує існуючий масив", "en": "Clones existing array", "pl": "Klonuje istniejącą tablicę", "correct": false},
-        {"uk": "Створює новий масив з ітерабельного або масивоподібного об'єкта", "en": "Creates new array from iterable or array-like object", "pl": "Tworzy nową tablicę z iterowalnego lub podobnego do tablicy obiektu", "correct": true},
-        {"uk": "Перетворює масив на об'єкт", "en": "Converts array to object", "pl": "Konwertuje tablicę na obiekt", "correct": false},
-        {"uk": "Сортує елементи масиву", "en": "Sorts array elements", "pl": "Sortuje elementy tablicy", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q37",
-      "order": 37,
-      "difficulty": "beginner",
-      "uk": {"q": "Що робить метод includes()?", "exp": "includes() перевіряє, чи масив або рядок містить вказане значення. Повертає true або false."},
-      "en": {"q": "What does the includes() method do?", "exp": "includes() checks if array or string contains specified value. Returns true or false."},
-      "pl": {"q": "Co robi metoda includes()?", "exp": "includes() sprawdza, czy tablica lub string zawiera określoną wartość. Zwraca true lub false."},
-      "answers": [
-        {"uk": "Додає елемент в масив", "en": "Adds element to array", "pl": "Dodaje element do tablicy", "correct": false},
-        {"uk": "Перевіряє наявність значення, повертає true/false", "en": "Checks value presence, returns true/false", "pl": "Sprawdza obecność wartości, zwraca true/false", "correct": true},
-        {"uk": "Повертає індекс елемента", "en": "Returns element index", "pl": "Zwraca indeks elementu", "correct": false},
-        {"uk": "Видаляє елемент з масиву", "en": "Removes element from array", "pl": "Usuwa element z tablicy", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q38",
-      "order": 38,
-      "difficulty": "intermediate",
-      "uk": {"q": "Що таке оператор nullish coalescing (??)?", "exp": "?? повертає праве значення тільки якщо ліве null або undefined. На відміну від ||, не реагує на 0, false, ''."},
-      "en": {"q": "What is the nullish coalescing operator (??)?", "exp": "?? returns right value only if left is null or undefined. Unlike ||, doesn't react to 0, false, ''."},
-      "pl": {"q": "Czym jest operator nullish coalescing (??)?", "exp": "?? zwraca prawą wartość tylko jeśli lewa to null lub undefined. W przeciwieństwie do ||, nie reaguje na 0, false, ''."},
-      "answers": [
-        {"uk": "Те саме що і ||", "en": "Same as ||", "pl": "To samo co ||", "correct": false},
-        {"uk": "Повертає праве значення тільки якщо ліве null/undefined", "en": "Returns right value only if left is null/undefined", "pl": "Zwraca prawą wartość tylko jeśli lewa to null/undefined", "correct": true},
-        {"uk": "Оператор множення", "en": "Multiplication operator", "pl": "Operator mnożenia", "correct": false},
-        {"uk": "Оператор порівняння", "en": "Comparison operator", "pl": "Operator porównania", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q39",
-      "order": 39,
-      "difficulty": "advanced",
-      "uk": {"q": "Що таке Proxy в JavaScript?", "exp": "Proxy дозволяє перехоплювати та змінювати базові операції з об'єктом (get, set, delete тощо) через handler з пастками (traps)."},
-      "en": {"q": "What is Proxy in JavaScript?", "exp": "Proxy allows intercepting and modifying basic object operations (get, set, delete, etc.) through handler with traps."},
-      "pl": {"q": "Czym jest Proxy w JavaScript?", "exp": "Proxy pozwala przechwytywać i modyfikować podstawowe operacje na obiekcie (get, set, delete itp.) przez handler z pułapkami."},
-      "answers": [
-        {"uk": "Сервер для проксування запитів", "en": "Server for proxying requests", "pl": "Serwer do proxy żądań", "correct": false},
-        {"uk": "Об'єкт для перехоплення та модифікації операцій з іншим об'єктом", "en": "Object for intercepting and modifying operations on another object", "pl": "Obiekt do przechwytywania i modyfikowania operacji na innym obiekcie", "correct": true},
-        {"uk": "Метод для клонування об'єктів", "en": "Method for cloning objects", "pl": "Metoda klonowania obiektów", "correct": false},
-        {"uk": "Асинхронна функція", "en": "Asynchronous function", "pl": "Funkcja asynchroniczna", "correct": false}
-      ]
-    },
-    {
-      "id": "js-adv-q40",
-      "order": 40,
-      "difficulty": "advanced",
-      "uk": {"q": "Що таке Reflect API?", "exp": "Reflect — це вбудований об'єкт з методами для виконання базових операцій з об'єктами (get, set, has тощо). Часто використовується з Proxy."},
-      "en": {"q": "What is Reflect API?", "exp": "Reflect is built-in object with methods for basic object operations (get, set, has, etc.). Often used with Proxy."},
-      "pl": {"q": "Czym jest Reflect API?", "exp": "Reflect to wbudowany obiekt z metodami do podstawowych operacji na obiektach (get, set, has itp.). Często używany z Proxy."},
-      "answers": [
-        {"uk": "Метод для дзеркального відображення інтерфейсу", "en": "Method for mirroring interface", "pl": "Metoda do lustrzanego odbicia interfejsu", "correct": false},
-        {"uk": "Вбудований об'єкт з методами для базових операцій з об'єктами", "en": "Built-in object with methods for basic object operations", "pl": "Wbudowany obiekt z metodami do podstawowych operacji na obiektach", "correct": true},
-        {"uk": "Бібліотека для роботи з DOM", "en": "Library for working with DOM", "pl": "Biblioteka do pracy z DOM", "correct": false},
-        {"uk": "Інструмент для дебагінгу", "en": "Debugging tool", "pl": "Narzędzie do debugowania", "correct": false}
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/js/fundamentals/javascript-quiz-part1.json b/json/quizzes/js/fundamentals/javascript-quiz-part1.json
deleted file mode 100644
index 0a0f6ff5..00000000
--- a/json/quizzes/js/fundamentals/javascript-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "js-q01",
-      "order": 1,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке JavaScript?",
-        "exp": "JavaScript — це динамічна мова програмування для веб-розробки, яка працює в браузері та на сервері через Node.js."
-      },
-      "en": {
-        "q": "What is JavaScript?",
-        "exp": "JavaScript is a dynamic programming language for web development that runs in browsers and on servers via Node.js."
-      },
-      "pl": {
-        "q": "Czym jest JavaScript?",
-        "exp": "JavaScript to dynamiczny język programowania do tworzenia stron internetowych, który działa w przeglądarkach i na serwerach przez Node.js."
-      },
-      "answers": [
-        {
-          "uk": "Фреймворк для створення мобільних додатків",
-          "en": "A framework for building mobile applications",
-          "pl": "Framework do tworzenia aplikacji mobilnych",
-          "correct": false
-        },
-        {
-          "uk": "Динамічна, прототипно-орієнтована мова програмування для створення інтерактивного контенту",
-          "en": "A dynamic, prototype-based programming language for creating interactive content",
-          "pl": "Dynamiczny, prototypowy język programowania do tworzenia interaktywnych treści",
-          "correct": true
-        },
-        {
-          "uk": "Система керування базами даних",
-          "en": "A database management system",
-          "pl": "System zarządzania bazami danych",
-          "correct": false
-        },
-        {
-          "uk": "CSS-препроцесор для стилізації сторінок",
-          "en": "A CSS preprocessor for styling pages",
-          "pl": "Preprocesor CSS do stylizacji stron",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q02",
-      "order": 2,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яке ключове слово НЕ рекомендується використовувати для оголошення змінних у сучасному JavaScript?",
-        "exp": "var має функціональну область видимості та підтримує hoisting, що може призвести до помилок. Використовуйте let або const."
-      },
-      "en": {
-        "q": "Which keyword is NOT recommended for declaring variables in modern JavaScript?",
-        "exp": "var has function scope and supports hoisting, which can lead to errors. Use let or const instead."
-      },
-      "pl": {
-        "q": "Którego słowa kluczowego NIE zaleca się używać do deklarowania zmiennych we współczesnym JavaScript?",
-        "exp": "var ma zakres funkcyjny i wspiera hoisting, co może prowadzić do błędów. Zamiast tego użyj let lub const."
-      },
-      "answers": [
-        {
-          "uk": "let",
-          "en": "let",
-          "pl": "let",
-          "correct": false
-        },
-        {
-          "uk": "const",
-          "en": "const",
-          "pl": "const",
-          "correct": false
-        },
-        {
-          "uk": "var",
-          "en": "var",
-          "pl": "var",
-          "correct": true
-        },
-        {
-          "uk": "function",
-          "en": "function",
-          "pl": "function",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q03",
-      "order": 3,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка основна відмінність між let і const?",
-        "exp": "const не дозволяє перевизначення змінної, тоді як let дозволяє змінювати значення. Обидва мають блочну область видимості."
-      },
-      "en": {
-        "q": "What is the main difference between let and const?",
-        "exp": "const does not allow reassignment of the variable, while let allows value changes. Both have block scope."
-      },
-      "pl": {
-        "q": "Jaka jest główna różnica między let i const?",
-        "exp": "const nie pozwala na ponowne przypisanie zmiennej, podczas gdy let pozwala na zmianę wartości. Oba mają zakres blokowy."
-      },
-      "answers": [
-        {
-          "uk": "let має глобальну область видимості, const — блочну",
-          "en": "let has global scope, const has block scope",
-          "pl": "let ma zakres globalny, const ma zakres blokowy",
-          "correct": false
-        },
-        {
-          "uk": "const не дозволяє змінювати значення змінної, let дозволяє",
-          "en": "const does not allow changing the variable value, let does",
-          "pl": "const nie pozwala na zmianę wartości zmiennej, let pozwala",
-          "correct": true
-        },
-        {
-          "uk": "let працює швидше за const",
-          "en": "let works faster than const",
-          "pl": "let działa szybciej niż const",
-          "correct": false
-        },
-        {
-          "uk": "Жодної різниці, це синоніми",
-          "en": "No difference, they are synonyms",
-          "pl": "Żadnej różnicy, to synonimy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q04",
-      "order": 4,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Скільки примітивних типів даних є в JavaScript?",
-        "exp": "У JavaScript є 7 примітивних типів: string, number, boolean, null, undefined, bigint, symbol."
-      },
-      "en": {
-        "q": "How many primitive data types are there in JavaScript?",
-        "exp": "JavaScript has 7 primitive types: string, number, boolean, null, undefined, bigint, symbol."
-      },
-      "pl": {
-        "q": "Ile prymitywnych typów danych jest w JavaScript?",
-        "exp": "JavaScript ma 7 typów prymitywnych: string, number, boolean, null, undefined, bigint, symbol."
-      },
-      "answers": [
-        {
-          "uk": "5",
-          "en": "5",
-          "pl": "5",
-          "correct": false
-        },
-        {
-          "uk": "6",
-          "en": "6",
-          "pl": "6",
-          "correct": false
-        },
-        {
-          "uk": "7",
-          "en": "7",
-          "pl": "7",
-          "correct": true
-        },
-        {
-          "uk": "8",
-          "en": "8",
-          "pl": "8",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q05",
-      "order": 5,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка основна різниця між функціональним та подієвим програмуванням у JavaScript?",
-        "exp": "Функціональне програмування базується на чистих функціях без побічних ефектів, подієве — на реакції на події через event listeners."
-      },
-      "en": {
-        "q": "What is the main difference between functional and event-driven programming in JavaScript?",
-        "exp": "Functional programming is based on pure functions without side effects, event-driven is based on reacting to events through event listeners."
-      },
-      "pl": {
-        "q": "Jaka jest główna różnica między programowaniem funkcyjnym a sterowanym zdarzeniami w JavaScript?",
-        "exp": "Programowanie funkcyjne opiera się na czystych funkcjach bez efektów ubocznych, programowanie sterowane zdarzeniami opiera się na reagowaniu na zdarzenia przez event listeners."
-      },
-      "answers": [
-        {
-          "uk": "Функціональне використовує класи, подієве — функції",
-          "en": "Functional uses classes, event-driven uses functions",
-          "pl": "Funkcyjne używa klas, sterowane zdarzeniami używa funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Функціональне базується на чистих функціях, подієве — на реакції на події",
-          "en": "Functional is based on pure functions, event-driven is based on reacting to events",
-          "pl": "Funkcyjne opiera się na czystych funkcjach, sterowane zdarzeniami na reagowaniu na wydarzenia",
-          "correct": true
-        },
-        {
-          "uk": "Подієве працює швидше за функціональне",
-          "en": "Event-driven works faster than functional",
-          "pl": "Sterowane zdarzeniami działa szybciej niż funkcyjne",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає, це одне й те саме",
-          "en": "There is no difference, they are the same",
-          "pl": "Nie ma różnicy, to to samo",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q06",
-      "order": 6,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Коли варто використовувати масив замість об'єкта?",
-        "exp": "Масиви підходять для впорядкованих колекцій, де важливий порядок елементів. Об'єкти — для зберігання пар ключ-значення."
-      },
-      "en": {
-        "q": "When should you use an array instead of an object?",
-        "exp": "Arrays are suitable for ordered collections where element order matters. Objects are for storing key-value pairs."
-      },
-      "pl": {
-        "q": "Kiedy należy używać tablicy zamiast obiektu?",
-        "exp": "Tablice są odpowiednie dla uporządkowanych kolekcji, gdzie kolejność elementów ma znaczenie. Obiekty służą do przechowywania par klucz-wartość."
-      },
-      "answers": [
-        {
-          "uk": "Коли потрібно зберігати дані з різними властивостями",
-          "en": "When you need to store data with different properties",
-          "pl": "Kiedy trzeba przechowywać dane z różnymi właściwościami",
-          "correct": false
-        },
-        {
-          "uk": "Коли порядок елементів важливий або працюєте з колекцією однотипних елементів",
-          "en": "When element order matters or you work with a collection of similar elements",
-          "pl": "Kiedy kolejność elementów ma znaczenie lub pracujesz z kolekcją podobnych elementów",
-          "correct": true
-        },
-        {
-          "uk": "Коли потрібен доступ до даних через унікальні ключі",
-          "en": "When you need access to data through unique keys",
-          "pl": "Kiedy potrzebujesz dostępu do danych przez unikalne klucze",
-          "correct": false
-        },
-        {
-          "uk": "Масиви та об'єкти завжди взаємозамінні",
-          "en": "Arrays and objects are always interchangeable",
-          "pl": "Tablice i obiekty są zawsze wymienne",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q07",
-      "order": 7,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке event bubbling у JavaScript?",
-        "exp": "Bubbling — це процес, коли подія спочатку викликається на вкладеному елементі, а потім спливає до батьківських елементів."
-      },
-      "en": {
-        "q": "What is event bubbling in JavaScript?",
-        "exp": "Bubbling is the process where an event is first triggered on the nested element, then bubbles up to parent elements."
-      },
-      "pl": {
-        "q": "Czym jest event bubbling w JavaScript?",
-        "exp": "Bubbling to proces, w którym zdarzenie jest najpierw wyzwalane na zagnieżdżonym elemencie, a następnie bąbelkuje do elementów nadrzędnych."
-      },
-      "answers": [
-        {
-          "uk": "Подія поширюється від document вниз до цільового елемента",
-          "en": "Event propagates from document down to the target element",
-          "pl": "Zdarzenie propaguje od document w dół do elementu docelowego",
-          "correct": false
-        },
-        {
-          "uk": "Подія спочатку викликається на вкладеному елементі, потім спливає до батьківських",
-          "en": "Event is first triggered on the nested element, then bubbles up to parents",
-          "pl": "Zdarzenie jest najpierw wyzwalane na zagnieżdżonym elemencie, potem bąbelkuje do rodziców",
-          "correct": true
-        },
-        {
-          "uk": "Подія викликається одночасно на всіх елементах",
-          "en": "Event is triggered simultaneously on all elements",
-          "pl": "Zdarzenie jest wyzwalane jednocześnie na wszystkich elementach",
-          "correct": false
-        },
-        {
-          "uk": "Подія зупиняється на першому елементі",
-          "en": "Event stops at the first element",
-          "pl": "Zdarzenie zatrzymuje się na pierwszym elemencie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q08",
-      "order": 8,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Чи можна змінити властивості об'єкта, оголошеного через const?",
-        "exp": "Так, const захищає від перевизначення самої змінної, але не від змін властивостей об'єкта або елементів масиву."
-      },
-      "en": {
-        "q": "Can you modify properties of an object declared with const?",
-        "exp": "Yes, const protects against reassignment of the variable itself, but not against changes to object properties or array elements."
-      },
-      "pl": {
-        "q": "Czy można modyfikować właściwości obiektu zadeklarowanego przez const?",
-        "exp": "Tak, const chroni przed ponownym przypisaniem samej zmiennej, ale nie przed zmianami właściwości obiektu lub elementów tablicy."
-      },
-      "answers": [
-        {
-          "uk": "Ні, const повністю блокує будь-які зміни",
-          "en": "No, const completely blocks any changes",
-          "pl": "Nie, const całkowicie blokuje wszelkie zmiany",
-          "correct": false
-        },
-        {
-          "uk": "Так, можна змінювати властивості об'єкта, але не саму змінну",
-          "en": "Yes, you can change object properties, but not the variable itself",
-          "pl": "Tak, można zmieniać właściwości obiektu, ale nie samą zmienną",
-          "correct": true
-        },
-        {
-          "uk": "Залежить від браузера",
-          "en": "Depends on the browser",
-          "pl": "Zależy od przeglądarki",
-          "correct": false
-        },
-        {
-          "uk": "Можна лише додавати нові властивості",
-          "en": "You can only add new properties",
-          "pl": "Można tylko dodawać nowe właściwości",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q09",
-      "order": 9,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що означає принцип DRY?",
-        "exp": "DRY (Don't Repeat Yourself) — принцип уникнення дублювання коду шляхом створення спільних функцій для повторюваної логіки."
-      },
-      "en": {
-        "q": "What does the DRY principle mean?",
-        "exp": "DRY (Don't Repeat Yourself) is the principle of avoiding code duplication by creating shared functions for repeated logic."
-      },
-      "pl": {
-        "q": "Co oznacza zasada DRY?",
-        "exp": "DRY (Don't Repeat Yourself) to zasada unikania duplikacji kodu poprzez tworzenie wspólnych funkcji dla powtarzającej się logiki."
-      },
-      "answers": [
-        {
-          "uk": "Don't Repeat Yourself — уникайте дублювання коду",
-          "en": "Don't Repeat Yourself — avoid code duplication",
-          "pl": "Don't Repeat Yourself — unikaj duplikacji kodu",
-          "correct": true
-        },
-        {
-          "uk": "Do Refactor Yearly — рефакторьте код щороку",
-          "en": "Do Refactor Yearly — refactor code annually",
-          "pl": "Do Refactor Yearly — refaktoryzuj kod rocznie",
-          "correct": false
-        },
-        {
-          "uk": "Debug Regularly Yourself — регулярно дебажте самостійно",
-          "en": "Debug Regularly Yourself — debug regularly on your own",
-          "pl": "Debug Regularly Yourself — debuguj regularnie samodzielnie",
-          "correct": false
-        },
-        {
-          "uk": "Deploy Rapidly Yesterday — швидко деплойте вчора",
-          "en": "Deploy Rapidly Yesterday — deploy rapidly yesterday",
-          "pl": "Deploy Rapidly Yesterday — wdrażaj szybko wczoraj",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q10",
-      "order": 10,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка основна відмінність між LocalStorage та SessionStorage?",
-        "exp": "LocalStorage зберігає дані постійно (до явного видалення), SessionStorage — тільки до закриття вкладки браузера."
-      },
-      "en": {
-        "q": "What is the main difference between LocalStorage and SessionStorage?",
-        "exp": "LocalStorage stores data permanently (until explicitly deleted), SessionStorage only until the browser tab is closed."
-      },
-      "pl": {
-        "q": "Jaka jest główna różnica między LocalStorage a SessionStorage?",
-        "exp": "LocalStorage przechowuje dane na stałe (do momentu jawnego usunięcia), SessionStorage tylko do zamknięcia karty przeglądarki."
-      },
-      "answers": [
-        {
-          "uk": "LocalStorage швидший за SessionStorage",
-          "en": "LocalStorage is faster than SessionStorage",
-          "pl": "LocalStorage jest szybszy niż SessionStorage",
-          "correct": false
-        },
-        {
-          "uk": "LocalStorage зберігає дані постійно, SessionStorage — тільки до закриття вкладки",
-          "en": "LocalStorage stores data permanently, SessionStorage only until tab closes",
-          "pl": "LocalStorage przechowuje dane na stałe, SessionStorage tylko do zamknięcia karty",
-          "correct": true
-        },
-        {
-          "uk": "SessionStorage має більший обсяг для зберігання",
-          "en": "SessionStorage has larger storage capacity",
-          "pl": "SessionStorage ma większą pojemność pamięci",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/js/fundamentals/javascript-quiz-part2.json b/json/quizzes/js/fundamentals/javascript-quiz-part2.json
deleted file mode 100644
index 982b5da0..00000000
--- a/json/quizzes/js/fundamentals/javascript-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "js-q11",
-      "order": 11,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке замикання (closure) у JavaScript?",
-        "exp": "Замикання — це функція, яка запам'ятовує оточення, в якому була створена, і має доступ до змінних зовнішньої області видимості."
-      },
-      "en": {
-        "q": "What is a closure in JavaScript?",
-        "exp": "A closure is a function that remembers the environment in which it was created and has access to variables from outer scope."
-      },
-      "pl": {
-        "q": "Czym jest domknięcie (closure) w JavaScript?",
-        "exp": "Domknięcie to funkcja, która pamięta środowisko, w którym została stworzona, i ma dostęp do zmiennych z zewnętrznego zakresu."
-      },
-      "answers": [
-        {
-          "uk": "Спосіб закрити браузерне вікно через JavaScript",
-          "en": "A way to close a browser window through JavaScript",
-          "pl": "Sposób na zamknięcie okna przeglądarki przez JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Функція, яка запам'ятовує оточення та має доступ до змінних зовнішньої області видимості",
-          "en": "A function that remembers its environment and has access to outer scope variables",
-          "pl": "Funkcja, która pamięta swoje otoczenie i ma dostęp do zmiennych z zewnętrznego zakresu",
-          "correct": true
-        },
-        {
-          "uk": "Метод для завершення виконання функції",
-          "en": "A method for terminating function execution",
-          "pl": "Metoda kończenia wykonywania funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Приватна властивість класу",
-          "en": "A private class property",
-          "pl": "Prywatna właściwość klasy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q12",
-      "order": 12,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке hoisting у JavaScript?",
-        "exp": "Hoisting — це механізм, при якому оголошення змінних та функцій переміщуються на початок області видимості перед виконанням коду."
-      },
-      "en": {
-        "q": "What is hoisting in JavaScript?",
-        "exp": "Hoisting is a mechanism where variable and function declarations are moved to the top of their scope before code execution."
-      },
-      "pl": {
-        "q": "Czym jest hoisting w JavaScript?",
-        "exp": "Hoisting to mechanizm, w którym deklaracje zmiennych i funkcji są przenoszone na początek ich zakresu przed wykonaniem kodu."
-      },
-      "answers": [
-        {
-          "uk": "Підняття DOM-елементів на верхній рівень сторінки",
-          "en": "Lifting DOM elements to the top level of the page",
-          "pl": "Podnoszenie elementów DOM na najwyższy poziom strony",
-          "correct": false
-        },
-        {
-          "uk": "Переміщення оголошень змінних та функцій на початок області видимості",
-          "en": "Moving variable and function declarations to the top of their scope",
-          "pl": "Przenoszenie deklaracji zmiennych i funkcji na początek ich zakresu",
-          "correct": true
-        },
-        {
-          "uk": "Оптимізація коду для швидшого виконання",
-          "en": "Code optimization for faster execution",
-          "pl": "Optymalizacja kodu dla szybszego wykonania",
-          "correct": false
-        },
-        {
-          "uk": "Видалення невикористаних змінних",
-          "en": "Removal of unused variables",
-          "pl": "Usuwanie nieużywanych zmiennych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q13",
-      "order": 13,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка область видимості у змінної, оголошеної через let?",
-        "exp": "Змінні, оголошені через let, мають блочну область видимості — існують лише в межах блоку {} де були оголошені."
-      },
-      "en": {
-        "q": "What scope does a variable declared with let have?",
-        "exp": "Variables declared with let have block scope — they exist only within the block {} where they were declared."
-      },
-      "pl": {
-        "q": "Jaki zakres ma zmienna zadeklarowana przez let?",
-        "exp": "Zmienne zadeklarowane przez let mają zakres blokowy — istnieją tylko w obrębie bloku {}, w którym zostały zadeklarowane."
-      },
-      "answers": [
-        {
-          "uk": "Глобальна область видимості",
-          "en": "Global scope",
-          "pl": "Zakres globalny",
-          "correct": false
-        },
-        {
-          "uk": "Функціональна область видимості",
-          "en": "Function scope",
-          "pl": "Zakres funkcyjny",
-          "correct": false
-        },
-        {
-          "uk": "Блочна область видимості",
-          "en": "Block scope",
-          "pl": "Zakres blokowy",
-          "correct": true
-        },
-        {
-          "uk": "Область видимості модуля",
-          "en": "Module scope",
-          "pl": "Zakres modułu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q14",
-      "order": 14,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Чим відрізняються стрілкові функції від звичайних функцій стосовно this?",
-        "exp": "Стрілкові функції не мають власного this — вони успадковують this з оточуючого контексту, де були створені."
-      },
-      "en": {
-        "q": "How do arrow functions differ from regular functions regarding this?",
-        "exp": "Arrow functions don't have their own this — they inherit this from the surrounding context where they were created."
-      },
-      "pl": {
-        "q": "Czym różnią się funkcje strzałkowe od zwykłych funkcji w kontekście this?",
-        "exp": "Funkcje strzałkowe nie mają własnego this — dziedziczą this z otaczającego kontekstu, w którym zostały utworzone."
-      },
-      "answers": [
-        {
-          "uk": "Стрілкові функції не можуть використовувати this взагалі",
-          "en": "Arrow functions cannot use this at all",
-          "pl": "Funkcje strzałkowe nie mogą w ogóle używać this",
-          "correct": false
-        },
-        {
-          "uk": "Стрілкові функції не мають власного this, успадковують з оточуючого контексту",
-          "en": "Arrow functions don't have their own this, inherit from surrounding context",
-          "pl": "Funkcje strzałkowe nie mają własnego this, dziedziczą z otaczającego kontekstu",
-          "correct": true
-        },
-        {
-          "uk": "У стрілкових функціях this завжди вказує на window",
-          "en": "In arrow functions this always points to window",
-          "pl": "W funkcjach strzałkowych this zawsze wskazuje na window",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q15",
-      "order": 15,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що відбувається, коли ви намагаєтесь отримати доступ до змінної, оголошеної через let, до її ініціалізації?",
-        "exp": "Виникає ReferenceError через temporal dead zone — період між початком блоку та ініціалізацією змінної."
-      },
-      "en": {
-        "q": "What happens when you try to access a variable declared with let before its initialization?",
-        "exp": "A ReferenceError occurs due to the temporal dead zone — the period between the start of the block and variable initialization."
-      },
-      "pl": {
-        "q": "Co się dzieje, gdy próbujesz uzyskać dostęp do zmiennej zadeklarowanej przez let przed jej inicjalizacją?",
-        "exp": "Wystąpi ReferenceError z powodu temporal dead zone — okresu między początkiem bloku a inicjalizacją zmiennej."
-      },
-      "answers": [
-        {
-          "uk": "Отримаєте значення undefined",
-          "en": "You get the value undefined",
-          "pl": "Otrzymasz wartość undefined",
-          "correct": false
-        },
-        {
-          "uk": "Виникне ReferenceError через temporal dead zone",
-          "en": "A ReferenceError occurs due to temporal dead zone",
-          "pl": "Wystąpi ReferenceError z powodu temporal dead zone",
-          "correct": true
-        },
-        {
-          "uk": "Отримаєте значення null",
-          "en": "You get the value null",
-          "pl": "Otrzymasz wartość null",
-          "correct": false
-        },
-        {
-          "uk": "Змінна автоматично ініціалізується нулем",
-          "en": "Variable is automatically initialized with zero",
-          "pl": "Zmienna jest automatycznie inicjalizowana zerem",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q16",
-      "order": 16,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яку головну перевагу дає використання стрілкових функцій?",
-        "exp": "Стрілкові функції мають коротший синтаксис та лексичне прив'язування this, що спрощує роботу з контекстом."
-      },
-      "en": {
-        "q": "What is the main advantage of using arrow functions?",
-        "exp": "Arrow functions have shorter syntax and lexical this binding, which simplifies working with context."
-      },
-      "pl": {
-        "q": "Jaka jest główna zaleta używania funkcji strzałkowych?",
-        "exp": "Funkcje strzałkowe mają krótszą składnię i leksykalne wiązanie this, co upraszcza pracę z kontekstem."
-      },
-      "answers": [
-        {
-          "uk": "Вони виконуються швидше",
-          "en": "They execute faster",
-          "pl": "Wykonują się szybciej",
-          "correct": false
-        },
-        {
-          "uk": "Коротший синтаксис та лексичне прив'язування this",
-          "en": "Shorter syntax and lexical this binding",
-          "pl": "Krótsza składnia i leksykalne wiązanie this",
-          "correct": true
-        },
-        {
-          "uk": "Вони можуть мати будь-яку кількість параметрів",
-          "en": "They can have any number of parameters",
-          "pl": "Mogą mieć dowolną liczbę parametrów",
-          "correct": false
-        },
-        {
-          "uk": "Вони автоматично обробляють помилки",
-          "en": "They automatically handle errors",
-          "pl": "Automatycznie obsługują błędy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q17",
-      "order": 17,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що станеться, якщо викликати стрілкову функцію через new?",
-        "exp": "Виникне TypeError, оскільки стрілкові функції не можуть бути конструкторами — у них немає внутрішнього методу [[Construct]]."
-      },
-      "en": {
-        "q": "What happens if you call an arrow function with new?",
-        "exp": "A TypeError occurs because arrow functions cannot be constructors — they lack the internal [[Construct]] method."
-      },
-      "pl": {
-        "q": "Co się stanie, jeśli wywołasz funkcję strzałkową przez new?",
-        "exp": "Wystąpi TypeError, ponieważ funkcje strzałkowe nie mogą być konstruktorami — brakuje im wewnętrznej metody [[Construct]]."
-      },
-      "answers": [
-        {
-          "uk": "Створиться новий об'єкт як зі звичайною функцією",
-          "en": "A new object will be created like with regular function",
-          "pl": "Zostanie utworzony nowy obiekt jak w przypadku zwykłej funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Виникне TypeError — стрілкові функції не можуть бути конструкторами",
-          "en": "A TypeError occurs — arrow functions cannot be constructors",
-          "pl": "Wystąpi TypeError — funkcje strzałkowe nie mogą być konstruktorami",
-          "correct": true
-        },
-        {
-          "uk": "Поверне undefined",
-          "en": "Returns undefined",
-          "pl": "Zwróci undefined",
-          "correct": false
-        },
-        {
-          "uk": "Створить порожній об'єкт",
-          "en": "Creates an empty object",
-          "pl": "Utworzy pusty obiekt",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q18",
-      "order": 18,
-      "difficulty": "medium",
-      "uk": {
-        "q": "В якому порядку виконуються phases при event propagation?",
-        "exp": "Спочатку йде capturing phase (від document до цільового елемента), потім target phase, потім bubbling phase (від цільового до document)."
-      },
-      "en": {
-        "q": "In what order do phases execute during event propagation?",
-        "exp": "First comes capturing phase (from document to target), then target phase, then bubbling phase (from target to document)."
-      },
-      "pl": {
-        "q": "W jakiej kolejności wykonują się fazy podczas propagacji zdarzeń?",
-        "exp": "Najpierw jest faza capturing (od document do celu), potem faza target, potem faza bubbling (od celu do document)."
-      },
-      "answers": [
-        {
-          "uk": "Bubbling → Target → Capturing",
-          "en": "Bubbling → Target → Capturing",
-          "pl": "Bubbling → Target → Capturing",
-          "correct": false
-        },
-        {
-          "uk": "Capturing → Target → Bubbling",
-          "en": "Capturing → Target → Bubbling",
-          "pl": "Capturing → Target → Bubbling",
-          "correct": true
-        },
-        {
-          "uk": "Target → Bubbling → Capturing",
-          "en": "Target → Bubbling → Capturing",
-          "pl": "Target → Bubbling → Capturing",
-          "correct": false
-        },
-        {
-          "uk": "Всі фази виконуються одночасно",
-          "en": "All phases execute simultaneously",
-          "pl": "Wszystkie fazy wykonują się jednocześnie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q19",
-      "order": 19,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між stopPropagation() та stopImmediatePropagation()?",
-        "exp": "stopPropagation() зупиняє поширення події далі, але не скасовує інші обробники на поточному елементі. stopImmediatePropagation() зупиняє поширення та скасовує всі інші обробники."
-      },
-      "en": {
-        "q": "What's the difference between stopPropagation() and stopImmediatePropagation()?",
-        "exp": "stopPropagation() stops event propagation further, but doesn't cancel other handlers on current element. stopImmediatePropagation() stops propagation and cancels all other handlers."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między stopPropagation() a stopImmediatePropagation()?",
-        "exp": "stopPropagation() zatrzymuje dalszą propagację zdarzenia, ale nie anuluje innych handlerów na bieżącym elemencie. stopImmediatePropagation() zatrzymuje propagację i anuluje wszystkie inne handlery."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає, це синоніми",
-          "en": "No difference, they are synonyms",
-          "pl": "Nie ma różnicy, to synonimy",
-          "correct": false
-        },
-        {
-          "uk": "stopPropagation() зупиняє поширення, stopImmediatePropagation() також скасовує інші обробники на елементі",
-          "en": "stopPropagation() stops propagation, stopImmediatePropagation() also cancels other handlers on element",
-          "pl": "stopPropagation() zatrzymuje propagację, stopImmediatePropagation() także anuluje inne handlery na elemencie",
-          "correct": true
-        },
-        {
-          "uk": "stopImmediatePropagation() працює тільки для touch events",
-          "en": "stopImmediatePropagation() works only for touch events",
-          "pl": "stopImmediatePropagation() działa tylko dla zdarzeń dotykowych",
-          "correct": false
-        },
-        {
-          "uk": "stopPropagation() застаріла версія",
-          "en": "stopPropagation() is the deprecated version",
-          "pl": "stopPropagation() to przestarzała wersja",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q20",
-      "order": 20,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке event delegation і навіщо воно потрібне?",
-        "exp": "Event delegation — техніка додавання одного обробника на батьківський елемент замість багатьох на дочірні. Ефективніше для динамічних елементів."
-      },
-      "en": {
-        "q": "What is event delegation and why is it needed?",
-        "exp": "Event delegation is a technique of adding one handler to a parent element instead of many to children. More efficient for dynamic elements."
-      },
-      "pl": {
-        "q": "Czym jest delegacja zdarzeń i po co jest potrzebna?",
-        "exp": "Delegacja zdarzeń to technika dodawania jednego handlera do elementu nadrzędnego zamiast wielu do potomnych. Bardziej wydajna dla elementów dynamicznych."
-      },
-      "answers": [
-        {
-          "uk": "Спосіб передати обробник події іншому розробнику",
-          "en": "A way to pass event handler to another developer",
-          "pl": "Sposób na przekazanie handlera zdarzenia innemu programiście",
-          "correct": false
-        },
-        {
-          "uk": "Техніка додавання одного обробника на батьківський елемент для обробки подій дочірніх",
-          "en": "Technique of adding one handler to parent element to handle child events",
-          "pl": "Technika dodawania jednego handlera do elementu nadrzędnego do obsługi zdarzeń potomnych",
-          "correct": true
-        },
-        {
-          "uk": "Автоматичне створення обробників для нових елементів",
-          "en": "Automatic creation of handlers for new elements",
-          "pl": "Automatyczne tworzenie handlerów dla nowych elementów",
-          "correct": false
-        },
-        {
-          "uk": "Метод делегування обробки помилок",
-          "en": "Method for delegating error handling",
-          "pl": "Metoda delegowania obsługi błędów",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/js/fundamentals/javascript-quiz-part3.json b/json/quizzes/js/fundamentals/javascript-quiz-part3.json
deleted file mode 100644
index 6e14a2df..00000000
--- a/json/quizzes/js/fundamentals/javascript-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "js-q21",
-      "order": 21,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Promise у JavaScript?",
-        "exp": "Promise — це об'єкт для роботи з асинхронними операціями, який представляє результат, що буде доступний у майбутньому (resolve або reject)."
-      },
-      "en": {
-        "q": "What is a Promise in JavaScript?",
-        "exp": "Promise is an object for working with asynchronous operations that represents a result that will be available in the future (resolve or reject)."
-      },
-      "pl": {
-        "q": "Czym jest Promise w JavaScript?",
-        "exp": "Promise to obiekt do pracy z operacjami asynchronicznymi, który reprezentuje wynik, który będzie dostępny w przyszłości (resolve lub reject)."
-      },
-      "answers": [
-        {
-          "uk": "Синхронна функція для обробки даних",
-          "en": "Synchronous function for data processing",
-          "pl": "Synchroniczna funkcja do przetwarzania danych",
-          "correct": false
-        },
-        {
-          "uk": "Об'єкт для роботи з асинхронними операціями, що представляє майбутній результат",
-          "en": "Object for working with async operations representing a future result",
-          "pl": "Obiekt do pracy z operacjami asynchronicznymi reprezentujący przyszły wynik",
-          "correct": true
-        },
-        {
-          "uk": "Метод для створення callback-функцій",
-          "en": "Method for creating callback functions",
-          "pl": "Metoda tworzenia funkcji callback",
-          "correct": false
-        },
-        {
-          "uk": "Тип даних для зберігання часу",
-          "en": "Data type for storing time",
-          "pl": "Typ danych do przechowywania czasu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q22",
-      "order": 22,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які три стани має Promise?",
-        "exp": "Promise має три стани: pending (очікування), fulfilled (успішне виконання) і rejected (відхилення через помилку)."
-      },
-      "en": {
-        "q": "What are the three states of a Promise?",
-        "exp": "Promise has three states: pending (waiting), fulfilled (successful completion), and rejected (rejection due to error)."
-      },
-      "pl": {
-        "q": "Jakie są trzy stany Promise?",
-        "exp": "Promise ma trzy stany: pending (oczekiwanie), fulfilled (pomyślne zakończenie) i rejected (odrzucenie z powodu błędu)."
-      },
-      "answers": [
-        {
-          "uk": "started, running, completed",
-          "en": "started, running, completed",
-          "pl": "started, running, completed",
-          "correct": false
-        },
-        {
-          "uk": "pending, fulfilled, rejected",
-          "en": "pending, fulfilled, rejected",
-          "pl": "pending, fulfilled, rejected",
-          "correct": true
-        },
-        {
-          "uk": "waiting, success, failure",
-          "en": "waiting, success, failure",
-          "pl": "waiting, success, failure",
-          "correct": false
-        },
-        {
-          "uk": "idle, active, done",
-          "en": "idle, active, done",
-          "pl": "idle, active, done",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q23",
-      "order": 23,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між async/await та Promise.then()?",
-        "exp": "async/await — це синтаксичний цукор над Promise, що робить асинхронний код схожим на синхронний і легшим для читання."
-      },
-      "en": {
-        "q": "What's the difference between async/await and Promise.then()?",
-        "exp": "async/await is syntactic sugar over Promises that makes asynchronous code look like synchronous and easier to read."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między async/await a Promise.then()?",
-        "exp": "async/await to cukier składniowy nad Promise, który sprawia, że kod asynchroniczny wygląda jak synchroniczny i jest łatwiejszy do czytania."
-      },
-      "answers": [
-        {
-          "uk": "async/await працює швидше",
-          "en": "async/await works faster",
-          "pl": "async/await działa szybciej",
-          "correct": false
-        },
-        {
-          "uk": "async/await — синтаксичний цукор, який робить асинхронний код схожим на синхронний",
-          "en": "async/await is syntactic sugar making async code look synchronous",
-          "pl": "async/await to cukier składniowy sprawiający, że kod async wygląda synchronicznie",
-          "correct": true
-        },
-        {
-          "uk": "Promise.then() застарілий метод",
-          "en": "Promise.then() is a deprecated method",
-          "pl": "Promise.then() to przestarzała metoda",
-          "correct": false
-        },
-        {
-          "uk": "async/await не потребує обробки помилок",
-          "en": "async/await doesn't require error handling",
-          "pl": "async/await nie wymaga obsługi błędów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q24",
-      "order": 24,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке callback hell і як його уникнути?",
-        "exp": "Callback hell — це вкладені callback-функції, які важко читати. Уникнути можна через Promise або async/await."
-      },
-      "en": {
-        "q": "What is callback hell and how to avoid it?",
-        "exp": "Callback hell is nested callback functions that are hard to read. Can be avoided using Promises or async/await."
-      },
-      "pl": {
-        "q": "Czym jest callback hell i jak tego uniknąć?",
-        "exp": "Callback hell to zagnieżdżone funkcje callback, które są trudne do odczytania. Można uniknąć używając Promise lub async/await."
-      },
-      "answers": [
-        {
-          "uk": "Помилка при виклику функції",
-          "en": "Error when calling a function",
-          "pl": "Błąd podczas wywoływania funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Глибоке вкладення callback-функцій, яке важко читати",
-          "en": "Deep nesting of callback functions that's hard to read",
-          "pl": "Głębokie zagnieżdżanie funkcji callback, które jest trudne do odczytania",
-          "correct": true
-        },
-        {
-          "uk": "Втрата контексту this у функціях",
-          "en": "Loss of this context in functions",
-          "pl": "Utrata kontekstu this w funkcjach",
-          "correct": false
-        },
-        {
-          "uk": "Нескінченний цикл виконання",
-          "en": "Infinite execution loop",
-          "pl": "Nieskończona pętla wykonania",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q25",
-      "order": 25,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке Event Loop у JavaScript?",
-        "exp": "Event Loop — це механізм, який керує виконанням коду, обробкою подій та виконанням асинхронних операцій у однопотоковому середовищі JavaScript."
-      },
-      "en": {
-        "q": "What is the Event Loop in JavaScript?",
-        "exp": "Event Loop is a mechanism that manages code execution, event handling, and asynchronous operations in JavaScript's single-threaded environment."
-      },
-      "pl": {
-        "q": "Czym jest Event Loop w JavaScript?",
-        "exp": "Event Loop to mechanizm zarządzający wykonywaniem kodu, obsługą zdarzeń i operacjami asynchronicznymi w jednowątkowym środowisku JavaScript."
-      },
-      "answers": [
-        {
-          "uk": "Спосіб створення циклів for",
-          "en": "A way to create for loops",
-          "pl": "Sposób tworzenia pętli for",
-          "correct": false
-        },
-        {
-          "uk": "Механізм керування виконанням коду та асинхронних операцій в однопотоковому середовищі",
-          "en": "Mechanism managing code execution and async operations in single-threaded environment",
-          "pl": "Mechanizm zarządzający wykonywaniem kodu i operacji async w środowisku jednowątkowym",
-          "correct": true
-        },
-        {
-          "uk": "Обробник подій миші та клавіатури",
-          "en": "Handler for mouse and keyboard events",
-          "pl": "Handler zdarzeń myszy i klawiatury",
-          "correct": false
-        },
-        {
-          "uk": "Бібліотека для роботи з DOM",
-          "en": "Library for working with DOM",
-          "pl": "Biblioteka do pracy z DOM",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q26",
-      "order": 26,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Яка різниця між microtasks та macrotasks в Event Loop?",
-        "exp": "Microtasks (Promise callbacks) виконуються перед macrotasks (setTimeout, setInterval). Microtasks мають вищий пріоритет."
-      },
-      "en": {
-        "q": "What's the difference between microtasks and macrotasks in Event Loop?",
-        "exp": "Microtasks (Promise callbacks) execute before macrotasks (setTimeout, setInterval). Microtasks have higher priority."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między microtasks a macrotasks w Event Loop?",
-        "exp": "Microtasks (Promise callbacks) wykonują się przed macrotasks (setTimeout, setInterval). Microtasks mają wyższy priorytet."
-      },
-      "answers": [
-        {
-          "uk": "Microtasks для малих завдань, macrotasks для великих",
-          "en": "Microtasks for small tasks, macrotasks for large",
-          "pl": "Microtasks dla małych zadań, macrotasks dla dużych",
-          "correct": false
-        },
-        {
-          "uk": "Microtasks виконуються перед macrotasks і мають вищий пріоритет",
-          "en": "Microtasks execute before macrotasks and have higher priority",
-          "pl": "Microtasks wykonują się przed macrotasks i mają wyższy priorytet",
-          "correct": true
-        },
-        {
-          "uk": "Macrotasks виконуються першими",
-          "en": "Macrotasks execute first",
-          "pl": "Macrotasks wykonują się jako pierwsze",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як обробити помилку в Promise?",
-        "exp": "Помилки в Promise обробляються через метод .catch() або через другий аргумент .then(), або через try/catch з async/await."
-      },
-      "en": {
-        "q": "How do you handle errors in a Promise?",
-        "exp": "Errors in Promises are handled via .catch() method, or through second .then() argument, or via try/catch with async/await."
-      },
-      "pl": {
-        "q": "Jak obsługiwać błędy w Promise?",
-        "exp": "Błędy w Promise są obsługiwane przez metodę .catch(), lub przez drugi argument .then(), lub przez try/catch z async/await."
-      },
-      "answers": [
-        {
-          "uk": "Через window.onerror",
-          "en": "Through window.onerror",
-          "pl": "Przez window.onerror",
-          "correct": false
-        },
-        {
-          "uk": "Через .catch() або try/catch з async/await",
-          "en": "Through .catch() or try/catch with async/await",
-          "pl": "Przez .catch() lub try/catch z async/await",
-          "correct": true
-        },
-        {
-          "uk": "Promise автоматично обробляють помилки",
-          "en": "Promises automatically handle errors",
-          "pl": "Promise automatycznie obsługują błędy",
-          "correct": false
-        },
-        {
-          "uk": "Через console.error()",
-          "en": "Through console.error()",
-          "pl": "Przez console.error()",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q28",
-      "order": 28,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить Promise.all()?",
-        "exp": "Promise.all() приймає масив Promise і повертає Promise, який виконується коли всі Promise виконані, або відхиляється при першій помилці."
-      },
-      "en": {
-        "q": "What does Promise.all() do?",
-        "exp": "Promise.all() takes an array of Promises and returns a Promise that fulfills when all Promises are fulfilled, or rejects on first error."
-      },
-      "pl": {
-        "q": "Co robi Promise.all()?",
-        "exp": "Promise.all() przyjmuje tablicę Promise i zwraca Promise, który wypełnia się, gdy wszystkie Promise są wypełnione, lub odrzuca przy pierwszym błędzie."
-      },
-      "answers": [
-        {
-          "uk": "Виконує Promise по черзі один за одним",
-          "en": "Executes Promises sequentially one by one",
-          "pl": "Wykonuje Promise sekwencyjnie jeden po drugim",
-          "correct": false
-        },
-        {
-          "uk": "Виконує всі Promise паралельно і чекає виконання всіх або першої помилки",
-          "en": "Executes all Promises in parallel and waits for all to complete or first error",
-          "pl": "Wykonuje wszystkie Promise równolegle i czeka na zakończenie wszystkich lub pierwszy błąd",
-          "correct": true
-        },
-        {
-          "uk": "Вибирає найшвидший Promise",
-          "en": "Selects the fastest Promise",
-          "pl": "Wybiera najszybszy Promise",
-          "correct": false
-        },
-        {
-          "uk": "Об'єднує результати Promise в один об'єкт",
-          "en": "Merges Promise results into one object",
-          "pl": "Łączy wyniki Promise w jeden obiekt",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q29",
-      "order": 29,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між Promise.all() та Promise.race()?",
-        "exp": "Promise.all() чекає виконання всіх Promise, Promise.race() повертає результат першого виконаного або відхиленого Promise."
-      },
-      "en": {
-        "q": "What's the difference between Promise.all() and Promise.race()?",
-        "exp": "Promise.all() waits for all Promises to complete, Promise.race() returns the result of the first settled Promise."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między Promise.all() a Promise.race()?",
-        "exp": "Promise.all() czeka na zakończenie wszystkich Promise, Promise.race() zwraca wynik pierwszego rozstrzygniętego Promise."
-      },
-      "answers": [
-        {
-          "uk": "Promise.all() швидший за Promise.race()",
-          "en": "Promise.all() is faster than Promise.race()",
-          "pl": "Promise.all() jest szybszy niż Promise.race()",
-          "correct": false
-        },
-        {
-          "uk": "Promise.all() чекає всіх, Promise.race() повертає результат першого",
-          "en": "Promise.all() waits for all, Promise.race() returns first result",
-          "pl": "Promise.all() czeka na wszystkie, Promise.race() zwraca pierwszy wynik",
-          "correct": true
-        },
-        {
-          "uk": "Promise.race() обробляє лише помилки",
-          "en": "Promise.race() handles only errors",
-          "pl": "Promise.race() obsługuje tylko błędy",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q30",
-      "order": 30,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що станеться, якщо не обробити rejected Promise?",
-        "exp": "Виникне unhandled promise rejection, яку можна відловити через window.addEventListener('unhandledrejection')."
-      },
-      "en": {
-        "q": "What happens if you don't handle a rejected Promise?",
-        "exp": "An unhandled promise rejection occurs, which can be caught via window.addEventListener('unhandledrejection')."
-      },
-      "pl": {
-        "q": "Co się stanie, jeśli nie obsłużysz odrzuconego Promise?",
-        "exp": "Wystąpi unhandled promise rejection, które można złapać przez window.addEventListener('unhandledrejection')."
-      },
-      "answers": [
-        {
-          "uk": "Нічого, помилка буде проігнорована",
-          "en": "Nothing, error will be ignored",
-          "pl": "Nic, błąd zostanie zignorowany",
-          "correct": false
-        },
-        {
-          "uk": "Виникне unhandled promise rejection",
-          "en": "An unhandled promise rejection occurs",
-          "pl": "Wystąpi unhandled promise rejection",
-          "correct": true
-        },
-        {
-          "uk": "Додаток автоматично перезавантажиться",
-          "en": "Application will automatically restart",
-          "pl": "Aplikacja automatycznie się zrestartuje",
-          "correct": false
-        },
-        {
-          "uk": "Promise автоматично повториться",
-          "en": "Promise will automatically retry",
-          "pl": "Promise automatycznie się powtórzy",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/js/fundamentals/javascript-quiz-part4.json b/json/quizzes/js/fundamentals/javascript-quiz-part4.json
deleted file mode 100644
index c8512e55..00000000
--- a/json/quizzes/js/fundamentals/javascript-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "js-q31",
-      "order": 31,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке прототип (prototype) у JavaScript?",
-        "exp": "Прототип — це механізм, через який об'єкти успадковують властивості та методи від інших об'єктів. Кожен об'єкт має посилання на свій прототип."
-      },
-      "en": {
-        "q": "What is a prototype in JavaScript?",
-        "exp": "Prototype is a mechanism through which objects inherit properties and methods from other objects. Each object has a reference to its prototype."
-      },
-      "pl": {
-        "q": "Czym jest prototyp w JavaScript?",
-        "exp": "Prototyp to mechanizm, przez który obiekty dziedziczą właściwości i metody z innych obiektów. Każdy obiekt ma referencję do swojego prototypu."
-      },
-      "answers": [
-        {
-          "uk": "Перша версія об'єкта перед фінальною реалізацією",
-          "en": "First version of object before final implementation",
-          "pl": "Pierwsza wersja obiektu przed ostateczną implementacją",
-          "correct": false
-        },
-        {
-          "uk": "Механізм успадкування властивостей та методів між об'єктами",
-          "en": "Mechanism for inheriting properties and methods between objects",
-          "pl": "Mechanizm dziedziczenia właściwości i metod między obiektami",
-          "correct": true
-        },
-        {
-          "uk": "Тип даних для зберігання функцій",
-          "en": "Data type for storing functions",
-          "pl": "Typ danych do przechowywania funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Шаблон для створення класів",
-          "en": "Template for creating classes",
-          "pl": "Szablon do tworzenia klas",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q32",
-      "order": 32,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між ES6 класами та функціями-конструкторами?",
-        "exp": "ES6 класи — це синтаксичний цукор над прототипним успадкуванням. Вони не додають нової функціональності, але роблять код зрозумілішим."
-      },
-      "en": {
-        "q": "What's the difference between ES6 classes and constructor functions?",
-        "exp": "ES6 classes are syntactic sugar over prototypal inheritance. They don't add new functionality, but make code more understandable."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między klasami ES6 a funkcjami konstruktorami?",
-        "exp": "Klasy ES6 to cukier składniowy nad dziedziczeniem prototypowym. Nie dodają nowej funkcjonalności, ale sprawiają, że kod jest bardziej zrozumiały."
-      },
-      "answers": [
-        {
-          "uk": "Класи працюють швидше",
-          "en": "Classes work faster",
-          "pl": "Klasy działają szybciej",
-          "correct": false
-        },
-        {
-          "uk": "Класи — синтаксичний цукор над прототипами, роблять код зрозумілішим",
-          "en": "Classes are syntactic sugar over prototypes, making code more understandable",
-          "pl": "Klasy to cukier składniowy nad prototypami, czyniąc kod bardziej zrozumiałym",
-          "correct": true
-        },
-        {
-          "uk": "Класи мають інший механізм успадкування",
-          "en": "Classes have different inheritance mechanism",
-          "pl": "Klasy mają inny mechanizm dziedziczenia",
-          "correct": false
-        },
-        {
-          "uk": "Функції-конструктори застарілі",
-          "en": "Constructor functions are deprecated",
-          "pl": "Funkcje konstruktory są przestarzałe",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q33",
-      "order": 33,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що робить оператор spread (...)?",
-        "exp": "Оператор spread розпаковує ітерабельні об'єкти (масиви, рядки) в окремі елементи. Використовується для копіювання, об'єднання та передачі аргументів."
-      },
-      "en": {
-        "q": "What does the spread operator (...) do?",
-        "exp": "Spread operator unpacks iterable objects (arrays, strings) into individual elements. Used for copying, merging, and passing arguments."
-      },
-      "pl": {
-        "q": "Co robi operator spread (...)?",
-        "exp": "Operator spread rozpakuje iterowalne obiekty (tablice, stringi) na pojedyncze elementy. Używany do kopiowania, łączenia i przekazywania argumentów."
-      },
-      "answers": [
-        {
-          "uk": "Множить значення на себе",
-          "en": "Multiplies value by itself",
-          "pl": "Mnoży wartość przez siebie",
-          "correct": false
-        },
-        {
-          "uk": "Розпаковує ітерабельні об'єкти в окремі елементи",
-          "en": "Unpacks iterable objects into individual elements",
-          "pl": "Rozpakuje iterowalne obiekty na pojedyncze elementy",
-          "correct": true
-        },
-        {
-          "uk": "Створює копію функції",
-          "en": "Creates a copy of function",
-          "pl": "Tworzy kopię funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Об'єднує рядки",
-          "en": "Concatenates strings",
-          "pl": "Łączy stringi",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між spread оператором та rest параметром?",
-        "exp": "Spread розпаковує масив в елементи, rest збирає окремі елементи в масив. Використовуються в різних контекстах, але схожий синтаксис (...)."
-      },
-      "en": {
-        "q": "What's the difference between spread operator and rest parameter?",
-        "exp": "Spread unpacks array into elements, rest collects individual elements into array. Used in different contexts but similar syntax (...)."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między operatorem spread a parametrem rest?",
-        "exp": "Spread rozpakowuje tablicę na elementy, rest zbiera pojedyncze elementy do tablicy. Używane w różnych kontekstach, ale podobna składnia (...)."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає, це синоніми",
-          "en": "No difference, they are synonyms",
-          "pl": "Nie ma różnicy, to synonimy",
-          "correct": false
-        },
-        {
-          "uk": "Spread розпаковує, rest збирає елементи в масив",
-          "en": "Spread unpacks, rest collects elements into array",
-          "pl": "Spread rozpakowuje, rest zbiera elementy do tablicy",
-          "correct": true
-        },
-        {
-          "uk": "Rest працює тільки з об'єктами",
-          "en": "Rest works only with objects",
-          "pl": "Rest działa tylko z obiektami",
-          "correct": false
-        },
-        {
-          "uk": "Spread швидший за rest",
-          "en": "Spread is faster than rest",
-          "pl": "Spread jest szybszy niż rest",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q35",
-      "order": 35,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке деструктуризація (destructuring)?",
-        "exp": "Деструктуризація — це синтаксис для витягування значень з масивів або властивостей з об'єктів у окремі змінні компактним способом."
-      },
-      "en": {
-        "q": "What is destructuring?",
-        "exp": "Destructuring is syntax for extracting values from arrays or properties from objects into separate variables in a compact way."
-      },
-      "pl": {
-        "q": "Czym jest destrukturyzacja?",
-        "exp": "Destrukturyzacja to składnia do wydobywania wartości z tablic lub właściwości z obiektów do oddzielnych zmiennych w kompaktowy sposób."
-      },
-      "answers": [
-        {
-          "uk": "Видалення властивостей з об'єкта",
-          "en": "Removing properties from object",
-          "pl": "Usuwanie właściwości z obiektu",
-          "correct": false
-        },
-        {
-          "uk": "Синтаксис для витягування значень з масивів або властивостей з об'єктів",
-          "en": "Syntax for extracting values from arrays or properties from objects",
-          "pl": "Składnia do wydobywania wartości z tablic lub właściwości z obiektów",
-          "correct": true
-        },
-        {
-          "uk": "Перетворення об'єкта в рядок",
-          "en": "Converting object to string",
-          "pl": "Konwersja obiektu na string",
-          "correct": false
-        },
-        {
-          "uk": "Метод сортування масивів",
-          "en": "Method for sorting arrays",
-          "pl": "Metoda sortowania tablic",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q36",
-      "order": 36,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке template literals (шаблонні рядки)?",
-        "exp": "Template literals — це рядки в зворотних лапках (`), що підтримують інтерполяцію змінних через ${} та багаторядковий текст."
-      },
-      "en": {
-        "q": "What are template literals?",
-        "exp": "Template literals are strings in backticks (`) that support variable interpolation via ${} and multiline text."
-      },
-      "pl": {
-        "q": "Czym są template literals?",
-        "exp": "Template literals to stringi w cudzysłowach wstecznych (`), które wspierają interpolację zmiennych przez ${} i tekst wielowierszowy."
-      },
-      "answers": [
-        {
-          "uk": "Шаблон для створення HTML-елементів",
-          "en": "Template for creating HTML elements",
-          "pl": "Szablon do tworzenia elementów HTML",
-          "correct": false
-        },
-        {
-          "uk": "Рядки в зворотних лапках з підтримкою інтерполяції змінних та багаторядкового тексту",
-          "en": "Strings in backticks with support for variable interpolation and multiline text",
-          "pl": "Stringi w cudzysłowach wstecznych z obsługą interpolacji zmiennych i tekstu wielowierszowego",
-          "correct": true
-        },
-        {
-          "uk": "Функція для форматування дати",
-          "en": "Function for date formatting",
-          "pl": "Funkcja do formatowania daty",
-          "correct": false
-        },
-        {
-          "uk": "Бібліотека для роботи з текстом",
-          "en": "Library for working with text",
-          "pl": "Biblioteka do pracy z tekstem",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q37",
-      "order": 37,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке ES6 модулі (import/export)?",
-        "exp": "ES6 модулі — це стандартний спосіб організації коду в окремі файли з можливістю експорту та імпорту функцій, класів, змінних."
-      },
-      "en": {
-        "q": "What are ES6 modules (import/export)?",
-        "exp": "ES6 modules are standard way to organize code in separate files with ability to export and import functions, classes, variables."
-      },
-      "pl": {
-        "q": "Czym są moduły ES6 (import/export)?",
-        "exp": "Moduły ES6 to standardowy sposób organizacji kodu w osobne pliki z możliwością eksportowania i importowania funkcji, klas, zmiennych."
-      },
-      "answers": [
-        {
-          "uk": "Система пакетів для Node.js",
-          "en": "Package system for Node.js",
-          "pl": "System pakietów dla Node.js",
-          "correct": false
-        },
-        {
-          "uk": "Стандартний спосіб організації коду в окремі файли з експортом/імпортом",
-          "en": "Standard way to organize code in separate files with export/import",
-          "pl": "Standardowy sposób organizacji kodu w osobne pliki z eksportem/importem",
-          "correct": true
-        },
-        {
-          "uk": "Бібліотека для роботи з модальними вікнами",
-          "en": "Library for working with modal windows",
-          "pl": "Biblioteka do pracy z oknami modalnymi",
-          "correct": false
-        },
-        {
-          "uk": "Інструмент для компіляції TypeScript",
-          "en": "Tool for compiling TypeScript",
-          "pl": "Narzędzie do kompilacji TypeScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між named export та default export?",
-        "exp": "Named export дозволяє експортувати багато значень з файлу (імпортуються в {}), default export — одне основне значення (імпортується без {})."
-      },
-      "en": {
-        "q": "What's the difference between named export and default export?",
-        "exp": "Named export allows exporting multiple values from file (imported in {}), default export is one main value (imported without {})."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między named export a default export?",
-        "exp": "Named export pozwala eksportować wiele wartości z pliku (importowane w {}), default export to jedna główna wartość (importowana bez {})."
-      },
-      "answers": [
-        {
-          "uk": "Default export швидший",
-          "en": "Default export is faster",
-          "pl": "Default export jest szybszy",
-          "correct": false
-        },
-        {
-          "uk": "Named для багатьох значень ({}), default для одного основного значення (без {})",
-          "en": "Named for multiple values ({}), default for one main value (without {})",
-          "pl": "Named dla wielu wartości ({}), default dla jednej głównej wartości (bez {})",
-          "correct": true
-        },
-        {
-          "uk": "Named export тільки для функцій",
-          "en": "Named export only for functions",
-          "pl": "Named export tylko dla funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Default export не може бути перейменований",
-          "en": "Default export cannot be renamed",
-          "pl": "Default export nie może być przemianowany",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q39",
-      "order": 39,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Що таке Symbol у JavaScript?",
-        "exp": "Symbol — це примітивний тип даних для створення унікальних ідентифікаторів. Кожен Symbol унікальний, навіть якщо має однаковий опис."
-      },
-      "en": {
-        "q": "What is Symbol in JavaScript?",
-        "exp": "Symbol is a primitive data type for creating unique identifiers. Each Symbol is unique, even if it has the same description."
-      },
-      "pl": {
-        "q": "Czym jest Symbol w JavaScript?",
-        "exp": "Symbol to prymitywny typ danych do tworzenia unikalnych identyfikatorów. Każdy Symbol jest unikalny, nawet jeśli ma taki sam opis."
-      },
-      "answers": [
-        {
-          "uk": "Спеціальний символ для математичних операцій",
-          "en": "Special symbol for mathematical operations",
-          "pl": "Specjalny symbol do operacji matematycznych",
-          "correct": false
-        },
-        {
-          "uk": "Примітивний тип для створення унікальних ідентифікаторів",
-          "en": "Primitive type for creating unique identifiers",
-          "pl": "Prymitywny typ do tworzenia unikalnych identyfikatorów",
-          "correct": true
-        },
-        {
-          "uk": "Метод для конвертації рядків",
-          "en": "Method for converting strings",
-          "pl": "Metoda konwersji stringów",
-          "correct": false
-        },
-        {
-          "uk": "Іконка для відображення в UI",
-          "en": "Icon for displaying in UI",
-          "pl": "Ikona do wyświetlania w UI",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "js-q40",
-      "order": 40,
-      "difficulty": "advanced",
-      "uk": {
-        "q": "Як створити приватні властивості в ES6 класах?",
-        "exp": "Приватні властивості створюються через символ # перед назвою. Вони доступні лише всередині класу та не видимі ззовні."
-      },
-      "en": {
-        "q": "How do you create private properties in ES6 classes?",
-        "exp": "Private properties are created using # symbol before the name. They are accessible only inside the class and not visible from outside."
-      },
-      "pl": {
-        "q": "Jak tworzyć prywatne właściwości w klasach ES6?",
-        "exp": "Prywatne właściwości tworzy się używając symbolu # przed nazwą. Są dostępne tylko wewnątrz klasy i niewidoczne z zewnątrz."
-      },
-      "answers": [
-        {
-          "uk": "Через ключове слово private",
-          "en": "Through private keyword",
-          "pl": "Przez słowo kluczowe private",
-          "correct": false
-        },
-        {
-          "uk": "Через символ # перед назвою властивості",
-          "en": "Through # symbol before property name",
-          "pl": "Przez symbol # przed nazwą właściwości",
-          "correct": true
-        },
-        {
-          "uk": "Через подвійне підкреслення __",
-          "en": "Through double underscore __",
-          "pl": "Przez podwójne podkreślenie __",
-          "correct": false
-        },
-        {
-          "uk": "Приватні властивості неможливі в JavaScript",
-          "en": "Private properties are impossible in JavaScript",
-          "pl": "Prywatne właściwości są niemożliwe w JavaScript",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/node/advanced/nodejs-advanced-quiz-part1.json b/json/quizzes/node/advanced/nodejs-advanced-quiz-part1.json
deleted file mode 100644
index 4e0df7e5..00000000
--- a/json/quizzes/node/advanced/nodejs-advanced-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "node-adv-q01",
-      "order": 1,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке BFF (Backend For Frontend) у контексті мікросервісної архітектури Node.js?",
-        "exp": "BFF — це легкий API-шар на Node.js, який агрегує запити до різних мікросервісів і надає оптимізований інтерфейс для конкретного клієнта (web, mobile)."
-      },
-      "en": {
-        "q": "What is BFF (Backend For Frontend) in the context of Node.js microservices architecture?",
-        "exp": "BFF is a lightweight API layer on Node.js that aggregates requests to various microservices and provides an optimized interface for a specific client (web, mobile)."
-      },
-      "pl": {
-        "q": "Czym jest BFF (Backend For Frontend) w kontekście architektury mikroserwisów Node.js?",
-        "exp": "BFF to lekka warstwa API na Node.js, która agreguje żądania do różnych mikroserwisów i zapewnia zoptymalizowany interfejs dla konkretnego klienta (web, mobile)."
-      },
-      "answers": [
-        {
-          "uk": "База даних для фронтенд-застосунків",
-          "en": "A database for frontend applications",
-          "pl": "Baza danych dla aplikacji frontendowych",
-          "correct": false
-        },
-        {
-          "uk": "API-шар, що агрегує запити до мікросервісів для конкретного клієнта",
-          "en": "An API layer that aggregates requests to microservices for a specific client",
-          "pl": "Warstwa API agregująca żądania do mikroserwisów dla konkretnego klienta",
-          "correct": true
-        },
-        {
-          "uk": "Протокол для передачі даних між сервісами",
-          "en": "A protocol for data transfer between services",
-          "pl": "Protokół do przesyłania danych między usługami",
-          "correct": false
-        },
-        {
-          "uk": "Фреймворк для розробки фронтенду",
-          "en": "A framework for frontend development",
-          "pl": "Framework do rozwoju frontendu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q02",
-      "order": 2,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка перевага gRPC над REST для комунікації між мікросервісами?",
-        "exp": "gRPC використовує бінарний протокол Protocol Buffers, що забезпечує швидшу серіалізацію, менший розмір повідомлень та автогенерацію клієнтів."
-      },
-      "en": {
-        "q": "What is the advantage of gRPC over REST for microservice communication?",
-        "exp": "gRPC uses the binary Protocol Buffers protocol, which provides faster serialization, smaller message sizes, and auto-generated clients."
-      },
-      "pl": {
-        "q": "Jaka jest zaleta gRPC nad REST do komunikacji między mikroserwisami?",
-        "exp": "gRPC używa binarnego protokołu Protocol Buffers, który zapewnia szybszą serializację, mniejszy rozmiar wiadomości i automatycznie generowanych klientów."
-      },
-      "answers": [
-        {
-          "uk": "gRPC простіший у налагодженні через браузер",
-          "en": "gRPC is easier to debug through a browser",
-          "pl": "gRPC jest łatwiejszy do debugowania przez przeglądarkę",
-          "correct": false
-        },
-        {
-          "uk": "Бінарний протокол, швидша серіалізація, менший розмір повідомлень",
-          "en": "Binary protocol, faster serialization, smaller message sizes",
-          "pl": "Protokół binarny, szybsza serializacja, mniejszy rozmiar wiadomości",
-          "correct": true
-        },
-        {
-          "uk": "gRPC не потребує визначення схеми",
-          "en": "gRPC doesn't require schema definition",
-          "pl": "gRPC nie wymaga definicji schematu",
-          "correct": false
-        },
-        {
-          "uk": "gRPC працює тільки з JavaScript",
-          "en": "gRPC works only with JavaScript",
-          "pl": "gRPC działa tylko z JavaScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q03",
-      "order": 3,
-      "difficulty": "medium",
-      "uk": {
-        "q": "У чому різниця між child_process та worker_threads у Node.js?",
-        "exp": "child_process створює окремі процеси з власною пам'яттю (fork, spawn), а worker_threads — потоки в межах одного процесу з можливістю обміну пам'яттю через SharedArrayBuffer."
-      },
-      "en": {
-        "q": "What is the difference between child_process and worker_threads in Node.js?",
-        "exp": "child_process creates separate processes with their own memory (fork, spawn), while worker_threads creates threads within one process with shared memory via SharedArrayBuffer."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między child_process a worker_threads w Node.js?",
-        "exp": "child_process tworzy oddzielne procesy z własną pamięcią (fork, spawn), a worker_threads tworzy wątki w ramach jednego procesu z współdzieloną pamięcią przez SharedArrayBuffer."
-      },
-      "answers": [
-        {
-          "uk": "child_process — окремі процеси з власною пам'яттю; worker_threads — потоки з можливістю обміну пам'яттю",
-          "en": "child_process — separate processes with own memory; worker_threads — threads with possible shared memory",
-          "pl": "child_process — oddzielne procesy z własną pamięcią; worker_threads — wątki z możliwą współdzieloną pamięcią",
-          "correct": true
-        },
-        {
-          "uk": "Різниці немає, це синоніми",
-          "en": "No difference, they are synonyms",
-          "pl": "Nie ma różnicy, to synonimy",
-          "correct": false
-        },
-        {
-          "uk": "worker_threads працює тільки на Linux",
-          "en": "worker_threads works only on Linux",
-          "pl": "worker_threads działa tylko na Linux",
-          "correct": false
-        },
-        {
-          "uk": "child_process швидший для всіх задач",
-          "en": "child_process is faster for all tasks",
-          "pl": "child_process jest szybszy dla wszystkich zadań",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q04",
-      "order": 4,
-      "difficulty": "medium",
-      "uk": {
-        "q": "У чому різниця між process.nextTick() та setImmediate() у Node.js?",
-        "exp": "process.nextTick() виконується перед переходом до наступної фази event loop, а setImmediate() — на початку наступної ітерації (check phase)."
-      },
-      "en": {
-        "q": "What is the difference between process.nextTick() and setImmediate() in Node.js?",
-        "exp": "process.nextTick() executes before moving to the next event loop phase, while setImmediate() executes at the start of the next iteration (check phase)."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między process.nextTick() a setImmediate() w Node.js?",
-        "exp": "process.nextTick() wykonuje się przed przejściem do następnej fazy event loop, a setImmediate() wykonuje się na początku następnej iteracji (check phase)."
-      },
-      "answers": [
-        {
-          "uk": "Вони виконуються однаково",
-          "en": "They execute the same way",
-          "pl": "Wykonują się tak samo",
-          "correct": false
-        },
-        {
-          "uk": "nextTick — перед наступною фазою event loop; setImmediate — на check phase наступної ітерації",
-          "en": "nextTick — before next event loop phase; setImmediate — at check phase of next iteration",
-          "pl": "nextTick — przed następną fazą event loop; setImmediate — na check phase następnej iteracji",
-          "correct": true
-        },
-        {
-          "uk": "setImmediate швидший за nextTick завжди",
-          "en": "setImmediate is always faster than nextTick",
-          "pl": "setImmediate jest zawsze szybszy niż nextTick",
-          "correct": false
-        },
-        {
-          "uk": "nextTick застарів і не рекомендується",
-          "en": "nextTick is deprecated and not recommended",
-          "pl": "nextTick jest przestarzały i nie zalecany",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q05",
-      "order": 5,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який інструмент рекомендується для перевірки вразливостей у залежностях Node.js проєкту?",
-        "exp": "npm audit вбудований у npm і перевіряє залежності на відомі вразливості. Також використовують Snyk для більш детального аналізу."
-      },
-      "en": {
-        "q": "Which tool is recommended for checking vulnerabilities in Node.js project dependencies?",
-        "exp": "npm audit is built into npm and checks dependencies for known vulnerabilities. Snyk is also used for more detailed analysis."
-      },
-      "pl": {
-        "q": "Które narzędzie jest zalecane do sprawdzania podatności w zależnościach projektu Node.js?",
-        "exp": "npm audit jest wbudowany w npm i sprawdza zależności pod kątem znanych podatności. Snyk jest również używany do bardziej szczegółowej analizy."
-      },
-      "answers": [
-        {
-          "uk": "ESLint",
-          "en": "ESLint",
-          "pl": "ESLint",
-          "correct": false
-        },
-        {
-          "uk": "npm audit або Snyk",
-          "en": "npm audit or Snyk",
-          "pl": "npm audit lub Snyk",
-          "correct": true
-        },
-        {
-          "uk": "Prettier",
-          "en": "Prettier",
-          "pl": "Prettier",
-          "correct": false
-        },
-        {
-          "uk": "Webpack",
-          "en": "Webpack",
-          "pl": "Webpack",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q06",
-      "order": 6,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Content Security Policy (CSP) і як вона захищає Node.js застосунок?",
-        "exp": "CSP — це HTTP-заголовок, який визначає дозволені джерела скриптів, стилів та інших ресурсів, захищаючи від XSS-атак через заборону inline-скриптів."
-      },
-      "en": {
-        "q": "What is Content Security Policy (CSP) and how does it protect a Node.js application?",
-        "exp": "CSP is an HTTP header that defines allowed sources for scripts, styles, and other resources, protecting against XSS attacks by blocking inline scripts."
-      },
-      "pl": {
-        "q": "Czym jest Content Security Policy (CSP) i jak chroni aplikację Node.js?",
-        "exp": "CSP to nagłówek HTTP określający dozwolone źródła skryptów, stylów i innych zasobów, chroniący przed atakami XSS przez blokowanie skryptów inline."
-      },
-      "answers": [
-        {
-          "uk": "Протокол шифрування даних у базі",
-          "en": "A protocol for encrypting database data",
-          "pl": "Protokół szyfrowania danych w bazie",
-          "correct": false
-        },
-        {
-          "uk": "HTTP-заголовок, що визначає дозволені джерела ресурсів для захисту від XSS",
-          "en": "HTTP header that defines allowed resource sources for XSS protection",
-          "pl": "Nagłówek HTTP określający dozwolone źródła zasobów dla ochrony przed XSS",
-          "correct": true
-        },
-        {
-          "uk": "Бібліотека для валідації форм",
-          "en": "A library for form validation",
-          "pl": "Biblioteka do walidacji formularzy",
-          "correct": false
-        },
-        {
-          "uk": "Менеджер сесій користувачів",
-          "en": "A user session manager",
-          "pl": "Menedżer sesji użytkowników",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q07",
-      "order": 7,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як захистити Node.js API від brute-force атак?",
-        "exp": "Використовувати rate limiting (express-rate-limit), slow-down для уповільнення запитів, CAPTCHA та блокування IP після багатьох невдалих спроб."
-      },
-      "en": {
-        "q": "How to protect a Node.js API from brute-force attacks?",
-        "exp": "Use rate limiting (express-rate-limit), slow-down to slow down requests, CAPTCHA, and IP blocking after many failed attempts."
-      },
-      "pl": {
-        "q": "Jak chronić API Node.js przed atakami brute-force?",
-        "exp": "Używać rate limiting (express-rate-limit), slow-down do spowalniania żądań, CAPTCHA i blokowania IP po wielu nieudanych próbach."
-      },
-      "answers": [
-        {
-          "uk": "Збільшити потужність сервера",
-          "en": "Increase server capacity",
-          "pl": "Zwiększyć moc serwera",
-          "correct": false
-        },
-        {
-          "uk": "Rate limiting, slow-down, CAPTCHA, блокування IP",
-          "en": "Rate limiting, slow-down, CAPTCHA, IP blocking",
-          "pl": "Rate limiting, slow-down, CAPTCHA, blokowanie IP",
-          "correct": true
-        },
-        {
-          "uk": "Використовувати тільки POST-запити",
-          "en": "Use only POST requests",
-          "pl": "Używać tylko żądań POST",
-          "correct": false
-        },
-        {
-          "uk": "Відключити логування",
-          "en": "Disable logging",
-          "pl": "Wyłączyć logowanie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q08",
-      "order": 8,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке loosely coupled архітектура у контексті мікросервісів?",
-        "exp": "Loosely coupled означає, що сервіси взаємодіють через асинхронні повідомлення (message broker), не залежать один від одного напряму і можуть змінюватися незалежно."
-      },
-      "en": {
-        "q": "What is loosely coupled architecture in the context of microservices?",
-        "exp": "Loosely coupled means services communicate through async messages (message broker), don't depend directly on each other, and can change independently."
-      },
-      "pl": {
-        "q": "Czym jest architektura loosely coupled w kontekście mikroserwisów?",
-        "exp": "Loosely coupled oznacza, że usługi komunikują się przez asynchroniczne wiadomości (message broker), nie zależą bezpośrednio od siebie i mogą zmieniać się niezależnie."
-      },
-      "answers": [
-        {
-          "uk": "Усі сервіси в одному репозиторії",
-          "en": "All services in one repository",
-          "pl": "Wszystkie usługi w jednym repozytorium",
-          "correct": false
-        },
-        {
-          "uk": "Сервіси не залежать напряму один від одного, спілкуються через message broker",
-          "en": "Services don't depend directly on each other, communicate via message broker",
-          "pl": "Usługi nie zależą bezpośrednio od siebie, komunikują się przez message broker",
-          "correct": true
-        },
-        {
-          "uk": "Сервіси використовують одну базу даних",
-          "en": "Services use one database",
-          "pl": "Usługi używają jednej bazy danych",
-          "correct": false
-        },
-        {
-          "uk": "Сервіси завжди синхронно викликають один одного",
-          "en": "Services always call each other synchronously",
-          "pl": "Usługi zawsze wywołują się synchronicznie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q09",
-      "order": 9,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між RabbitMQ та Kafka для Node.js мікросервісів?",
-        "exp": "RabbitMQ — традиційний message broker з чергами, підходить для task queues. Kafka — distributed log для high-throughput streaming з persistence та replay."
-      },
-      "en": {
-        "q": "What is the difference between RabbitMQ and Kafka for Node.js microservices?",
-        "exp": "RabbitMQ is a traditional message broker with queues, suitable for task queues. Kafka is a distributed log for high-throughput streaming with persistence and replay."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między RabbitMQ a Kafka dla mikroserwisów Node.js?",
-        "exp": "RabbitMQ to tradycyjny message broker z kolejkami, odpowiedni dla task queues. Kafka to distributed log dla high-throughput streaming z persistence i replay."
-      },
-      "answers": [
-        {
-          "uk": "Вони однакові, різниця лише в назві",
-          "en": "They are the same, only the name differs",
-          "pl": "Są takie same, różni się tylko nazwa",
-          "correct": false
-        },
-        {
-          "uk": "RabbitMQ — черги для tasks; Kafka — distributed log для streaming з persistence",
-          "en": "RabbitMQ — queues for tasks; Kafka — distributed log for streaming with persistence",
-          "pl": "RabbitMQ — kolejki dla tasks; Kafka — distributed log dla streaming z persistence",
-          "correct": true
-        },
-        {
-          "uk": "Kafka працює тільки з Java",
-          "en": "Kafka works only with Java",
-          "pl": "Kafka działa tylko z Java",
-          "correct": false
-        },
-        {
-          "uk": "RabbitMQ швидший за Kafka завжди",
-          "en": "RabbitMQ is always faster than Kafka",
-          "pl": "RabbitMQ jest zawsze szybszy niż Kafka",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q10",
-      "order": 10,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке ZeroMQ і коли його варто використовувати замість RabbitMQ?",
-        "exp": "ZeroMQ — бібліотека для P2P комунікації без центрального брокера. Підходить, коли потрібна низька затримка і немає потреби у гарантованій доставці повідомлень."
-      },
-      "en": {
-        "q": "What is ZeroMQ and when should it be used instead of RabbitMQ?",
-        "exp": "ZeroMQ is a library for P2P communication without a central broker. Suitable when low latency is needed and guaranteed message delivery is not required."
-      },
-      "pl": {
-        "q": "Czym jest ZeroMQ i kiedy należy go używać zamiast RabbitMQ?",
-        "exp": "ZeroMQ to biblioteka do komunikacji P2P bez centralnego brokera. Odpowiednia gdy potrzebne jest niskie opóźnienie i nie wymaga gwarantowanego dostarczenia wiadomości."
-      },
-      "answers": [
-        {
-          "uk": "ZeroMQ — база даних для повідомлень",
-          "en": "ZeroMQ is a database for messages",
-          "pl": "ZeroMQ to baza danych dla wiadomości",
-          "correct": false
-        },
-        {
-          "uk": "P2P бібліотека без брокера для низької затримки",
-          "en": "P2P library without broker for low latency",
-          "pl": "Biblioteka P2P bez brokera dla niskiego opóźnienia",
-          "correct": true
-        },
-        {
-          "uk": "ZeroMQ замінює HTTP протокол",
-          "en": "ZeroMQ replaces the HTTP protocol",
-          "pl": "ZeroMQ zastępuje protokół HTTP",
-          "correct": false
-        },
-        {
-          "uk": "ZeroMQ працює тільки локально",
-          "en": "ZeroMQ works only locally",
-          "pl": "ZeroMQ działa tylko lokalnie",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/node/advanced/nodejs-advanced-quiz-part2.json b/json/quizzes/node/advanced/nodejs-advanced-quiz-part2.json
deleted file mode 100644
index dce9f148..00000000
--- a/json/quizzes/node/advanced/nodejs-advanced-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "node-adv-q11",
-      "order": 11,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які основні архітектурні концепції використовує NestJS?",
-        "exp": "NestJS базується на модулях, контролерах, сервісах, декораторах та Dependency Injection (DI), подібно до Angular."
-      },
-      "en": {
-        "q": "What are the main architectural concepts used by NestJS?",
-        "exp": "NestJS is based on modules, controllers, services, decorators, and Dependency Injection (DI), similar to Angular."
-      },
-      "pl": {
-        "q": "Jakie są główne koncepcje architektoniczne używane przez NestJS?",
-        "exp": "NestJS opiera się na modułach, kontrolerach, serwisach, dekoratorach i Dependency Injection (DI), podobnie jak Angular."
-      },
-      "answers": [
-        {
-          "uk": "Тільки middleware та роути",
-          "en": "Only middleware and routes",
-          "pl": "Tylko middleware i routy",
-          "correct": false
-        },
-        {
-          "uk": "Модулі, контролери, сервіси, декоратори, Dependency Injection",
-          "en": "Modules, controllers, services, decorators, Dependency Injection",
-          "pl": "Moduły, kontrolery, serwisy, dekoratory, Dependency Injection",
-          "correct": true
-        },
-        {
-          "uk": "MVC без dependency injection",
-          "en": "MVC without dependency injection",
-          "pl": "MVC bez dependency injection",
-          "correct": false
-        },
-        {
-          "uk": "Функціональний підхід без класів",
-          "en": "Functional approach without classes",
-          "pl": "Podejście funkcyjne bez klas",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q12",
-      "order": 12,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Чим Koa.js відрізняється від Express.js у роботі з middleware?",
-        "exp": "Koa використовує onion model — middleware виконується до і після наступного через async/await, тоді як Express передає керування тільки вперед через next()."
-      },
-      "en": {
-        "q": "How does Koa.js differ from Express.js in middleware handling?",
-        "exp": "Koa uses an onion model — middleware executes before and after the next via async/await, while Express passes control only forward via next()."
-      },
-      "pl": {
-        "q": "Czym Koa.js różni się od Express.js w obsłudze middleware?",
-        "exp": "Koa używa modelu cebuli — middleware wykonuje się przed i po następnym przez async/await, podczas gdy Express przekazuje sterowanie tylko do przodu przez next()."
-      },
-      "answers": [
-        {
-          "uk": "Різниці немає",
-          "en": "No difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        },
-        {
-          "uk": "Koa — onion model з async/await (до і після); Express — тільки вперед через next()",
-          "en": "Koa — onion model with async/await (before and after); Express — only forward via next()",
-          "pl": "Koa — model cebuli z async/await (przed i po); Express — tylko do przodu przez next()",
-          "correct": true
-        },
-        {
-          "uk": "Koa не підтримує middleware",
-          "en": "Koa doesn't support middleware",
-          "pl": "Koa nie obsługuje middleware",
-          "correct": false
-        },
-        {
-          "uk": "Express швидший за Koa",
-          "en": "Express is faster than Koa",
-          "pl": "Express jest szybszy niż Koa",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q13",
-      "order": 13,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка перевага GraphQL над REST API у Node.js?",
-        "exp": "GraphQL дозволяє клієнту запитувати тільки потрібні поля, уникаючи over-fetching та under-fetching, і надає єдину точку входу замість множини ендпоінтів."
-      },
-      "en": {
-        "q": "What is the advantage of GraphQL over REST API in Node.js?",
-        "exp": "GraphQL allows the client to request only needed fields, avoiding over-fetching and under-fetching, and provides a single entry point instead of multiple endpoints."
-      },
-      "pl": {
-        "q": "Jaka jest zaleta GraphQL nad REST API w Node.js?",
-        "exp": "GraphQL pozwala klientowi żądać tylko potrzebnych pól, unikając over-fetching i under-fetching, i zapewnia jeden punkt wejścia zamiast wielu endpointów."
-      },
-      "answers": [
-        {
-          "uk": "GraphQL працює швидше за мережею",
-          "en": "GraphQL works faster over the network",
-          "pl": "GraphQL działa szybciej przez sieć",
-          "correct": false
-        },
-        {
-          "uk": "Клієнт запитує лише потрібні поля, єдина точка входу",
-          "en": "Client requests only needed fields, single entry point",
-          "pl": "Klient żąda tylko potrzebnych pól, pojedynczy punkt wejścia",
-          "correct": true
-        },
-        {
-          "uk": "GraphQL не потребує серверної частини",
-          "en": "GraphQL doesn't need a server part",
-          "pl": "GraphQL nie wymaga części serwerowej",
-          "correct": false
-        },
-        {
-          "uk": "GraphQL автоматично кешує всі запити",
-          "en": "GraphQL automatically caches all requests",
-          "pl": "GraphQL automatycznie cachuje wszystkie żądania",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q14",
-      "order": 14,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке резолвери (resolvers) у GraphQL?",
-        "exp": "Резолвери — це функції, які виконуються для кожного поля у GraphQL-запиті та повертають дані з бази, API або іншого джерела."
-      },
-      "en": {
-        "q": "What are resolvers in GraphQL?",
-        "exp": "Resolvers are functions that execute for each field in a GraphQL query and return data from a database, API, or other source."
-      },
-      "pl": {
-        "q": "Czym są resolvery w GraphQL?",
-        "exp": "Resolvery to funkcje wykonywane dla każdego pola w zapytaniu GraphQL, które zwracają dane z bazy danych, API lub innego źródła."
-      },
-      "answers": [
-        {
-          "uk": "Валідатори вхідних даних",
-          "en": "Input data validators",
-          "pl": "Walidatory danych wejściowych",
-          "correct": false
-        },
-        {
-          "uk": "Функції, що повертають дані для кожного поля запиту",
-          "en": "Functions that return data for each query field",
-          "pl": "Funkcje zwracające dane dla każdego pola zapytania",
-          "correct": true
-        },
-        {
-          "uk": "Middleware для авторизації",
-          "en": "Middleware for authorization",
-          "pl": "Middleware do autoryzacji",
-          "correct": false
-        },
-        {
-          "uk": "Схеми бази даних",
-          "en": "Database schemas",
-          "pl": "Schematy bazy danych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q15",
-      "order": 15,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Server-Side Rendering (SSR) і яку бібліотеку використовують для React SSR у Node.js?",
-        "exp": "SSR — генерація HTML на сервері для покращення SEO та швидкості завантаження. Для React використовують Next.js або ReactDOMServer.renderToString()."
-      },
-      "en": {
-        "q": "What is Server-Side Rendering (SSR) and which library is used for React SSR in Node.js?",
-        "exp": "SSR is generating HTML on the server to improve SEO and loading speed. For React, Next.js or ReactDOMServer.renderToString() is used."
-      },
-      "pl": {
-        "q": "Czym jest Server-Side Rendering (SSR) i jakiej biblioteki używa się do React SSR w Node.js?",
-        "exp": "SSR to generowanie HTML na serwerze dla poprawy SEO i szybkości ładowania. Dla React używa się Next.js lub ReactDOMServer.renderToString()."
-      },
-      "answers": [
-        {
-          "uk": "Рендеринг CSS на сервері; використовують Sass",
-          "en": "Rendering CSS on server; Sass is used",
-          "pl": "Renderowanie CSS na serwerze; używa się Sass",
-          "correct": false
-        },
-        {
-          "uk": "Генерація HTML на сервері для SEO; Next.js або ReactDOMServer",
-          "en": "Generating HTML on server for SEO; Next.js or ReactDOMServer",
-          "pl": "Generowanie HTML na serwerze dla SEO; Next.js lub ReactDOMServer",
-          "correct": true
-        },
-        {
-          "uk": "Компіляція JavaScript у WebAssembly",
-          "en": "Compiling JavaScript to WebAssembly",
-          "pl": "Kompilacja JavaScript do WebAssembly",
-          "correct": false
-        },
-        {
-          "uk": "Кешування сторінок у Redis",
-          "en": "Caching pages in Redis",
-          "pl": "Cachowanie stron w Redis",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q16",
-      "order": 16,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке гідрація (hydration) у контексті SSR?",
-        "exp": "Гідрація — процес, коли React на клієнті приєднує event listeners до HTML, згенерованого на сервері, роблячи сторінку інтерактивною."
-      },
-      "en": {
-        "q": "What is hydration in the context of SSR?",
-        "exp": "Hydration is the process where React on the client attaches event listeners to HTML generated on the server, making the page interactive."
-      },
-      "pl": {
-        "q": "Czym jest hydration w kontekście SSR?",
-        "exp": "Hydration to proces, w którym React na kliencie dołącza event listenery do HTML wygenerowanego na serwerze, czyniąc stronę interaktywną."
-      },
-      "answers": [
-        {
-          "uk": "Стиснення HTML для передачі",
-          "en": "Compressing HTML for transfer",
-          "pl": "Kompresja HTML do transferu",
-          "correct": false
-        },
-        {
-          "uk": "Приєднання event listeners до серверного HTML для інтерактивності",
-          "en": "Attaching event listeners to server HTML for interactivity",
-          "pl": "Dołączanie event listenerów do serwerowego HTML dla interaktywności",
-          "correct": true
-        },
-        {
-          "uk": "Завантаження зображень",
-          "en": "Loading images",
-          "pl": "Ładowanie obrazów",
-          "correct": false
-        },
-        {
-          "uk": "Шифрування даних",
-          "en": "Encrypting data",
-          "pl": "Szyfrowanie danych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q17",
-      "order": 17,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка основна перевага TypeScript для великих Node.js проєктів?",
-        "exp": "Статична типізація дозволяє ловити помилки на етапі компіляції, покращує автодоповнення в IDE, спрощує рефакторинг та підвищує читабельність коду."
-      },
-      "en": {
-        "q": "What is the main advantage of TypeScript for large Node.js projects?",
-        "exp": "Static typing allows catching errors at compile time, improves IDE autocompletion, simplifies refactoring, and increases code readability."
-      },
-      "pl": {
-        "q": "Jaka jest główna zaleta TypeScript dla dużych projektów Node.js?",
-        "exp": "Statyczne typowanie pozwala łapać błędy na etapie kompilacji, poprawia autouzupełnianie w IDE, upraszcza refaktoryzację i zwiększa czytelność kodu."
-      },
-      "answers": [
-        {
-          "uk": "TypeScript працює швидше за JavaScript",
-          "en": "TypeScript runs faster than JavaScript",
-          "pl": "TypeScript działa szybciej niż JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Статична типізація, помилки на етапі компіляції, кращий рефакторинг",
-          "en": "Static typing, compile-time errors, better refactoring",
-          "pl": "Statyczne typowanie, błędy na etapie kompilacji, lepszy refaktoring",
-          "correct": true
-        },
-        {
-          "uk": "TypeScript не потребує транспіляції",
-          "en": "TypeScript doesn't need transpilation",
-          "pl": "TypeScript nie wymaga transpilacji",
-          "correct": false
-        },
-        {
-          "uk": "TypeScript замінює всі npm-пакети",
-          "en": "TypeScript replaces all npm packages",
-          "pl": "TypeScript zastępuje wszystkie pakiety npm",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q18",
-      "order": 18,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який принцип Twelve-Factor App відповідає за зберігання конфігурації?",
-        "exp": "Принцип Config вимагає зберігати конфігурацію у змінних середовища (process.env), а не в коді, для безпеки та гнучкості."
-      },
-      "en": {
-        "q": "Which Twelve-Factor App principle is responsible for configuration storage?",
-        "exp": "The Config principle requires storing configuration in environment variables (process.env), not in code, for security and flexibility."
-      },
-      "pl": {
-        "q": "Która zasada Twelve-Factor App odpowiada za przechowywanie konfiguracji?",
-        "exp": "Zasada Config wymaga przechowywania konfiguracji w zmiennych środowiskowych (process.env), nie w kodzie, dla bezpieczeństwa i elastyczności."
-      },
-      "answers": [
-        {
-          "uk": "Codebase",
-          "en": "Codebase",
-          "pl": "Codebase",
-          "correct": false
-        },
-        {
-          "uk": "Config — конфігурація через змінні середовища",
-          "en": "Config — configuration through environment variables",
-          "pl": "Config — konfiguracja przez zmienne środowiskowe",
-          "correct": true
-        },
-        {
-          "uk": "Logs",
-          "en": "Logs",
-          "pl": "Logs",
-          "correct": false
-        },
-        {
-          "uk": "Dependencies",
-          "en": "Dependencies",
-          "pl": "Dependencies",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q19",
-      "order": 19,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що означає принцип Disposability у Twelve-Factor App?",
-        "exp": "Disposability означає швидкий старт та graceful shutdown застосунку — процес має коректно завершувати активні запити та з'єднання перед зупинкою."
-      },
-      "en": {
-        "q": "What does the Disposability principle mean in Twelve-Factor App?",
-        "exp": "Disposability means fast startup and graceful shutdown — the process should correctly complete active requests and connections before stopping."
-      },
-      "pl": {
-        "q": "Co oznacza zasada Disposability w Twelve-Factor App?",
-        "exp": "Disposability oznacza szybki start i graceful shutdown — proces powinien poprawnie zakończyć aktywne żądania i połączenia przed zatrzymaniem."
-      },
-      "answers": [
-        {
-          "uk": "Код має бути одноразовим і видалятися після використання",
-          "en": "Code should be disposable and deleted after use",
-          "pl": "Kod powinien być jednorazowy i usuwany po użyciu",
-          "correct": false
-        },
-        {
-          "uk": "Швидкий старт та graceful shutdown з коректним завершенням запитів",
-          "en": "Fast startup and graceful shutdown with proper request completion",
-          "pl": "Szybki start i graceful shutdown z poprawnym zakończeniem żądań",
-          "correct": true
-        },
-        {
-          "uk": "Використання тимчасових файлів",
-          "en": "Using temporary files",
-          "pl": "Używanie plików tymczasowych",
-          "correct": false
-        },
-        {
-          "uk": "Автоматичне видалення логів",
-          "en": "Automatic log deletion",
-          "pl": "Automatyczne usuwanie logów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q20",
-      "order": 20,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як реалізувати graceful shutdown у Node.js застосунку?",
-        "exp": "Слухати сигнали SIGTERM/SIGINT, зупинити прийом нових з'єднань, дочекатися завершення активних запитів, закрити з'єднання з БД і вийти."
-      },
-      "en": {
-        "q": "How to implement graceful shutdown in a Node.js application?",
-        "exp": "Listen for SIGTERM/SIGINT signals, stop accepting new connections, wait for active requests to complete, close DB connections, and exit."
-      },
-      "pl": {
-        "q": "Jak zaimplementować graceful shutdown w aplikacji Node.js?",
-        "exp": "Nasłuchiwać sygnałów SIGTERM/SIGINT, przestać przyjmować nowe połączenia, poczekać na zakończenie aktywnych żądań, zamknąć połączenia z BD i wyjść."
-      },
-      "answers": [
-        {
-          "uk": "Просто викликати process.exit(0)",
-          "en": "Just call process.exit(0)",
-          "pl": "Po prostu wywołać process.exit(0)",
-          "correct": false
-        },
-        {
-          "uk": "Слухати SIGTERM/SIGINT, завершити активні запити, закрити з'єднання з БД",
-          "en": "Listen for SIGTERM/SIGINT, complete active requests, close DB connections",
-          "pl": "Nasłuchiwać SIGTERM/SIGINT, zakończyć aktywne żądania, zamknąć połączenia z BD",
-          "correct": true
-        },
-        {
-          "uk": "Перезапустити сервер автоматично",
-          "en": "Restart the server automatically",
-          "pl": "Zrestartować serwer automatycznie",
-          "correct": false
-        },
-        {
-          "uk": "Зберегти стан у файл",
-          "en": "Save state to a file",
-          "pl": "Zapisać stan do pliku",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/node/advanced/nodejs-advanced-quiz-part3.json b/json/quizzes/node/advanced/nodejs-advanced-quiz-part3.json
deleted file mode 100644
index 1751251c..00000000
--- a/json/quizzes/node/advanced/nodejs-advanced-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "node-adv-q21",
-      "order": 21,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке serverless архітектура і які її переваги для Node.js?",
-        "exp": "Serverless — модель, де код виконується по запиту без управління серверами. Платиш тільки за час виконання, автоматичне масштабування."
-      },
-      "en": {
-        "q": "What is serverless architecture and what are its advantages for Node.js?",
-        "exp": "Serverless is a model where code runs on demand without server management. You pay only for execution time, automatic scaling."
-      },
-      "pl": {
-        "q": "Czym jest architektura serverless i jakie są jej zalety dla Node.js?",
-        "exp": "Serverless to model, w którym kod uruchamia się na żądanie bez zarządzania serwerami. Płacisz tylko za czas wykonania, automatyczne skalowanie."
-      },
-      "answers": [
-        {
-          "uk": "Код виконується без JavaScript",
-          "en": "Code runs without JavaScript",
-          "pl": "Kod działa bez JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Виконання по запиту без управління серверами, оплата за час виконання",
-          "en": "On-demand execution without server management, pay for execution time",
-          "pl": "Wykonywanie na żądanie bez zarządzania serwerami, płatność za czas wykonania",
-          "correct": true
-        },
-        {
-          "uk": "Сервери працюють без електрики",
-          "en": "Servers work without electricity",
-          "pl": "Serwery działają bez elektryczności",
-          "correct": false
-        },
-        {
-          "uk": "Тільки для статичних сайтів",
-          "en": "Only for static sites",
-          "pl": "Tylko dla stron statycznych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q22",
-      "order": 22,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка проблема cold start у serverless і як її мінімізувати?",
-        "exp": "Cold start — затримка при першому виклику функції через ініціалізацію контейнера. Мінімізують через provisioned concurrency, менший розмір пакета, lazy loading."
-      },
-      "en": {
-        "q": "What is the cold start problem in serverless and how to minimize it?",
-        "exp": "Cold start is a delay on the first function call due to container initialization. Minimize via provisioned concurrency, smaller package size, lazy loading."
-      },
-      "pl": {
-        "q": "Czym jest problem cold start w serverless i jak go zminimalizować?",
-        "exp": "Cold start to opóźnienie przy pierwszym wywołaniu funkcji przez inicjalizację kontenera. Minimalizuje się przez provisioned concurrency, mniejszy rozmiar pakietu, lazy loading."
-      },
-      "answers": [
-        {
-          "uk": "Проблема з температурою серверів",
-          "en": "Server temperature problem",
-          "pl": "Problem z temperaturą serwerów",
-          "correct": false
-        },
-        {
-          "uk": "Затримка при першому виклику; мінімізують через provisioned concurrency та менший пакет",
-          "en": "Delay on first call; minimize via provisioned concurrency and smaller package",
-          "pl": "Opóźnienie przy pierwszym wywołaniu; minimalizuje się przez provisioned concurrency i mniejszy pakiet",
-          "correct": true
-        },
-        {
-          "uk": "Помилка у конфігурації",
-          "en": "Configuration error",
-          "pl": "Błąd konfiguracji",
-          "correct": false
-        },
-        {
-          "uk": "Обмеження на кількість функцій",
-          "en": "Limit on number of functions",
-          "pl": "Limit liczby funkcji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q23",
-      "order": 23,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що включає Continuous Integration (CI) для Node.js проєкту?",
-        "exp": "CI включає автоматичну установку залежностей (npm install), запуск тестів (npm test), перевірку коду лінтером (ESLint) при кожному push/PR."
-      },
-      "en": {
-        "q": "What does Continuous Integration (CI) include for a Node.js project?",
-        "exp": "CI includes automatic dependency installation (npm install), running tests (npm test), code linting (ESLint) on every push/PR."
-      },
-      "pl": {
-        "q": "Co obejmuje Continuous Integration (CI) dla projektu Node.js?",
-        "exp": "CI obejmuje automatyczną instalację zależności (npm install), uruchamianie testów (npm test), sprawdzanie kodu linterem (ESLint) przy każdym push/PR."
-      },
-      "answers": [
-        {
-          "uk": "Тільки деплой на продакшн",
-          "en": "Only deployment to production",
-          "pl": "Tylko deployment na produkcję",
-          "correct": false
-        },
-        {
-          "uk": "Автоматична установка залежностей, тести, лінтинг при кожному push/PR",
-          "en": "Automatic dependency installation, tests, linting on every push/PR",
-          "pl": "Automatyczna instalacja zależności, testy, linting przy każdym push/PR",
-          "correct": true
-        },
-        {
-          "uk": "Ручне тестування перед релізом",
-          "en": "Manual testing before release",
-          "pl": "Ręczne testowanie przed wydaniem",
-          "correct": false
-        },
-        {
-          "uk": "Написання документації",
-          "en": "Writing documentation",
-          "pl": "Pisanie dokumentacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q24",
-      "order": 24,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як керувати сесіями у масштабованому Node.js застосунку з кількома інстансами?",
-        "exp": "Використовувати централізоване сховище сесій (Redis, Memcached) або JWT-токени, які зберігаються на клієнті і не потребують серверного стану."
-      },
-      "en": {
-        "q": "How to manage sessions in a scalable Node.js app with multiple instances?",
-        "exp": "Use centralized session storage (Redis, Memcached) or JWT tokens that are stored on the client and don't require server state."
-      },
-      "pl": {
-        "q": "Jak zarządzać sesjami w skalowalnej aplikacji Node.js z wieloma instancjami?",
-        "exp": "Używać scentralizowanego storage sesji (Redis, Memcached) lub tokenów JWT przechowywanych na kliencie i nie wymagających stanu serwera."
-      },
-      "answers": [
-        {
-          "uk": "Зберігати сесії в пам'яті кожного інстансу",
-          "en": "Store sessions in memory of each instance",
-          "pl": "Przechowywać sesje w pamięci każdej instancji",
-          "correct": false
-        },
-        {
-          "uk": "Централізоване сховище (Redis) або JWT-токени на клієнті",
-          "en": "Centralized storage (Redis) or JWT tokens on client",
-          "pl": "Scentralizowane storage (Redis) lub tokeny JWT na kliencie",
-          "correct": true
-        },
-        {
-          "uk": "Використовувати cookies без шифрування",
-          "en": "Use cookies without encryption",
-          "pl": "Używać cookies bez szyfrowania",
-          "correct": false
-        },
-        {
-          "uk": "Завжди направляти користувача на один сервер",
-          "en": "Always direct user to one server",
-          "pl": "Zawsze kierować użytkownika na jeden serwer",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q25",
-      "order": 25,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке connection pooling і чому він важливий для Node.js з базами даних?",
-        "exp": "Connection pooling — повторне використання відкритих з'єднань до БД замість створення нових. Зменшує overhead та покращує продуктивність."
-      },
-      "en": {
-        "q": "What is connection pooling and why is it important for Node.js with databases?",
-        "exp": "Connection pooling is reusing open database connections instead of creating new ones. Reduces overhead and improves performance."
-      },
-      "pl": {
-        "q": "Czym jest connection pooling i dlaczego jest ważny dla Node.js z bazami danych?",
-        "exp": "Connection pooling to ponowne wykorzystywanie otwartych połączeń do BD zamiast tworzenia nowych. Zmniejsza overhead i poprawia wydajność."
-      },
-      "answers": [
-        {
-          "uk": "Об'єднання кількох баз даних в одну",
-          "en": "Combining multiple databases into one",
-          "pl": "Łączenie wielu baz danych w jedną",
-          "correct": false
-        },
-        {
-          "uk": "Повторне використання з'єднань до БД для зменшення overhead",
-          "en": "Reusing DB connections to reduce overhead",
-          "pl": "Ponowne wykorzystywanie połączeń do BD dla zmniejszenia overhead",
-          "correct": true
-        },
-        {
-          "uk": "Шифрування з'єднань до бази",
-          "en": "Encrypting database connections",
-          "pl": "Szyfrowanie połączeń do bazy",
-          "correct": false
-        },
-        {
-          "uk": "Створення нового з'єднання для кожного запиту",
-          "en": "Creating a new connection for each request",
-          "pl": "Tworzenie nowego połączenia dla każdego żądania",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q26",
-      "order": 26,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який інструмент використовують для профайлінгу CPU та пам'яті у Node.js?",
-        "exp": "node --inspect з Chrome DevTools, clinic.js (Doctor, Flame, Bubbleprof), 0x для flame graphs, perf_hooks для вбудованого профайлінгу."
-      },
-      "en": {
-        "q": "Which tool is used for CPU and memory profiling in Node.js?",
-        "exp": "node --inspect with Chrome DevTools, clinic.js (Doctor, Flame, Bubbleprof), 0x for flame graphs, perf_hooks for built-in profiling."
-      },
-      "pl": {
-        "q": "Które narzędzie jest używane do profilowania CPU i pamięci w Node.js?",
-        "exp": "node --inspect z Chrome DevTools, clinic.js (Doctor, Flame, Bubbleprof), 0x dla flame graphs, perf_hooks dla wbudowanego profilowania."
-      },
-      "answers": [
-        {
-          "uk": "npm audit",
-          "en": "npm audit",
-          "pl": "npm audit",
-          "correct": false
-        },
-        {
-          "uk": "node --inspect з Chrome DevTools, clinic.js, 0x",
-          "en": "node --inspect with Chrome DevTools, clinic.js, 0x",
-          "pl": "node --inspect z Chrome DevTools, clinic.js, 0x",
-          "correct": true
-        },
-        {
-          "uk": "ESLint",
-          "en": "ESLint",
-          "pl": "ESLint",
-          "correct": false
-        },
-        {
-          "uk": "Prettier",
-          "en": "Prettier",
-          "pl": "Prettier",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка рекомендована стратегія логування для Node.js у продакшн?",
-        "exp": "Логування як потік у stdout/stderr, структуровані JSON логи (Winston, Pino), збір через зовнішні сервіси (ELK stack, Datadog)."
-      },
-      "en": {
-        "q": "What is the recommended logging strategy for Node.js in production?",
-        "exp": "Logging as a stream to stdout/stderr, structured JSON logs (Winston, Pino), collection via external services (ELK stack, Datadog)."
-      },
-      "pl": {
-        "q": "Jaka jest zalecana strategia logowania dla Node.js na produkcji?",
-        "exp": "Logowanie jako strumień do stdout/stderr, strukturyzowane logi JSON (Winston, Pino), zbieranie przez zewnętrzne serwisy (ELK stack, Datadog)."
-      },
-      "answers": [
-        {
-          "uk": "Записувати логи тільки у локальний файл",
-          "en": "Write logs only to a local file",
-          "pl": "Zapisywać logi tylko do lokalnego pliku",
-          "correct": false
-        },
-        {
-          "uk": "Структуровані JSON логи у stdout/stderr, збір через ELK/Datadog",
-          "en": "Structured JSON logs to stdout/stderr, collection via ELK/Datadog",
-          "pl": "Strukturyzowane logi JSON do stdout/stderr, zbieranie przez ELK/Datadog",
-          "correct": true
-        },
-        {
-          "uk": "Використовувати тільки console.log",
-          "en": "Use only console.log",
-          "pl": "Używać tylko console.log",
-          "correct": false
-        },
-        {
-          "uk": "Відключити логування для продуктивності",
-          "en": "Disable logging for performance",
-          "pl": "Wyłączyć logowanie dla wydajności",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q28",
-      "order": 28,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як використовувати Swagger/OpenAPI для документування Node.js REST API?",
-        "exp": "Визначити специфікацію API у YAML/JSON форматі, інтегрувати swagger-ui-express для візуалізації, автогенерувати клієнти та тести."
-      },
-      "en": {
-        "q": "How to use Swagger/OpenAPI for documenting Node.js REST API?",
-        "exp": "Define API specification in YAML/JSON format, integrate swagger-ui-express for visualization, auto-generate clients and tests."
-      },
-      "pl": {
-        "q": "Jak używać Swagger/OpenAPI do dokumentowania REST API Node.js?",
-        "exp": "Zdefiniować specyfikację API w formacie YAML/JSON, zintegrować swagger-ui-express dla wizualizacji, autogenerować klientów i testy."
-      },
-      "answers": [
-        {
-          "uk": "Swagger тільки для фронтенду",
-          "en": "Swagger is only for frontend",
-          "pl": "Swagger jest tylko dla frontendu",
-          "correct": false
-        },
-        {
-          "uk": "Специфікація у YAML/JSON, swagger-ui-express для візуалізації, автогенерація клієнтів",
-          "en": "Specification in YAML/JSON, swagger-ui-express for visualization, auto-generate clients",
-          "pl": "Specyfikacja w YAML/JSON, swagger-ui-express dla wizualizacji, autogeneracja klientów",
-          "correct": true
-        },
-        {
-          "uk": "Swagger замінює базу даних",
-          "en": "Swagger replaces the database",
-          "pl": "Swagger zastępuje bazę danych",
-          "correct": false
-        },
-        {
-          "uk": "Swagger працює тільки з GraphQL",
-          "en": "Swagger works only with GraphQL",
-          "pl": "Swagger działa tylko z GraphQL",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q29",
-      "order": 29,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які хмарні сервіси AWS використовуються для Node.js serverless функцій?",
-        "exp": "AWS Lambda для виконання функцій, API Gateway для HTTP-ендпоінтів, DynamoDB для даних, SQS/SNS для повідомлень, S3 для файлів."
-      },
-      "en": {
-        "q": "Which AWS cloud services are used for Node.js serverless functions?",
-        "exp": "AWS Lambda for function execution, API Gateway for HTTP endpoints, DynamoDB for data, SQS/SNS for messages, S3 for files."
-      },
-      "pl": {
-        "q": "Które usługi chmurowe AWS są używane do funkcji serverless Node.js?",
-        "exp": "AWS Lambda do wykonywania funkcji, API Gateway dla endpointów HTTP, DynamoDB dla danych, SQS/SNS dla wiadomości, S3 dla plików."
-      },
-      "answers": [
-        {
-          "uk": "Тільки EC2",
-          "en": "Only EC2",
-          "pl": "Tylko EC2",
-          "correct": false
-        },
-        {
-          "uk": "Lambda, API Gateway, DynamoDB, SQS/SNS, S3",
-          "en": "Lambda, API Gateway, DynamoDB, SQS/SNS, S3",
-          "pl": "Lambda, API Gateway, DynamoDB, SQS/SNS, S3",
-          "correct": true
-        },
-        {
-          "uk": "Тільки S3",
-          "en": "Only S3",
-          "pl": "Tylko S3",
-          "correct": false
-        },
-        {
-          "uk": "AWS не підтримує Node.js",
-          "en": "AWS doesn't support Node.js",
-          "pl": "AWS nie obsługuje Node.js",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q30",
-      "order": 30,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке API Gateway у контексті мікросервісної архітектури?",
-        "exp": "API Gateway — єдина точка входу, яка маршрутизує запити до мікросервісів, забезпечує аутентифікацію, rate limiting, агрегацію відповідей."
-      },
-      "en": {
-        "q": "What is API Gateway in the context of microservices architecture?",
-        "exp": "API Gateway is a single entry point that routes requests to microservices, provides authentication, rate limiting, and response aggregation."
-      },
-      "pl": {
-        "q": "Czym jest API Gateway w kontekście architektury mikroserwisów?",
-        "exp": "API Gateway to pojedynczy punkt wejścia, który routuje żądania do mikroserwisów, zapewnia autentykację, rate limiting i agregację odpowiedzi."
-      },
-      "answers": [
-        {
-          "uk": "База даних для API",
-          "en": "A database for API",
-          "pl": "Baza danych dla API",
-          "correct": false
-        },
-        {
-          "uk": "Єдина точка входу для маршрутизації, аутентифікації та rate limiting",
-          "en": "Single entry point for routing, authentication, and rate limiting",
-          "pl": "Pojedynczy punkt wejścia dla routingu, autentykacji i rate limiting",
-          "correct": true
-        },
-        {
-          "uk": "Інструмент для тестування",
-          "en": "A testing tool",
-          "pl": "Narzędzie do testowania",
-          "correct": false
-        },
-        {
-          "uk": "Фреймворк для фронтенду",
-          "en": "A frontend framework",
-          "pl": "Framework frontendowy",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/node/advanced/nodejs-advanced-quiz-part4.json b/json/quizzes/node/advanced/nodejs-advanced-quiz-part4.json
deleted file mode 100644
index b7a2cfb2..00000000
--- a/json/quizzes/node/advanced/nodejs-advanced-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "node-adv-q31",
-      "order": 31,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Чому Node.js підходить для IoT (Internet of Things) застосунків?",
-        "exp": "Легка вага, асинхронність та подієво-орієнтована модель дозволяють ефективно обробляти велику кількість підключень від сенсорів у реальному часі."
-      },
-      "en": {
-        "q": "Why is Node.js suitable for IoT (Internet of Things) applications?",
-        "exp": "Lightweight, async, and event-driven model allows efficient handling of many sensor connections in real-time."
-      },
-      "pl": {
-        "q": "Dlaczego Node.js nadaje się do aplikacji IoT (Internet of Things)?",
-        "exp": "Lekkość, asynchroniczność i model sterowany zdarzeniami pozwalają efektywnie obsługiwać wiele połączeń z sensorów w czasie rzeczywistym."
-      },
-      "answers": [
-        {
-          "uk": "Node.js споживає мало електрики",
-          "en": "Node.js consumes little electricity",
-          "pl": "Node.js zużywa mało elektryczności",
-          "correct": false
-        },
-        {
-          "uk": "Легкість, асинхронність та event-driven модель для обробки багатьох підключень",
-          "en": "Lightweight, async, and event-driven model for handling many connections",
-          "pl": "Lekkość, asynchroniczność i model event-driven do obsługi wielu połączeń",
-          "correct": true
-        },
-        {
-          "uk": "Node.js працює без інтернету",
-          "en": "Node.js works without internet",
-          "pl": "Node.js działa bez internetu",
-          "correct": false
-        },
-        {
-          "uk": "Node.js замінює прошивку пристроїв",
-          "en": "Node.js replaces device firmware",
-          "pl": "Node.js zastępuje firmware urządzeń",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q32",
-      "order": 32,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який протокол часто використовують для IoT комунікації з Node.js?",
-        "exp": "MQTT — легкий протокол publish/subscribe для IoT з низьким споживанням ресурсів, підтримкою QoS та offline повідомлень."
-      },
-      "en": {
-        "q": "Which protocol is often used for IoT communication with Node.js?",
-        "exp": "MQTT is a lightweight publish/subscribe protocol for IoT with low resource consumption, QoS support, and offline messages."
-      },
-      "pl": {
-        "q": "Który protokół jest często używany do komunikacji IoT z Node.js?",
-        "exp": "MQTT to lekki protokół publish/subscribe dla IoT z niskim zużyciem zasobów, obsługą QoS i wiadomościami offline."
-      },
-      "answers": [
-        {
-          "uk": "FTP",
-          "en": "FTP",
-          "pl": "FTP",
-          "correct": false
-        },
-        {
-          "uk": "MQTT — легкий publish/subscribe протокол для IoT",
-          "en": "MQTT — lightweight publish/subscribe protocol for IoT",
-          "pl": "MQTT — lekki protokół publish/subscribe dla IoT",
-          "correct": true
-        },
-        {
-          "uk": "SMTP",
-          "en": "SMTP",
-          "pl": "SMTP",
-          "correct": false
-        },
-        {
-          "uk": "SSH",
-          "en": "SSH",
-          "pl": "SSH",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q33",
-      "order": 33,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка бібліотека використовується для машинного навчання безпосередньо у Node.js?",
-        "exp": "TensorFlow.js дозволяє тренувати та запускати ML-моделі прямо у Node.js. Також є Brain.js, ML.js для легких задач."
-      },
-      "en": {
-        "q": "Which library is used for machine learning directly in Node.js?",
-        "exp": "TensorFlow.js allows training and running ML models directly in Node.js. There's also Brain.js, ML.js for lighter tasks."
-      },
-      "pl": {
-        "q": "Która biblioteka jest używana do uczenia maszynowego bezpośrednio w Node.js?",
-        "exp": "TensorFlow.js pozwala trenować i uruchamiać modele ML bezpośrednio w Node.js. Jest też Brain.js, ML.js dla lżejszych zadań."
-      },
-      "answers": [
-        {
-          "uk": "Lodash",
-          "en": "Lodash",
-          "pl": "Lodash",
-          "correct": false
-        },
-        {
-          "uk": "TensorFlow.js, Brain.js, ML.js",
-          "en": "TensorFlow.js, Brain.js, ML.js",
-          "pl": "TensorFlow.js, Brain.js, ML.js",
-          "correct": true
-        },
-        {
-          "uk": "Express.js",
-          "en": "Express.js",
-          "pl": "Express.js",
-          "correct": false
-        },
-        {
-          "uk": "Moment.js",
-          "en": "Moment.js",
-          "pl": "Moment.js",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка перевага Socket.IO над чистим WebSocket?",
-        "exp": "Socket.IO надає автоматичний fallback на long-polling, rooms/namespaces для групування, reconnection та broadcasting з коробки."
-      },
-      "en": {
-        "q": "What is the advantage of Socket.IO over plain WebSocket?",
-        "exp": "Socket.IO provides automatic fallback to long-polling, rooms/namespaces for grouping, reconnection, and broadcasting out of the box."
-      },
-      "pl": {
-        "q": "Jaka jest zaleta Socket.IO nad czystym WebSocket?",
-        "exp": "Socket.IO zapewnia automatyczny fallback na long-polling, rooms/namespaces do grupowania, reconnection i broadcasting z pudełka."
-      },
-      "answers": [
-        {
-          "uk": "Socket.IO швидший за WebSocket",
-          "en": "Socket.IO is faster than WebSocket",
-          "pl": "Socket.IO jest szybszy niż WebSocket",
-          "correct": false
-        },
-        {
-          "uk": "Fallback на long-polling, rooms/namespaces, reconnection, broadcasting",
-          "en": "Fallback to long-polling, rooms/namespaces, reconnection, broadcasting",
-          "pl": "Fallback na long-polling, rooms/namespaces, reconnection, broadcasting",
-          "correct": true
-        },
-        {
-          "uk": "Socket.IO не потребує сервера",
-          "en": "Socket.IO doesn't need a server",
-          "pl": "Socket.IO nie potrzebuje serwera",
-          "correct": false
-        },
-        {
-          "uk": "Socket.IO працює тільки з React",
-          "en": "Socket.IO works only with React",
-          "pl": "Socket.IO działa tylko z React",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q35",
-      "order": 35,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як інтегрувати Node.js з Python ML-сервісом для великих моделей?",
-        "exp": "Запустити Python скрипт через child_process, або створити окремий Python REST API/gRPC сервіс, з яким Node.js взаємодіє через HTTP."
-      },
-      "en": {
-        "q": "How to integrate Node.js with a Python ML service for large models?",
-        "exp": "Run Python script via child_process, or create a separate Python REST API/gRPC service that Node.js interacts with via HTTP."
-      },
-      "pl": {
-        "q": "Jak zintegrować Node.js z serwisem Python ML dla dużych modeli?",
-        "exp": "Uruchomić skrypt Python przez child_process lub stworzyć osobny serwis Python REST API/gRPC, z którym Node.js komunikuje się przez HTTP."
-      },
-      "answers": [
-        {
-          "uk": "Переписати модель на JavaScript",
-          "en": "Rewrite the model in JavaScript",
-          "pl": "Przepisać model na JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "child_process або окремий Python REST API/gRPC сервіс",
-          "en": "child_process or separate Python REST API/gRPC service",
-          "pl": "child_process lub osobny serwis Python REST API/gRPC",
-          "correct": true
-        },
-        {
-          "uk": "Імпортувати Python напряму в Node.js",
-          "en": "Import Python directly into Node.js",
-          "pl": "Importować Python bezpośrednio do Node.js",
-          "correct": false
-        },
-        {
-          "uk": "Python не можна інтегрувати з Node.js",
-          "en": "Python cannot be integrated with Node.js",
-          "pl": "Python nie może być zintegrowany z Node.js",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q36",
-      "order": 36,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який інструмент використовують для load testing Node.js API?",
-        "exp": "Autocannon, Artillery, k6, Apache JMeter — для симуляції великого навантаження та вимірювання latency, throughput, error rate."
-      },
-      "en": {
-        "q": "Which tool is used for load testing Node.js API?",
-        "exp": "Autocannon, Artillery, k6, Apache JMeter — for simulating heavy load and measuring latency, throughput, error rate."
-      },
-      "pl": {
-        "q": "Które narzędzie jest używane do load testingu API Node.js?",
-        "exp": "Autocannon, Artillery, k6, Apache JMeter — do symulowania dużego obciążenia i mierzenia latency, throughput, error rate."
-      },
-      "answers": [
-        {
-          "uk": "ESLint",
-          "en": "ESLint",
-          "pl": "ESLint",
-          "correct": false
-        },
-        {
-          "uk": "Autocannon, Artillery, k6, Apache JMeter",
-          "en": "Autocannon, Artillery, k6, Apache JMeter",
-          "pl": "Autocannon, Artillery, k6, Apache JMeter",
-          "correct": true
-        },
-        {
-          "uk": "Prettier",
-          "en": "Prettier",
-          "pl": "Prettier",
-          "correct": false
-        },
-        {
-          "uk": "Webpack",
-          "en": "Webpack",
-          "pl": "Webpack",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q37",
-      "order": 37,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як безпечно зберігати секрети (API ключі, паролі) у Node.js продакшн?",
-        "exp": "Використовувати Vault, AWS Secrets Manager, Azure Key Vault або Kubernetes Secrets замість .env файлів чи хардкоду в коді."
-      },
-      "en": {
-        "q": "How to securely store secrets (API keys, passwords) in Node.js production?",
-        "exp": "Use Vault, AWS Secrets Manager, Azure Key Vault, or Kubernetes Secrets instead of .env files or hardcoding in code."
-      },
-      "pl": {
-        "q": "Jak bezpiecznie przechowywać sekrety (klucze API, hasła) w Node.js na produkcji?",
-        "exp": "Używać Vault, AWS Secrets Manager, Azure Key Vault lub Kubernetes Secrets zamiast plików .env lub hardkodowania w kodzie."
-      },
-      "answers": [
-        {
-          "uk": "Зберігати у коді для зручності",
-          "en": "Store in code for convenience",
-          "pl": "Przechowywać w kodzie dla wygody",
-          "correct": false
-        },
-        {
-          "uk": "Vault, AWS Secrets Manager, Azure Key Vault, Kubernetes Secrets",
-          "en": "Vault, AWS Secrets Manager, Azure Key Vault, Kubernetes Secrets",
-          "pl": "Vault, AWS Secrets Manager, Azure Key Vault, Kubernetes Secrets",
-          "correct": true
-        },
-        {
-          "uk": "Публікувати в README",
-          "en": "Publish in README",
-          "pl": "Publikować w README",
-          "correct": false
-        },
-        {
-          "uk": "Комітити .env у Git",
-          "en": "Commit .env to Git",
-          "pl": "Commitować .env do Git",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як Node.js застосунок масштабується у Kubernetes?",
-        "exp": "Запускається як Pod/Deployment з кількома репліками, використовується Horizontal Pod Autoscaler (HPA) для автоматичного масштабування за CPU/пам'яттю."
-      },
-      "en": {
-        "q": "How does a Node.js application scale in Kubernetes?",
-        "exp": "Runs as Pod/Deployment with multiple replicas, uses Horizontal Pod Autoscaler (HPA) for automatic scaling by CPU/memory."
-      },
-      "pl": {
-        "q": "Jak aplikacja Node.js skaluje się w Kubernetes?",
-        "exp": "Działa jako Pod/Deployment z wieloma replikami, używa Horizontal Pod Autoscaler (HPA) do automatycznego skalowania po CPU/pamięci."
-      },
-      "answers": [
-        {
-          "uk": "Node.js не працює в Kubernetes",
-          "en": "Node.js doesn't work in Kubernetes",
-          "pl": "Node.js nie działa w Kubernetes",
-          "correct": false
-        },
-        {
-          "uk": "Pod/Deployment з репліками, Horizontal Pod Autoscaler для автоскейлінгу",
-          "en": "Pod/Deployment with replicas, Horizontal Pod Autoscaler for autoscaling",
-          "pl": "Pod/Deployment z replikami, Horizontal Pod Autoscaler do autoskalowania",
-          "correct": true
-        },
-        {
-          "uk": "Тільки один екземпляр на кластер",
-          "en": "Only one instance per cluster",
-          "pl": "Tylko jedna instancja na klaster",
-          "correct": false
-        },
-        {
-          "uk": "Kubernetes автоматично перетворює код",
-          "en": "Kubernetes automatically transforms code",
-          "pl": "Kubernetes automatycznie przekształca kod",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q39",
-      "order": 39,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке supertest і як він використовується для тестування Node.js API?",
-        "exp": "Supertest — бібліотека для integration testing HTTP-серверів у Node.js. Дозволяє робити HTTP-запити до Express/Koa app і перевіряти відповіді."
-      },
-      "en": {
-        "q": "What is supertest and how is it used for testing Node.js API?",
-        "exp": "Supertest is a library for integration testing HTTP servers in Node.js. Allows making HTTP requests to Express/Koa app and checking responses."
-      },
-      "pl": {
-        "q": "Czym jest supertest i jak jest używany do testowania API Node.js?",
-        "exp": "Supertest to biblioteka do integration testingu serwerów HTTP w Node.js. Pozwala wysyłać żądania HTTP do aplikacji Express/Koa i sprawdzać odpowiedzi."
-      },
-      "answers": [
-        {
-          "uk": "Бібліотека для UI-тестування",
-          "en": "A library for UI testing",
-          "pl": "Biblioteka do testowania UI",
-          "correct": false
-        },
-        {
-          "uk": "Бібліотека для integration testing HTTP-серверів Node.js",
-          "en": "A library for integration testing Node.js HTTP servers",
-          "pl": "Biblioteka do integration testingu serwerów HTTP Node.js",
-          "correct": true
-        },
-        {
-          "uk": "Інструмент для деплою",
-          "en": "A deployment tool",
-          "pl": "Narzędzie do deploymentu",
-          "correct": false
-        },
-        {
-          "uk": "Менеджер пакетів",
-          "en": "A package manager",
-          "pl": "Menedżer pakietów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-adv-q40",
-      "order": 40,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що означає принцип Dev/prod parity у Twelve-Factor App?",
-        "exp": "Dev/prod parity означає, що середовище розробки має бути максимально наближеним до продакшну для уникнення проблем при деплої."
-      },
-      "en": {
-        "q": "What does the Dev/prod parity principle mean in Twelve-Factor App?",
-        "exp": "Dev/prod parity means the development environment should closely match production to avoid deployment issues."
-      },
-      "pl": {
-        "q": "Co oznacza zasada Dev/prod parity w Twelve-Factor App?",
-        "exp": "Dev/prod parity oznacza, że środowisko deweloperskie powinno być maksymalnie zbliżone do produkcji, aby uniknąć problemów przy deploymencie."
-      },
-      "answers": [
-        {
-          "uk": "Dev і prod мають різні бази даних",
-          "en": "Dev and prod have different databases",
-          "pl": "Dev i prod mają różne bazy danych",
-          "correct": false
-        },
-        {
-          "uk": "Середовище розробки максимально наближене до продакшну",
-          "en": "Development environment closely matches production",
-          "pl": "Środowisko deweloperskie maksymalnie zbliżone do produkcji",
-          "correct": true
-        },
-        {
-          "uk": "Код пишеться тільки на продакшні",
-          "en": "Code is written only in production",
-          "pl": "Kod jest pisany tylko na produkcji",
-          "correct": false
-        },
-        {
-          "uk": "Dev не потрібен взагалі",
-          "en": "Dev is not needed at all",
-          "pl": "Dev nie jest w ogóle potrzebny",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/node/advanced/seed-quiz-nodejs-advanced.ts b/json/quizzes/node/advanced/seed-quiz-nodejs-advanced.ts
deleted file mode 100644
index 8e9a2f2e..00000000
--- a/json/quizzes/node/advanced/seed-quiz-nodejs-advanced.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-import { eq } from 'drizzle-orm';
-import { readFileSync } from 'fs';
-import { join } from 'path';
-import { db } from './index';
-import { categories } from './schema/categories';
-import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
-  quizAnswers,
-  quizAnswerTranslations,
-  quizAttempts,
-} from './schema/quiz';
-
-type Locale = 'uk' | 'en' | 'pl';
-const LOCALES: Locale[] = ['uk', 'en', 'pl'];
-
-interface QuestionData {
-  id: string;
-  order: number;
-  difficulty: 'beginner' | 'medium' | 'advanced';
-  uk: { q: string; exp: string };
-  en: { q: string; exp: string };
-  pl: { q: string; exp: string };
-  answers: {
-    uk: string;
-    en: string;
-    pl: string;
-    correct: boolean;
-  }[];
-}
-
-interface QuizPartData {
-  questions: QuestionData[];
-}
-
-const CATEGORY_SLUG = 'nodejs';
-
-const QUIZ_METADATA = {
-  slug: 'nodejs-advanced',
-  questionsCount: 40,
-  timeLimitSeconds: 2400,
-  translations: {
-    uk: {
-      title: 'Node.js Advanced',
-      description: 'Поглиблені знання Node.js: мікросервіси, gRPC, GraphQL, NestJS, serverless, CI/CD, Kubernetes, безпека та масштабування.',
-    },
-    en: {
-      title: 'Node.js Advanced',
-      description: 'Advanced Node.js knowledge: microservices, gRPC, GraphQL, NestJS, serverless, CI/CD, Kubernetes, security, and scaling.',
-    },
-    pl: {
-      title: 'Node.js Advanced',
-      description: 'Zaawansowana wiedza o Node.js: mikroserwisy, gRPC, GraphQL, NestJS, serverless, CI/CD, Kubernetes, bezpieczeństwo i skalowanie.',
-    },
-  },
-};
-
-function createExplanation(text: string) {
-  return [{ type: 'paragraph' as const, children: [{ text }] }];
-}
-
-async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'data', `nodejs-advanced-quiz-part${partNumber}.json`);
-  const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
-  return partData.questions;
-}
-
-async function ensureQuizExists(): Promise<string> {
-  console.log('Ensuring quiz exists...');
-
-  // Find category by slug
-  const [category] = await db
-    .select()
-    .from(categories)
-    .where(eq(categories.slug, CATEGORY_SLUG))
-    .limit(1);
-
-  if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
-  }
-
-  // Clean up old quiz by slug
-  const existing = await db.query.quizzes.findFirst({
-    where: eq(quizzes.slug, QUIZ_METADATA.slug),
-  });
-  if (existing) {
-    const existingAttempt = await db.query.quizAttempts.findFirst({
-      where: eq(quizAttempts.quizId, existing.id),
-    });
-    if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
-    }
-
-    await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 2,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
-
-    const quizId = existing.id;
-    for (const locale of LOCALES) {
-      await db.insert(quizTranslations).values({
-        quizId,
-        locale,
-        title: QUIZ_METADATA.translations[locale].title,
-        description: QUIZ_METADATA.translations[locale].description,
-      });
-    }
-
-    return quizId;
-  }
-
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 2,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
-
-  for (const locale of LOCALES) {
-    await db.insert(quizTranslations).values({
-      quizId: quiz.id,
-      locale,
-      title: QUIZ_METADATA.translations[locale].title,
-      description: QUIZ_METADATA.translations[locale].description,
-    });
-  }
-
-  return quiz.id;
-}
-
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
-
-  for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
-
-    for (const locale of LOCALES) {
-      await db.insert(quizQuestionContent).values({
-        quizQuestionId: q.id,
-        locale,
-        questionText: question[locale].q,
-        explanation: createExplanation(question[locale].exp),
-      });
-    }
-
-    for (let i = 0; i < question.answers.length; i++) {
-      const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
-
-      for (const locale of LOCALES) {
-        await db.insert(quizAnswerTranslations).values({
-          quizAnswerId: a.id,
-          locale,
-          answerText: answer[locale],
-        });
-      }
-    }
-  }
-
-  console.log(`Part ${partNumber} completed (${questions.length} questions)`);
-}
-
-async function seedQuizFromJson() {
-  const args = process.argv.slice(2);
-  const partArg = args[0];
-
-  if (!partArg) {
-    console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-nodejs-advanced.ts <part-number>');
-    console.log('Example: npx tsx db/seeds/seed-quiz-nodejs-advanced.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-nodejs-advanced.ts all');
-    process.exit(1);
-  }
-
-  console.log('Starting Node.js Advanced quiz seed...\n');
-
-  try {
-    const quizId = await ensureQuizExists();
-
-    if (partArg.toLowerCase() === 'all') {
-      console.log('Uploading all parts...\n');
-      let totalQuestions = 0;
-
-      for (let i = 1; i <= 4; i++) {
-        const questions = await loadQuestions(i);
-        await seedQuestions(questions, quizId, i);
-        totalQuestions += questions.length;
-      }
-
-      console.log('\nAll parts seeded successfully!');
-      console.log(`   - 1 quiz with ${LOCALES.length} translations`);
-      console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
-    } else {
-      const partNumber = parseInt(partArg, 10);
-
-      if (isNaN(partNumber) || partNumber < 1 || partNumber > 4) {
-        console.error('Error: Part number must be between 1 and 4');
-        process.exit(1);
-      }
-
-      const questions = await loadQuestions(partNumber);
-      await seedQuestions(questions, quizId, partNumber);
-
-      console.log('\nPart seeded successfully!');
-      console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
-      console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
-    }
-  } catch (error) {
-    console.error('\nError seeding quiz:', error);
-    throw error;
-  }
-}
-
-seedQuizFromJson()
-  .then(() => process.exit(0))
-  .catch((error) => {
-    console.error(error);
-    process.exit(1);
-  });
diff --git a/json/quizzes/node/beginner_medium/nodejs-quiz-part1.json b/json/quizzes/node/beginner_medium/nodejs-quiz-part1.json
deleted file mode 100644
index e0129b7e..00000000
--- a/json/quizzes/node/beginner_medium/nodejs-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "node-q01",
-      "order": 1,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке Node.js?",
-        "exp": "Node.js — це середовище виконання JavaScript поза браузером, побудоване на движку V8. Використовується для серверної розробки, API, CLI-утиліт."
-      },
-      "en": {
-        "q": "What is Node.js?",
-        "exp": "Node.js is a JavaScript runtime environment outside the browser, built on the V8 engine. It is used for server-side development, APIs, and CLI tools."
-      },
-      "pl": {
-        "q": "Czym jest Node.js?",
-        "exp": "Node.js to środowisko uruchomieniowe JavaScript poza przeglądarką, zbudowane na silniku V8. Używane do programowania serwerowego, API i narzędzi CLI."
-      },
-      "answers": [
-        {
-          "uk": "Фреймворк для створення фронтенд-інтерфейсів",
-          "en": "A framework for building frontend interfaces",
-          "pl": "Framework do tworzenia interfejsów frontend",
-          "correct": false
-        },
-        {
-          "uk": "Середовище виконання JavaScript поза браузером, побудоване на V8",
-          "en": "A JavaScript runtime environment outside the browser, built on V8",
-          "pl": "Środowisko uruchomieniowe JavaScript poza przeglądarką, zbudowane na V8",
-          "correct": true
-        },
-        {
-          "uk": "База даних для зберігання JSON-документів",
-          "en": "A database for storing JSON documents",
-          "pl": "Baza danych do przechowywania dokumentów JSON",
-          "correct": false
-        },
-        {
-          "uk": "Компілятор JavaScript у машинний код",
-          "en": "A compiler of JavaScript to machine code",
-          "pl": "Kompilator JavaScript do kodu maszynowego",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q02",
-      "order": 2,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке event loop у Node.js?",
-        "exp": "Event loop — це механізм, який керує виконанням асинхронних операцій. Він перевіряє чергу подій і виконує колбеки, коли стек викликів порожній."
-      },
-      "en": {
-        "q": "What is the event loop in Node.js?",
-        "exp": "The event loop is a mechanism that manages asynchronous operations. It checks the event queue and executes callbacks when the call stack is empty."
-      },
-      "pl": {
-        "q": "Czym jest event loop w Node.js?",
-        "exp": "Event loop to mechanizm zarządzający operacjami asynchronicznymi. Sprawdza kolejkę zdarzeń i wykonuje callbacki, gdy stos wywołań jest pusty."
-      },
-      "answers": [
-        {
-          "uk": "Цикл for для обробки масивів",
-          "en": "A for loop for processing arrays",
-          "pl": "Pętla for do przetwarzania tablic",
-          "correct": false
-        },
-        {
-          "uk": "Механізм управління асинхронними операціями та виконання колбеків",
-          "en": "A mechanism for managing async operations and executing callbacks",
-          "pl": "Mechanizm zarządzania operacjami asynchronicznymi i wykonywania callbacków",
-          "correct": true
-        },
-        {
-          "uk": "Інструмент для відлагодження коду",
-          "en": "A tool for debugging code",
-          "pl": "Narzędzie do debugowania kodu",
-          "correct": false
-        },
-        {
-          "uk": "Модуль для роботи з файловою системою",
-          "en": "A module for working with the file system",
-          "pl": "Moduł do pracy z systemem plików",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q03",
-      "order": 3,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що означає неблокуюче (non-blocking) виконання у Node.js?",
-        "exp": "Неблокуюче означає, що Node.js не чекає завершення I/O операцій, а продовжує виконання коду, обробляючи результати через колбеки або проміси."
-      },
-      "en": {
-        "q": "What does non-blocking execution mean in Node.js?",
-        "exp": "Non-blocking means Node.js doesn't wait for I/O operations to complete but continues executing code, handling results through callbacks or promises."
-      },
-      "pl": {
-        "q": "Co oznacza nieblokujące (non-blocking) wykonanie w Node.js?",
-        "exp": "Nieblokujące oznacza, że Node.js nie czeka na zakończenie operacji I/O, lecz kontynuuje wykonywanie kodu, obsługując wyniki przez callbacki lub promise."
-      },
-      "answers": [
-        {
-          "uk": "Node.js виконує код тільки послідовно, один за одним",
-          "en": "Node.js executes code only sequentially, one after another",
-          "pl": "Node.js wykonuje kod tylko sekwencyjnie, jeden po drugim",
-          "correct": false
-        },
-        {
-          "uk": "Код не чекає завершення I/O операцій і продовжує виконання",
-          "en": "Code doesn't wait for I/O operations and continues execution",
-          "pl": "Kod nie czeka na zakończenie operacji I/O i kontynuuje wykonywanie",
-          "correct": true
-        },
-        {
-          "uk": "Усі операції виконуються в окремих потоках",
-          "en": "All operations are executed in separate threads",
-          "pl": "Wszystkie operacje są wykonywane w osobnych wątkach",
-          "correct": false
-        },
-        {
-          "uk": "Node.js блокує процесор під час мережевих запитів",
-          "en": "Node.js blocks the CPU during network requests",
-          "pl": "Node.js blokuje procesor podczas żądań sieciowych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q04",
-      "order": 4,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовується npm?",
-        "exp": "npm (Node Package Manager) — це менеджер пакетів для встановлення, оновлення та управління бібліотеками і залежностями у Node.js проєктах."
-      },
-      "en": {
-        "q": "What is npm used for?",
-        "exp": "npm (Node Package Manager) is a package manager for installing, updating, and managing libraries and dependencies in Node.js projects."
-      },
-      "pl": {
-        "q": "Do czego służy npm?",
-        "exp": "npm (Node Package Manager) to menedżer pakietów do instalowania, aktualizowania i zarządzania bibliotekami i zależnościami w projektach Node.js."
-      },
-      "answers": [
-        {
-          "uk": "Для компіляції TypeScript у JavaScript",
-          "en": "For compiling TypeScript to JavaScript",
-          "pl": "Do kompilowania TypeScript do JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Для встановлення, оновлення та управління залежностями проєкту",
-          "en": "For installing, updating, and managing project dependencies",
-          "pl": "Do instalowania, aktualizowania i zarządzania zależnościami projektu",
-          "correct": true
-        },
-        {
-          "uk": "Для запуску тестів автоматично",
-          "en": "For running tests automatically",
-          "pl": "Do automatycznego uruchamiania testów",
-          "correct": false
-        },
-        {
-          "uk": "Для створення Docker-контейнерів",
-          "en": "For creating Docker containers",
-          "pl": "Do tworzenia kontenerów Docker",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q05",
-      "order": 5,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яке призначення файлу package.json?",
-        "exp": "package.json описує Node.js проєкт: назву, версію, залежності (dependencies, devDependencies), скрипти для запуску команд та метадані."
-      },
-      "en": {
-        "q": "What is the purpose of the package.json file?",
-        "exp": "package.json describes the Node.js project: name, version, dependencies (dependencies, devDependencies), scripts for running commands, and metadata."
-      },
-      "pl": {
-        "q": "Jakie jest przeznaczenie pliku package.json?",
-        "exp": "package.json opisuje projekt Node.js: nazwę, wersję, zależności (dependencies, devDependencies), skrypty do uruchamiania poleceń i metadane."
-      },
-      "answers": [
-        {
-          "uk": "Зберігає скомпільований JavaScript-код",
-          "en": "Stores compiled JavaScript code",
-          "pl": "Przechowuje skompilowany kod JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Містить конфігурацію бази даних",
-          "en": "Contains database configuration",
-          "pl": "Zawiera konfigurację bazy danych",
-          "correct": false
-        },
-        {
-          "uk": "Описує проєкт, залежності та скрипти для запуску команд",
-          "en": "Describes the project, dependencies, and scripts for running commands",
-          "pl": "Opisuje projekt, zależności i skrypty do uruchamiania poleceń",
-          "correct": true
-        },
-        {
-          "uk": "Зберігає змінні середовища для продакшну",
-          "en": "Stores environment variables for production",
-          "pl": "Przechowuje zmienne środowiskowe dla produkcji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q06",
-      "order": 6,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яке призначення файлу package-lock.json?",
-        "exp": "package-lock.json фіксує точні версії всіх залежностей, гарантуючи однакові версії пакетів для всіх учасників проєкту."
-      },
-      "en": {
-        "q": "What is the purpose of the package-lock.json file?",
-        "exp": "package-lock.json locks exact versions of all dependencies, ensuring the same package versions for all project contributors."
-      },
-      "pl": {
-        "q": "Jakie jest przeznaczenie pliku package-lock.json?",
-        "exp": "package-lock.json blokuje dokładne wersje wszystkich zależności, zapewniając te same wersje pakietów dla wszystkich uczestników projektu."
-      },
-      "answers": [
-        {
-          "uk": "Блокує проєкт від змін іншими розробниками",
-          "en": "Locks the project from changes by other developers",
-          "pl": "Blokuje projekt przed zmianami innych programistów",
-          "correct": false
-        },
-        {
-          "uk": "Фіксує точні версії залежностей для консистентності у команді",
-          "en": "Locks exact dependency versions for team consistency",
-          "pl": "Blokuje dokładne wersje zależności dla spójności w zespole",
-          "correct": true
-        },
-        {
-          "uk": "Зберігає паролі та секрети проєкту",
-          "en": "Stores project passwords and secrets",
-          "pl": "Przechowuje hasła i sekrety projektu",
-          "correct": false
-        },
-        {
-          "uk": "Конфігурує налаштування Git для проєкту",
-          "en": "Configures Git settings for the project",
-          "pl": "Konfiguruje ustawienia Git dla projektu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q07",
-      "order": 7,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Чим Node.js відрізняється від традиційних вебсерверів (Apache, Tomcat)?",
-        "exp": "Node.js використовує однопотокову подієво-орієнтовану модель, тоді як традиційні сервери створюють окремий потік для кожного запиту."
-      },
-      "en": {
-        "q": "How does Node.js differ from traditional web servers (Apache, Tomcat)?",
-        "exp": "Node.js uses a single-threaded event-driven model, while traditional servers create a separate thread for each request."
-      },
-      "pl": {
-        "q": "Czym Node.js różni się od tradycyjnych serwerów webowych (Apache, Tomcat)?",
-        "exp": "Node.js używa jednowątkowego modelu sterowanego zdarzeniami, podczas gdy tradycyjne serwery tworzą osobny wątek dla każdego żądania."
-      },
-      "answers": [
-        {
-          "uk": "Node.js використовує однопотокову подієво-орієнтовану модель",
-          "en": "Node.js uses a single-threaded event-driven model",
-          "pl": "Node.js używa jednowątkowego modelu sterowanego zdarzeniami",
-          "correct": true
-        },
-        {
-          "uk": "Node.js не підтримує HTTP-протокол",
-          "en": "Node.js doesn't support the HTTP protocol",
-          "pl": "Node.js nie obsługuje protokołu HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Node.js працює тільки на Windows",
-          "en": "Node.js works only on Windows",
-          "pl": "Node.js działa tylko na Windows",
-          "correct": false
-        },
-        {
-          "uk": "Node.js не підтримує роботу з базами даних",
-          "en": "Node.js doesn't support database operations",
-          "pl": "Node.js nie obsługuje operacji na bazach danych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q08",
-      "order": 8,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Який інструмент найкраще підходить для керування кількома версіями Node.js на одній машині?",
-        "exp": "nvm (Node Version Manager) дозволяє встановлювати та перемикатися між різними версіями Node.js без конфліктів."
-      },
-      "en": {
-        "q": "Which tool is best for managing multiple Node.js versions on one machine?",
-        "exp": "nvm (Node Version Manager) allows installing and switching between different Node.js versions without conflicts."
-      },
-      "pl": {
-        "q": "Które narzędzie najlepiej nadaje się do zarządzania wieloma wersjami Node.js na jednej maszynie?",
-        "exp": "nvm (Node Version Manager) pozwala instalować i przełączać się między różnymi wersjami Node.js bez konfliktów."
-      },
-      "answers": [
-        {
-          "uk": "Docker",
-          "en": "Docker",
-          "pl": "Docker",
-          "correct": false
-        },
-        {
-          "uk": "nvm (Node Version Manager)",
-          "en": "nvm (Node Version Manager)",
-          "pl": "nvm (Node Version Manager)",
-          "correct": true
-        },
-        {
-          "uk": "npm",
-          "en": "npm",
-          "pl": "npm",
-          "correct": false
-        },
-        {
-          "uk": "Git",
-          "en": "Git",
-          "pl": "Git",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q09",
-      "order": 9,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка роль libuv у Node.js?",
-        "exp": "libuv — це бібліотека, яка забезпечує асинхронний I/O та пул потоків для виконання важких операцій без блокування основного потоку."
-      },
-      "en": {
-        "q": "What role does libuv play in Node.js?",
-        "exp": "libuv is a library that provides asynchronous I/O and a thread pool for executing heavy operations without blocking the main thread."
-      },
-      "pl": {
-        "q": "Jaką rolę pełni libuv w Node.js?",
-        "exp": "libuv to biblioteka zapewniająca asynchroniczne I/O i pulę wątków do wykonywania ciężkich operacji bez blokowania głównego wątku."
-      },
-      "answers": [
-        {
-          "uk": "Компілює JavaScript у машинний код",
-          "en": "Compiles JavaScript to machine code",
-          "pl": "Kompiluje JavaScript do kodu maszynowego",
-          "correct": false
-        },
-        {
-          "uk": "Забезпечує асинхронний I/O та пул потоків для важких операцій",
-          "en": "Provides async I/O and thread pool for heavy operations",
-          "pl": "Zapewnia asynchroniczne I/O i pulę wątków dla ciężkich operacji",
-          "correct": true
-        },
-        {
-          "uk": "Керує залежностями проєкту",
-          "en": "Manages project dependencies",
-          "pl": "Zarządza zależnościami projektu",
-          "correct": false
-        },
-        {
-          "uk": "Відповідає за рендеринг HTML-сторінок",
-          "en": "Responsible for rendering HTML pages",
-          "pl": "Odpowiada za renderowanie stron HTML",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q10",
-      "order": 10,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке event-driven програмування у Node.js?",
-        "exp": "Event-driven програмування означає, що застосунок реагує на події (I/O, мережеві запити, таймери) через колбеки, проміси або async/await."
-      },
-      "en": {
-        "q": "What is event-driven programming in Node.js?",
-        "exp": "Event-driven programming means the application reacts to events (I/O, network requests, timers) through callbacks, promises, or async/await."
-      },
-      "pl": {
-        "q": "Czym jest programowanie sterowane zdarzeniami w Node.js?",
-        "exp": "Programowanie sterowane zdarzeniami oznacza, że aplikacja reaguje na zdarzenia (I/O, żądania sieciowe, timery) przez callbacki, promise lub async/await."
-      },
-      "answers": [
-        {
-          "uk": "Програмування, де весь код виконується синхронно",
-          "en": "Programming where all code executes synchronously",
-          "pl": "Programowanie, gdzie cały kod wykonuje się synchronicznie",
-          "correct": false
-        },
-        {
-          "uk": "Модель, де застосунок реагує на події через колбеки або проміси",
-          "en": "Model where the app reacts to events through callbacks or promises",
-          "pl": "Model, w którym aplikacja reaguje na zdarzenia przez callbacki lub promise",
-          "correct": true
-        },
-        {
-          "uk": "Підхід, де кожна функція створює новий потік",
-          "en": "Approach where each function creates a new thread",
-          "pl": "Podejście, gdzie każda funkcja tworzy nowy wątek",
-          "correct": false
-        },
-        {
-          "uk": "Спосіб організації CSS-стилів",
-          "en": "A way of organizing CSS styles",
-          "pl": "Sposób organizacji stylów CSS",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/node/beginner_medium/nodejs-quiz-part2.json b/json/quizzes/node/beginner_medium/nodejs-quiz-part2.json
deleted file mode 100644
index e32d5842..00000000
--- a/json/quizzes/node/beginner_medium/nodejs-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "node-q11",
-      "order": 11,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Який модуль використовується для роботи з файловою системою у Node.js?",
-        "exp": "Модуль fs (File System) дозволяє читати, записувати, створювати та видаляти файли як синхронно, так і асинхронно."
-      },
-      "en": {
-        "q": "Which module is used for working with the file system in Node.js?",
-        "exp": "The fs (File System) module allows reading, writing, creating, and deleting files both synchronously and asynchronously."
-      },
-      "pl": {
-        "q": "Który moduł służy do pracy z systemem plików w Node.js?",
-        "exp": "Moduł fs (File System) pozwala na odczytywanie, zapisywanie, tworzenie i usuwanie plików zarówno synchronicznie, jak i asynchronicznie."
-      },
-      "answers": [
-        {
-          "uk": "path",
-          "en": "path",
-          "pl": "path",
-          "correct": false
-        },
-        {
-          "uk": "fs",
-          "en": "fs",
-          "pl": "fs",
-          "correct": true
-        },
-        {
-          "uk": "http",
-          "en": "http",
-          "pl": "http",
-          "correct": false
-        },
-        {
-          "uk": "os",
-          "en": "os",
-          "pl": "os",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q12",
-      "order": 12,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Для чого використовується модуль path у Node.js?",
-        "exp": "Модуль path забезпечує кросплатформену роботу з файловими шляхами: об'єднання, отримання імені файлу, директорії, розширення."
-      },
-      "en": {
-        "q": "What is the path module used for in Node.js?",
-        "exp": "The path module provides cross-platform handling of file paths: joining, getting filename, directory, and extension."
-      },
-      "pl": {
-        "q": "Do czego służy moduł path w Node.js?",
-        "exp": "Moduł path zapewnia wieloplatformową obsługę ścieżek plików: łączenie, pobieranie nazwy pliku, katalogu i rozszerzenia."
-      },
-      "answers": [
-        {
-          "uk": "Для роботи з HTTP-запитами",
-          "en": "For handling HTTP requests",
-          "pl": "Do obsługi żądań HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Для кросплатформної роботи з файловими шляхами",
-          "en": "For cross-platform handling of file paths",
-          "pl": "Do wieloplatformowej obsługi ścieżek plików",
-          "correct": true
-        },
-        {
-          "uk": "Для шифрування даних",
-          "en": "For encrypting data",
-          "pl": "Do szyfrowania danych",
-          "correct": false
-        },
-        {
-          "uk": "Для роботи з базою даних",
-          "en": "For working with databases",
-          "pl": "Do pracy z bazą danych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q13",
-      "order": 13,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Buffer у Node.js?",
-        "exp": "Buffer — це клас для роботи з двійковими даними (raw data). Використовується для обробки файлів, мережевих потоків, зображень."
-      },
-      "en": {
-        "q": "What is Buffer in Node.js?",
-        "exp": "Buffer is a class for working with binary data (raw data). It is used for processing files, network streams, and images."
-      },
-      "pl": {
-        "q": "Czym jest Buffer w Node.js?",
-        "exp": "Buffer to klasa do pracy z danymi binarnymi (raw data). Używana do przetwarzania plików, strumieni sieciowych i obrazów."
-      },
-      "answers": [
-        {
-          "uk": "Тимчасове сховище для кешування HTTP-запитів",
-          "en": "Temporary storage for caching HTTP requests",
-          "pl": "Tymczasowe miejsce do cachowania żądań HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Клас для роботи з двійковими даними поза V8 heap",
-          "en": "A class for working with binary data outside V8 heap",
-          "pl": "Klasa do pracy z danymi binarnymi poza V8 heap",
-          "correct": true
-        },
-        {
-          "uk": "Модуль для буферизації виводу в консоль",
-          "en": "A module for buffering console output",
-          "pl": "Moduł do buforowania wyjścia do konsoli",
-          "correct": false
-        },
-        {
-          "uk": "Функція для затримки виконання коду",
-          "en": "A function for delaying code execution",
-          "pl": "Funkcja do opóźniania wykonywania kodu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q14",
-      "order": 14,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які типи стрімів існують у Node.js?",
-        "exp": "У Node.js є 4 типи стрімів: Readable (читання), Writable (запис), Duplex (читання і запис), Transform (трансформація даних)."
-      },
-      "en": {
-        "q": "What types of streams exist in Node.js?",
-        "exp": "Node.js has 4 stream types: Readable (reading), Writable (writing), Duplex (reading and writing), Transform (data transformation)."
-      },
-      "pl": {
-        "q": "Jakie typy strumieni istnieją w Node.js?",
-        "exp": "Node.js ma 4 typy strumieni: Readable (odczyt), Writable (zapis), Duplex (odczyt i zapis), Transform (transformacja danych)."
-      },
-      "answers": [
-        {
-          "uk": "Input, Output, Mixed",
-          "en": "Input, Output, Mixed",
-          "pl": "Input, Output, Mixed",
-          "correct": false
-        },
-        {
-          "uk": "Readable, Writable, Duplex, Transform",
-          "en": "Readable, Writable, Duplex, Transform",
-          "pl": "Readable, Writable, Duplex, Transform",
-          "correct": true
-        },
-        {
-          "uk": "Sync, Async, Hybrid",
-          "en": "Sync, Async, Hybrid",
-          "pl": "Sync, Async, Hybrid",
-          "correct": false
-        },
-        {
-          "uk": "File, Network, Memory",
-          "en": "File, Network, Memory",
-          "pl": "File, Network, Memory",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q15",
-      "order": 15,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка перевага використання стрімів для роботи з великими файлами?",
-        "exp": "Стріми обробляють дані по частинах (chunks), не завантажуючи весь файл у пам'ять, що економить ресурси та прискорює обробку."
-      },
-      "en": {
-        "q": "What is the advantage of using streams for large files?",
-        "exp": "Streams process data in chunks without loading the entire file into memory, which saves resources and speeds up processing."
-      },
-      "pl": {
-        "q": "Jaka jest zaleta używania strumieni do dużych plików?",
-        "exp": "Strumienie przetwarzają dane w kawałkach bez ładowania całego pliku do pamięci, co oszczędza zasoby i przyspiesza przetwarzanie."
-      },
-      "answers": [
-        {
-          "uk": "Стріми автоматично стискають файли",
-          "en": "Streams automatically compress files",
-          "pl": "Strumienie automatycznie kompresują pliki",
-          "correct": false
-        },
-        {
-          "uk": "Обробка по частинах без завантаження всього файлу в пам'ять",
-          "en": "Processing in chunks without loading the entire file into memory",
-          "pl": "Przetwarzanie w kawałkach bez ładowania całego pliku do pamięci",
-          "correct": true
-        },
-        {
-          "uk": "Стріми працюють тільки з текстовими файлами",
-          "en": "Streams only work with text files",
-          "pl": "Strumienie działają tylko z plikami tekstowymi",
-          "correct": false
-        },
-        {
-          "uk": "Стріми шифрують дані автоматично",
-          "en": "Streams automatically encrypt data",
-          "pl": "Strumienie automatycznie szyfrują dane",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q16",
-      "order": 16,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке error-first callback у Node.js?",
-        "exp": "Error-first callback — це патерн, де перший аргумент колбека завжди призначений для помилки, а другий — для результату."
-      },
-      "en": {
-        "q": "What is an error-first callback in Node.js?",
-        "exp": "Error-first callback is a pattern where the first callback argument is always for the error, and the second is for the result."
-      },
-      "pl": {
-        "q": "Czym jest error-first callback w Node.js?",
-        "exp": "Error-first callback to wzorzec, gdzie pierwszy argument callbacka jest zawsze dla błędu, a drugi dla wyniku."
-      },
-      "answers": [
-        {
-          "uk": "Колбек, який викликається тільки при помилці",
-          "en": "A callback that is called only on error",
-          "pl": "Callback wywoływany tylko przy błędzie",
-          "correct": false
-        },
-        {
-          "uk": "Патерн, де перший аргумент — помилка, другий — результат",
-          "en": "Pattern where first argument is error, second is result",
-          "pl": "Wzorzec, gdzie pierwszy argument to błąd, drugi to wynik",
-          "correct": true
-        },
-        {
-          "uk": "Функція для логування помилок",
-          "en": "A function for logging errors",
-          "pl": "Funkcja do logowania błędów",
-          "correct": false
-        },
-        {
-          "uk": "Метод для перехоплення всіх помилок",
-          "en": "A method for catching all errors",
-          "pl": "Metoda do przechwytywania wszystkich błędów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q17",
-      "order": 17,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке callback hell і як його уникнути?",
-        "exp": "Callback hell — це вкладені колбеки, що ускладнюють код. Уникають через Promises, async/await або розбиття на функції."
-      },
-      "en": {
-        "q": "What is callback hell and how to avoid it?",
-        "exp": "Callback hell is nested callbacks that make code complex. Avoid it using Promises, async/await, or splitting into functions."
-      },
-      "pl": {
-        "q": "Czym jest callback hell i jak go uniknąć?",
-        "exp": "Callback hell to zagnieżdżone callbacki utrudniające kod. Unika się go przez Promise, async/await lub dzielenie na funkcje."
-      },
-      "answers": [
-        {
-          "uk": "Помилка сервера при великому навантаженні",
-          "en": "Server error under heavy load",
-          "pl": "Błąd serwera przy dużym obciążeniu",
-          "correct": false
-        },
-        {
-          "uk": "Вкладені колбеки, що ускладнюють код; уникають через Promises або async/await",
-          "en": "Nested callbacks making code complex; avoid with Promises or async/await",
-          "pl": "Zagnieżdżone callbacki utrudniające kod; unika się przez Promise lub async/await",
-          "correct": true
-        },
-        {
-          "uk": "Втрата даних при асинхронних операціях",
-          "en": "Data loss during async operations",
-          "pl": "Utrata danych podczas operacji asynchronicznych",
-          "correct": false
-        },
-        {
-          "uk": "Переповнення стеку викликів",
-          "en": "Call stack overflow",
-          "pl": "Przepełnienie stosu wywołań",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q18",
-      "order": 18,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Які стани має Promise у JavaScript/Node.js?",
-        "exp": "Promise має три стани: pending (очікування), fulfilled (успішно виконано), rejected (помилка)."
-      },
-      "en": {
-        "q": "What states does a Promise have in JavaScript/Node.js?",
-        "exp": "A Promise has three states: pending (waiting), fulfilled (successfully completed), rejected (error)."
-      },
-      "pl": {
-        "q": "Jakie stany ma Promise w JavaScript/Node.js?",
-        "exp": "Promise ma trzy stany: pending (oczekiwanie), fulfilled (pomyślnie zakończony), rejected (błąd)."
-      },
-      "answers": [
-        {
-          "uk": "start, process, end",
-          "en": "start, process, end",
-          "pl": "start, process, end",
-          "correct": false
-        },
-        {
-          "uk": "pending, fulfilled, rejected",
-          "en": "pending, fulfilled, rejected",
-          "pl": "pending, fulfilled, rejected",
-          "correct": true
-        },
-        {
-          "uk": "waiting, running, completed",
-          "en": "waiting, running, completed",
-          "pl": "waiting, running, completed",
-          "correct": false
-        },
-        {
-          "uk": "open, closed, error",
-          "en": "open, closed, error",
-          "pl": "open, closed, error",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q19",
-      "order": 19,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка перевага async/await над ланцюжками .then()?",
-        "exp": "async/await робить асинхронний код схожим на синхронний, що спрощує читання, написання та відлагодження."
-      },
-      "en": {
-        "q": "What is the advantage of async/await over .then() chains?",
-        "exp": "async/await makes async code look like synchronous code, which simplifies reading, writing, and debugging."
-      },
-      "pl": {
-        "q": "Jaka jest zaleta async/await nad łańcuchami .then()?",
-        "exp": "async/await sprawia, że kod asynchroniczny wygląda jak synchroniczny, co ułatwia czytanie, pisanie i debugowanie."
-      },
-      "answers": [
-        {
-          "uk": "async/await працює швидше",
-          "en": "async/await works faster",
-          "pl": "async/await działa szybciej",
-          "correct": false
-        },
-        {
-          "uk": "Код виглядає як синхронний, легше читати та відлагоджувати",
-          "en": "Code looks synchronous, easier to read and debug",
-          "pl": "Kod wygląda jak synchroniczny, łatwiejszy do czytania i debugowania",
-          "correct": true
-        },
-        {
-          "uk": "async/await не потребує обробки помилок",
-          "en": "async/await doesn't require error handling",
-          "pl": "async/await nie wymaga obsługi błędów",
-          "correct": false
-        },
-        {
-          "uk": "async/await автоматично кешує результати",
-          "en": "async/await automatically caches results",
-          "pl": "async/await automatycznie cachuje wyniki",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q20",
-      "order": 20,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Чому синхронні методи fs (наприклад, readFileSync) не рекомендуються у продакшн-серверах?",
-        "exp": "Синхронні методи блокують event loop, що зупиняє обробку інших запитів і знижує продуктивність сервера."
-      },
-      "en": {
-        "q": "Why are synchronous fs methods (e.g., readFileSync) not recommended in production servers?",
-        "exp": "Synchronous methods block the event loop, which stops processing other requests and reduces server performance."
-      },
-      "pl": {
-        "q": "Dlaczego synchroniczne metody fs (np. readFileSync) nie są zalecane na serwerach produkcyjnych?",
-        "exp": "Metody synchroniczne blokują event loop, co zatrzymuje przetwarzanie innych żądań i obniża wydajność serwera."
-      },
-      "answers": [
-        {
-          "uk": "Вони споживають більше пам'яті",
-          "en": "They consume more memory",
-          "pl": "Zużywają więcej pamięci",
-          "correct": false
-        },
-        {
-          "uk": "Вони блокують event loop і зупиняють обробку інших запитів",
-          "en": "They block the event loop and stop processing other requests",
-          "pl": "Blokują event loop i zatrzymują przetwarzanie innych żądań",
-          "correct": true
-        },
-        {
-          "uk": "Вони не підтримують великі файли",
-          "en": "They don't support large files",
-          "pl": "Nie obsługują dużych plików",
-          "correct": false
-        },
-        {
-          "uk": "Вони застарілі та скоро будуть видалені",
-          "en": "They are deprecated and will be removed soon",
-          "pl": "Są przestarzałe i wkrótce zostaną usunięte",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/node/beginner_medium/nodejs-quiz-part3.json b/json/quizzes/node/beginner_medium/nodejs-quiz-part3.json
deleted file mode 100644
index eca5b173..00000000
--- a/json/quizzes/node/beginner_medium/nodejs-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "node-q21",
-      "order": 21,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке Express.js і чому він популярний?",
-        "exp": "Express.js — це мінімалістичний веб-фреймворк для Node.js, який спрощує маршрутизацію, middleware та розробку REST API."
-      },
-      "en": {
-        "q": "What is Express.js and why is it popular?",
-        "exp": "Express.js is a minimalist web framework for Node.js that simplifies routing, middleware, and REST API development."
-      },
-      "pl": {
-        "q": "Czym jest Express.js i dlaczego jest popularny?",
-        "exp": "Express.js to minimalistyczny framework webowy dla Node.js, który upraszcza routing, middleware i tworzenie REST API."
-      },
-      "answers": [
-        {
-          "uk": "База даних для Node.js",
-          "en": "A database for Node.js",
-          "pl": "Baza danych dla Node.js",
-          "correct": false
-        },
-        {
-          "uk": "Мінімалістичний веб-фреймворк для створення серверів та API",
-          "en": "A minimalist web framework for building servers and APIs",
-          "pl": "Minimalistyczny framework webowy do tworzenia serwerów i API",
-          "correct": true
-        },
-        {
-          "uk": "Інструмент для тестування JavaScript",
-          "en": "A tool for testing JavaScript",
-          "pl": "Narzędzie do testowania JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Компілятор TypeScript",
-          "en": "A TypeScript compiler",
-          "pl": "Kompilator TypeScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q22",
-      "order": 22,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке middleware у Express.js?",
-        "exp": "Middleware — це функція, яка виконується між отриманням запиту та відправкою відповіді. Вона може змінювати req/res та викликати next()."
-      },
-      "en": {
-        "q": "What is middleware in Express.js?",
-        "exp": "Middleware is a function that executes between receiving a request and sending a response. It can modify req/res and call next()."
-      },
-      "pl": {
-        "q": "Czym jest middleware w Express.js?",
-        "exp": "Middleware to funkcja wykonywana między otrzymaniem żądania a wysłaniem odpowiedzi. Może modyfikować req/res i wywoływać next()."
-      },
-      "answers": [
-        {
-          "uk": "Функція між отриманням запиту та відправкою відповіді",
-          "en": "A function between receiving request and sending response",
-          "pl": "Funkcja między otrzymaniem żądania a wysłaniem odpowiedzi",
-          "correct": true
-        },
-        {
-          "uk": "База даних для зберігання сесій",
-          "en": "A database for storing sessions",
-          "pl": "Baza danych do przechowywania sesji",
-          "correct": false
-        },
-        {
-          "uk": "Протокол для передачі даних",
-          "en": "A protocol for data transmission",
-          "pl": "Protokół do transmisji danych",
-          "correct": false
-        },
-        {
-          "uk": "Інструмент для мінімізації JavaScript",
-          "en": "A tool for minifying JavaScript",
-          "pl": "Narzędzie do minifikacji JavaScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q23",
-      "order": 23,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Який пакет рекомендується для захисту HTTP-заголовків у Express.js?",
-        "exp": "helmet — це middleware, який автоматично додає безпечні HTTP-заголовки для захисту від XSS, clickjacking та інших атак."
-      },
-      "en": {
-        "q": "Which package is recommended for securing HTTP headers in Express.js?",
-        "exp": "helmet is a middleware that automatically adds secure HTTP headers for protection against XSS, clickjacking, and other attacks."
-      },
-      "pl": {
-        "q": "Który pakiet jest zalecany do zabezpieczania nagłówków HTTP w Express.js?",
-        "exp": "helmet to middleware, który automatycznie dodaje bezpieczne nagłówki HTTP dla ochrony przed XSS, clickjacking i innymi atakami."
-      },
-      "answers": [
-        {
-          "uk": "cors",
-          "en": "cors",
-          "pl": "cors",
-          "correct": false
-        },
-        {
-          "uk": "helmet",
-          "en": "helmet",
-          "pl": "helmet",
-          "correct": true
-        },
-        {
-          "uk": "morgan",
-          "en": "morgan",
-          "pl": "morgan",
-          "correct": false
-        },
-        {
-          "uk": "body-parser",
-          "en": "body-parser",
-          "pl": "body-parser",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q24",
-      "order": 24,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як обробити невловлені помилки у Node.js застосунку?",
-        "exp": "Використовуються process.on('uncaughtException') для синхронних помилок і process.on('unhandledRejection') для відхилених промісів."
-      },
-      "en": {
-        "q": "How to handle uncaught errors in a Node.js application?",
-        "exp": "Use process.on('uncaughtException') for synchronous errors and process.on('unhandledRejection') for rejected promises."
-      },
-      "pl": {
-        "q": "Jak obsłużyć nieprzechwycone błędy w aplikacji Node.js?",
-        "exp": "Używa się process.on('uncaughtException') dla błędów synchronicznych i process.on('unhandledRejection') dla odrzuconych promisów."
-      },
-      "answers": [
-        {
-          "uk": "Тільки через try/catch у кожній функції",
-          "en": "Only through try/catch in every function",
-          "pl": "Tylko przez try/catch w każdej funkcji",
-          "correct": false
-        },
-        {
-          "uk": "Через process.on('uncaughtException') та process.on('unhandledRejection')",
-          "en": "Through process.on('uncaughtException') and process.on('unhandledRejection')",
-          "pl": "Przez process.on('uncaughtException') i process.on('unhandledRejection')",
-          "correct": true
-        },
-        {
-          "uk": "Node.js автоматично логує всі помилки",
-          "en": "Node.js automatically logs all errors",
-          "pl": "Node.js automatycznie loguje wszystkie błędy",
-          "correct": false
-        },
-        {
-          "uk": "Невловлені помилки неможливо обробити",
-          "en": "Uncaught errors cannot be handled",
-          "pl": "Nieprzechwyconych błędów nie można obsłużyć",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q25",
-      "order": 25,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке ORM і яку роль він виконує у Node.js?",
-        "exp": "ORM (Object-Relational Mapping) дозволяє працювати з базою даних через JavaScript-об'єкти замість SQL-запитів."
-      },
-      "en": {
-        "q": "What is ORM and what role does it play in Node.js?",
-        "exp": "ORM (Object-Relational Mapping) allows working with databases through JavaScript objects instead of SQL queries."
-      },
-      "pl": {
-        "q": "Czym jest ORM i jaką rolę pełni w Node.js?",
-        "exp": "ORM (Object-Relational Mapping) pozwala pracować z bazą danych przez obiekty JavaScript zamiast zapytań SQL."
-      },
-      "answers": [
-        {
-          "uk": "Протокол для передачі даних між серверами",
-          "en": "A protocol for data transfer between servers",
-          "pl": "Protokół do przesyłania danych między serwerami",
-          "correct": false
-        },
-        {
-          "uk": "Шар абстракції для роботи з БД через JavaScript-об'єкти",
-          "en": "An abstraction layer for working with DB through JavaScript objects",
-          "pl": "Warstwa abstrakcji do pracy z BD przez obiekty JavaScript",
-          "correct": true
-        },
-        {
-          "uk": "Інструмент для оптимізації запитів до API",
-          "en": "A tool for optimizing API requests",
-          "pl": "Narzędzie do optymalizacji żądań API",
-          "correct": false
-        },
-        {
-          "uk": "Система кешування для Node.js",
-          "en": "A caching system for Node.js",
-          "pl": "System cachowania dla Node.js",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q26",
-      "order": 26,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Який популярний ODM використовується для роботи з MongoDB у Node.js?",
-        "exp": "Mongoose — це ODM (Object Data Modeling), який додає схеми, валідацію та зручні методи для роботи з MongoDB."
-      },
-      "en": {
-        "q": "Which popular ODM is used for working with MongoDB in Node.js?",
-        "exp": "Mongoose is an ODM (Object Data Modeling) that adds schemas, validation, and convenient methods for working with MongoDB."
-      },
-      "pl": {
-        "q": "Który popularny ODM jest używany do pracy z MongoDB w Node.js?",
-        "exp": "Mongoose to ODM (Object Data Modeling), który dodaje schematy, walidację i wygodne metody do pracy z MongoDB."
-      },
-      "answers": [
-        {
-          "uk": "Sequelize",
-          "en": "Sequelize",
-          "pl": "Sequelize",
-          "correct": false
-        },
-        {
-          "uk": "Mongoose",
-          "en": "Mongoose",
-          "pl": "Mongoose",
-          "correct": true
-        },
-        {
-          "uk": "Prisma",
-          "en": "Prisma",
-          "pl": "Prisma",
-          "correct": false
-        },
-        {
-          "uk": "TypeORM",
-          "en": "TypeORM",
-          "pl": "TypeORM",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовуються змінні оточення (environment variables) у Node.js?",
-        "exp": "Змінні оточення зберігають конфігурацію (порти, ключі API, URL бази даних) окремо від коду для безпеки та гнучкості."
-      },
-      "en": {
-        "q": "What are environment variables used for in Node.js?",
-        "exp": "Environment variables store configuration (ports, API keys, database URLs) separately from code for security and flexibility."
-      },
-      "pl": {
-        "q": "Do czego służą zmienne środowiskowe w Node.js?",
-        "exp": "Zmienne środowiskowe przechowują konfigurację (porty, klucze API, URL bazy danych) oddzielnie od kodu dla bezpieczeństwa i elastyczności."
-      },
-      "answers": [
-        {
-          "uk": "Для прискорення виконання коду",
-          "en": "For speeding up code execution",
-          "pl": "Do przyspieszania wykonywania kodu",
-          "correct": false
-        },
-        {
-          "uk": "Для зберігання конфігурації окремо від коду",
-          "en": "For storing configuration separately from code",
-          "pl": "Do przechowywania konfiguracji oddzielnie od kodu",
-          "correct": true
-        },
-        {
-          "uk": "Для логування помилок",
-          "en": "For logging errors",
-          "pl": "Do logowania błędów",
-          "correct": false
-        },
-        {
-          "uk": "Для компіляції TypeScript",
-          "en": "For compiling TypeScript",
-          "pl": "Do kompilowania TypeScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q28",
-      "order": 28,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Який пакет найчастіше використовують для завантаження .env файлів у Node.js?",
-        "exp": "dotenv — це популярний пакет, який завантажує змінні середовища з .env файлу в process.env."
-      },
-      "en": {
-        "q": "Which package is most commonly used for loading .env files in Node.js?",
-        "exp": "dotenv is a popular package that loads environment variables from a .env file into process.env."
-      },
-      "pl": {
-        "q": "Który pakiet jest najczęściej używany do ładowania plików .env w Node.js?",
-        "exp": "dotenv to popularny pakiet, który ładuje zmienne środowiskowe z pliku .env do process.env."
-      },
-      "answers": [
-        {
-          "uk": "config",
-          "en": "config",
-          "pl": "config",
-          "correct": false
-        },
-        {
-          "uk": "dotenv",
-          "en": "dotenv",
-          "pl": "dotenv",
-          "correct": true
-        },
-        {
-          "uk": "env-loader",
-          "en": "env-loader",
-          "pl": "env-loader",
-          "correct": false
-        },
-        {
-          "uk": "process-env",
-          "en": "process-env",
-          "pl": "process-env",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q29",
-      "order": 29,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке JWT і як він використовується для аутентифікації?",
-        "exp": "JWT (JSON Web Token) — це токен, що зберігає інформацію про користувача і перевіряється сервером без звернення до бази даних."
-      },
-      "en": {
-        "q": "What is JWT and how is it used for authentication?",
-        "exp": "JWT (JSON Web Token) is a token that stores user information and is verified by the server without database queries."
-      },
-      "pl": {
-        "q": "Czym jest JWT i jak jest używany do uwierzytelniania?",
-        "exp": "JWT (JSON Web Token) to token przechowujący informacje o użytkowniku i weryfikowany przez serwer bez zapytań do bazy danych."
-      },
-      "answers": [
-        {
-          "uk": "Протокол для шифрування паролів",
-          "en": "A protocol for encrypting passwords",
-          "pl": "Protokół do szyfrowania haseł",
-          "correct": false
-        },
-        {
-          "uk": "Токен з інформацією про користувача, що перевіряється без БД",
-          "en": "A token with user info that is verified without DB",
-          "pl": "Token z informacjami o użytkowniku weryfikowany bez BD",
-          "correct": true
-        },
-        {
-          "uk": "Бібліотека для хешування даних",
-          "en": "A library for hashing data",
-          "pl": "Biblioteka do hashowania danych",
-          "correct": false
-        },
-        {
-          "uk": "Менеджер сесій у Express.js",
-          "en": "A session manager in Express.js",
-          "pl": "Menedżer sesji w Express.js",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q30",
-      "order": 30,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке EventEmitter у Node.js?",
-        "exp": "EventEmitter — це клас з модуля events, який дозволяє створювати власні події та підписників (listeners) для реалізації подієвої моделі."
-      },
-      "en": {
-        "q": "What is EventEmitter in Node.js?",
-        "exp": "EventEmitter is a class from the events module that allows creating custom events and listeners for implementing the event model."
-      },
-      "pl": {
-        "q": "Czym jest EventEmitter w Node.js?",
-        "exp": "EventEmitter to klasa z modułu events, która pozwala tworzyć własne zdarzenia i listenerów do implementacji modelu zdarzeń."
-      },
-      "answers": [
-        {
-          "uk": "Модуль для відправки email",
-          "en": "A module for sending emails",
-          "pl": "Moduł do wysyłania emaili",
-          "correct": false
-        },
-        {
-          "uk": "Клас для створення власних подій та підписників",
-          "en": "A class for creating custom events and listeners",
-          "pl": "Klasa do tworzenia własnych zdarzeń i listenerów",
-          "correct": true
-        },
-        {
-          "uk": "Функція для запуску таймерів",
-          "en": "A function for starting timers",
-          "pl": "Funkcja do uruchamiania timerów",
-          "correct": false
-        },
-        {
-          "uk": "Інструмент для логування подій у файл",
-          "en": "A tool for logging events to a file",
-          "pl": "Narzędzie do logowania zdarzeń do pliku",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/node/beginner_medium/nodejs-quiz-part4.json b/json/quizzes/node/beginner_medium/nodejs-quiz-part4.json
deleted file mode 100644
index fa512845..00000000
--- a/json/quizzes/node/beginner_medium/nodejs-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "node-q31",
-      "order": 31,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Який тестовий фреймворк найчастіше використовується у Node.js проєктах?",
-        "exp": "Jest — це all-in-one фреймворк від Facebook з вбудованими асертами, мокінгом та coverage, що робить його популярним вибором."
-      },
-      "en": {
-        "q": "Which testing framework is most commonly used in Node.js projects?",
-        "exp": "Jest is an all-in-one framework from Facebook with built-in assertions, mocking, and coverage, making it a popular choice."
-      },
-      "pl": {
-        "q": "Który framework testowy jest najczęściej używany w projektach Node.js?",
-        "exp": "Jest to framework all-in-one od Facebooka z wbudowanymi asercjami, mockingiem i coverage, co czyni go popularnym wyborem."
-      },
-      "answers": [
-        {
-          "uk": "Webpack",
-          "en": "Webpack",
-          "pl": "Webpack",
-          "correct": false
-        },
-        {
-          "uk": "Jest",
-          "en": "Jest",
-          "pl": "Jest",
-          "correct": true
-        },
-        {
-          "uk": "Babel",
-          "en": "Babel",
-          "pl": "Babel",
-          "correct": false
-        },
-        {
-          "uk": "ESLint",
-          "en": "ESLint",
-          "pl": "ESLint",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q32",
-      "order": 32,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке mocking у контексті тестування Node.js?",
-        "exp": "Mocking — це техніка імітації залежностей (БД, API) для ізольованого тестування модулів без реальних зовнішніх сервісів."
-      },
-      "en": {
-        "q": "What is mocking in the context of Node.js testing?",
-        "exp": "Mocking is a technique for simulating dependencies (DB, API) to test modules in isolation without real external services."
-      },
-      "pl": {
-        "q": "Czym jest mocking w kontekście testowania Node.js?",
-        "exp": "Mocking to technika symulowania zależności (BD, API) do izolowanego testowania modułów bez rzeczywistych usług zewnętrznych."
-      },
-      "answers": [
-        {
-          "uk": "Техніка прискорення виконання тестів",
-          "en": "A technique for speeding up test execution",
-          "pl": "Technika przyspieszania wykonywania testów",
-          "correct": false
-        },
-        {
-          "uk": "Імітація залежностей для ізольованого тестування модулів",
-          "en": "Simulating dependencies for isolated module testing",
-          "pl": "Symulowanie zależności do izolowanego testowania modułów",
-          "correct": true
-        },
-        {
-          "uk": "Генерація випадкових тестових даних",
-          "en": "Generating random test data",
-          "pl": "Generowanie losowych danych testowych",
-          "correct": false
-        },
-        {
-          "uk": "Автоматичне виправлення помилок у коді",
-          "en": "Automatic code error fixing",
-          "pl": "Automatyczne poprawianie błędów w kodzie",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q33",
-      "order": 33,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке PM2 і для чого він використовується?",
-        "exp": "PM2 — це менеджер процесів для Node.js у продакшн. Забезпечує автоматичний рестарт, кластеризацію, моніторинг та логування."
-      },
-      "en": {
-        "q": "What is PM2 and what is it used for?",
-        "exp": "PM2 is a process manager for Node.js in production. It provides auto-restart, clustering, monitoring, and logging."
-      },
-      "pl": {
-        "q": "Czym jest PM2 i do czego jest używany?",
-        "exp": "PM2 to menedżer procesów dla Node.js na produkcji. Zapewnia auto-restart, klasteryzację, monitoring i logowanie."
-      },
-      "answers": [
-        {
-          "uk": "Пакетний менеджер для Node.js",
-          "en": "A package manager for Node.js",
-          "pl": "Menedżer pakietów dla Node.js",
-          "correct": false
-        },
-        {
-          "uk": "Менеджер процесів з авто-рестартом, кластеризацією та моніторингом",
-          "en": "A process manager with auto-restart, clustering, and monitoring",
-          "pl": "Menedżer procesów z auto-restartem, klasteryzacją i monitoringiem",
-          "correct": true
-        },
-        {
-          "uk": "Інструмент для мінімізації JavaScript",
-          "en": "A tool for minifying JavaScript",
-          "pl": "Narzędzie do minifikacji JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Фреймворк для створення API",
-          "en": "A framework for building APIs",
-          "pl": "Framework do tworzenia API",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як кластеризація допомагає масштабувати Node.js застосунок?",
-        "exp": "Модуль cluster створює кілька воркер-процесів, що використовують усі ядра CPU, розподіляючи навантаження між ними."
-      },
-      "en": {
-        "q": "How does clustering help scale a Node.js application?",
-        "exp": "The cluster module creates multiple worker processes that utilize all CPU cores, distributing the load among them."
-      },
-      "pl": {
-        "q": "Jak klasteryzacja pomaga skalować aplikację Node.js?",
-        "exp": "Moduł cluster tworzy wiele procesów workerów wykorzystujących wszystkie rdzenie CPU, rozdzielając obciążenie między nimi."
-      },
-      "answers": [
-        {
-          "uk": "Стискає JavaScript-код для швидшого завантаження",
-          "en": "Compresses JavaScript code for faster loading",
-          "pl": "Kompresuje kod JavaScript dla szybszego ładowania",
-          "correct": false
-        },
-        {
-          "uk": "Створює воркер-процеси для використання всіх ядер CPU",
-          "en": "Creates worker processes to utilize all CPU cores",
-          "pl": "Tworzy procesy workerów do wykorzystania wszystkich rdzeni CPU",
-          "correct": true
-        },
-        {
-          "uk": "Кешує відповіді сервера автоматично",
-          "en": "Automatically caches server responses",
-          "pl": "Automatycznie cachuje odpowiedzi serwera",
-          "correct": false
-        },
-        {
-          "uk": "Об'єднує кілька серверів в один",
-          "en": "Combines multiple servers into one",
-          "pl": "Łączy wiele serwerów w jeden",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q35",
-      "order": 35,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке WebSocket і чим він відрізняється від HTTP?",
-        "exp": "WebSocket — це протокол для постійного двонаправленого з'єднання між клієнтом і сервером, на відміну від HTTP з окремими запитами."
-      },
-      "en": {
-        "q": "What is WebSocket and how does it differ from HTTP?",
-        "exp": "WebSocket is a protocol for persistent bidirectional connection between client and server, unlike HTTP with separate requests."
-      },
-      "pl": {
-        "q": "Czym jest WebSocket i czym różni się od HTTP?",
-        "exp": "WebSocket to protokół dla trwałego dwukierunkowego połączenia między klientem a serwerem, w przeciwieństwie do HTTP z osobnymi żądaniami."
-      },
-      "answers": [
-        {
-          "uk": "WebSocket працює тільки на localhost",
-          "en": "WebSocket only works on localhost",
-          "pl": "WebSocket działa tylko na localhost",
-          "correct": false
-        },
-        {
-          "uk": "Протокол для постійного двонаправленого з'єднання",
-          "en": "A protocol for persistent bidirectional connection",
-          "pl": "Protokół dla trwałego dwukierunkowego połączenia",
-          "correct": true
-        },
-        {
-          "uk": "Спосіб стиснення HTTP-відповідей",
-          "en": "A way to compress HTTP responses",
-          "pl": "Sposób kompresji odpowiedzi HTTP",
-          "correct": false
-        },
-        {
-          "uk": "Альтернативний порт для HTTP-запитів",
-          "en": "An alternative port for HTTP requests",
-          "pl": "Alternatywny port dla żądań HTTP",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q36",
-      "order": 36,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка основна перевага контейнеризації (Docker) для Node.js застосунків?",
-        "exp": "Docker забезпечує ізоляцію середовища та однакову роботу застосунку на dev, staging і production, спрощуючи деплой."
-      },
-      "en": {
-        "q": "What is the main advantage of containerization (Docker) for Node.js apps?",
-        "exp": "Docker provides environment isolation and consistent app behavior across dev, staging, and production, simplifying deployment."
-      },
-      "pl": {
-        "q": "Jaka jest główna zaleta konteneryzacji (Docker) dla aplikacji Node.js?",
-        "exp": "Docker zapewnia izolację środowiska i spójne działanie aplikacji na dev, staging i produkcji, upraszczając deployment."
-      },
-      "answers": [
-        {
-          "uk": "Прискорює виконання JavaScript-коду",
-          "en": "Speeds up JavaScript code execution",
-          "pl": "Przyspiesza wykonywanie kodu JavaScript",
-          "correct": false
-        },
-        {
-          "uk": "Ізоляція середовища та однакова робота на всіх оточеннях",
-          "en": "Environment isolation and consistent behavior across all environments",
-          "pl": "Izolacja środowiska i spójne działanie we wszystkich środowiskach",
-          "correct": true
-        },
-        {
-          "uk": "Автоматичне тестування коду",
-          "en": "Automatic code testing",
-          "pl": "Automatyczne testowanie kodu",
-          "correct": false
-        },
-        {
-          "uk": "Заміна npm для управління залежностями",
-          "en": "Replacement for npm for dependency management",
-          "pl": "Zamiennik npm do zarządzania zależnościami",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q37",
-      "order": 37,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Worker Threads у Node.js?",
-        "exp": "Worker Threads дозволяють виконувати JavaScript у паралельних потоках для CPU-інтенсивних задач, не блокуючи основний потік."
-      },
-      "en": {
-        "q": "What are Worker Threads in Node.js?",
-        "exp": "Worker Threads allow executing JavaScript in parallel threads for CPU-intensive tasks without blocking the main thread."
-      },
-      "pl": {
-        "q": "Czym są Worker Threads w Node.js?",
-        "exp": "Worker Threads pozwalają wykonywać JavaScript w równoległych wątkach dla zadań intensywnych CPU bez blokowania głównego wątku."
-      },
-      "answers": [
-        {
-          "uk": "Модуль для роботи з базою даних",
-          "en": "A module for database operations",
-          "pl": "Moduł do operacji na bazie danych",
-          "correct": false
-        },
-        {
-          "uk": "Паралельні потоки для CPU-інтенсивних задач без блокування main thread",
-          "en": "Parallel threads for CPU-intensive tasks without blocking main thread",
-          "pl": "Równoległe wątki dla zadań intensywnych CPU bez blokowania main thread",
-          "correct": true
-        },
-        {
-          "uk": "Інструмент для логування у фоновому режимі",
-          "en": "A tool for background logging",
-          "pl": "Narzędzie do logowania w tle",
-          "correct": false
-        },
-        {
-          "uk": "Механізм для обробки HTTP-запитів",
-          "en": "A mechanism for handling HTTP requests",
-          "pl": "Mechanizm do obsługi żądań HTTP",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке reverse proxy і яку роль він виконує для Node.js?",
-        "exp": "Reverse proxy (наприклад, Nginx) стоїть перед Node.js, забезпечуючи SSL-термінацію, балансування, кешування та безпеку."
-      },
-      "en": {
-        "q": "What is a reverse proxy and what role does it play for Node.js?",
-        "exp": "A reverse proxy (e.g., Nginx) sits in front of Node.js, providing SSL termination, load balancing, caching, and security."
-      },
-      "pl": {
-        "q": "Czym jest reverse proxy i jaką rolę pełni dla Node.js?",
-        "exp": "Reverse proxy (np. Nginx) stoi przed Node.js, zapewniając terminację SSL, balansowanie obciążenia, cachowanie i bezpieczeństwo."
-      },
-      "answers": [
-        {
-          "uk": "Бібліотека для шифрування даних",
-          "en": "A library for encrypting data",
-          "pl": "Biblioteka do szyfrowania danych",
-          "correct": false
-        },
-        {
-          "uk": "Посередник для SSL, балансування, кешування та безпеки",
-          "en": "An intermediary for SSL, load balancing, caching, and security",
-          "pl": "Pośrednik dla SSL, balansowania obciążenia, cachowania i bezpieczeństwa",
-          "correct": true
-        },
-        {
-          "uk": "Інструмент для тестування API",
-          "en": "A tool for API testing",
-          "pl": "Narzędzie do testowania API",
-          "correct": false
-        },
-        {
-          "uk": "Модуль Node.js для маршрутизації",
-          "en": "A Node.js module for routing",
-          "pl": "Moduł Node.js do routingu",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q39",
-      "order": 39,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке message queue і як вона використовується з Node.js?",
-        "exp": "Message queue (RabbitMQ, Kafka) — система для асинхронної обробки завдань через передачу повідомлень між сервісами."
-      },
-      "en": {
-        "q": "What is a message queue and how is it used with Node.js?",
-        "exp": "A message queue (RabbitMQ, Kafka) is a system for async task processing through message passing between services."
-      },
-      "pl": {
-        "q": "Czym jest kolejka wiadomości i jak jest używana z Node.js?",
-        "exp": "Kolejka wiadomości (RabbitMQ, Kafka) to system do asynchronicznego przetwarzania zadań przez przekazywanie wiadomości między usługami."
-      },
-      "answers": [
-        {
-          "uk": "База даних для зберігання повідомлень чату",
-          "en": "A database for storing chat messages",
-          "pl": "Baza danych do przechowywania wiadomości czatu",
-          "correct": false
-        },
-        {
-          "uk": "Система для асинхронної обробки завдань через передачу повідомлень",
-          "en": "A system for async task processing through message passing",
-          "pl": "System do asynchronicznego przetwarzania zadań przez przekazywanie wiadomości",
-          "correct": true
-        },
-        {
-          "uk": "Протокол для відправки email",
-          "en": "A protocol for sending emails",
-          "pl": "Protokół do wysyłania emaili",
-          "correct": false
-        },
-        {
-          "uk": "Метод сортування масивів у JavaScript",
-          "en": "A method for sorting arrays in JavaScript",
-          "pl": "Metoda sortowania tablic w JavaScript",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "node-q40",
-      "order": 40,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як запобігти витокам пам'яті (memory leaks) у Node.js?",
-        "exp": "Видаляти listeners, очищати таймери, обмежувати кешування, використовувати стріми для великих даних та профайлити heap."
-      },
-      "en": {
-        "q": "How to prevent memory leaks in Node.js?",
-        "exp": "Remove listeners, clear timers, limit caching, use streams for large data, and profile the heap."
-      },
-      "pl": {
-        "q": "Jak zapobiegać wyciekom pamięci w Node.js?",
-        "exp": "Usuwać listenery, czyścić timery, ograniczać cachowanie, używać strumieni dla dużych danych i profilować heap."
-      },
-      "answers": [
-        {
-          "uk": "Збільшити обсяг оперативної пам'яті сервера",
-          "en": "Increase server RAM",
-          "pl": "Zwiększyć RAM serwera",
-          "correct": false
-        },
-        {
-          "uk": "Видаляти listeners, очищати таймери, обмежувати кеш, профайлити heap",
-          "en": "Remove listeners, clear timers, limit cache, profile heap",
-          "pl": "Usuwać listenery, czyścić timery, ograniczać cache, profilować heap",
-          "correct": true
-        },
-        {
-          "uk": "Перезапускати сервер кожну годину",
-          "en": "Restart the server every hour",
-          "pl": "Restartować serwer co godzinę",
-          "correct": false
-        },
-        {
-          "uk": "Використовувати тільки синхронні методи",
-          "en": "Use only synchronous methods",
-          "pl": "Używać tylko metod synchronicznych",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/node/beginner_medium/seed-quiz-nodejs-fundamentals.ts b/json/quizzes/node/beginner_medium/seed-quiz-nodejs-fundamentals.ts
deleted file mode 100644
index e155081f..00000000
--- a/json/quizzes/node/beginner_medium/seed-quiz-nodejs-fundamentals.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-import { eq } from 'drizzle-orm';
-import { readFileSync } from 'fs';
-import { join } from 'path';
-import { db } from './index';
-import { categories } from './schema/categories';
-import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
-  quizAnswers,
-  quizAnswerTranslations,
-  quizAttempts,
-} from './schema/quiz';
-
-type Locale = 'uk' | 'en' | 'pl';
-const LOCALES: Locale[] = ['uk', 'en', 'pl'];
-
-interface QuestionData {
-  id: string;
-  order: number;
-  difficulty: 'beginner' | 'medium' | 'advanced';
-  uk: { q: string; exp: string };
-  en: { q: string; exp: string };
-  pl: { q: string; exp: string };
-  answers: {
-    uk: string;
-    en: string;
-    pl: string;
-    correct: boolean;
-  }[];
-}
-
-interface QuizPartData {
-  questions: QuestionData[];
-}
-
-const CATEGORY_SLUG = 'nodejs';
-
-const QUIZ_METADATA = {
-  slug: 'nodejs-fundamentals',
-  questionsCount: 40,
-  timeLimitSeconds: 1800,
-  translations: {
-    uk: {
-      title: 'Основи Node.js',
-      description: 'Перевірте свої знання базових концепцій Node.js: event loop, модулі, асинхронність, Express.js, тестування та деплой.',
-    },
-    en: {
-      title: 'Node.js Fundamentals',
-      description: 'Test your knowledge of Node.js basics: event loop, modules, asynchronicity, Express.js, testing, and deployment.',
-    },
-    pl: {
-      title: 'Podstawy Node.js',
-      description: 'Sprawdź swoją wiedzę o podstawach Node.js: event loop, moduły, asynchroniczność, Express.js, testowanie i deployment.',
-    },
-  },
-};
-
-function createExplanation(text: string) {
-  return [{ type: 'paragraph' as const, children: [{ text }] }];
-}
-
-async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'data', `nodejs-quiz-part${partNumber}.json`);
-  const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
-  return partData.questions;
-}
-
-async function ensureQuizExists(): Promise<string> {
-  console.log('Ensuring quiz exists...');
-
-  // Find category by slug
-  const [category] = await db
-    .select()
-    .from(categories)
-    .where(eq(categories.slug, CATEGORY_SLUG))
-    .limit(1);
-
-  if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
-  }
-
-  // Clean up old quiz by slug
-  const existing = await db.query.quizzes.findFirst({
-    where: eq(quizzes.slug, QUIZ_METADATA.slug),
-  });
-  if (existing) {
-    const existingAttempt = await db.query.quizAttempts.findFirst({
-      where: eq(quizAttempts.quizId, existing.id),
-    });
-    if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
-    }
-
-    await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 1,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
-
-    const quizId = existing.id;
-    for (const locale of LOCALES) {
-      await db.insert(quizTranslations).values({
-        quizId,
-        locale,
-        title: QUIZ_METADATA.translations[locale].title,
-        description: QUIZ_METADATA.translations[locale].description,
-      });
-    }
-
-    return quizId;
-  }
-
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 1,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
-
-  for (const locale of LOCALES) {
-    await db.insert(quizTranslations).values({
-      quizId: quiz.id,
-      locale,
-      title: QUIZ_METADATA.translations[locale].title,
-      description: QUIZ_METADATA.translations[locale].description,
-    });
-  }
-
-  return quiz.id;
-}
-
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
-
-  for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
-
-    for (const locale of LOCALES) {
-      await db.insert(quizQuestionContent).values({
-        quizQuestionId: q.id,
-        locale,
-        questionText: question[locale].q,
-        explanation: createExplanation(question[locale].exp),
-      });
-    }
-
-    for (let i = 0; i < question.answers.length; i++) {
-      const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
-
-      for (const locale of LOCALES) {
-        await db.insert(quizAnswerTranslations).values({
-          quizAnswerId: a.id,
-          locale,
-          answerText: answer[locale],
-        });
-      }
-    }
-  }
-
-  console.log(`Part ${partNumber} completed (${questions.length} questions)`);
-}
-
-async function seedQuizFromJson() {
-  const args = process.argv.slice(2);
-  const partArg = args[0];
-
-  if (!partArg) {
-    console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-nodejs-fundamentals.ts <part-number>');
-    console.log('Example: npx tsx db/seeds/seed-quiz-nodejs-fundamentals.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-nodejs-fundamentals.ts all');
-    process.exit(1);
-  }
-
-  console.log('Starting Node.js Fundamentals quiz seed...\n');
-
-  try {
-    const quizId = await ensureQuizExists();
-
-    if (partArg.toLowerCase() === 'all') {
-      console.log('Uploading all parts...\n');
-      let totalQuestions = 0;
-
-      for (let i = 1; i <= 4; i++) {
-        const questions = await loadQuestions(i);
-        await seedQuestions(questions, quizId, i);
-        totalQuestions += questions.length;
-      }
-
-      console.log('\nAll parts seeded successfully!');
-      console.log(`   - 1 quiz with ${LOCALES.length} translations`);
-      console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
-    } else {
-      const partNumber = parseInt(partArg, 10);
-
-      if (isNaN(partNumber) || partNumber < 1 || partNumber > 4) {
-        console.error('Error: Part number must be between 1 and 4');
-        process.exit(1);
-      }
-
-      const questions = await loadQuestions(partNumber);
-      await seedQuestions(questions, quizId, partNumber);
-
-      console.log('\nPart seeded successfully!');
-      console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
-      console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
-    }
-  } catch (error) {
-    console.error('\nError seeding quiz:', error);
-    throw error;
-  }
-}
-
-seedQuizFromJson()
-  .then(() => process.exit(0))
-  .catch((error) => {
-    console.error(error);
-    process.exit(1);
-  });
diff --git a/json/quizzes/react/react-quiz-data-part1.json b/json/quizzes/react/react-quiz-data-part1.json
deleted file mode 100644
index 902290c0..00000000
--- a/json/quizzes/react/react-quiz-data-part1.json
+++ /dev/null
@@ -1,254 +0,0 @@
-{
-  "quizId": "quiz-react-fundamentals",
-  "topicId": "topic-react",
-  "slug": "react-fundamentals",
-  "questionsCount": 40,
-  "timeLimitSeconds": 1800,
-  "translations": {
-    "uk": { "title": "Основи React", "description": "Перевірте свої знання базових концепцій React: компоненти, Virtual DOM, JSX, хуки, оптимізація та архітектурні патерни." },
-    "en": { "title": "React Fundamentals", "description": "Test your knowledge of React basics: components, Virtual DOM, JSX, hooks, optimization and architectural patterns." },
-    "pl": { "title": "Podstawy React", "description": "Sprawdź swoją wiedzę o podstawach React: komponenty, Virtual DOM, JSX, hooki, optymalizacja i wzorce architektoniczne." }
-  },
-  "questions": [
-    {
-      "id": "react-q01", "order": 1, "difficulty": "beginner",
-      "uk": { "q": "Що найточніше описує React?", "exp": "React — це саме бібліотека, а не фреймворк. Він фокусується на одній задачі: побудова UI." },
-      "en": { "q": "What best describes React?", "exp": "React is a library, not a framework. It focuses on one task: building UI." },
-      "pl": { "q": "Co najlepiej opisuje React?", "exp": "React to biblioteka, a nie framework. Skupia się na jednym zadaniu: budowaniu UI." },
-      "answers": [
-        { "uk": "Повноцінний фреймворк для створення веб-додатків", "en": "A full-featured framework for building web applications", "pl": "Pełnoprawny framework do tworzenia aplikacji webowych", "correct": false },
-        { "uk": "JavaScript-бібліотека для створення користувацьких інтерфейсів", "en": "A JavaScript library for building user interfaces", "pl": "Biblioteka JavaScript do tworzenia interfejsów użytkownika", "correct": true },
-        { "uk": "Мова програмування для веб-розробки", "en": "A programming language for web development", "pl": "Język programowania do tworzenia stron internetowych", "correct": false },
-        { "uk": "База даних для зберігання даних додатків", "en": "A database for storing application data", "pl": "Baza danych do przechowywania danych aplikacji", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q02", "order": 2, "difficulty": "beginner",
-      "uk": { "q": "Навіщо React використовує Virtual DOM?", "exp": "Virtual DOM — це легка копія реального DOM в пам'яті. React порівнює віртуальну версію з попередньою (diffing) і вносить лише мінімальні зміни." },
-      "en": { "q": "Why does React use Virtual DOM?", "exp": "Virtual DOM is a lightweight copy of the real DOM in memory. React compares the virtual version with the previous one (diffing) and makes only minimal changes." },
-      "pl": { "q": "Dlaczego React używa Virtual DOM?", "exp": "Virtual DOM to lekka kopia prawdziwego DOM w pamięci. React porównuje wersję wirtualną z poprzednią (diffing) i wprowadza tylko minimalne zmiany." },
-      "answers": [
-        { "uk": "Щоб зберігати дані користувача в браузері", "en": "To store user data in the browser", "pl": "Aby przechowywać dane użytkownika w przeglądarce", "correct": false },
-        { "uk": "Для ефективного оновлення інтерфейсу без зайвих маніпуляцій з реальним DOM", "en": "For efficient UI updates without unnecessary real DOM manipulations", "pl": "Do wydajnych aktualizacji UI bez zbędnych manipulacji prawdziwym DOM", "correct": true },
-        { "uk": "Для створення анімацій на сторінці", "en": "To create animations on the page", "pl": "Do tworzenia animacji na stronie", "correct": false },
-        { "uk": "Щоб сторінка працювала без JavaScript", "en": "So the page works without JavaScript", "pl": "Aby strona działała bez JavaScript", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q03", "order": 3, "difficulty": "beginner",
-      "uk": { "q": "Як передаються дані між компонентами в React за замовчуванням?", "exp": "React використовує односпрямований (unidirectional) потік даних — дані передаються зверху вниз через props." },
-      "en": { "q": "How is data passed between components in React by default?", "exp": "React uses unidirectional data flow — data is passed from top to bottom through props." },
-      "pl": { "q": "Jak domyślnie przekazywane są dane między komponentami w React?", "exp": "React używa jednokierunkowego przepływu danych — dane są przekazywane z góry na dół przez props." },
-      "answers": [
-        { "uk": "Від дочірніх компонентів до батьківських", "en": "From child components to parent components", "pl": "Od komponentów potomnych do nadrzędnych", "correct": false },
-        { "uk": "В обидва напрямки одночасно", "en": "In both directions simultaneously", "pl": "W obu kierunkach jednocześnie", "correct": false },
-        { "uk": "Від батьківських компонентів до дочірніх (зверху вниз)", "en": "From parent components to child components (top to bottom)", "pl": "Od komponentów nadrzędnych do potomnych (z góry na dół)", "correct": true },
-        { "uk": "Через глобальну змінну window", "en": "Through the global window variable", "pl": "Przez globalną zmienną window", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q04", "order": 4, "difficulty": "beginner",
-      "uk": { "q": "Що таке JSX?", "exp": "JSX виглядає як HTML всередині JavaScript, але насправді це синтаксичний цукор. Babel перетворює <h1>Hello</h1> на React.createElement()." },
-      "en": { "q": "What is JSX?", "exp": "JSX looks like HTML inside JavaScript, but it's actually syntactic sugar. Babel transforms <h1>Hello</h1> into React.createElement()." },
-      "pl": { "q": "Czym jest JSX?", "exp": "JSX wygląda jak HTML wewnątrz JavaScript, ale w rzeczywistości jest to cukier składniowy. Babel przekształca <h1>Hello</h1> w React.createElement()." },
-      "answers": [
-        { "uk": "Нова мова програмування від Facebook", "en": "A new programming language from Facebook", "pl": "Nowy język programowania od Facebooka", "correct": false },
-        { "uk": "Розширення синтаксису JavaScript для опису UI у XML-подібному форматі", "en": "A JavaScript syntax extension for describing UI in an XML-like format", "pl": "Rozszerzenie składni JavaScript do opisywania UI w formacie podobnym do XML", "correct": true },
-        { "uk": "Бібліотека для роботи з формами", "en": "A library for working with forms", "pl": "Biblioteka do pracy z formularzami", "correct": false },
-        { "uk": "Інструмент для тестування React-компонентів", "en": "A tool for testing React components", "pl": "Narzędzie do testowania komponentów React", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q05", "order": 5, "difficulty": "beginner",
-      "uk": { "q": "Чому в JSX замість class пишуть className?", "exp": "В JavaScript class — ключове слово для створення класів. Оскільки JSX — це JavaScript, використання class як атрибута викликало б конфлікт." },
-      "en": { "q": "Why do we use className instead of class in JSX?", "exp": "In JavaScript, class is a reserved keyword for creating classes. Since JSX is JavaScript, using class as an attribute would cause a conflict." },
-      "pl": { "q": "Dlaczego w JSX zamiast class piszemy className?", "exp": "W JavaScript class to słowo kluczowe do tworzenia klas. Ponieważ JSX to JavaScript, użycie class jako atrybutu spowodowałoby konflikt." },
-      "answers": [
-        { "uk": "Це помилка в документації React", "en": "This is an error in React documentation", "pl": "To błąd w dokumentacji React", "correct": false },
-        { "uk": "class — зарезервоване слово в JavaScript", "en": "class is a reserved word in JavaScript", "pl": "class to słowo zastrzeżone w JavaScript", "correct": true },
-        { "uk": "className працює швидше", "en": "className works faster", "pl": "className działa szybciej", "correct": false },
-        { "uk": "Це просто стиль коду Facebook", "en": "It's just Facebook's code style", "pl": "To po prostu styl kodu Facebooka", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q06", "order": 6, "difficulty": "beginner",
-      "uk": { "q": "Який тип компонентів рекомендується використовувати в сучасному React?", "exp": "Починаючи з React 16.8, функціональні компоненти отримали хуки. Вони простіші, коротші і легші для тестування." },
-      "en": { "q": "Which type of components is recommended in modern React?", "exp": "Starting with React 16.8, functional components received hooks. They are simpler, shorter, and easier to test." },
-      "pl": { "q": "Jaki typ komponentów jest zalecany we współczesnym React?", "exp": "Począwszy od React 16.8, komponenty funkcyjne otrzymały hooki. Są prostsze, krótsze i łatwiejsze do testowania." },
-      "answers": [
-        { "uk": "Тільки класові компоненти", "en": "Only class components", "pl": "Tylko komponenty klasowe", "correct": false },
-        { "uk": "Функціональні компоненти з хуками", "en": "Functional components with hooks", "pl": "Komponenty funkcyjne z hookami", "correct": true },
-        { "uk": "Тільки компоненти без стану", "en": "Only stateless components", "pl": "Tylko komponenty bez stanu", "correct": false },
-        { "uk": "Компоненти на чистому JavaScript без React", "en": "Pure JavaScript components without React", "pl": "Komponenty w czystym JavaScript bez React", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q07", "order": 7, "difficulty": "beginner",
-      "uk": { "q": "Що таке props в React?", "exp": "Props (properties) — це вхідні дані компонента, як аргументи функції. Вони передаються зверху вниз і є незмінними (immutable)." },
-      "en": { "q": "What are props in React?", "exp": "Props (properties) are input data for a component, like function arguments. They are passed from top to bottom and are immutable." },
-      "pl": { "q": "Czym są props w React?", "exp": "Props (properties) to dane wejściowe komponentu, jak argumenty funkcji. Są przekazywane z góry na dół i są niezmienne (immutable)." },
-      "answers": [
-        { "uk": "Внутрішній стан компонента, який можна змінювати", "en": "Internal component state that can be modified", "pl": "Wewnętrzny stan komponentu, który można modyfikować", "correct": false },
-        { "uk": "Дані, передані від батьківського компонента до дочірнього (read-only)", "en": "Data passed from parent to child component (read-only)", "pl": "Dane przekazane z komponentu nadrzędnego do potomnego (tylko do odczytu)", "correct": true },
-        { "uk": "Методи життєвого циклу компонента", "en": "Component lifecycle methods", "pl": "Metody cyklu życia komponentu", "correct": false },
-        { "uk": "CSS-стилі компонента", "en": "Component CSS styles", "pl": "Style CSS komponentu", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q08", "order": 8, "difficulty": "beginner",
-      "uk": { "q": "Чим state відрізняється від props?", "exp": "State — це 'пам'ять' компонента. Props передаються від батьківського компонента (read-only), state належить самому компоненту і може змінюватися." },
-      "en": { "q": "How does state differ from props?", "exp": "State is the component's 'memory'. Props are passed from the parent component (read-only), state belongs to the component itself and can be changed." },
-      "pl": { "q": "Czym różni się state od props?", "exp": "State to 'pamięć' komponentu. Props są przekazywane z komponentu nadrzędnego (tylko do odczytu), state należy do samego komponentu i może być zmieniany." },
-      "answers": [
-        { "uk": "State передається від батьківського компонента", "en": "State is passed from the parent component", "pl": "State jest przekazywany z komponentu nadrzędnego", "correct": false },
-        { "uk": "State — це внутрішні дані компонента, які він може змінювати", "en": "State is the component's internal data that it can modify", "pl": "State to wewnętrzne dane komponentu, które może on modyfikować", "correct": true },
-        { "uk": "State не впливає на рендеринг компонента", "en": "State does not affect component rendering", "pl": "State nie wpływa na renderowanie komponentu", "correct": false },
-        { "uk": "State доступний тільки в класових компонентах", "en": "State is only available in class components", "pl": "State jest dostępny tylko w komponentach klasowych", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q09", "order": 9, "difficulty": "beginner",
-      "uk": { "q": "Що повертає хук useState?", "exp": "useState повертає масив з двох елементів: поточне значення і функцію-сетер. const [count, setCount] = useState(0) — це деструктуризація масиву." },
-      "en": { "q": "What does the useState hook return?", "exp": "useState returns an array of two elements: current value and setter function. const [count, setCount] = useState(0) is array destructuring." },
-      "pl": { "q": "Co zwraca hook useState?", "exp": "useState zwraca tablicę dwóch elementów: aktualną wartość i funkcję ustawiającą. const [count, setCount] = useState(0) to destrukturyzacja tablicy." },
-      "answers": [
-        { "uk": "Тільки поточне значення стану", "en": "Only the current state value", "pl": "Tylko aktualną wartość stanu", "correct": false },
-        { "uk": "Масив з двох елементів: поточне значення і функцію для його зміни", "en": "An array of two elements: current value and a function to change it", "pl": "Tablicę dwóch elementów: aktualną wartość i funkcję do jej zmiany", "correct": true },
-        { "uk": "Об'єкт з методами get і set", "en": "An object with get and set methods", "pl": "Obiekt z metodami get i set", "correct": false },
-        { "uk": "Promise з новим значенням", "en": "A Promise with the new value", "pl": "Promise z nową wartością", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q10", "order": 10, "difficulty": "medium",
-      "uk": { "q": "Як правильно збільшити лічильник на 1, якщо нове значення залежить від попереднього?", "exp": "Використовуйте функціональну форму: setCount(prev => prev + 1). Це гарантує актуальність значення, бо React може 'батчити' оновлення." },
-      "en": { "q": "How to correctly increment a counter by 1 when the new value depends on the previous one?", "exp": "Use the functional form: setCount(prev => prev + 1). This guarantees value accuracy because React may 'batch' state updates." },
-      "pl": { "q": "Jak poprawnie zwiększyć licznik o 1, gdy nowa wartość zależy od poprzedniej?", "exp": "Użyj formy funkcyjnej: setCount(prev => prev + 1). To gwarantuje aktualność wartości, ponieważ React może 'batchować' aktualizacje." },
-      "answers": [
-        { "uk": "setCount(count + 1)", "en": "setCount(count + 1)", "pl": "setCount(count + 1)", "correct": false },
-        { "uk": "setCount(prev => prev + 1)", "en": "setCount(prev => prev + 1)", "pl": "setCount(prev => prev + 1)", "correct": true },
-        { "uk": "count = count + 1", "en": "count = count + 1", "pl": "count = count + 1", "correct": false },
-        { "uk": "setCount(1)", "en": "setCount(1)", "pl": "setCount(1)", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q11", "order": 11, "difficulty": "beginner",
-      "uk": { "q": "Для чого використовується хук useEffect?", "exp": "useEffect — це місце для 'побічних ефектів': fetch-запити до API, підписки на події, зміна document.title, робота з таймерами." },
-      "en": { "q": "What is the useEffect hook used for?", "exp": "useEffect is the place for 'side effects': fetch requests to APIs, event subscriptions, changing document.title, working with timers." },
-      "pl": { "q": "Do czego służy hook useEffect?", "exp": "useEffect to miejsce na 'efekty uboczne': zapytania fetch do API, subskrypcje zdarzeń, zmiana document.title, praca z timerami." },
-      "answers": [
-        { "uk": "Для створення нових компонентів", "en": "For creating new components", "pl": "Do tworzenia nowych komponentów", "correct": false },
-        { "uk": "Для виконання побічних ефектів: запити до API, підписки, таймери", "en": "For executing side effects: API requests, subscriptions, timers", "pl": "Do wykonywania efektów ubocznych: zapytania do API, subskrypcje, timery", "correct": true },
-        { "uk": "Для стилізації компонентів", "en": "For styling components", "pl": "Do stylizacji komponentów", "correct": false },
-        { "uk": "Для оптимізації рендерингу", "en": "For render optimization", "pl": "Do optymalizacji renderowania", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q12", "order": 12, "difficulty": "medium",
-      "uk": { "q": "Що означає порожній масив залежностей [] у useEffect?", "exp": "Це аналог componentDidMount з класів. Порожній масив каже React: 'цей ефект не залежить від жодних значень, виконай його лише раз'." },
-      "en": { "q": "What does an empty dependency array [] in useEffect mean?", "exp": "This is equivalent to componentDidMount from classes. Empty array tells React: 'this effect doesn't depend on any values, run it only once'." },
-      "pl": { "q": "Co oznacza pusta tablica zależności [] w useEffect?", "exp": "To odpowiednik componentDidMount z klas. Pusta tablica mówi React: 'ten efekt nie zależy od żadnych wartości, wykonaj go tylko raz'." },
-      "answers": [
-        { "uk": "Ефект ніколи не виконається", "en": "The effect will never run", "pl": "Efekt nigdy się nie wykona", "correct": false },
-        { "uk": "Ефект виконається лише один раз після першого рендеру", "en": "The effect will run only once after the first render", "pl": "Efekt wykona się tylko raz po pierwszym renderze", "correct": true },
-        { "uk": "Ефект виконуватиметься на кожному рендері", "en": "The effect will run on every render", "pl": "Efekt będzie się wykonywał przy każdym renderze", "correct": false },
-        { "uk": "Це синтаксична помилка", "en": "This is a syntax error", "pl": "To jest błąd składni", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q13", "order": 13, "difficulty": "medium",
-      "uk": { "q": "Навіщо функція всередині useEffect може повертати іншу функцію?", "exp": "Return-функція в useEffect — це cleanup (очистка). Вона викликається перед наступним запуском ефекту або при розмонтуванні компонента." },
-      "en": { "q": "Why might a function inside useEffect return another function?", "exp": "The return function in useEffect is the cleanup. It's called before the next effect run or when the component unmounts." },
-      "pl": { "q": "Dlaczego funkcja wewnątrz useEffect może zwracać inną funkcję?", "exp": "Funkcja zwrotna w useEffect to cleanup (czyszczenie). Jest wywoływana przed następnym uruchomieniem efektu lub przy odmontowaniu komponentu." },
-      "answers": [
-        { "uk": "Щоб повернути нове значення стану", "en": "To return a new state value", "pl": "Aby zwrócić nową wartość stanu", "correct": false },
-        { "uk": "Для очистки ресурсів (відписка, очищення таймерів) при розмонтуванні", "en": "For resource cleanup (unsubscribe, clear timers) on unmount", "pl": "Do czyszczenia zasobów (anulowanie subskrypcji, czyszczenie timerów) przy odmontowaniu", "correct": true },
-        { "uk": "Для створення дочірнього компонента", "en": "To create a child component", "pl": "Do tworzenia komponentu potomnego", "correct": false },
-        { "uk": "Це обов'язкова вимога React", "en": "This is a mandatory React requirement", "pl": "To obowiązkowy wymóg React", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q14", "order": 14, "difficulty": "beginner",
-      "uk": { "q": "Навіщо потрібен атрибут key при рендері списків у React?", "exp": "key допомагає React ідентифікувати елементи списку. Без унікальних ключів React не може ефективно оновлювати DOM." },
-      "en": { "q": "Why is the key attribute needed when rendering lists in React?", "exp": "key helps React identify list elements. Without unique keys, React cannot efficiently update the DOM." },
-      "pl": { "q": "Po co jest potrzebny atrybut key przy renderowaniu list w React?", "exp": "key pomaga React identyfikować elementy listy. Bez unikalnych kluczy React nie może efektywnie aktualizować DOM." },
-      "answers": [
-        { "uk": "Для стилізації елементів списку", "en": "For styling list elements", "pl": "Do stylizacji elementów listy", "correct": false },
-        { "uk": "Щоб React міг ефективно визначати, які елементи змінились, додались чи видалились", "en": "So React can efficiently determine which elements changed, added, or removed", "pl": "Aby React mógł efektywnie określić, które elementy się zmieniły, zostały dodane lub usunięte", "correct": true },
-        { "uk": "Для сортування елементів за алфавітом", "en": "For sorting elements alphabetically", "pl": "Do sortowania elementów alfabetycznie", "correct": false },
-        { "uk": "key — необов'язковий атрибут", "en": "key is an optional attribute", "pl": "key to opcjonalny atrybut", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q15", "order": 15, "difficulty": "medium",
-      "uk": { "q": "Чому НЕ рекомендується використовувати індекс масиву як key?", "exp": "Якщо ви видалите перший елемент списку, всі індекси 'зсунуться'. React побачить той самий key=0, але інший контент — і може зберегти стан старого елемента для нового." },
-      "en": { "q": "Why is it NOT recommended to use array index as key?", "exp": "If you delete the first list element, all indexes will 'shift'. React will see the same key=0 but different content — and may preserve the old element's state for the new one." },
-      "pl": { "q": "Dlaczego NIE zaleca się używać indeksu tablicy jako key?", "exp": "Jeśli usuniesz pierwszy element listy, wszystkie indeksy się 'przesuną'. React zobaczy ten sam key=0, ale inną zawartość — i może zachować stan starego elementu dla nowego." },
-      "answers": [
-        { "uk": "Індекс завжди дорівнює нулю", "en": "Index is always zero", "pl": "Indeks zawsze wynosi zero", "correct": false },
-        { "uk": "При зміні порядку елементів React може неправильно оновити компоненти", "en": "When element order changes, React may incorrectly update components", "pl": "Przy zmianie kolejności elementów React może nieprawidłowo zaktualizować komponenty", "correct": true },
-        { "uk": "Індекс — це рядок, а не число", "en": "Index is a string, not a number", "pl": "Indeks to string, a nie liczba", "correct": false },
-        { "uk": "React не приймає числа як key", "en": "React doesn't accept numbers as key", "pl": "React nie przyjmuje liczb jako key", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q16", "order": 16, "difficulty": "beginner",
-      "uk": { "q": "Який спосіб умовного рендерингу найчастіше використовують для вибору між двома варіантами?", "exp": "JSX не дозволяє if-else напряму. Тернарний оператор повертає значення, тому ідеально підходить: {isLoggedIn ? <Dashboard /> : <Login />}." },
-      "en": { "q": "What conditional rendering method is most commonly used to choose between two options?", "exp": "JSX doesn't allow if-else directly. The ternary operator returns a value, so it's ideal: {isLoggedIn ? <Dashboard /> : <Login />}." },
-      "pl": { "q": "Jaki sposób warunkowego renderowania jest najczęściej używany do wyboru między dwoma opcjami?", "exp": "JSX nie pozwala na if-else bezpośrednio. Operator trójargumentowy zwraca wartość, więc idealnie się nadaje: {isLoggedIn ? <Dashboard /> : <Login />}." },
-      "answers": [
-        { "uk": "if-else всередині JSX", "en": "if-else inside JSX", "pl": "if-else wewnątrz JSX", "correct": false },
-        { "uk": "Тернарний оператор: condition ? <A /> : <B />", "en": "Ternary operator: condition ? <A /> : <B />", "pl": "Operator trójargumentowy: condition ? <A /> : <B />", "correct": true },
-        { "uk": "switch-case", "en": "switch-case", "pl": "switch-case", "correct": false },
-        { "uk": "try-catch", "en": "try-catch", "pl": "try-catch", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q17", "order": 17, "difficulty": "beginner",
-      "uk": { "q": "Що виведе {isAdmin && <AdminPanel />}, якщо isAdmin = false?", "exp": "Логічний AND (&&) повертає перший 'falsy' операнд. Якщо isAdmin = false, вираз повертає false, і React його ігнорує. Обережно з числом 0!" },
-      "en": { "q": "What will {isAdmin && <AdminPanel />} render if isAdmin = false?", "exp": "Logical AND (&&) returns the first 'falsy' operand. If isAdmin = false, the expression returns false, and React ignores it. Be careful with number 0!" },
-      "pl": { "q": "Co wyrenderuje {isAdmin && <AdminPanel />}, jeśli isAdmin = false?", "exp": "Logiczny AND (&&) zwraca pierwszy 'falsy' operand. Jeśli isAdmin = false, wyrażenie zwraca false, a React to ignoruje. Uwaga na liczbę 0!" },
-      "answers": [
-        { "uk": "Компонент <AdminPanel />", "en": "Component <AdminPanel />", "pl": "Komponent <AdminPanel />", "correct": false },
-        { "uk": "Слово 'false'", "en": "The word 'false'", "pl": "Słowo 'false'", "correct": false },
-        { "uk": "Нічого (пустий рендер)", "en": "Nothing (empty render)", "pl": "Nic (pusty render)", "correct": true },
-        { "uk": "Помилку", "en": "An error", "pl": "Błąd", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q18", "order": 18, "difficulty": "beginner",
-      "uk": { "q": "Як правильно додати обробник кліку в React?", "exp": "React використовує camelCase для подій: onClick, onChange. Передається посилання на функцію (без дужок!). onClick={handleClick()} — викличеться одразу!" },
-      "en": { "q": "How to correctly add a click handler in React?", "exp": "React uses camelCase for events: onClick, onChange. Pass a function reference (without parentheses!). onClick={handleClick()} — will execute immediately!" },
-      "pl": { "q": "Jak poprawnie dodać obsługę kliknięcia w React?", "exp": "React używa camelCase dla zdarzeń: onClick, onChange. Przekazuje się referencję do funkcji (bez nawiasów!). onClick={handleClick()} — wykona się natychmiast!" },
-      "answers": [
-        { "uk": "<button onclick=\"handleClick()\">", "en": "<button onclick=\"handleClick()\">", "pl": "<button onclick=\"handleClick()\">", "correct": false },
-        { "uk": "<button onClick={handleClick}>", "en": "<button onClick={handleClick}>", "pl": "<button onClick={handleClick}>", "correct": true },
-        { "uk": "<button click={handleClick}>", "en": "<button click={handleClick}>", "pl": "<button click={handleClick}>", "correct": false },
-        { "uk": "<button addEventListener=\"click\" handler={handleClick}>", "en": "<button addEventListener=\"click\" handler={handleClick}>", "pl": "<button addEventListener=\"click\" handler={handleClick}>", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q19", "order": 19, "difficulty": "medium",
-      "uk": { "q": "Що таке SyntheticEvent у React?", "exp": "SyntheticEvent — це React'івська абстракція над браузерними подіями. Має той самий інтерфейс (preventDefault, stopPropagation), але працює однаково у всіх браузерах." },
-      "en": { "q": "What is SyntheticEvent in React?", "exp": "SyntheticEvent is React's abstraction over browser events. It has the same interface (preventDefault, stopPropagation), but works identically across all browsers." },
-      "pl": { "q": "Czym jest SyntheticEvent w React?", "exp": "SyntheticEvent to abstrakcja React nad zdarzeniami przeglądarki. Ma ten sam interfejs (preventDefault, stopPropagation), ale działa identycznie we wszystkich przeglądarkach." },
-      "answers": [
-        { "uk": "Новий тип події, доступний тільки в React 18", "en": "A new event type available only in React 18", "pl": "Nowy typ zdarzenia dostępny tylko w React 18", "correct": false },
-        { "uk": "Обгортка над нативними DOM-подіями для кросбраузерної сумісності", "en": "A wrapper over native DOM events for cross-browser compatibility", "pl": "Wrapper nad natywnymi zdarzeniami DOM dla kompatybilności międzyprzeglądarkowej", "correct": true },
-        { "uk": "Подія, яка створюється штучно для тестування", "en": "An event created artificially for testing", "pl": "Zdarzenie tworzone sztucznie do testowania", "correct": false },
-        { "uk": "Помилка в системі подій React", "en": "An error in React's event system", "pl": "Błąd w systemie zdarzeń React", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q20", "order": 20, "difficulty": "medium",
-      "uk": { "q": "Яку проблему вирішує Context API в React?", "exp": "Context дозволяє 'телепортувати' дані напряму, уникаючи prop drilling — передачу пропсів через багато рівнів компонентів." },
-      "en": { "q": "What problem does Context API solve in React?", "exp": "Context allows you to 'teleport' data directly, avoiding prop drilling — passing props through many component levels." },
-      "pl": { "q": "Jaki problem rozwiązuje Context API w React?", "exp": "Context pozwala 'teleportować' dane bezpośrednio, unikając prop drilling — przekazywania propsów przez wiele poziomów komponentów." },
-      "answers": [
-        { "uk": "Повільний рендеринг компонентів", "en": "Slow component rendering", "pl": "Wolne renderowanie komponentów", "correct": false },
-        { "uk": "Prop drilling — передачу пропсів через багато рівнів компонентів", "en": "Prop drilling — passing props through many component levels", "pl": "Prop drilling — przekazywanie propsów przez wiele poziomów komponentów", "correct": true },
-        { "uk": "Відсутність типізації в JavaScript", "en": "Lack of typing in JavaScript", "pl": "Brak typowania w JavaScript", "correct": false },
-        { "uk": "Проблеми з CSS-стилями", "en": "CSS styling problems", "pl": "Problemy ze stylami CSS", "correct": false }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/react/react-quiz-data-part2.json b/json/quizzes/react/react-quiz-data-part2.json
deleted file mode 100644
index 4e126c04..00000000
--- a/json/quizzes/react/react-quiz-data-part2.json
+++ /dev/null
@@ -1,244 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "react-q21", "order": 21, "difficulty": "medium",
-      "uk": { "q": "Як отримати значення контексту у функціональному компоненті?", "exp": "useContext — хук для читання контексту. Він приймає сам об'єкт контексту (не Consumer!) і повертає поточне значення." },
-      "en": { "q": "How to get context value in a functional component?", "exp": "useContext is a hook for reading context. It takes the context object itself (not Consumer!) and returns the current value." },
-      "pl": { "q": "Jak uzyskać wartość kontekstu w komponencie funkcyjnym?", "exp": "useContext to hook do odczytu kontekstu. Przyjmuje sam obiekt kontekstu (nie Consumer!) i zwraca aktualną wartość." },
-      "answers": [
-        { "uk": "this.context", "en": "this.context", "pl": "this.context", "correct": false },
-        { "uk": "useContext(MyContext)", "en": "useContext(MyContext)", "pl": "useContext(MyContext)", "correct": true },
-        { "uk": "getContext(MyContext)", "en": "getContext(MyContext)", "pl": "getContext(MyContext)", "correct": false },
-        { "uk": "MyContext.get()", "en": "MyContext.get()", "pl": "MyContext.get()", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q22", "order": 22, "difficulty": "medium",
-      "uk": { "q": "Коли доцільно використовувати useReducer замість useState?", "exp": "useReducer корисний, коли: стан — об'єкт з кількома полями; оновлення залежать від типу дії (action); логіка оновлення складна." },
-      "en": { "q": "When is it appropriate to use useReducer instead of useState?", "exp": "useReducer is useful when: state is an object with multiple fields; updates depend on action type; update logic is complex." },
-      "pl": { "q": "Kiedy warto używać useReducer zamiast useState?", "exp": "useReducer jest przydatny, gdy: stan to obiekt z wieloma polami; aktualizacje zależą od typu akcji; logika aktualizacji jest złożona." },
-      "answers": [
-        { "uk": "Завжди, бо він швидший", "en": "Always, because it's faster", "pl": "Zawsze, bo jest szybszy", "correct": false },
-        { "uk": "Коли стан має складну логіку або кілька взаємопов'язаних значень", "en": "When state has complex logic or multiple interrelated values", "pl": "Gdy stan ma złożoną logikę lub kilka powiązanych wartości", "correct": true },
-        { "uk": "Тільки для глобального стану", "en": "Only for global state", "pl": "Tylko dla globalnego stanu", "correct": false },
-        { "uk": "Тільки в класових компонентах", "en": "Only in class components", "pl": "Tylko w komponentach klasowych", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q23", "order": 23, "difficulty": "medium",
-      "uk": { "q": "Для чого використовується хук useMemo?", "exp": "useMemo 'запам'ятовує' результат обчислення і повертає закешоване значення, поки залежності не зміняться. Корисно для важких обчислень." },
-      "en": { "q": "What is the useMemo hook used for?", "exp": "useMemo 'remembers' computation result and returns cached value until dependencies change. Useful for heavy computations." },
-      "pl": { "q": "Do czego służy hook useMemo?", "exp": "useMemo 'zapamiętuje' wynik obliczeń i zwraca zbuforowaną wartość, dopóki zależności się nie zmienią. Przydatny dla ciężkich obliczeń." },
-      "answers": [
-        { "uk": "Для мемоізації посилання на функцію", "en": "For memoizing function reference", "pl": "Do memoizacji referencji do funkcji", "correct": false },
-        { "uk": "Для мемоізації результату обчислень, щоб не перераховувати на кожному рендері", "en": "For memoizing computation result to avoid recalculating on every render", "pl": "Do memoizacji wyniku obliczeń, aby nie przeliczać przy każdym renderze", "correct": true },
-        { "uk": "Для збереження даних у localStorage", "en": "For storing data in localStorage", "pl": "Do przechowywania danych w localStorage", "correct": false },
-        { "uk": "Для створення мемо-нотаток у коді", "en": "For creating memo notes in code", "pl": "Do tworzenia notatek memo w kodzie", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q24", "order": 24, "difficulty": "medium",
-      "uk": { "q": "Чим useCallback відрізняється від useMemo?", "exp": "useCallback(fn, deps) еквівалентний useMemo(() => fn, deps). useCallback повертає саму функцію, useMemo — результат її виконання." },
-      "en": { "q": "How does useCallback differ from useMemo?", "exp": "useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). useCallback returns the function itself, useMemo returns the result of execution." },
-      "pl": { "q": "Czym różni się useCallback od useMemo?", "exp": "useCallback(fn, deps) jest równoważne useMemo(() => fn, deps). useCallback zwraca samą funkcję, useMemo zwraca wynik jej wykonania." },
-      "answers": [
-        { "uk": "useCallback для класових компонентів, useMemo для функціональних", "en": "useCallback for class components, useMemo for functional", "pl": "useCallback dla komponentów klasowych, useMemo dla funkcyjnych", "correct": false },
-        { "uk": "useCallback мемоізує функцію, useMemo мемоізує результат виклику", "en": "useCallback memoizes function, useMemo memoizes call result", "pl": "useCallback memoizuje funkcję, useMemo memoizuje wynik wywołania", "correct": true },
-        { "uk": "Вони абсолютно однакові", "en": "They are absolutely identical", "pl": "Są absolutnie identyczne", "correct": false },
-        { "uk": "useCallback працює асинхронно", "en": "useCallback works asynchronously", "pl": "useCallback działa asynchronicznie", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q25", "order": 25, "difficulty": "medium",
-      "uk": { "q": "Що зберігає useRef і коли його змінювати?", "exp": "useRef створює 'коробку' з властивістю .current, яку можна змінювати. На відміну від state, зміна ref не викликає ререндер." },
-      "en": { "q": "What does useRef store and when to modify it?", "exp": "useRef creates a 'box' with a .current property that can be modified. Unlike state, changing ref doesn't cause re-render." },
-      "pl": { "q": "Co przechowuje useRef i kiedy go modyfikować?", "exp": "useRef tworzy 'pudełko' z właściwością .current, którą można modyfikować. W przeciwieństwie do state, zmiana ref nie powoduje ponownego renderowania." },
-      "answers": [
-        { "uk": "Змінне значення, яке не викликає ререндер при зміні", "en": "A mutable value that doesn't cause re-render when changed", "pl": "Zmienną wartość, która nie powoduje ponownego renderowania przy zmianie", "correct": true },
-        { "uk": "Незмінне значення, доступне тільки для читання", "en": "An immutable value, read-only", "pl": "Niezmienną wartość, tylko do odczytu", "correct": false },
-        { "uk": "Посилання на батьківський компонент", "en": "Reference to parent component", "pl": "Referencję do komponentu nadrzędnego", "correct": false },
-        { "uk": "Історію всіх станів компонента", "en": "History of all component states", "pl": "Historię wszystkich stanów komponentu", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q26", "order": 26, "difficulty": "beginner",
-      "uk": { "q": "Як у React отримати прямий доступ до DOM-елемента (наприклад, для фокусу на input)?", "exp": "const inputRef = useRef(); <input ref={inputRef} /> — тепер inputRef.current містить DOM-елемент. Це 'аварійний вихід' з React у реальний DOM." },
-      "en": { "q": "How to get direct DOM element access in React (e.g., to focus an input)?", "exp": "const inputRef = useRef(); <input ref={inputRef} /> — now inputRef.current contains the DOM element. This is an 'escape hatch' from React to the real DOM." },
-      "pl": { "q": "Jak uzyskać bezpośredni dostęp do elementu DOM w React (np. do ustawienia fokusa na input)?", "exp": "const inputRef = useRef(); <input ref={inputRef} /> — teraz inputRef.current zawiera element DOM. To 'wyjście awaryjne' z React do prawdziwego DOM." },
-      "answers": [
-        { "uk": "document.getElementById()", "en": "document.getElementById()", "pl": "document.getElementById()", "correct": false },
-        { "uk": "Через атрибут ref і хук useRef", "en": "Through ref attribute and useRef hook", "pl": "Przez atrybut ref i hook useRef", "correct": true },
-        { "uk": "Через props", "en": "Through props", "pl": "Przez props", "correct": false },
-        { "uk": "DOM недоступний у React", "en": "DOM is not accessible in React", "pl": "DOM nie jest dostępny w React", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q27", "order": 27, "difficulty": "medium",
-      "uk": { "q": "Що таке 'контрольований компонент' у контексті форм React?", "exp": "У контрольованому компоненті React є 'єдиним джерелом правди': <input value={state} onChange={...} />. Дає більше контролю (валідація, форматування)." },
-      "en": { "q": "What is a 'controlled component' in React forms context?", "exp": "In a controlled component, React is the 'single source of truth': <input value={state} onChange={...} />. Gives more control (validation, formatting)." },
-      "pl": { "q": "Czym jest 'komponent kontrolowany' w kontekście formularzy React?", "exp": "W komponencie kontrolowanym React jest 'jedynym źródłem prawdy': <input value={state} onChange={...} />. Daje większą kontrolę (walidacja, formatowanie)." },
-      "answers": [
-        { "uk": "Компонент, захищений від XSS-атак", "en": "A component protected from XSS attacks", "pl": "Komponent chroniony przed atakami XSS", "correct": false },
-        { "uk": "Input, значення якого контролюється станом React", "en": "An input whose value is controlled by React state", "pl": "Input, którego wartość jest kontrolowana przez stan React", "correct": true },
-        { "uk": "Компонент, який не можна редагувати", "en": "A component that cannot be edited", "pl": "Komponent, którego nie można edytować", "correct": false },
-        { "uk": "Компонент з обмеженим доступом для користувачів", "en": "A component with restricted user access", "pl": "Komponent z ograniczonym dostępem dla użytkowników", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q28", "order": 28, "difficulty": "beginner",
-      "uk": { "q": "Яка головна перевага функціональних компонентів над класовими?", "exp": "Функціональні компоненти — це просто функції, що повертають JSX. Не потрібно писати class, constructor, this, bind. Код коротший, читабельніший." },
-      "en": { "q": "What is the main advantage of functional components over class components?", "exp": "Functional components are just functions that return JSX. No need to write class, constructor, this, bind. Code is shorter, more readable." },
-      "pl": { "q": "Jaka jest główna zaleta komponentów funkcyjnych nad klasowymi?", "exp": "Komponenty funkcyjne to po prostu funkcje zwracające JSX. Nie trzeba pisać class, constructor, this, bind. Kod jest krótszy, bardziej czytelny." },
-      "answers": [
-        { "uk": "Вони працюють швидше в 10 разів", "en": "They work 10 times faster", "pl": "Działają 10 razy szybciej", "correct": false },
-        { "uk": "Простіший синтаксис, менше boilerplate-коду, легше тестувати", "en": "Simpler syntax, less boilerplate code, easier to test", "pl": "Prostsza składnia, mniej boilerplate'u, łatwiejsze testowanie", "correct": true },
-        { "uk": "Вони підтримують більше методів життєвого циклу", "en": "They support more lifecycle methods", "pl": "Obsługują więcej metod cyklu życia", "correct": false },
-        { "uk": "Тільки функціональні компоненти можуть мати стан", "en": "Only functional components can have state", "pl": "Tylko komponenty funkcyjne mogą mieć stan", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q29", "order": 29, "difficulty": "medium",
-      "uk": { "q": "Що робить React.memo?", "exp": "React.memo(Component) — це HOC, що 'обгортає' функціональний компонент. Якщо props однакові — компонент не ререндериться. Порівнює props поверхнево (shallow)." },
-      "en": { "q": "What does React.memo do?", "exp": "React.memo(Component) is a HOC that 'wraps' a functional component. If props are the same — component doesn't re-render. Compares props shallowly." },
-      "pl": { "q": "Co robi React.memo?", "exp": "React.memo(Component) to HOC, który 'opakowuje' komponent funkcyjny. Jeśli props są takie same — komponent nie renderuje się ponownie. Porównuje props płytko." },
-      "answers": [
-        { "uk": "Додає компонент у пам'ять браузера", "en": "Adds component to browser memory", "pl": "Dodaje komponent do pamięci przeglądarki", "correct": false },
-        { "uk": "Запобігає ререндеру компонента, якщо props не змінились", "en": "Prevents component re-render if props haven't changed", "pl": "Zapobiega ponownemu renderowaniu komponentu, jeśli props się nie zmieniły", "correct": true },
-        { "uk": "Створює мемо-нотатку для розробників", "en": "Creates a memo note for developers", "pl": "Tworzy notatkę memo dla deweloperów", "correct": false },
-        { "uk": "Конвертує класовий компонент у функціональний", "en": "Converts class component to functional", "pl": "Konwertuje komponent klasowy na funkcyjny", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q30", "order": 30, "difficulty": "medium",
-      "uk": { "q": "Що означає 'підняття стану' (Lifting State Up) у React?", "exp": "Коли кільком компонентам потрібен спільний стан — його 'піднімають' до найближчого спільного предка. Батько зберігає стан і передає його через props." },
-      "en": { "q": "What does 'Lifting State Up' mean in React?", "exp": "When multiple components need shared state — it's 'lifted' to the nearest common ancestor. The parent stores the state and passes it via props." },
-      "pl": { "q": "Co oznacza 'podnoszenie stanu' (Lifting State Up) w React?", "exp": "Gdy wiele komponentów potrzebuje wspólnego stanu — jest on 'podnoszony' do najbliższego wspólnego przodka. Rodzic przechowuje stan i przekazuje go przez props." },
-      "answers": [
-        { "uk": "Переміщення стану в глобальну змінну", "en": "Moving state to a global variable", "pl": "Przenoszenie stanu do zmiennej globalnej", "correct": false },
-        { "uk": "Переміщення стану в спільного батьківського компонента для кількох дочірніх", "en": "Moving state to a common parent component for multiple children", "pl": "Przenoszenie stanu do wspólnego komponentu nadrzędnego dla wielu potomnych", "correct": true },
-        { "uk": "Видалення стану з компонента", "en": "Removing state from component", "pl": "Usuwanie stanu z komponentu", "correct": false },
-        { "uk": "Копіювання стану в localStorage", "en": "Copying state to localStorage", "pl": "Kopiowanie stanu do localStorage", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q31", "order": 31, "difficulty": "medium",
-      "uk": { "q": "Який хук відповідає за логіку при монтуванні компонента (аналог componentDidMount)?", "exp": "useEffect(() => { /* код */ }, []) виконується один раз після першого рендеру. Порожній масив залежностей [] — ключова деталь." },
-      "en": { "q": "Which hook handles logic when component mounts (equivalent to componentDidMount)?", "exp": "useEffect(() => { /* code */ }, []) runs once after the first render. Empty dependency array [] is the key detail." },
-      "pl": { "q": "Który hook obsługuje logikę przy montowaniu komponentu (odpowiednik componentDidMount)?", "exp": "useEffect(() => { /* kod */ }, []) wykonuje się raz po pierwszym renderze. Pusta tablica zależności [] to kluczowy szczegół." },
-      "answers": [
-        { "uk": "useState", "en": "useState", "pl": "useState", "correct": false },
-        { "uk": "useEffect з порожнім масивом залежностей []", "en": "useEffect with empty dependency array []", "pl": "useEffect z pustą tablicą zależności []", "correct": true },
-        { "uk": "useRef", "en": "useRef", "pl": "useRef", "correct": false },
-        { "uk": "useCallback", "en": "useCallback", "pl": "useCallback", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q32", "order": 32, "difficulty": "medium",
-      "uk": { "q": "Як виконати код при розмонтуванні компонента (аналог componentWillUnmount)?", "exp": "Функція, яку повертає useEffect, викликається при розмонтуванні. Cleanup важливий для уникнення витоків пам'яті." },
-      "en": { "q": "How to execute code when component unmounts (equivalent to componentWillUnmount)?", "exp": "The function returned by useEffect is called on unmount. Cleanup is important to avoid memory leaks." },
-      "pl": { "q": "Jak wykonać kod przy odmontowaniu komponentu (odpowiednik componentWillUnmount)?", "exp": "Funkcja zwracana przez useEffect jest wywoływana przy odmontowaniu. Cleanup jest ważny, aby uniknąć wycieków pamięci." },
-      "answers": [
-        { "uk": "Викликати useUnmount()", "en": "Call useUnmount()", "pl": "Wywołać useUnmount()", "correct": false },
-        { "uk": "Повернути cleanup-функцію з useEffect", "en": "Return cleanup function from useEffect", "pl": "Zwrócić funkcję cleanup z useEffect", "correct": true },
-        { "uk": "Використати useState з параметром onUnmount", "en": "Use useState with onUnmount parameter", "pl": "Użyć useState z parametrem onUnmount", "correct": false },
-        { "uk": "Це неможливо у функціональних компонентах", "en": "This is impossible in functional components", "pl": "To niemożliwe w komponentach funkcyjnych", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q33", "order": 33, "difficulty": "beginner",
-      "uk": { "q": "Навіщо в React існують <Fragment> або <> </>?", "exp": "React-компонент має повертати один кореневий елемент. <Fragment> (або скорочено <></>) групує елементи 'невидимо', без додаткового DOM-вузла." },
-      "en": { "q": "Why do <Fragment> or <> </> exist in React?", "exp": "A React component must return a single root element. <Fragment> (or short <></>) groups elements 'invisibly', without an extra DOM node." },
-      "pl": { "q": "Po co w React istnieją <Fragment> lub <> </>?", "exp": "Komponent React musi zwracać jeden element główny. <Fragment> (lub skrótowo <></>) grupuje elementy 'niewidocznie', bez dodatkowego węzła DOM." },
-      "answers": [
-        { "uk": "Для створення анімацій", "en": "For creating animations", "pl": "Do tworzenia animacji", "correct": false },
-        { "uk": "Щоб групувати елементи без додавання зайвого DOM-вузла", "en": "To group elements without adding an extra DOM node", "pl": "Aby grupować elementy bez dodawania dodatkowego węzła DOM", "correct": true },
-        { "uk": "Для кешування компонентів", "en": "For caching components", "pl": "Do buforowania komponentów", "correct": false },
-        { "uk": "Для підключення стилів", "en": "For connecting styles", "pl": "Do podłączania stylów", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q34", "order": 34, "difficulty": "advanced",
-      "uk": { "q": "Що дозволяють робити React Portals?", "exp": "createPortal(child, domNode) рендерить компонент у вказаний DOM-вузол, навіть якщо в React-ієрархії він вкладений глибоко. Типове використання: модальні вікна, tooltips." },
-      "en": { "q": "What do React Portals allow you to do?", "exp": "createPortal(child, domNode) renders a component to a specified DOM node, even if it's deeply nested in the React hierarchy. Typical use: modals, tooltips." },
-      "pl": { "q": "Co pozwalają robić React Portals?", "exp": "createPortal(child, domNode) renderuje komponent do określonego węzła DOM, nawet jeśli jest głęboko zagnieżdżony w hierarchii React. Typowe użycie: modale, tooltipy." },
-      "answers": [
-        { "uk": "Переносити компоненти на інший сервер", "en": "Transfer components to another server", "pl": "Przenosić komponenty na inny serwer", "correct": false },
-        { "uk": "Рендерити дочірній компонент в DOM-вузол поза ієрархією батьківського", "en": "Render child component to a DOM node outside the parent hierarchy", "pl": "Renderować komponent potomny do węzła DOM poza hierarchią nadrzędnego", "correct": true },
-        { "uk": "Створювати посилання між сторінками", "en": "Create links between pages", "pl": "Tworzyć linki między stronami", "correct": false },
-        { "uk": "Телепортувати стан між компонентами", "en": "Teleport state between components", "pl": "Teleportować stan między komponentami", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q35", "order": 35, "difficulty": "advanced",
-      "uk": { "q": "Що таке Error Boundary в React?", "exp": "Error Boundary — класовий компонент з методами getDerivedStateFromError() або componentDidCatch(). Він 'ловить' помилки рендерингу і показує fallback UI." },
-      "en": { "q": "What is an Error Boundary in React?", "exp": "Error Boundary is a class component with methods getDerivedStateFromError() or componentDidCatch(). It 'catches' rendering errors and shows fallback UI." },
-      "pl": { "q": "Czym jest Error Boundary w React?", "exp": "Error Boundary to komponent klasowy z metodami getDerivedStateFromError() lub componentDidCatch(). 'Łapie' błędy renderowania i pokazuje fallback UI." },
-      "answers": [
-        { "uk": "Стиль CSS для відображення помилок", "en": "CSS style for displaying errors", "pl": "Styl CSS do wyświetlania błędów", "correct": false },
-        { "uk": "Компонент, який перехоплює JavaScript-помилки в дочірніх компонентах", "en": "A component that catches JavaScript errors in child components", "pl": "Komponent, który przechwytuje błędy JavaScript w komponentach potomnych", "correct": true },
-        { "uk": "Функція для логування помилок на сервер", "en": "A function for logging errors to server", "pl": "Funkcja do logowania błędów na serwer", "correct": false },
-        { "uk": "Middleware для обробки помилок API", "en": "Middleware for handling API errors", "pl": "Middleware do obsługi błędów API", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q36", "order": 36, "difficulty": "medium",
-      "uk": { "q": "Що робить <React.StrictMode>?", "exp": "StrictMode — інструмент для розробки. Викликає деякі функції двічі (щоб виявити side effects), попереджає про застарілі API. В production — не впливає." },
-      "en": { "q": "What does <React.StrictMode> do?", "exp": "StrictMode is a development tool. Calls some functions twice (to detect side effects), warns about deprecated APIs. In production — has no effect." },
-      "pl": { "q": "Co robi <React.StrictMode>?", "exp": "StrictMode to narzędzie deweloperskie. Wywołuje niektóre funkcje dwukrotnie (aby wykryć efekty uboczne), ostrzega o przestarzałych API. W produkcji — nie ma wpływu." },
-      "answers": [
-        { "uk": "Забороняє використання застарілого синтаксису JavaScript", "en": "Forbids using deprecated JavaScript syntax", "pl": "Zabrania używania przestarzałej składni JavaScript", "correct": false },
-        { "uk": "Активує додаткові перевірки і попередження в режимі розробки", "en": "Activates additional checks and warnings in development mode", "pl": "Aktywuje dodatkowe sprawdzenia i ostrzeżenia w trybie deweloperskim", "correct": true },
-        { "uk": "Прискорює рендеринг у production", "en": "Speeds up rendering in production", "pl": "Przyspiesza renderowanie w produkcji", "correct": false },
-        { "uk": "Вимикає всі console.log", "en": "Disables all console.log", "pl": "Wyłącza wszystkie console.log", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q37", "order": 37, "difficulty": "beginner",
-      "uk": { "q": "Для чого використовують React DevTools?", "exp": "React DevTools — розширення для Chrome/Firefox. Показує ієрархію компонентів, дозволяє переглядати і змінювати props/state, профілює рендери." },
-      "en": { "q": "What is React DevTools used for?", "exp": "React DevTools is an extension for Chrome/Firefox. Shows component hierarchy, allows viewing and changing props/state, profiles render performance." },
-      "pl": { "q": "Do czego służy React DevTools?", "exp": "React DevTools to rozszerzenie dla Chrome/Firefox. Pokazuje hierarchię komponentów, pozwala przeglądać i zmieniać props/state, profiluje wydajność renderowania." },
-      "answers": [
-        { "uk": "Для написання коду React", "en": "For writing React code", "pl": "Do pisania kodu React", "correct": false },
-        { "uk": "Для інспектування дерева компонентів, props і state в браузері", "en": "For inspecting component tree, props and state in browser", "pl": "Do inspekcji drzewa komponentów, props i state w przeglądarce", "correct": true },
-        { "uk": "Для деплою React-додатків", "en": "For deploying React applications", "pl": "Do wdrażania aplikacji React", "correct": false },
-        { "uk": "Для генерації компонентів", "en": "For generating components", "pl": "Do generowania komponentów", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q38", "order": 38, "difficulty": "advanced",
-      "uk": { "q": "Яка головна перевага Server-Side Rendering для React-додатків?", "exp": "SSR генерує HTML на сервері. Пошукові боти бачать контент одразу (важливо для SEO). Користувач швидше бачить сторінку. Next.js — популярний SSR-фреймворк." },
-      "en": { "q": "What is the main advantage of Server-Side Rendering for React apps?", "exp": "SSR generates HTML on the server. Search bots see content immediately (important for SEO). User sees the page faster. Next.js is a popular SSR framework." },
-      "pl": { "q": "Jaka jest główna zaleta Server-Side Rendering dla aplikacji React?", "exp": "SSR generuje HTML na serwerze. Boty wyszukiwarek widzą treść natychmiast (ważne dla SEO). Użytkownik szybciej widzi stronę. Next.js to popularny framework SSR." },
-      "answers": [
-        { "uk": "Простіший код компонентів", "en": "Simpler component code", "pl": "Prostszy kod komponentów", "correct": false },
-        { "uk": "Краще SEO і швидше перше відображення сторінки", "en": "Better SEO and faster first page render", "pl": "Lepsze SEO i szybsze pierwsze wyświetlenie strony", "correct": true },
-        { "uk": "Менше коду JavaScript", "en": "Less JavaScript code", "pl": "Mniej kodu JavaScript", "correct": false },
-        { "uk": "Автоматичне кешування даних", "en": "Automatic data caching", "pl": "Automatyczne buforowanie danych", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q39", "order": 39, "difficulty": "advanced",
-      "uk": { "q": "Що привніс React 18 у роботу з рендерингом?", "exp": "Concurrent Mode дозволяє React 'призупиняти' менш важливі оновлення. Нові API: useTransition, useDeferredValue, автоматичний batching setState." },
-      "en": { "q": "What did React 18 introduce for rendering?", "exp": "Concurrent Mode allows React to 'pause' less important updates. New APIs: useTransition, useDeferredValue, automatic setState batching." },
-      "pl": { "q": "Co React 18 wprowadził dla renderowania?", "exp": "Concurrent Mode pozwala React 'wstrzymywać' mniej ważne aktualizacje. Nowe API: useTransition, useDeferredValue, automatyczny batching setState." },
-      "answers": [
-        { "uk": "Заборонив класові компоненти", "en": "Banned class components", "pl": "Zakazał komponentów klasowych", "correct": false },
-        { "uk": "Concurrent Rendering — можливість переривати і пріоритезувати оновлення", "en": "Concurrent Rendering — ability to interrupt and prioritize updates", "pl": "Concurrent Rendering — możliwość przerywania i priorytetyzacji aktualizacji", "correct": true },
-        { "uk": "Новий синтаксис JSX", "en": "New JSX syntax", "pl": "Nowa składnia JSX", "correct": false },
-        { "uk": "Вбудовану підтримку TypeScript", "en": "Built-in TypeScript support", "pl": "Wbudowaną obsługę TypeScript", "correct": false }
-      ]
-    },
-    {
-      "id": "react-q40", "order": 40, "difficulty": "beginner",
-      "uk": { "q": "Що рекомендується використовувати замість Create React App (CRA) для нових проєктів?", "exp": "CRA став deprecated у 2025. Альтернативи: Vite (для SPA), React Router (для маршрутизації), Next.js (для SSR, SEO, production-ready)." },
-      "en": { "q": "What is recommended instead of Create React App (CRA) for new projects?", "exp": "CRA became deprecated in 2025. Alternatives: Vite (for SPAs), React Router (for routing), Next.js (for SSR, SEO, production-ready)." },
-      "pl": { "q": "Co jest zalecane zamiast Create React App (CRA) dla nowych projektów?", "exp": "CRA został zdeprecjonowany w 2025. Alternatywy: Vite (dla SPA), React Router (dla routingu), Next.js (dla SSR, SEO, production-ready)." },
-      "answers": [
-        { "uk": "Тільки ванільний JavaScript без інструментів", "en": "Only vanilla JavaScript without tools", "pl": "Tylko czysty JavaScript bez narzędzi", "correct": false },
-        { "uk": "Next.js, Vite або React Router (залежно від потреб)", "en": "Next.js, Vite or React Router (depending on needs)", "pl": "Next.js, Vite lub React Router (w zależności od potrzeb)", "correct": true },
-        { "uk": "jQuery", "en": "jQuery", "pl": "jQuery", "correct": false },
-        { "uk": "CRA досі рекомендований варіант", "en": "CRA is still the recommended option", "pl": "CRA wciąż jest zalecaną opcją", "correct": false }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/vue/beginner_medium/seed-quiz-vue.ts b/json/quizzes/vue/beginner_medium/seed-quiz-vue.ts
deleted file mode 100644
index 0758e189..00000000
--- a/json/quizzes/vue/beginner_medium/seed-quiz-vue.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import { eq } from 'drizzle-orm';
-import { readFileSync } from 'fs';
-import { join } from 'path';
-import { db } from './index';
-import { categories } from './schema/categories';
-import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
-  quizAnswers,
-  quizAnswerTranslations,
-  quizAttempts,
-} from './schema/quiz';
-
-type Locale = 'uk' | 'en' | 'pl';
-const LOCALES: Locale[] = ['uk', 'en', 'pl'];
-
-interface QuestionData {
-  id: string;
-  order: number;
-  difficulty: 'beginner' | 'medium' | 'advanced';
-  uk: { q: string; exp: string };
-  en: { q: string; exp: string };
-  pl: { q: string; exp: string };
-  answers: {
-    uk: string;
-    en: string;
-    pl: string;
-    correct: boolean;
-  }[];
-}
-
-interface QuizPartData {
-  questions: QuestionData[];
-}
-
-const CATEGORY_SLUG = 'vue';
-
-const QUIZ_METADATA = {
-  slug: 'vue-fundamentals',
-  questionsCount: 40,
-  timeLimitSeconds: 1800,
-  translations: {
-    uk: {
-      title: 'Основи Vue.js',
-      description: 'Перевірте свої знання базових концепцій Vue.js: компоненти, реактивність, директиви, Composition API, Vue Router, Pinia та життєвий цикл.',
-    },
-    en: {
-      title: 'Vue.js Fundamentals',
-      description: 'Test your knowledge of Vue.js basics: components, reactivity, directives, Composition API, Vue Router, Pinia, and lifecycle.',
-    },
-    pl: {
-      title: 'Podstawy Vue.js',
-      description: 'Sprawdź swoją wiedzę o podstawach Vue.js: komponenty, reaktywność, dyrektywy, Composition API, Vue Router, Pinia i cykl życia.',
-    },
-  },
-};
-
-function createExplanation(text: string) {
-  return [{ type: 'paragraph' as const, children: [{ text }] }];
-}
-
-async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'data', `vue-quiz-part${partNumber}.json`);
-  const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
-  return partData.questions;
-}
-
-async function ensureQuizExists(): Promise<string> {
-  console.log('Ensuring quiz exists...');
-
-  const [category] = await db
-    .select()
-    .from(categories)
-    .where(eq(categories.slug, CATEGORY_SLUG))
-    .limit(1);
-
-  if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
-  }
-
-  const existing = await db.query.quizzes.findFirst({
-    where: eq(quizzes.slug, QUIZ_METADATA.slug),
-  });
-
-  if (existing) {
-    const existingAttempt = await db.query.quizAttempts.findFirst({
-      where: eq(quizAttempts.quizId, existing.id),
-    });
-    if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
-    }
-
-    await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 1,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
-
-    const quizId = existing.id;
-    for (const locale of LOCALES) {
-      await db.insert(quizTranslations).values({
-        quizId,
-        locale,
-        title: QUIZ_METADATA.translations[locale].title,
-        description: QUIZ_METADATA.translations[locale].description,
-      });
-    }
-
-    return quizId;
-  }
-
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 1,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
-
-  for (const locale of LOCALES) {
-    await db.insert(quizTranslations).values({
-      quizId: quiz.id,
-      locale,
-      title: QUIZ_METADATA.translations[locale].title,
-      description: QUIZ_METADATA.translations[locale].description,
-    });
-  }
-
-  return quiz.id;
-}
-
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
-
-  for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
-
-    for (const locale of LOCALES) {
-      await db.insert(quizQuestionContent).values({
-        quizQuestionId: q.id,
-        locale,
-        questionText: question[locale].q,
-        explanation: createExplanation(question[locale].exp),
-      });
-    }
-
-    for (let i = 0; i < question.answers.length; i++) {
-      const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
-
-      for (const locale of LOCALES) {
-        await db.insert(quizAnswerTranslations).values({
-          quizAnswerId: a.id,
-          locale,
-          answerText: answer[locale],
-        });
-      }
-    }
-  }
-
-  console.log(`Part ${partNumber} completed (${questions.length} questions)`);
-}
-
-async function seedQuizFromJson() {
-  const args = process.argv.slice(2);
-  const partArg = args[0];
-
-  if (!partArg) {
-    console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-vue.ts <part-number>');
-    console.log('Example: npx tsx db/seeds/seed-quiz-vue.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-vue.ts all');
-    process.exit(1);
-  }
-
-  console.log('Starting Vue.js quiz seed...\n');
-
-  try {
-    const quizId = await ensureQuizExists();
-
-    if (partArg.toLowerCase() === 'all') {
-      console.log('Uploading all parts...\n');
-      let totalQuestions = 0;
-
-      for (let i = 1; i <= 4; i++) {
-        const questions = await loadQuestions(i);
-        await seedQuestions(questions, quizId, i);
-        totalQuestions += questions.length;
-      }
-
-      console.log('\nAll parts seeded successfully!');
-      console.log(`   - 1 quiz with ${LOCALES.length} translations`);
-      console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
-    } else {
-      const partNumber = parseInt(partArg, 10);
-
-      if (isNaN(partNumber) || partNumber < 1 || partNumber > 4) {
-        console.error('Error: Part number must be between 1 and 4');
-        process.exit(1);
-      }
-
-      const questions = await loadQuestions(partNumber);
-      await seedQuestions(questions, quizId, partNumber);
-
-      console.log('\nPart seeded successfully!');
-      console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
-      console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
-    }
-  } catch (error) {
-    console.error('\nError seeding quiz:', error);
-    throw error;
-  }
-}
-
-seedQuizFromJson()
-  .then(() => process.exit(0))
-  .catch((error) => {
-    console.error(error);
-    process.exit(1);
-  });
diff --git a/json/quizzes/vue/beginner_medium/vue-quiz-part1.json b/json/quizzes/vue/beginner_medium/vue-quiz-part1.json
deleted file mode 100644
index ff54f5b8..00000000
--- a/json/quizzes/vue/beginner_medium/vue-quiz-part1.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "vue-q01",
-      "order": 1,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке Vue.js?",
-        "exp": "Vue.js — це прогресивний JavaScript-фреймворк для створення інтерфейсів користувача з реактивністю, легкою інтеграцією та потужною екосистемою."
-      },
-      "en": {
-        "q": "What is Vue.js?",
-        "exp": "Vue.js is a progressive JavaScript framework for building user interfaces with reactivity, easy integration, and a powerful ecosystem."
-      },
-      "pl": {
-        "q": "Czym jest Vue.js?",
-        "exp": "Vue.js to progresywny framework JavaScript do tworzenia interfejsów użytkownika z reaktywnością, łatwą integracją i potężnym ekosystemem."
-      },
-      "answers": [
-        {
-          "uk": "Бібліотека для роботи з базами даних",
-          "en": "A library for working with databases",
-          "pl": "Biblioteka do pracy z bazami danych",
-          "correct": false
-        },
-        {
-          "uk": "Прогресивний JavaScript-фреймворк для створення інтерфейсів користувача",
-          "en": "A progressive JavaScript framework for building user interfaces",
-          "pl": "Progresywny framework JavaScript do tworzenia interfejsów użytkownika",
-          "correct": true
-        },
-        {
-          "uk": "Серверна мова програмування",
-          "en": "A server-side programming language",
-          "pl": "Serwerowy język programowania",
-          "correct": false
-        },
-        {
-          "uk": "CSS-препроцесор для стилізації",
-          "en": "A CSS preprocessor for styling",
-          "pl": "Preprocesor CSS do stylizacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q02",
-      "order": 2,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка команда використовується для створення нового Vue.js проєкту з офіційним CLI?",
-        "exp": "Команда npm create vue@latest запускає офіційний CLI create-vue для створення нового проєкту з можливістю обрати TypeScript, Router, Pinia тощо."
-      },
-      "en": {
-        "q": "Which command is used to create a new Vue.js project with the official CLI?",
-        "exp": "The command npm create vue@latest runs the official create-vue CLI to create a new project with options for TypeScript, Router, Pinia, etc."
-      },
-      "pl": {
-        "q": "Jakiego polecenia używa się do utworzenia nowego projektu Vue.js za pomocą oficjalnego CLI?",
-        "exp": "Polecenie npm create vue@latest uruchamia oficjalne CLI create-vue do tworzenia nowego projektu z opcjami TypeScript, Router, Pinia itp."
-      },
-      "answers": [
-        {
-          "uk": "vue init app",
-          "en": "vue init app",
-          "pl": "vue init app",
-          "correct": false
-        },
-        {
-          "uk": "npm create vue@latest",
-          "en": "npm create vue@latest",
-          "pl": "npm create vue@latest",
-          "correct": true
-        },
-        {
-          "uk": "npx create-react-app",
-          "en": "npx create-react-app",
-          "pl": "npx create-react-app",
-          "correct": false
-        },
-        {
-          "uk": "npm start vue",
-          "en": "npm start vue",
-          "pl": "npm start vue",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q03",
-      "order": 3,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Який хук життєвого циклу викликається після того, як компонент вставлено в DOM?",
-        "exp": "Хук onMounted (або mounted в Options API) викликається після монтування компонента в DOM і дозволяє виконувати операції з DOM або запити до API."
-      },
-      "en": {
-        "q": "Which lifecycle hook is called after the component is inserted into the DOM?",
-        "exp": "The onMounted hook (or mounted in Options API) is called after the component is mounted to the DOM and allows DOM operations or API requests."
-      },
-      "pl": {
-        "q": "Który hook cyklu życia jest wywoływany po wstawieniu komponentu do DOM?",
-        "exp": "Hook onMounted (lub mounted w Options API) jest wywoływany po zamontowaniu komponentu w DOM i pozwala na operacje DOM lub żądania API."
-      },
-      "answers": [
-        {
-          "uk": "onBeforeMount",
-          "en": "onBeforeMount",
-          "pl": "onBeforeMount",
-          "correct": false
-        },
-        {
-          "uk": "onMounted",
-          "en": "onMounted",
-          "pl": "onMounted",
-          "correct": true
-        },
-        {
-          "uk": "onCreated",
-          "en": "onCreated",
-          "pl": "onCreated",
-          "correct": false
-        },
-        {
-          "uk": "onUpdated",
-          "en": "onUpdated",
-          "pl": "onUpdated",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q04",
-      "order": 4,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що таке компоненти у Vue.js?",
-        "exp": "Компоненти — це повторно використовувані ізольовані блоки інтерфейсу з власною логікою, шаблоном і стилями, які можна реєструвати локально або глобально."
-      },
-      "en": {
-        "q": "What are components in Vue.js?",
-        "exp": "Components are reusable isolated UI blocks with their own logic, template, and styles that can be registered locally or globally."
-      },
-      "pl": {
-        "q": "Czym są komponenty w Vue.js?",
-        "exp": "Komponenty to wielokrotnie używane, izolowane bloki UI z własną logiką, szablonem i stylami, które można rejestrować lokalnie lub globalnie."
-      },
-      "answers": [
-        {
-          "uk": "Глобальні змінні для зберігання стану",
-          "en": "Global variables for storing state",
-          "pl": "Zmienne globalne do przechowywania stanu",
-          "correct": false
-        },
-        {
-          "uk": "Повторно використовувані ізольовані блоки інтерфейсу з логікою, шаблоном і стилями",
-          "en": "Reusable isolated UI blocks with logic, template, and styles",
-          "pl": "Wielokrotnie używane izolowane bloki UI z logiką, szablonem i stylami",
-          "correct": true
-        },
-        {
-          "uk": "Функції для обробки HTTP-запитів",
-          "en": "Functions for handling HTTP requests",
-          "pl": "Funkcje do obsługi żądań HTTP",
-          "correct": false
-        },
-        {
-          "uk": "CSS-класи для стилізації елементів",
-          "en": "CSS classes for styling elements",
-          "pl": "Klasy CSS do stylizacji elementów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q05",
-      "order": 5,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка директива використовується для двосторонньої прив'язки даних у Vue.js?",
-        "exp": "Директива v-model створює двосторонню прив'язку між станом компонента та елементом форми, автоматично синхронізуючи дані."
-      },
-      "en": {
-        "q": "Which directive is used for two-way data binding in Vue.js?",
-        "exp": "The v-model directive creates two-way binding between component state and form elements, automatically synchronizing data."
-      },
-      "pl": {
-        "q": "Której dyrektywy używa się do dwukierunkowego wiązania danych w Vue.js?",
-        "exp": "Dyrektywa v-model tworzy dwukierunkowe wiązanie między stanem komponentu a elementami formularza, automatycznie synchronizując dane."
-      },
-      "answers": [
-        {
-          "uk": "v-bind",
-          "en": "v-bind",
-          "pl": "v-bind",
-          "correct": false
-        },
-        {
-          "uk": "v-on",
-          "en": "v-on",
-          "pl": "v-on",
-          "correct": false
-        },
-        {
-          "uk": "v-model",
-          "en": "v-model",
-          "pl": "v-model",
-          "correct": true
-        },
-        {
-          "uk": "v-for",
-          "en": "v-for",
-          "pl": "v-for",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q06",
-      "order": 6,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як створюється екземпляр Vue у Vue 3?",
-        "exp": "У Vue 3 екземпляр створюється через функцію createApp(), яка є коренем застосунку і керує реактивними даними, методами та рендерингом."
-      },
-      "en": {
-        "q": "How is a Vue instance created in Vue 3?",
-        "exp": "In Vue 3, an instance is created using the createApp() function, which is the root of the application and manages reactive data, methods, and rendering."
-      },
-      "pl": {
-        "q": "Jak tworzy się instancję Vue w Vue 3?",
-        "exp": "W Vue 3 instancję tworzy się za pomocą funkcji createApp(), która jest korzeniem aplikacji i zarządza reaktywnymi danymi, metodami i renderowaniem."
-      },
-      "answers": [
-        {
-          "uk": "new Vue()",
-          "en": "new Vue()",
-          "pl": "new Vue()",
-          "correct": false
-        },
-        {
-          "uk": "createApp()",
-          "en": "createApp()",
-          "pl": "createApp()",
-          "correct": true
-        },
-        {
-          "uk": "Vue.init()",
-          "en": "Vue.init()",
-          "pl": "Vue.init()",
-          "correct": false
-        },
-        {
-          "uk": "initVue()",
-          "en": "initVue()",
-          "pl": "initVue()",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q07",
-      "order": 7,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке віртуальний DOM у Vue.js і навіщо він потрібен?",
-        "exp": "Віртуальний DOM — це легка копія реального DOM, яку Vue використовує для порівняння (diffing) і мінімального оновлення тільки змінених частин."
-      },
-      "en": {
-        "q": "What is the Virtual DOM in Vue.js and why is it needed?",
-        "exp": "The Virtual DOM is a lightweight copy of the real DOM that Vue uses for diffing and minimally updating only the changed parts."
-      },
-      "pl": {
-        "q": "Czym jest wirtualny DOM w Vue.js i po co jest potrzebny?",
-        "exp": "Wirtualny DOM to lekka kopia prawdziwego DOM, którą Vue używa do porównywania (diffing) i minimalnej aktualizacji tylko zmienionych części."
-      },
-      "answers": [
-        {
-          "uk": "Це база даних для зберігання стану компонентів",
-          "en": "It's a database for storing component state",
-          "pl": "To baza danych do przechowywania stanu komponentów",
-          "correct": false
-        },
-        {
-          "uk": "Це легка копія DOM для порівняння і мінімального оновлення змінених частин",
-          "en": "It's a lightweight DOM copy for diffing and minimally updating changed parts",
-          "pl": "To lekka kopia DOM do porównywania i minimalnej aktualizacji zmienionych części",
-          "correct": true
-        },
-        {
-          "uk": "Це окремий браузерний рушій",
-          "en": "It's a separate browser engine",
-          "pl": "To oddzielny silnik przeglądarki",
-          "correct": false
-        },
-        {
-          "uk": "Це CSS-фреймворк для стилізації",
-          "en": "It's a CSS framework for styling",
-          "pl": "To framework CSS do stylizacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q08",
-      "order": 8,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка директива використовується для умовного рендерингу в Vue.js?",
-        "exp": "Директива v-if додає або видаляє елемент з DOM залежно від умови. Також існують v-else-if та v-else для складніших умов."
-      },
-      "en": {
-        "q": "Which directive is used for conditional rendering in Vue.js?",
-        "exp": "The v-if directive adds or removes an element from the DOM based on a condition. There are also v-else-if and v-else for more complex conditions."
-      },
-      "pl": {
-        "q": "Której dyrektywy używa się do warunkowego renderowania w Vue.js?",
-        "exp": "Dyrektywa v-if dodaje lub usuwa element z DOM na podstawie warunku. Istnieją również v-else-if i v-else dla bardziej złożonych warunków."
-      },
-      "answers": [
-        {
-          "uk": "v-show",
-          "en": "v-show",
-          "pl": "v-show",
-          "correct": false
-        },
-        {
-          "uk": "v-if",
-          "en": "v-if",
-          "pl": "v-if",
-          "correct": true
-        },
-        {
-          "uk": "v-for",
-          "en": "v-for",
-          "pl": "v-for",
-          "correct": false
-        },
-        {
-          "uk": "v-render",
-          "en": "v-render",
-          "pl": "v-render",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q09",
-      "order": 9,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як прив'язати обробник кліку до кнопки у Vue.js?",
-        "exp": "Директива v-on:click або скорочено @click прив'язує обробник події до елемента. Наприклад: @click=\"handleClick\"."
-      },
-      "en": {
-        "q": "How do you bind a click handler to a button in Vue.js?",
-        "exp": "The v-on:click directive or shorthand @click binds an event handler to an element. For example: @click=\"handleClick\"."
-      },
-      "pl": {
-        "q": "Jak powiązać handler kliknięcia z przyciskiem w Vue.js?",
-        "exp": "Dyrektywa v-on:click lub skrót @click wiąże handler zdarzenia z elementem. Na przykład: @click=\"handleClick\"."
-      },
-      "answers": [
-        {
-          "uk": "onclick=\"handleClick\"",
-          "en": "onclick=\"handleClick\"",
-          "pl": "onclick=\"handleClick\"",
-          "correct": false
-        },
-        {
-          "uk": "@click=\"handleClick\" або v-on:click=\"handleClick\"",
-          "en": "@click=\"handleClick\" or v-on:click=\"handleClick\"",
-          "pl": "@click=\"handleClick\" lub v-on:click=\"handleClick\"",
-          "correct": true
-        },
-        {
-          "uk": "v-bind:click=\"handleClick\"",
-          "en": "v-bind:click=\"handleClick\"",
-          "pl": "v-bind:click=\"handleClick\"",
-          "correct": false
-        },
-        {
-          "uk": ":click=\"handleClick\"",
-          "en": ":click=\"handleClick\"",
-          "pl": ":click=\"handleClick\"",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q10",
-      "order": 10,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Де визначаються функції для обробки подій у Options API?",
-        "exp": "У Options API функції визначаються в об'єкті methods компонента. Вони мають доступ до this для взаємодії зі станом."
-      },
-      "en": {
-        "q": "Where are event handling functions defined in the Options API?",
-        "exp": "In the Options API, functions are defined in the methods object of the component. They have access to this for interacting with state."
-      },
-      "pl": {
-        "q": "Gdzie definiuje się funkcje obsługi zdarzeń w Options API?",
-        "exp": "W Options API funkcje definiuje się w obiekcie methods komponentu. Mają dostęp do this do interakcji ze stanem."
-      },
-      "answers": [
-        {
-          "uk": "В об'єкті data",
-          "en": "In the data object",
-          "pl": "W obiekcie data",
-          "correct": false
-        },
-        {
-          "uk": "В об'єкті methods",
-          "en": "In the methods object",
-          "pl": "W obiekcie methods",
-          "correct": true
-        },
-        {
-          "uk": "В об'єкті computed",
-          "en": "In the computed object",
-          "pl": "W obiekcie computed",
-          "correct": false
-        },
-        {
-          "uk": "В об'єкті watch",
-          "en": "In the watch object",
-          "pl": "W obiekcie watch",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/vue/beginner_medium/vue-quiz-part2.json b/json/quizzes/vue/beginner_medium/vue-quiz-part2.json
deleted file mode 100644
index 621228ba..00000000
--- a/json/quizzes/vue/beginner_medium/vue-quiz-part2.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "vue-q11",
-      "order": 11,
-      "difficulty": "medium",
-      "uk": {
-        "q": "У чому різниця між v-bind і v-model у Vue.js?",
-        "exp": "v-bind — одностороння прив'язка даних до атрибутів чи пропсів, v-model — двостороння прив'язка, яка синхронізує дані між станом і елементом форми."
-      },
-      "en": {
-        "q": "What is the difference between v-bind and v-model in Vue.js?",
-        "exp": "v-bind is one-way binding of data to attributes or props, v-model is two-way binding that synchronizes data between state and form elements."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między v-bind a v-model w Vue.js?",
-        "exp": "v-bind to jednokierunkowe wiązanie danych z atrybutami lub propsami, v-model to dwukierunkowe wiązanie synchronizujące dane między stanem a elementami formularza."
-      },
-      "answers": [
-        {
-          "uk": "v-bind працює тільки з компонентами, v-model — тільки з HTML",
-          "en": "v-bind only works with components, v-model only with HTML",
-          "pl": "v-bind działa tylko z komponentami, v-model tylko z HTML",
-          "correct": false
-        },
-        {
-          "uk": "v-bind — одностороння прив'язка, v-model — двостороння прив'язка",
-          "en": "v-bind is one-way binding, v-model is two-way binding",
-          "pl": "v-bind to wiązanie jednokierunkowe, v-model to wiązanie dwukierunkowe",
-          "correct": true
-        },
-        {
-          "uk": "Це синоніми з однаковою функціональністю",
-          "en": "They are synonyms with the same functionality",
-          "pl": "To synonimy o tej samej funkcjonalności",
-          "correct": false
-        },
-        {
-          "uk": "v-model швидший за v-bind",
-          "en": "v-model is faster than v-bind",
-          "pl": "v-model jest szybszy niż v-bind",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q12",
-      "order": 12,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке computed властивості у Vue.js?",
-        "exp": "Computed — це властивості, які обчислюються на основі реактивних даних і кешуються, доки їхні залежності не зміняться."
-      },
-      "en": {
-        "q": "What are computed properties in Vue.js?",
-        "exp": "Computed properties are calculated based on reactive data and cached until their dependencies change."
-      },
-      "pl": {
-        "q": "Czym są właściwości computed w Vue.js?",
-        "exp": "Właściwości computed są obliczane na podstawie reaktywnych danych i cachowane, dopóki ich zależności się nie zmienią."
-      },
-      "answers": [
-        {
-          "uk": "Функції, які виконуються при кожному рендері",
-          "en": "Functions that execute on every render",
-          "pl": "Funkcje wykonywane przy każdym renderze",
-          "correct": false
-        },
-        {
-          "uk": "Властивості, що обчислюються на основі реактивних даних і кешуються",
-          "en": "Properties calculated based on reactive data and cached",
-          "pl": "Właściwości obliczane na podstawie reaktywnych danych i cachowane",
-          "correct": true
-        },
-        {
-          "uk": "Статичні константи компонента",
-          "en": "Static component constants",
-          "pl": "Statyczne stałe komponentu",
-          "correct": false
-        },
-        {
-          "uk": "Методи для асинхронних операцій",
-          "en": "Methods for asynchronous operations",
-          "pl": "Metody do operacji asynchronicznych",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q13",
-      "order": 13,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка основна відмінність між computed і methods у Vue.js?",
-        "exp": "Computed кешуються і перевираховуються тільки при зміні залежностей, methods виконуються щоразу при виклику."
-      },
-      "en": {
-        "q": "What is the main difference between computed and methods in Vue.js?",
-        "exp": "Computed properties are cached and recalculated only when dependencies change, methods execute every time they are called."
-      },
-      "pl": {
-        "q": "Jaka jest główna różnica między computed a methods w Vue.js?",
-        "exp": "Właściwości computed są cachowane i przeliczane tylko przy zmianie zależności, methods wykonują się za każdym wywołaniem."
-      },
-      "answers": [
-        {
-          "uk": "computed можуть приймати аргументи, methods — ні",
-          "en": "computed can accept arguments, methods cannot",
-          "pl": "computed mogą przyjmować argumenty, methods nie",
-          "correct": false
-        },
-        {
-          "uk": "computed кешуються і перевираховуються при зміні залежностей, methods виконуються щоразу",
-          "en": "computed are cached and recalculate on dependency change, methods execute every time",
-          "pl": "computed są cachowane i przeliczane przy zmianie zależności, methods wykonują się za każdym razem",
-          "correct": true
-        },
-        {
-          "uk": "methods швидші за computed",
-          "en": "methods are faster than computed",
-          "pl": "methods są szybsze niż computed",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q14",
-      "order": 14,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Для чого використовуються watchers (спостерігачі) у Vue.js?",
-        "exp": "Watch використовується для відстеження змін у реактивних даних і виконання побічних ефектів, як-от API-запити або збереження у localStorage."
-      },
-      "en": {
-        "q": "What are watchers used for in Vue.js?",
-        "exp": "Watch is used to track changes in reactive data and perform side effects like API requests or saving to localStorage."
-      },
-      "pl": {
-        "q": "Do czego służą watchery (obserwatorzy) w Vue.js?",
-        "exp": "Watch służy do śledzenia zmian w reaktywnych danych i wykonywania efektów ubocznych, jak żądania API czy zapis do localStorage."
-      },
-      "answers": [
-        {
-          "uk": "Для кешування обчислених значень",
-          "en": "For caching computed values",
-          "pl": "Do cachowania obliczonych wartości",
-          "correct": false
-        },
-        {
-          "uk": "Для відстеження змін у даних і виконання побічних ефектів",
-          "en": "For tracking data changes and performing side effects",
-          "pl": "Do śledzenia zmian w danych i wykonywania efektów ubocznych",
-          "correct": true
-        },
-        {
-          "uk": "Для реєстрації глобальних компонентів",
-          "en": "For registering global components",
-          "pl": "Do rejestracji globalnych komponentów",
-          "correct": false
-        },
-        {
-          "uk": "Для стилізації компонентів",
-          "en": "For styling components",
-          "pl": "Do stylizacji komponentów",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q15",
-      "order": 15,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Як передати дані від батьківського компонента до дочірнього у Vue.js?",
-        "exp": "Дані передаються через props — властивості, які оголошуються у дочірньому компоненті і передаються як атрибути з батьківського."
-      },
-      "en": {
-        "q": "How do you pass data from a parent component to a child in Vue.js?",
-        "exp": "Data is passed through props — properties declared in the child component and passed as attributes from the parent."
-      },
-      "pl": {
-        "q": "Jak przekazać dane z komponentu nadrzędnego do potomnego w Vue.js?",
-        "exp": "Dane przekazuje się przez props — właściwości deklarowane w komponencie potomnym i przekazywane jako atrybuty z nadrzędnego."
-      },
-      "answers": [
-        {
-          "uk": "Через глобальні змінні",
-          "en": "Through global variables",
-          "pl": "Przez zmienne globalne",
-          "correct": false
-        },
-        {
-          "uk": "Через props",
-          "en": "Through props",
-          "pl": "Przez props",
-          "correct": true
-        },
-        {
-          "uk": "Через localStorage",
-          "en": "Through localStorage",
-          "pl": "Przez localStorage",
-          "correct": false
-        },
-        {
-          "uk": "Через URL-параметри",
-          "en": "Through URL parameters",
-          "pl": "Przez parametry URL",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q16",
-      "order": 16,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке prop drilling і як його уникнути у Vue.js?",
-        "exp": "Prop drilling — це передача даних через багато рівнів компонентів. Уникнути можна через provide/inject або Pinia для глобального стану."
-      },
-      "en": {
-        "q": "What is prop drilling and how can you avoid it in Vue.js?",
-        "exp": "Prop drilling is passing data through many component levels. It can be avoided using provide/inject or Pinia for global state."
-      },
-      "pl": {
-        "q": "Czym jest prop drilling i jak go uniknąć w Vue.js?",
-        "exp": "Prop drilling to przekazywanie danych przez wiele poziomów komponentów. Można go uniknąć używając provide/inject lub Pinia dla stanu globalnego."
-      },
-      "answers": [
-        {
-          "uk": "Оптимізація рендерингу, уникають через v-memo",
-          "en": "Rendering optimization, avoided with v-memo",
-          "pl": "Optymalizacja renderingu, unikana przez v-memo",
-          "correct": false
-        },
-        {
-          "uk": "Передача даних через багато рівнів компонентів, уникають через provide/inject або Pinia",
-          "en": "Passing data through many component levels, avoided with provide/inject or Pinia",
-          "pl": "Przekazywanie danych przez wiele poziomów komponentów, unikane przez provide/inject lub Pinia",
-          "correct": true
-        },
-        {
-          "uk": "Помилка компіляції шаблону",
-          "en": "Template compilation error",
-          "pl": "Błąd kompilacji szablonu",
-          "correct": false
-        },
-        {
-          "uk": "Витік пам'яті у компонентах",
-          "en": "Memory leak in components",
-          "pl": "Wyciek pamięci w komponentach",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q17",
-      "order": 17,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке слоти (slots) у Vue.js?",
-        "exp": "Слоти дозволяють передавати вміст від батьківського компонента в дочірній у визначене місце шаблону для гнучкої композиції."
-      },
-      "en": {
-        "q": "What are slots in Vue.js?",
-        "exp": "Slots allow passing content from a parent component to a child at a designated place in the template for flexible composition."
-      },
-      "pl": {
-        "q": "Czym są sloty w Vue.js?",
-        "exp": "Sloty pozwalają przekazywać treść z komponentu nadrzędnego do potomnego w wyznaczone miejsce szablonu dla elastycznej kompozycji."
-      },
-      "answers": [
-        {
-          "uk": "Методи для обробки подій",
-          "en": "Methods for handling events",
-          "pl": "Metody do obsługi zdarzeń",
-          "correct": false
-        },
-        {
-          "uk": "Місця у шаблоні для передачі вмісту від батьківського компонента",
-          "en": "Places in the template for passing content from the parent component",
-          "pl": "Miejsca w szablonie do przekazywania treści z komponentu nadrzędnego",
-          "correct": true
-        },
-        {
-          "uk": "Хуки життєвого циклу",
-          "en": "Lifecycle hooks",
-          "pl": "Hooki cyklu życia",
-          "correct": false
-        },
-        {
-          "uk": "Директиви для анімацій",
-          "en": "Directives for animations",
-          "pl": "Dyrektywy do animacji",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q18",
-      "order": 18,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як дочірній компонент може надіслати дані батьківському у Vue.js?",
-        "exp": "Дочірній компонент використовує $emit для надсилання подій з даними, які батьківський компонент слухає через @eventName."
-      },
-      "en": {
-        "q": "How can a child component send data to its parent in Vue.js?",
-        "exp": "The child component uses $emit to send events with data that the parent listens to via @eventName."
-      },
-      "pl": {
-        "q": "Jak komponent potomny może wysłać dane do nadrzędnego w Vue.js?",
-        "exp": "Komponent potomny używa $emit do wysyłania zdarzeń z danymi, których komponent nadrzędny nasłuchuje przez @eventName."
-      },
-      "answers": [
-        {
-          "uk": "Через props",
-          "en": "Through props",
-          "pl": "Przez props",
-          "correct": false
-        },
-        {
-          "uk": "Через $emit і події",
-          "en": "Through $emit and events",
-          "pl": "Przez $emit i zdarzenia",
-          "correct": true
-        },
-        {
-          "uk": "Через глобальний store",
-          "en": "Through global store",
-          "pl": "Przez globalny store",
-          "correct": false
-        },
-        {
-          "uk": "Напряму змінюючи стан батька",
-          "en": "By directly changing parent state",
-          "pl": "Bezpośrednio zmieniając stan rodzica",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q19",
-      "order": 19,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Яка директива використовується для рендерингу списків у Vue.js?",
-        "exp": "Директива v-for ітерує по масиву або об'єкту і рендерить елемент для кожного пункту. Обов'язково використовуйте :key для оптимізації."
-      },
-      "en": {
-        "q": "Which directive is used for rendering lists in Vue.js?",
-        "exp": "The v-for directive iterates over an array or object and renders an element for each item. Always use :key for optimization."
-      },
-      "pl": {
-        "q": "Której dyrektywy używa się do renderowania list w Vue.js?",
-        "exp": "Dyrektywa v-for iteruje po tablicy lub obiekcie i renderuje element dla każdego elementu. Zawsze używaj :key do optymalizacji."
-      },
-      "answers": [
-        {
-          "uk": "v-list",
-          "en": "v-list",
-          "pl": "v-list",
-          "correct": false
-        },
-        {
-          "uk": "v-for",
-          "en": "v-for",
-          "pl": "v-for",
-          "correct": true
-        },
-        {
-          "uk": "v-each",
-          "en": "v-each",
-          "pl": "v-each",
-          "correct": false
-        },
-        {
-          "uk": "v-repeat",
-          "en": "v-repeat",
-          "pl": "v-repeat",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q20",
-      "order": 20,
-      "difficulty": "medium",
-      "uk": {
-        "q": "У чому різниця між v-if і v-show у Vue.js?",
-        "exp": "v-if додає/видаляє елемент з DOM, v-show лише змінює display: none. Використовуйте v-show для частого перемикання видимості."
-      },
-      "en": {
-        "q": "What is the difference between v-if and v-show in Vue.js?",
-        "exp": "v-if adds/removes the element from DOM, v-show only toggles display: none. Use v-show for frequent visibility toggling."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między v-if a v-show w Vue.js?",
-        "exp": "v-if dodaje/usuwa element z DOM, v-show tylko zmienia display: none. Używaj v-show do częstego przełączania widoczności."
-      },
-      "answers": [
-        {
-          "uk": "v-if працює з компонентами, v-show — з HTML",
-          "en": "v-if works with components, v-show with HTML",
-          "pl": "v-if działa z komponentami, v-show z HTML",
-          "correct": false
-        },
-        {
-          "uk": "v-if додає/видаляє елемент з DOM, v-show змінює CSS display",
-          "en": "v-if adds/removes element from DOM, v-show changes CSS display",
-          "pl": "v-if dodaje/usuwa element z DOM, v-show zmienia CSS display",
-          "correct": true
-        },
-        {
-          "uk": "v-show швидший для першого рендерингу",
-          "en": "v-show is faster for initial rendering",
-          "pl": "v-show jest szybszy dla początkowego renderowania",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/vue/beginner_medium/vue-quiz-part3.json b/json/quizzes/vue/beginner_medium/vue-quiz-part3.json
deleted file mode 100644
index 6b571daa..00000000
--- a/json/quizzes/vue/beginner_medium/vue-quiz-part3.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "vue-q21",
-      "order": 21,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Vue Router і для чого він використовується?",
-        "exp": "Vue Router — офіційна бібліотека маршрутизації для створення SPA з багатьма сторінками без перезавантаження, з підтримкою динамічних маршрутів і guard'ів."
-      },
-      "en": {
-        "q": "What is Vue Router and what is it used for?",
-        "exp": "Vue Router is the official routing library for creating SPAs with multiple pages without reload, supporting dynamic routes and guards."
-      },
-      "pl": {
-        "q": "Czym jest Vue Router i do czego służy?",
-        "exp": "Vue Router to oficjalna biblioteka routingu do tworzenia SPA z wieloma stronami bez przeładowania, wspierająca dynamiczne trasy i guardy."
-      },
-      "answers": [
-        {
-          "uk": "Бібліотека для управління станом",
-          "en": "A state management library",
-          "pl": "Biblioteka do zarządzania stanem",
-          "correct": false
-        },
-        {
-          "uk": "Офіційна бібліотека маршрутизації для SPA",
-          "en": "The official routing library for SPAs",
-          "pl": "Oficjalna biblioteka routingu dla SPA",
-          "correct": true
-        },
-        {
-          "uk": "Фреймворк для тестування",
-          "en": "A testing framework",
-          "pl": "Framework do testowania",
-          "correct": false
-        },
-        {
-          "uk": "CSS-фреймворк",
-          "en": "A CSS framework",
-          "pl": "Framework CSS",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q22",
-      "order": 22,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як створити динамічний маршрут у Vue Router?",
-        "exp": "Динамічний маршрут створюється з параметром у шляху, наприклад: path: '/user/:id'. Доступ до параметра через route.params.id."
-      },
-      "en": {
-        "q": "How do you create a dynamic route in Vue Router?",
-        "exp": "A dynamic route is created with a parameter in the path, e.g.: path: '/user/:id'. Access the parameter via route.params.id."
-      },
-      "pl": {
-        "q": "Jak utworzyć dynamiczną trasę w Vue Router?",
-        "exp": "Dynamiczną trasę tworzy się z parametrem w ścieżce, np.: path: '/user/:id'. Dostęp do parametru przez route.params.id."
-      },
-      "answers": [
-        {
-          "uk": "path: '/user/*'",
-          "en": "path: '/user/*'",
-          "pl": "path: '/user/*'",
-          "correct": false
-        },
-        {
-          "uk": "path: '/user/:id'",
-          "en": "path: '/user/:id'",
-          "pl": "path: '/user/:id'",
-          "correct": true
-        },
-        {
-          "uk": "path: '/user/{id}'",
-          "en": "path: '/user/{id}'",
-          "pl": "path: '/user/{id}'",
-          "correct": false
-        },
-        {
-          "uk": "path: '/user/[id]'",
-          "en": "path: '/user/[id]'",
-          "pl": "path: '/user/[id]'",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q23",
-      "order": 23,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Vuex і які його основні концепції?",
-        "exp": "Vuex — бібліотека глобального стану з концепціями: state (дані), getters (обчислені), mutations (синхронні зміни), actions (асинхронна логіка), modules."
-      },
-      "en": {
-        "q": "What is Vuex and what are its core concepts?",
-        "exp": "Vuex is a global state library with concepts: state (data), getters (computed), mutations (sync changes), actions (async logic), modules."
-      },
-      "pl": {
-        "q": "Czym jest Vuex i jakie są jego podstawowe koncepcje?",
-        "exp": "Vuex to biblioteka globalnego stanu z koncepcjami: state (dane), getters (obliczone), mutations (zmiany sync), actions (logika async), modules."
-      },
-      "answers": [
-        {
-          "uk": "Бібліотека маршрутизації з концепціями routes, guards, params",
-          "en": "A routing library with routes, guards, params concepts",
-          "pl": "Biblioteka routingu z koncepcjami routes, guards, params",
-          "correct": false
-        },
-        {
-          "uk": "Бібліотека стану з концепціями state, getters, mutations, actions, modules",
-          "en": "A state library with state, getters, mutations, actions, modules concepts",
-          "pl": "Biblioteka stanu z koncepcjami state, getters, mutations, actions, modules",
-          "correct": true
-        },
-        {
-          "uk": "UI-бібліотека компонентів",
-          "en": "A UI component library",
-          "pl": "Biblioteka komponentów UI",
-          "correct": false
-        },
-        {
-          "uk": "Фреймворк для серверного рендерингу",
-          "en": "A server-side rendering framework",
-          "pl": "Framework do renderowania po stronie serwera",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q24",
-      "order": 24,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між mutations і actions у Vuex?",
-        "exp": "Mutations — синхронні методи для зміни state. Actions — асинхронна логіка (API-запити), яка в кінці викликає mutations."
-      },
-      "en": {
-        "q": "What is the difference between mutations and actions in Vuex?",
-        "exp": "Mutations are synchronous methods for changing state. Actions are async logic (API requests) that eventually call mutations."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między mutations a actions w Vuex?",
-        "exp": "Mutations to synchroniczne metody do zmiany state. Actions to logika async (żądania API), która ostatecznie wywołuje mutations."
-      },
-      "answers": [
-        {
-          "uk": "Mutations для великих змін, actions для малих",
-          "en": "Mutations for big changes, actions for small ones",
-          "pl": "Mutations do dużych zmian, actions do małych",
-          "correct": false
-        },
-        {
-          "uk": "Mutations — синхронні зміни стану, actions — асинхронна логіка",
-          "en": "Mutations are sync state changes, actions are async logic",
-          "pl": "Mutations to sync zmiany stanu, actions to logika async",
-          "correct": true
-        },
-        {
-          "uk": "Actions швидші за mutations",
-          "en": "Actions are faster than mutations",
-          "pl": "Actions są szybsze niż mutations",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q25",
-      "order": 25,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Pinia і як вона відрізняється від Vuex?",
-        "exp": "Pinia — офіційна заміна Vuex у Vue 3, легша, з кращою TypeScript-підтримкою, без mutations (тільки state, getters, actions)."
-      },
-      "en": {
-        "q": "What is Pinia and how does it differ from Vuex?",
-        "exp": "Pinia is the official Vuex replacement in Vue 3, lighter, with better TypeScript support, no mutations (only state, getters, actions)."
-      },
-      "pl": {
-        "q": "Czym jest Pinia i czym różni się od Vuex?",
-        "exp": "Pinia to oficjalny zamiennik Vuex w Vue 3, lżejszy, z lepszym wsparciem TypeScript, bez mutations (tylko state, getters, actions)."
-      },
-      "answers": [
-        {
-          "uk": "Pinia — це бібліотека маршрутизації",
-          "en": "Pinia is a routing library",
-          "pl": "Pinia to biblioteka routingu",
-          "correct": false
-        },
-        {
-          "uk": "Pinia — легша заміна Vuex з кращою TypeScript-підтримкою",
-          "en": "Pinia is a lighter Vuex replacement with better TypeScript support",
-          "pl": "Pinia to lżejszy zamiennik Vuex z lepszym wsparciem TypeScript",
-          "correct": true
-        },
-        {
-          "uk": "Pinia і Vuex ідентичні",
-          "en": "Pinia and Vuex are identical",
-          "pl": "Pinia i Vuex są identyczne",
-          "correct": false
-        },
-        {
-          "uk": "Pinia тільки для Vue 2",
-          "en": "Pinia is only for Vue 2",
-          "pl": "Pinia jest tylko dla Vue 2",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q26",
-      "order": 26,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке mixins у Vue.js і яка їх головна проблема?",
-        "exp": "Mixins — механізм повторного використання логіки між компонентами. Головна проблема — конфлікти імен і важко відстежити джерело логіки."
-      },
-      "en": {
-        "q": "What are mixins in Vue.js and what is their main problem?",
-        "exp": "Mixins are a mechanism for reusing logic between components. The main problem is name conflicts and difficulty tracking logic source."
-      },
-      "pl": {
-        "q": "Czym są mixiny w Vue.js i jaki jest ich główny problem?",
-        "exp": "Mixiny to mechanizm wielokrotnego użycia logiki między komponentami. Główny problem to konflikty nazw i trudność w śledzeniu źródła logiki."
-      },
-      "answers": [
-        {
-          "uk": "Стилі компонентів, проблема — важко перевизначити",
-          "en": "Component styles, problem — hard to override",
-          "pl": "Style komponentów, problem — trudne do nadpisania",
-          "correct": false
-        },
-        {
-          "uk": "Механізм повторного використання логіки, проблема — конфлікти імен",
-          "en": "Logic reuse mechanism, problem — name conflicts",
-          "pl": "Mechanizm wielokrotnego użycia logiki, problem — konflikty nazw",
-          "correct": true
-        },
-        {
-          "uk": "Хуки життєвого циклу, проблема — повільні",
-          "en": "Lifecycle hooks, problem — slow",
-          "pl": "Hooki cyklu życia, problem — wolne",
-          "correct": false
-        },
-        {
-          "uk": "Директиви Vue, проблема — несумісність",
-          "en": "Vue directives, problem — incompatibility",
-          "pl": "Dyrektywy Vue, problem — niekompatybilność",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q27",
-      "order": 27,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як створити кастомну директиву у Vue 3?",
-        "exp": "Кастомна директива створюється через app.directive('name', { mounted(el) {...} }) і використовується як v-name у шаблоні."
-      },
-      "en": {
-        "q": "How do you create a custom directive in Vue 3?",
-        "exp": "A custom directive is created via app.directive('name', { mounted(el) {...} }) and used as v-name in the template."
-      },
-      "pl": {
-        "q": "Jak utworzyć własną dyrektywę w Vue 3?",
-        "exp": "Własną dyrektywę tworzy się przez app.directive('name', { mounted(el) {...} }) i używa jako v-name w szablonie."
-      },
-      "answers": [
-        {
-          "uk": "Vue.createDirective('name', handler)",
-          "en": "Vue.createDirective('name', handler)",
-          "pl": "Vue.createDirective('name', handler)",
-          "correct": false
-        },
-        {
-          "uk": "app.directive('name', { mounted(el) {...} })",
-          "en": "app.directive('name', { mounted(el) {...} })",
-          "pl": "app.directive('name', { mounted(el) {...} })",
-          "correct": true
-        },
-        {
-          "uk": "new Directive('name', handler)",
-          "en": "new Directive('name', handler)",
-          "pl": "new Directive('name', handler)",
-          "correct": false
-        },
-        {
-          "uk": "defineDirective('name', handler)",
-          "en": "defineDirective('name', handler)",
-          "pl": "defineDirective('name', handler)",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q28",
-      "order": 28,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке provide/inject у Vue.js?",
-        "exp": "provide/inject дозволяють передавати дані від батьківського компонента до будь-якого нащадка без props, уникаючи prop drilling."
-      },
-      "en": {
-        "q": "What is provide/inject in Vue.js?",
-        "exp": "provide/inject allows passing data from a parent component to any descendant without props, avoiding prop drilling."
-      },
-      "pl": {
-        "q": "Czym jest provide/inject w Vue.js?",
-        "exp": "provide/inject pozwala przekazywać dane z komponentu nadrzędnego do dowolnego potomka bez props, unikając prop drilling."
-      },
-      "answers": [
-        {
-          "uk": "Методи для роботи з API",
-          "en": "Methods for working with API",
-          "pl": "Metody do pracy z API",
-          "correct": false
-        },
-        {
-          "uk": "Механізм передачі даних від батька до нащадків без props",
-          "en": "Mechanism for passing data from parent to descendants without props",
-          "pl": "Mechanizm przekazywania danych od rodzica do potomków bez props",
-          "correct": true
-        },
-        {
-          "uk": "Хуки для асинхронних операцій",
-          "en": "Hooks for async operations",
-          "pl": "Hooki do operacji asynchronicznych",
-          "correct": false
-        },
-        {
-          "uk": "Директиви для форм",
-          "en": "Directives for forms",
-          "pl": "Dyrektywy do formularzy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q29",
-      "order": 29,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Composition API і чим він відрізняється від Options API?",
-        "exp": "Composition API — новий спосіб організації логіки через setup() з ref, reactive, computed. Логіка однієї фічі зберігається разом, на відміну від Options API."
-      },
-      "en": {
-        "q": "What is the Composition API and how does it differ from Options API?",
-        "exp": "Composition API is a new way to organize logic via setup() with ref, reactive, computed. Logic for one feature stays together, unlike Options API."
-      },
-      "pl": {
-        "q": "Czym jest Composition API i czym różni się od Options API?",
-        "exp": "Composition API to nowy sposób organizacji logiki przez setup() z ref, reactive, computed. Logika jednej funkcji jest razem, w przeciwieństwie do Options API."
-      },
-      "answers": [
-        {
-          "uk": "Composition API — це бібліотека компонентів",
-          "en": "Composition API is a component library",
-          "pl": "Composition API to biblioteka komponentów",
-          "correct": false
-        },
-        {
-          "uk": "Composition API організує логіку через setup(), логіка фічі зберігається разом",
-          "en": "Composition API organizes logic via setup(), feature logic stays together",
-          "pl": "Composition API organizuje logikę przez setup(), logika funkcji jest razem",
-          "correct": true
-        },
-        {
-          "uk": "Options API новіший за Composition API",
-          "en": "Options API is newer than Composition API",
-          "pl": "Options API jest nowszy niż Composition API",
-          "correct": false
-        },
-        {
-          "uk": "Вони ідентичні",
-          "en": "They are identical",
-          "pl": "Są identyczne",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q30",
-      "order": 30,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка різниця між ref і reactive у Vue 3?",
-        "exp": "ref використовується для примітивів (доступ через .value), reactive — для об'єктів і масивів (прямий доступ до властивостей)."
-      },
-      "en": {
-        "q": "What is the difference between ref and reactive in Vue 3?",
-        "exp": "ref is used for primitives (access via .value), reactive is for objects and arrays (direct property access)."
-      },
-      "pl": {
-        "q": "Jaka jest różnica między ref a reactive w Vue 3?",
-        "exp": "ref używa się dla prymitywów (dostęp przez .value), reactive dla obiektów i tablic (bezpośredni dostęp do właściwości)."
-      },
-      "answers": [
-        {
-          "uk": "ref швидший за reactive",
-          "en": "ref is faster than reactive",
-          "pl": "ref jest szybszy niż reactive",
-          "correct": false
-        },
-        {
-          "uk": "ref для примітивів (через .value), reactive для об'єктів (прямий доступ)",
-          "en": "ref for primitives (via .value), reactive for objects (direct access)",
-          "pl": "ref dla prymitywów (przez .value), reactive dla obiektów (bezpośredni dostęp)",
-          "correct": true
-        },
-        {
-          "uk": "reactive тільки для масивів",
-          "en": "reactive is only for arrays",
-          "pl": "reactive jest tylko dla tablic",
-          "correct": false
-        },
-        {
-          "uk": "Різниці немає",
-          "en": "There is no difference",
-          "pl": "Nie ma różnicy",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}
diff --git a/json/quizzes/vue/beginner_medium/vue-quiz-part4.json b/json/quizzes/vue/beginner_medium/vue-quiz-part4.json
deleted file mode 100644
index 54bc4fa1..00000000
--- a/json/quizzes/vue/beginner_medium/vue-quiz-part4.json
+++ /dev/null
@@ -1,434 +0,0 @@
-{
-  "questions": [
-    {
-      "id": "vue-q31",
-      "order": 31,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Single File Component (SFC) у Vue.js?",
-        "exp": "SFC — це компонент у файлі .vue з трьома секціями: template (розмітка), script (логіка), style (стилі, можуть бути scoped)."
-      },
-      "en": {
-        "q": "What is a Single File Component (SFC) in Vue.js?",
-        "exp": "SFC is a component in a .vue file with three sections: template (markup), script (logic), style (styles, can be scoped)."
-      },
-      "pl": {
-        "q": "Czym jest Single File Component (SFC) w Vue.js?",
-        "exp": "SFC to komponent w pliku .vue z trzema sekcjami: template (znaczniki), script (logika), style (style, mogą być scoped)."
-      },
-      "answers": [
-        {
-          "uk": "JavaScript-модуль з експортом функцій",
-          "en": "A JavaScript module with function exports",
-          "pl": "Moduł JavaScript z eksportowanymi funkcjami",
-          "correct": false
-        },
-        {
-          "uk": "Компонент у файлі .vue з секціями template, script, style",
-          "en": "A component in a .vue file with template, script, style sections",
-          "pl": "Komponent w pliku .vue z sekcjami template, script, style",
-          "correct": true
-        },
-        {
-          "uk": "CSS-файл зі стилями компонента",
-          "en": "A CSS file with component styles",
-          "pl": "Plik CSS ze stylami komponentu",
-          "correct": false
-        },
-        {
-          "uk": "JSON-конфігурація компонента",
-          "en": "A JSON component configuration",
-          "pl": "Konfiguracja komponentu w JSON",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q32",
-      "order": 32,
-      "difficulty": "beginner",
-      "uk": {
-        "q": "Що робить атрибут scoped у тегу style у Vue SFC?",
-        "exp": "Атрибут scoped обмежує CSS-стилі тільки поточним компонентом, додаючи унікальні атрибути до елементів і селекторів."
-      },
-      "en": {
-        "q": "What does the scoped attribute do in a Vue SFC style tag?",
-        "exp": "The scoped attribute limits CSS styles to only the current component by adding unique attributes to elements and selectors."
-      },
-      "pl": {
-        "q": "Co robi atrybut scoped w tagu style w Vue SFC?",
-        "exp": "Atrybut scoped ogranicza style CSS tylko do bieżącego komponentu, dodając unikalne atrybuty do elementów i selektorów."
-      },
-      "answers": [
-        {
-          "uk": "Робить стилі глобальними",
-          "en": "Makes styles global",
-          "pl": "Czyni style globalnymi",
-          "correct": false
-        },
-        {
-          "uk": "Обмежує стилі тільки поточним компонентом",
-          "en": "Limits styles to only the current component",
-          "pl": "Ogranicza style tylko do bieżącego komponentu",
-          "correct": true
-        },
-        {
-          "uk": "Видаляє стилі при unmount",
-          "en": "Removes styles on unmount",
-          "pl": "Usuwa style przy unmount",
-          "correct": false
-        },
-        {
-          "uk": "Кешує стилі для швидкодії",
-          "en": "Caches styles for performance",
-          "pl": "Cachuje style dla wydajności",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q33",
-      "order": 33,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Які нові можливості з'явились у Vue 3?",
-        "exp": "Vue 3 додав Composition API, Teleport, Fragments (кілька кореневих елементів), Suspense, покращену TypeScript-підтримку та меншій бандл."
-      },
-      "en": {
-        "q": "What new features were added in Vue 3?",
-        "exp": "Vue 3 added Composition API, Teleport, Fragments (multiple root elements), Suspense, improved TypeScript support, and smaller bundle."
-      },
-      "pl": {
-        "q": "Jakie nowe funkcje dodano w Vue 3?",
-        "exp": "Vue 3 dodał Composition API, Teleport, Fragments (wiele elementów głównych), Suspense, ulepszone wsparcie TypeScript i mniejszy bundle."
-      },
-      "answers": [
-        {
-          "uk": "Тільки покращення продуктивності",
-          "en": "Only performance improvements",
-          "pl": "Tylko ulepszenia wydajności",
-          "correct": false
-        },
-        {
-          "uk": "Composition API, Teleport, Fragments, Suspense, краща TypeScript-підтримка",
-          "en": "Composition API, Teleport, Fragments, Suspense, better TypeScript support",
-          "pl": "Composition API, Teleport, Fragments, Suspense, lepsze wsparcie TypeScript",
-          "correct": true
-        },
-        {
-          "uk": "Vuex вбудований у ядро",
-          "en": "Vuex built into the core",
-          "pl": "Vuex wbudowany w rdzeń",
-          "correct": false
-        },
-        {
-          "uk": "Видалено реактивність",
-          "en": "Reactivity removed",
-          "pl": "Usunięto reaktywność",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q34",
-      "order": 34,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Teleport у Vue 3?",
-        "exp": "Teleport дозволяє рендерити елементи у будь-яке місце DOM поза ієрархією компонента, корисно для модальних вікон і тултіпів."
-      },
-      "en": {
-        "q": "What is Teleport in Vue 3?",
-        "exp": "Teleport allows rendering elements to any place in the DOM outside the component hierarchy, useful for modals and tooltips."
-      },
-      "pl": {
-        "q": "Czym jest Teleport w Vue 3?",
-        "exp": "Teleport pozwala renderować elementy w dowolnym miejscu DOM poza hierarchią komponentu, przydatne dla modali i tooltipów."
-      },
-      "answers": [
-        {
-          "uk": "Метод навігації між сторінками",
-          "en": "A method for page navigation",
-          "pl": "Metoda nawigacji między stronami",
-          "correct": false
-        },
-        {
-          "uk": "Компонент для рендерингу елементів у будь-яке місце DOM",
-          "en": "A component for rendering elements to any place in the DOM",
-          "pl": "Komponent do renderowania elementów w dowolnym miejscu DOM",
-          "correct": true
-        },
-        {
-          "uk": "Бібліотека анімацій",
-          "en": "An animation library",
-          "pl": "Biblioteka animacji",
-          "correct": false
-        },
-        {
-          "uk": "Інструмент для дебагу",
-          "en": "A debugging tool",
-          "pl": "Narzędzie do debugowania",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q35",
-      "order": 35,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Навіщо потрібен атрибут key при рендерингу списків у Vue.js?",
-        "exp": "key допомагає Vue ідентифікувати елементи при оновленні DOM, забезпечуючи ефективний diffing і правильне відстеження стану елементів."
-      },
-      "en": {
-        "q": "Why is the key attribute needed when rendering lists in Vue.js?",
-        "exp": "key helps Vue identify elements during DOM updates, ensuring efficient diffing and correct tracking of element state."
-      },
-      "pl": {
-        "q": "Po co potrzebny jest atrybut key przy renderowaniu list w Vue.js?",
-        "exp": "key pomaga Vue identyfikować elementy podczas aktualizacji DOM, zapewniając efektywny diffing i prawidłowe śledzenie stanu elementów."
-      },
-      "answers": [
-        {
-          "uk": "Для стилізації елементів",
-          "en": "For styling elements",
-          "pl": "Do stylizacji elementów",
-          "correct": false
-        },
-        {
-          "uk": "Для ідентифікації елементів і ефективного оновлення DOM",
-          "en": "For identifying elements and efficient DOM updates",
-          "pl": "Do identyfikacji elementów i efektywnej aktualizacji DOM",
-          "correct": true
-        },
-        {
-          "uk": "Для валідації даних",
-          "en": "For data validation",
-          "pl": "Do walidacji danych",
-          "correct": false
-        },
-        {
-          "uk": "Для сортування списку",
-          "en": "For sorting the list",
-          "pl": "Do sortowania listy",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q36",
-      "order": 36,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Vue DevTools і для чого вони використовуються?",
-        "exp": "Vue DevTools — розширення браузера для дебагу Vue-застосунків: інспекція компонентів, стану, подій, Vuex/Pinia та time-travel debugging."
-      },
-      "en": {
-        "q": "What is Vue DevTools and what is it used for?",
-        "exp": "Vue DevTools is a browser extension for debugging Vue apps: inspecting components, state, events, Vuex/Pinia, and time-travel debugging."
-      },
-      "pl": {
-        "q": "Czym jest Vue DevTools i do czego służy?",
-        "exp": "Vue DevTools to rozszerzenie przeglądarki do debugowania aplikacji Vue: inspekcja komponentów, stanu, zdarzeń, Vuex/Pinia i time-travel debugging."
-      },
-      "answers": [
-        {
-          "uk": "IDE для розробки Vue",
-          "en": "An IDE for Vue development",
-          "pl": "IDE do rozwoju Vue",
-          "correct": false
-        },
-        {
-          "uk": "Розширення браузера для дебагу Vue-застосунків",
-          "en": "A browser extension for debugging Vue apps",
-          "pl": "Rozszerzenie przeglądarki do debugowania aplikacji Vue",
-          "correct": true
-        },
-        {
-          "uk": "Фреймворк для тестування",
-          "en": "A testing framework",
-          "pl": "Framework do testowania",
-          "correct": false
-        },
-        {
-          "uk": "Бібліотека UI-компонентів",
-          "en": "A UI component library",
-          "pl": "Biblioteka komponentów UI",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q37",
-      "order": 37,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як працює компонент transition у Vue.js?",
-        "exp": "Компонент <transition> автоматично додає CSS-класи (v-enter, v-leave тощо) на різних етапах анімації при вставці/видаленні елементів."
-      },
-      "en": {
-        "q": "How does the transition component work in Vue.js?",
-        "exp": "The <transition> component automatically adds CSS classes (v-enter, v-leave, etc.) at different animation stages during element insert/removal."
-      },
-      "pl": {
-        "q": "Jak działa komponent transition w Vue.js?",
-        "exp": "Komponent <transition> automatycznie dodaje klasy CSS (v-enter, v-leave itp.) na różnych etapach animacji podczas wstawiania/usuwania elementów."
-      },
-      "answers": [
-        {
-          "uk": "Виконує JavaScript-анімації напряму",
-          "en": "Executes JavaScript animations directly",
-          "pl": "Wykonuje animacje JavaScript bezpośrednio",
-          "correct": false
-        },
-        {
-          "uk": "Автоматично додає CSS-класи на етапах анімації",
-          "en": "Automatically adds CSS classes at animation stages",
-          "pl": "Automatycznie dodaje klasy CSS na etapach animacji",
-          "correct": true
-        },
-        {
-          "uk": "Замінює елементи без анімації",
-          "en": "Replaces elements without animation",
-          "pl": "Zastępuje elementy bez animacji",
-          "correct": false
-        },
-        {
-          "uk": "Працює тільки з SVG",
-          "en": "Works only with SVG",
-          "pl": "Działa tylko z SVG",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q38",
-      "order": 38,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Що таке Nuxt.js і як він пов'язаний з Vue.js?",
-        "exp": "Nuxt.js — фреймворк на базі Vue.js для SSR (серверний рендеринг), SSG (статична генерація), з вбудованим роутингом і структурою проєкту."
-      },
-      "en": {
-        "q": "What is Nuxt.js and how is it related to Vue.js?",
-        "exp": "Nuxt.js is a Vue.js-based framework for SSR (server-side rendering), SSG (static site generation), with built-in routing and project structure."
-      },
-      "pl": {
-        "q": "Czym jest Nuxt.js i jak jest powiązany z Vue.js?",
-        "exp": "Nuxt.js to framework oparty na Vue.js dla SSR (renderowanie po stronie serwera), SSG (generacja statyczna), z wbudowanym routingiem i strukturą projektu."
-      },
-      "answers": [
-        {
-          "uk": "Альтернатива Vue.js",
-          "en": "An alternative to Vue.js",
-          "pl": "Alternatywa dla Vue.js",
-          "correct": false
-        },
-        {
-          "uk": "Фреймворк на базі Vue.js для SSR і SSG",
-          "en": "A Vue.js-based framework for SSR and SSG",
-          "pl": "Framework oparty na Vue.js dla SSR i SSG",
-          "correct": true
-        },
-        {
-          "uk": "Бібліотека для тестування Vue",
-          "en": "A testing library for Vue",
-          "pl": "Biblioteka do testowania Vue",
-          "correct": false
-        },
-        {
-          "uk": "CSS-фреймворк для Vue",
-          "en": "A CSS framework for Vue",
-          "pl": "Framework CSS dla Vue",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q39",
-      "order": 39,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Як створити computed властивість з геттером і сеттером у Vue 3?",
-        "exp": "Передайте об'єкт з методами get() і set() у функцію computed(): computed({ get() {...}, set(val) {...} })."
-      },
-      "en": {
-        "q": "How do you create a computed property with getter and setter in Vue 3?",
-        "exp": "Pass an object with get() and set() methods to the computed() function: computed({ get() {...}, set(val) {...} })."
-      },
-      "pl": {
-        "q": "Jak utworzyć właściwość computed z getterem i setterem w Vue 3?",
-        "exp": "Przekaż obiekt z metodami get() i set() do funkcji computed(): computed({ get() {...}, set(val) {...} })."
-      },
-      "answers": [
-        {
-          "uk": "computed(() => value, (val) => {...})",
-          "en": "computed(() => value, (val) => {...})",
-          "pl": "computed(() => value, (val) => {...})",
-          "correct": false
-        },
-        {
-          "uk": "computed({ get() {...}, set(val) {...} })",
-          "en": "computed({ get() {...}, set(val) {...} })",
-          "pl": "computed({ get() {...}, set(val) {...} })",
-          "correct": true
-        },
-        {
-          "uk": "computed.withSetter(() => value)",
-          "en": "computed.withSetter(() => value)",
-          "pl": "computed.withSetter(() => value)",
-          "correct": false
-        },
-        {
-          "uk": "Це неможливо у Vue 3",
-          "en": "This is not possible in Vue 3",
-          "pl": "To niemożliwe w Vue 3",
-          "correct": false
-        }
-      ]
-    },
-    {
-      "id": "vue-q40",
-      "order": 40,
-      "difficulty": "medium",
-      "uk": {
-        "q": "Яка техніка використовується для зменшення розміру бандла у Vue.js?",
-        "exp": "Lazy loading (ліниве завантаження) через динамічний import() дозволяє завантажувати компоненти та маршрути тільки коли вони потрібні."
-      },
-      "en": {
-        "q": "What technique is used to reduce bundle size in Vue.js?",
-        "exp": "Lazy loading through dynamic import() allows loading components and routes only when they are needed."
-      },
-      "pl": {
-        "q": "Jaka technika jest używana do zmniejszenia rozmiaru bundle w Vue.js?",
-        "exp": "Lazy loading (leniwe ładowanie) przez dynamiczny import() pozwala ładować komponenty i trasy tylko wtedy, gdy są potrzebne."
-      },
-      "answers": [
-        {
-          "uk": "Видалення всіх коментарів",
-          "en": "Removing all comments",
-          "pl": "Usuwanie wszystkich komentarzy",
-          "correct": false
-        },
-        {
-          "uk": "Lazy loading через динамічний import()",
-          "en": "Lazy loading through dynamic import()",
-          "pl": "Lazy loading przez dynamiczny import()",
-          "correct": true
-        },
-        {
-          "uk": "Використання тільки inline-стилів",
-          "en": "Using only inline styles",
-          "pl": "Używanie tylko stylów inline",
-          "correct": false
-        },
-        {
-          "uk": "Відмова від TypeScript",
-          "en": "Abandoning TypeScript",
-          "pl": "Rezygnacja z TypeScript",
-          "correct": false
-        }
-      ]
-    }
-  ]
-}

From 2afb6818d18d3d6e79f10e787cea4f87c7675462 Mon Sep 17 00:00:00 2001
From: Viktor Svertoka <victor.svertoka@gmail.com>
Date: Sun, 1 Feb 2026 23:20:29 +0200
Subject: [PATCH 15/24] chore(release): v0.5.2

---
 CHANGELOG.md               | 53 +++++++++++++++++++++++++++++++
 frontend/package-lock.json | 64 +++++++++++++++++++-------------------
 frontend/package.json      |  2 +-
 studio/package-lock.json   | 16 +++++-----
 studio/package.json        |  2 +-
 5 files changed, 95 insertions(+), 42 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd17b32d..c1a640b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -253,3 +253,56 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 - Improved stability of text selection detection for AI helper
 - Fixed social icon hover styles in dark mode
 - Reduced visual overlap issues on small mobile screens
+
+## [0.5.2] - 2026-02-01
+
+### Added
+
+- About page enhancements:
+  - Refreshed Features and Pricing sections with clearer messaging
+  - Interactive particle-based backgrounds with reduced-motion support
+  - New reusable UI components: ParticleCanvas, GradientBadge, SectionHeading
+  - Improved mobile responsiveness and layout stability
+- Blog improvements:
+  - Pagination support for blog listing
+  - Dynamic grid backgrounds across blog pages
+  - Featured post CTA in blog hero
+  - Author filtering via URL with adaptive header behavior
+- AI Word Helper updates:
+  - Improved error handling with simplified retry UX
+  - Backend refactor for Vercel compatibility
+  - Rate limiting enforcement for AI explanation endpoint
+- Caching & performance:
+  - Upstash Redis cache for Q&A (cache-aside strategy)
+  - Robust cache parsing and invalidation handling
+- Infrastructure & tooling:
+  - Netlify deployment configuration updates
+  - Redis environment variable support
+  - CodeRabbit automated review configuration
+
+### Changed
+
+- Home page UI refinements:
+  - Refactored Hero section into reusable components
+  - Improved primary CTA button styling and interactions
+  - Updated card layouts and online users counter visuals
+- Blog experience refined:
+  - Improved text formatting and rendering consistency
+  - Better search, filtering, and pagination UX
+- Shop UI updates:
+  - Unified storefront styles across components
+  - Improved checkout flow state handling
+  - Added metadata across shop routes for better SEO
+- Default locale changed from `uk` to `en` with safer type validation
+- Internal refactors:
+  - Codebase cleanup and structural simplification
+  - Improved cache initialization and error handling
+
+### Fixed
+
+- Fixed blog text formatting and latest post image rendering
+- Resolved layout centering issues on Leaderboard
+- Fixed social icon hover styles in dark mode
+- Improved stability of text selection detection for AI helper
+- Fixed locale duplication and routing edge cases
+- Reduced visual overlap issues on small mobile screens
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index edaa9272..03972cb6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "frontend",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "0.5.1",
+      "version": "0.5.2",
       "dependencies": {
         "@neondatabase/serverless": "^1.0.2",
         "@portabletext/react": "^5.0.0",
@@ -1228,21 +1228,21 @@
       }
     },
     "node_modules/@formatjs/ecma402-abstract": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-3.1.0.tgz",
-      "integrity": "sha512-CjP1sUzM7XiQW6YluDreN+dMvcKZysO/J4ikvuDjDyd6nSOoSqAK9gvD1s75ZFaJVXtYOsz+y3CUXPZ1sKxcxw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-3.1.1.tgz",
+      "integrity": "sha512-jhZbTwda+2tcNrs4kKvxrPLPjx8QsBCLCUgrrJ/S+G9YrGHWLhAyFMMBHJBnBoOwuLHd7L14FgYudviKaxkO2Q==",
       "license": "MIT",
       "dependencies": {
         "@formatjs/fast-memoize": "3.1.0",
-        "@formatjs/intl-localematcher": "0.8.0",
+        "@formatjs/intl-localematcher": "0.8.1",
         "decimal.js": "^10.6.0",
         "tslib": "^2.8.1"
       }
     },
     "node_modules/@formatjs/ecma402-abstract/node_modules/@formatjs/intl-localematcher": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.8.0.tgz",
-      "integrity": "sha512-zgMYWdUlmEZpX2Io+v3LHrfq9xZ6khpQVf9UAw2xYWhGerGgI9XgH1HvL/A34jWiruUJpYlP5pk4g8nIcaDrXQ==",
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.8.1.tgz",
+      "integrity": "sha512-xwEuwQFdtSq1UKtQnyTZWC+eHdv7Uygoa+H2k/9uzBVQjDyp9r20LNDNKedWXll7FssT3GRHvqsdJGYSUWqYFA==",
       "license": "MIT",
       "dependencies": {
         "@formatjs/fast-memoize": "3.1.0",
@@ -1259,23 +1259,23 @@
       }
     },
     "node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.0.tgz",
-      "integrity": "sha512-Q01XuvtbDVCJQsG/E2MSfMZ+UdUoZV8v4Aex8tTH44SqKJZCeu5LjuclaKFUS0o1YoXndfEinJen5k1T1GR1vg==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.1.tgz",
+      "integrity": "sha512-sSDmSvmmoVQ92XqWb499KrIhv/vLisJU8ITFrx7T7NZHUmMY7EL9xgRowAosaljhqnj/5iufG24QrdzB6X3ItA==",
       "license": "MIT",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "3.1.0",
-        "@formatjs/icu-skeleton-parser": "2.1.0",
+        "@formatjs/ecma402-abstract": "3.1.1",
+        "@formatjs/icu-skeleton-parser": "2.1.1",
         "tslib": "^2.8.1"
       }
     },
     "node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-2.1.0.tgz",
-      "integrity": "sha512-wNer4imHDFBVAJnMb2OGoSyM4wL/uuLnuo5mrenliqkDaNjRbG4jzlJcwTTDEBhai8iCjnzUsE7xwNJC29SfWw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-2.1.1.tgz",
+      "integrity": "sha512-PSFABlcNefjI6yyk8f7nyX1DC7NHmq6WaCHZLySEXBrXuLOB2f935YsnzuPjlz+ibhb9yWTdPeVX1OVcj24w2Q==",
       "license": "MIT",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "3.1.0",
+        "@formatjs/ecma402-abstract": "3.1.1",
         "tslib": "^2.8.1"
       }
     },
@@ -8082,14 +8082,14 @@
       }
     },
     "node_modules/intl-messageformat": {
-      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-11.1.1.tgz",
-      "integrity": "sha512-vnrF2f4vfsdaFY6tuLZfzGcx1GZFMFAq6c7QdK3HSXNcGXEIQncNgbeAcnpjAOszQzq3Jbol2SwgshIGY08WyA==",
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-11.1.2.tgz",
+      "integrity": "sha512-ucSrQmZGAxfiBHfBRXW/k7UC8MaGFlEj4Ry1tKiDcmgwQm1y3EDl40u+4VNHYomxJQMJi9NEI3riDRlth96jKg==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "3.1.0",
+        "@formatjs/ecma402-abstract": "3.1.1",
         "@formatjs/fast-memoize": "3.1.0",
-        "@formatjs/icu-messageformat-parser": "3.5.0",
+        "@formatjs/icu-messageformat-parser": "3.5.1",
         "tslib": "^2.8.1"
       }
     },
@@ -9660,8 +9660,8 @@
       "version": "0.5.18",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
       "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
-      "optional": true,
-      "peer": true,
+      "extraneous": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.8.0"
       }
@@ -11427,22 +11427,22 @@
       }
     },
     "node_modules/tldts": {
-      "version": "7.0.19",
-      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.19.tgz",
-      "integrity": "sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==",
+      "version": "7.0.21",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.21.tgz",
+      "integrity": "sha512-Plu6V8fF/XU6d2k8jPtlQf5F4Xx2hAin4r2C2ca7wR8NK5MbRTo9huLUWRe28f3Uk8bYZfg74tit/dSjc18xnw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "tldts-core": "^7.0.19"
+        "tldts-core": "^7.0.21"
       },
       "bin": {
         "tldts": "bin/cli.js"
       }
     },
     "node_modules/tldts-core": {
-      "version": "7.0.19",
-      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.19.tgz",
-      "integrity": "sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==",
+      "version": "7.0.21",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.21.tgz",
+      "integrity": "sha512-oVOMdHvgjqyzUZH1rOESgJP1uNe2bVrfK0jUHHmiM2rpEiRbf3j4BrsIc6JigJRbHGanQwuZv/R+LTcHsw+bLA==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/frontend/package.json b/frontend/package.json
index ff4fbc3f..b1ab7cd2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/studio/package-lock.json b/studio/package-lock.json
index 88d15a89..ae267f6a 100644
--- a/studio/package-lock.json
+++ b/studio/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "devlovers",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "devlovers",
-      "version": "0.5.1",
+      "version": "0.5.2",
       "license": "UNLICENSED",
       "dependencies": {
         "@sanity/orderable-document-list": "^1.4.2",
@@ -6572,9 +6572,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "25.1.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.1.0.tgz",
-      "integrity": "sha512-t7frlewr6+cbx+9Ohpl0NOTKXZNV9xHRmNOvql47BFJKcEG1CxtxlPEEe+gR9uhVWM4DwhnvTF110mIL4yP9RA==",
+      "version": "25.2.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.0.tgz",
+      "integrity": "sha512-DZ8VwRFUNzuqJ5khrvwMXHmvPe+zGayJhr2CDNiKB1WBE1ST8Djl00D0IC4vvNmHMdj6DlbYRIaFE7WHjlDl5w==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.16.0"
@@ -18155,9 +18155,9 @@
       }
     },
     "node_modules/zustand": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.10.tgz",
-      "integrity": "sha512-U1AiltS1O9hSy3rul+Ub82ut2fqIAefiSuwECWt6jlMVUGejvf+5omLcRBSzqbRagSM3hQZbtzdeRc6QVScXTg==",
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.11.tgz",
+      "integrity": "sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==",
       "license": "MIT",
       "engines": {
         "node": ">=12.20.0"
diff --git a/studio/package.json b/studio/package.json
index 576dfaa3..daf8f218 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -1,7 +1,7 @@
 {
   "name": "devlovers",
   "private": true,
-  "version": "0.5.1",
+  "version": "0.5.2",
   "main": "package.json",
   "license": "UNLICENSED",
   "scripts": {

From 2bcafdd9d7c3242e335f083e595f4e923899d407 Mon Sep 17 00:00:00 2001
From: liudmylasovetovs <127711697+liudmylasovetovs@users.noreply.github.com>
Date: Sun, 1 Feb 2026 21:52:10 -0800
Subject: [PATCH 16/24] Lso/feat/shop design (#252)

---
 .../[locale]/shop/admin/orders/[id]/page.tsx  |   2 +-
 .../app/[locale]/shop/admin/orders/page.tsx   |   4 +-
 frontend/app/[locale]/shop/admin/page.tsx     |   2 +-
 .../shop/admin/products/[id]/edit/page.tsx    |   4 +-
 .../{product-form.tsx => ProductForm.tsx}     |   0
 .../[locale]/shop/admin/products/new/page.tsx |   4 +-
 .../app/[locale]/shop/admin/products/page.tsx |   8 +-
 .../app/[locale]/shop/cart/CartPageClient.tsx |   2 +-
 .../shop/checkout/payment/[orderId]/page.tsx  |   2 +-
 .../[locale]/shop/checkout/success/page.tsx   |   3 +-
 frontend/app/[locale]/shop/page.tsx           |   6 +-
 .../[locale]/shop/products/[slug]/page.tsx    |   2 +-
 frontend/app/[locale]/shop/products/page.tsx  |   6 +-
 .../app/api/shop/webhooks/stripe/route.ts     |   9 +-
 frontend/components/header/AppChrome.tsx      |   2 +-
 frontend/components/header/DesktopActions.tsx |   2 +-
 frontend/components/header/DesktopNav.tsx     |   2 +-
 frontend/components/header/MobileActions.tsx  |   2 +-
 ...to-cart-button.tsx => AddToCartButton.tsx} |   2 +-
 .../{cart-provider.tsx => CartProvider.tsx}   |   0
 ...alog-load-more.tsx => CatalogLoadMore.tsx} |   0
 ...s-client.tsx => CatalogProductsClient.tsx} |   4 +-
 .../{category-tile.tsx => CategoryTile.tsx}   |   0
 ...cart-on-mount.tsx => ClearCartOnMount.tsx} |   2 +-
 .../{product-card.tsx => ProductCard.tsx}     |   0
 ...product-filters.tsx => ProductFilters.tsx} |   4 +-
 .../{product-sort.tsx => ProductSort.tsx}     |   0
 ...oducts-toolbar.tsx => ProductsToolbar.tsx} |   4 +-
 .../shop/{shop-hero.tsx => ShopHero.tsx}      |   0
 ...min-pagination.tsx => AdminPagination.tsx} |   0
 ...utton.tsx => AdminProductDeleteButton.tsx} |   0
 ...oggle.tsx => AdminProductStatusToggle.tsx} |   0
 ...p-admin-topbar.tsx => ShopAdminTopbar.tsx} |   0
 .../{cart-button.tsx => CartButton.tsx}       |   2 +-
 .../header/{nav-links.tsx => NavLinks.tsx}    |   0
 frontend/lib/admin/parseAdminProductForm.ts   |  26 +-
 frontend/lib/auth/admin.ts                    |  72 +++---
 frontend/lib/auth/internal-janitor.ts         |   5 -
 frontend/lib/cart.ts                          |  21 +-
 frontend/lib/env/cloudinary.ts                |   8 -
 frontend/lib/errors/products.ts               |   2 -
 frontend/lib/logging.ts                       |   5 -
 frontend/lib/pagination.ts                    |   1 -
 frontend/lib/psp/stripe.ts                    |   3 +-
 frontend/lib/security/admin-csrf.ts           |  11 -
 frontend/lib/security/csrf.ts                 |  12 +-
 frontend/lib/security/origin.ts               |   3 -
 frontend/lib/security/rate-limit.ts           |  18 +-
 .../lib/security/stripe-webhook-rate-limit.ts |   6 +-
 frontend/lib/services/errors.ts               |   7 -
 frontend/lib/services/inventory.ts            |  11 +-
 frontend/lib/services/orders/_shared.ts       |   8 +-
 frontend/lib/services/orders/checkout.ts      |  62 +----
 .../lib/services/orders/payment-attempts.ts   |  29 +--
 .../lib/services/orders/payment-intent.ts     |   6 -
 frontend/lib/services/orders/payment-state.ts |  29 +--
 .../services/orders/psp-metadata/refunds.ts   |  11 +-
 frontend/lib/services/orders/refund.ts        |   4 -
 frontend/lib/services/orders/restock.ts       |  49 ++--
 frontend/lib/services/orders/summary.ts       |  12 +-
 frontend/lib/services/orders/sweeps.ts        |  24 +-
 frontend/lib/services/products.ts             |   3 -
 .../lib/services/products/admin/queries.ts    |   7 +-
 .../lib/services/products/cart/rehydrate.ts   |   6 -
 .../lib/services/products/mutations/create.ts |  11 +-
 .../lib/services/products/mutations/delete.ts |   3 -
 .../lib/services/products/mutations/toggle.ts |   2 -
 .../lib/services/products/mutations/update.ts |  13 -
 frontend/lib/services/products/prices.ts      |  12 -
 frontend/lib/services/products/types.ts       |   5 +-
 frontend/lib/shop/currency.ts                 |  37 +--
 frontend/lib/shop/data.ts                     |   9 -
 frontend/lib/shop/money.ts                    |  58 +----
 frontend/lib/shop/request-locale.ts           |   6 -
 frontend/lib/shop/ui-classes.ts               |  21 --
 frontend/lib/tests/helpers/makeCheckoutReq.ts |   3 +-
 .../order-items-snapshot-immutable.test.ts    | 230 ------------------
 frontend/lib/tests/orders-access.test.ts      | 130 ----------
 .../{ => shop}/admin-api-killswitch.test.ts   |   9 -
 .../{ => shop}/admin-csrf-contract.test.ts    |   2 -
 ...-patch-price-config-error-contract.test.ts |   2 -
 .../admin-product-sale-contract.test.ts       |   9 -
 .../cart-rehydrate-variant-sanitize.test.ts   |   0
 .../checkout-concurrency-stock1.test.ts       |  31 +--
 .../checkout-currency-policy.test.ts          |  16 +-
 .../{ => shop}/checkout-no-payments.test.ts   |  64 +----
 .../checkout-origin-posture-contract.test.ts  |   0
 ...set-payment-intent-reject-contract.test.ts |   9 +-
 .../checkout-stripe-error-contract.test.ts    |   7 +-
 .../lib/tests/{ => shop}/currency.test.ts     |   2 +-
 .../lib/tests/{ => shop}/format-money.test.ts |   0
 .../order-items-snapshot-immutable.test.ts    | 218 +++++++++++++++++
 .../{ => shop}/order-items-variants.test.ts   |  15 +-
 frontend/lib/tests/shop/orders-access.test.ts | 129 ++++++++++
 .../tests/{ => shop}/origin-posture.test.ts   |   0
 .../payment-state-legacy-writers.test.ts      |   2 +-
 .../payment-state-machine.helper.test.ts      |  11 +-
 .../payment-status-tripwire.test.ts           |  55 +----
 frontend/lib/tests/{ => shop}/prices.test.ts  |   2 +-
 ...product-admin-merged-prices-policy.test.ts |   0
 ...dmin-update-prices-patch-semantics.test.ts |   0
 .../{ => shop}/product-sale-invariant.test.ts |   9 +-
 .../public-product-visibility.test.ts         |   4 -
 .../rate-limit-subject-normalization.test.ts  |   0
 .../{ => shop}/rate-limit-subject.test.ts     |   1 -
 .../restock-order-only-once.test.ts           |   0
 .../restock-release-failure-invariant.test.ts |  46 ++--
 .../restock-stale-claim-gate.test.ts          |  19 +-
 .../restock-stale-stripe-orphan.test.ts       |   5 +-
 .../restock-stuck-reserving-sweep.test.ts     |  19 +-
 .../{ => shop}/restock-sweep-claim.test.ts    |   0
 .../stripe-webhook-contract.test.ts           |   8 +-
 .../stripe-webhook-mismatch.test.ts           |  33 +--
 .../stripe-webhook-paid-status-repair.test.ts |   9 +-
 .../stripe-webhook-psp-fields.test.ts         |  17 +-
 .../stripe-webhook-rate-limit-env.test.ts     |   2 +-
 .../stripe-webhook-refund-full.test.ts        |  41 +---
 frontend/lib/types/shop.ts                    |   2 -
 frontend/lib/validation/shop.ts               |  24 +-
 frontend/package-lock.json                    |   9 +-
 120 files changed, 642 insertions(+), 1270 deletions(-)
 rename frontend/app/[locale]/shop/admin/products/_components/{product-form.tsx => ProductForm.tsx} (100%)
 rename frontend/components/shop/{add-to-cart-button.tsx => AddToCartButton.tsx} (99%)
 rename frontend/components/shop/{cart-provider.tsx => CartProvider.tsx} (100%)
 rename frontend/components/shop/{catalog-load-more.tsx => CatalogLoadMore.tsx} (100%)
 rename frontend/components/shop/{catalog-products-client.tsx => CatalogProductsClient.tsx} (96%)
 rename frontend/components/shop/{category-tile.tsx => CategoryTile.tsx} (100%)
 rename frontend/components/shop/{clear-cart-on-mount.tsx => ClearCartOnMount.tsx} (88%)
 rename frontend/components/shop/{product-card.tsx => ProductCard.tsx} (100%)
 rename frontend/components/shop/{product-filters.tsx => ProductFilters.tsx} (98%)
 rename frontend/components/shop/{product-sort.tsx => ProductSort.tsx} (100%)
 rename frontend/components/shop/{products-toolbar.tsx => ProductsToolbar.tsx} (97%)
 rename frontend/components/shop/{shop-hero.tsx => ShopHero.tsx} (100%)
 rename frontend/components/shop/admin/{admin-pagination.tsx => AdminPagination.tsx} (100%)
 rename frontend/components/shop/admin/{admin-product-delete-button.tsx => AdminProductDeleteButton.tsx} (100%)
 rename frontend/components/shop/admin/{admin-product-status-toggle.tsx => AdminProductStatusToggle.tsx} (100%)
 rename frontend/components/shop/admin/{shop-admin-topbar.tsx => ShopAdminTopbar.tsx} (100%)
 rename frontend/components/shop/header/{cart-button.tsx => CartButton.tsx} (94%)
 rename frontend/components/shop/header/{nav-links.tsx => NavLinks.tsx} (100%)
 delete mode 100644 frontend/lib/tests/order-items-snapshot-immutable.test.ts
 delete mode 100644 frontend/lib/tests/orders-access.test.ts
 rename frontend/lib/tests/{ => shop}/admin-api-killswitch.test.ts (87%)
 rename frontend/lib/tests/{ => shop}/admin-csrf-contract.test.ts (96%)
 rename frontend/lib/tests/{ => shop}/admin-product-patch-price-config-error-contract.test.ts (94%)
 rename frontend/lib/tests/{ => shop}/admin-product-sale-contract.test.ts (96%)
 rename frontend/lib/tests/{ => shop}/cart-rehydrate-variant-sanitize.test.ts (100%)
 rename frontend/lib/tests/{ => shop}/checkout-concurrency-stock1.test.ts (86%)
 rename frontend/lib/tests/{ => shop}/checkout-currency-policy.test.ts (94%)
 rename frontend/lib/tests/{ => shop}/checkout-no-payments.test.ts (85%)
 rename frontend/lib/tests/{ => shop}/checkout-origin-posture-contract.test.ts (100%)
 rename frontend/lib/tests/{ => shop}/checkout-set-payment-intent-reject-contract.test.ts (92%)
 rename frontend/lib/tests/{ => shop}/checkout-stripe-error-contract.test.ts (88%)
 rename frontend/lib/tests/{ => shop}/currency.test.ts (98%)
 rename frontend/lib/tests/{ => shop}/format-money.test.ts (100%)
 create mode 100644 frontend/lib/tests/shop/order-items-snapshot-immutable.test.ts
 rename frontend/lib/tests/{ => shop}/order-items-variants.test.ts (86%)
 create mode 100644 frontend/lib/tests/shop/orders-access.test.ts
 rename frontend/lib/tests/{ => shop}/origin-posture.test.ts (100%)
 rename frontend/lib/tests/{ => shop}/payment-state-legacy-writers.test.ts (98%)
 rename frontend/lib/tests/{ => shop}/payment-state-machine.helper.test.ts (91%)
 rename frontend/lib/tests/{ => shop}/payment-status-tripwire.test.ts (80%)
 rename frontend/lib/tests/{ => shop}/prices.test.ts (90%)
 rename frontend/lib/tests/{ => shop}/product-admin-merged-prices-policy.test.ts (100%)
 rename frontend/lib/tests/{ => shop}/product-admin-update-prices-patch-semantics.test.ts (100%)
 rename frontend/lib/tests/{ => shop}/product-sale-invariant.test.ts (86%)
 rename frontend/lib/tests/{ => shop}/public-product-visibility.test.ts (93%)
 rename frontend/lib/tests/{ => shop}/rate-limit-subject-normalization.test.ts (100%)
 rename frontend/lib/tests/{ => shop}/rate-limit-subject.test.ts (98%)
 rename frontend/lib/tests/{ => shop}/restock-order-only-once.test.ts (100%)
 rename frontend/lib/tests/{ => shop}/restock-release-failure-invariant.test.ts (76%)
 rename frontend/lib/tests/{ => shop}/restock-stale-claim-gate.test.ts (89%)
 rename frontend/lib/tests/{ => shop}/restock-stale-stripe-orphan.test.ts (95%)
 rename frontend/lib/tests/{ => shop}/restock-stuck-reserving-sweep.test.ts (92%)
 rename frontend/lib/tests/{ => shop}/restock-sweep-claim.test.ts (100%)
 rename frontend/lib/tests/{ => shop}/stripe-webhook-contract.test.ts (85%)
 rename frontend/lib/tests/{ => shop}/stripe-webhook-mismatch.test.ts (83%)
 rename frontend/lib/tests/{ => shop}/stripe-webhook-paid-status-repair.test.ts (91%)
 rename frontend/lib/tests/{ => shop}/stripe-webhook-psp-fields.test.ts (91%)
 rename frontend/lib/tests/{ => shop}/stripe-webhook-rate-limit-env.test.ts (97%)
 rename frontend/lib/tests/{ => shop}/stripe-webhook-refund-full.test.ts (89%)

diff --git a/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx b/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx
index af75a718..1ff25652 100644
--- a/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx
+++ b/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx
@@ -10,7 +10,7 @@ import {
   type CurrencyCode,
 } from '@/lib/shop/currency';
 import { fromDbMoney } from '@/lib/shop/money';
-import { ShopAdminTopbar } from '@/components/shop/admin/shop-admin-topbar';
+import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
 import { Metadata } from 'next';
 
diff --git a/frontend/app/[locale]/shop/admin/orders/page.tsx b/frontend/app/[locale]/shop/admin/orders/page.tsx
index 460f55a6..8d6f4e9c 100644
--- a/frontend/app/[locale]/shop/admin/orders/page.tsx
+++ b/frontend/app/[locale]/shop/admin/orders/page.tsx
@@ -8,8 +8,8 @@ import {
   type CurrencyCode,
 } from '@/lib/shop/currency';
 import { fromDbMoney } from '@/lib/shop/money';
-import { ShopAdminTopbar } from '@/components/shop/admin/shop-admin-topbar';
-import { AdminPagination } from '@/components/shop/admin/admin-pagination';
+import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
+import { AdminPagination } from '@/components/shop/admin/AdminPagination';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
 import { CSRF_FORM_FIELD, issueCsrfToken } from '@/lib/security/csrf';
 import { parsePage } from '@/lib/pagination';
diff --git a/frontend/app/[locale]/shop/admin/page.tsx b/frontend/app/[locale]/shop/admin/page.tsx
index 4c8a3fb9..31f1320c 100644
--- a/frontend/app/[locale]/shop/admin/page.tsx
+++ b/frontend/app/[locale]/shop/admin/page.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@/i18n/routing';
 import { getTranslations } from 'next-intl/server';
 
-import { ShopAdminTopbar } from '@/components/shop/admin/shop-admin-topbar';
+import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
 import { Metadata } from 'next';
 
diff --git a/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx b/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
index 32c71ae8..12994503 100644
--- a/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
@@ -3,9 +3,9 @@ import { eq } from 'drizzle-orm';
 import { z } from 'zod';
 
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
-import { ShopAdminTopbar } from '@/components/shop/admin/shop-admin-topbar';
+import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
 
-import { ProductForm } from '../../_components/product-form';
+import { ProductForm } from '../../_components/ProductForm';
 import { db } from '@/db';
 import { products, productPrices } from '@/db/schema';
 import type { CurrencyCode } from '@/lib/shop/currency';
diff --git a/frontend/app/[locale]/shop/admin/products/_components/product-form.tsx b/frontend/app/[locale]/shop/admin/products/_components/ProductForm.tsx
similarity index 100%
rename from frontend/app/[locale]/shop/admin/products/_components/product-form.tsx
rename to frontend/app/[locale]/shop/admin/products/_components/ProductForm.tsx
diff --git a/frontend/app/[locale]/shop/admin/products/new/page.tsx b/frontend/app/[locale]/shop/admin/products/new/page.tsx
index 89cc4de4..c3be929f 100644
--- a/frontend/app/[locale]/shop/admin/products/new/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/new/page.tsx
@@ -1,8 +1,8 @@
-import { ShopAdminTopbar } from '@/components/shop/admin/shop-admin-topbar';
+import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
 import { issueCsrfToken } from '@/lib/security/csrf';
 
-import { ProductForm } from '../_components/product-form';
+import { ProductForm } from '../_components/ProductForm';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
diff --git a/frontend/app/[locale]/shop/admin/products/page.tsx b/frontend/app/[locale]/shop/admin/products/page.tsx
index ed1dccf1..a9992cfe 100644
--- a/frontend/app/[locale]/shop/admin/products/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/page.tsx
@@ -1,11 +1,11 @@
 import { Link } from '@/i18n/routing';
 import { and, desc, eq, sql } from 'drizzle-orm';
 import { issueCsrfToken } from '@/lib/security/csrf';
-import { ShopAdminTopbar } from '@/components/shop/admin/shop-admin-topbar';
+import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
-import { AdminProductDeleteButton } from '@/components/shop/admin/admin-product-delete-button';
-import { AdminProductStatusToggle } from '@/components/shop/admin/admin-product-status-toggle';
-import { AdminPagination } from '@/components/shop/admin/admin-pagination';
+import { AdminProductDeleteButton } from '@/components/shop/admin/AdminProductDeleteButton';
+import { AdminProductStatusToggle } from '@/components/shop/admin/AdminProductStatusToggle';
+import { AdminPagination } from '@/components/shop/admin/AdminPagination';
 import { db } from '@/db';
 import {
   inventoryMoves,
diff --git a/frontend/app/[locale]/shop/cart/CartPageClient.tsx b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
index 9fb12085..7c9f231c 100644
--- a/frontend/app/[locale]/shop/cart/CartPageClient.tsx
+++ b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
@@ -8,7 +8,7 @@ import { useTranslations } from 'next-intl';
 import { cn } from '@/lib/utils';
 import { Minus, Plus, Trash2, ShoppingBag } from 'lucide-react';
 
-import { useCart } from '@/components/shop/cart-provider';
+import { useCart } from '@/components/shop/CartProvider';
 import { generateIdempotencyKey } from '@/lib/shop/idempotency';
 import { formatMoney } from '@/lib/shop/currency';
 import {
diff --git a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
index 76f1139c..57883f91 100644
--- a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@/i18n/routing';
-import { ClearCartOnMount } from '@/components/shop/clear-cart-on-mount';
+import { ClearCartOnMount } from '@/components/shop/ClearCartOnMount';
 import StripePaymentClient from '../StripePaymentClient';
 
 import { formatMoney } from '@/lib/shop/currency';
diff --git a/frontend/app/[locale]/shop/checkout/success/page.tsx b/frontend/app/[locale]/shop/checkout/success/page.tsx
index 91f93241..98ac6293 100644
--- a/frontend/app/[locale]/shop/checkout/success/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/success/page.tsx
@@ -2,7 +2,7 @@ import { Link } from '@/i18n/routing';
 import { getTranslations } from 'next-intl/server';
 
 import OrderStatusAutoRefresh from './OrderStatusAutoRefresh';
-import { ClearCartOnMount } from '@/components/shop/clear-cart-on-mount';
+import { ClearCartOnMount } from '@/components/shop/ClearCartOnMount';
 import { formatMoney } from '@/lib/shop/currency';
 import { getOrderSummary } from '@/lib/services/orders';
 import { OrderNotFoundError } from '@/lib/services/errors';
@@ -57,7 +57,6 @@ function shouldClearCart(params: SearchParams): boolean {
   return raw === 'true' || raw === '1';
 }
 
-/** Small hero CTA (Link) */
 const SHOP_HERO_CTA_SM = cn(
   SHOP_CTA_BASE,
   SHOP_CTA_INTERACTIVE,
diff --git a/frontend/app/[locale]/shop/page.tsx b/frontend/app/[locale]/shop/page.tsx
index a86ddfb8..a8a78b66 100644
--- a/frontend/app/[locale]/shop/page.tsx
+++ b/frontend/app/[locale]/shop/page.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@/i18n/routing';
-import { ProductCard } from '@/components/shop/product-card';
-import { Hero } from '@/components/shop/shop-hero';
-import { CategoryTile } from '@/components/shop/category-tile';
+import { ProductCard } from '@/components/shop/ProductCard';
+import { Hero } from '@/components/shop/ShopHero';
+import { CategoryTile } from '@/components/shop/CategoryTile';
 import { getHomepageContent } from '@/lib/shop/data';
 import { getTranslations } from 'next-intl/server';
 import {
diff --git a/frontend/app/[locale]/shop/products/[slug]/page.tsx b/frontend/app/[locale]/shop/products/[slug]/page.tsx
index f5ea2ed8..edb2eeff 100644
--- a/frontend/app/[locale]/shop/products/[slug]/page.tsx
+++ b/frontend/app/[locale]/shop/products/[slug]/page.tsx
@@ -3,7 +3,7 @@ import { notFound } from 'next/navigation';
 import { ArrowLeft } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
 import { cn } from '@/lib/utils';
-import { AddToCartButton } from '@/components/shop/add-to-cart-button';
+import { AddToCartButton } from '@/components/shop/AddToCartButton';
 import { getProductPageData } from '@/lib/shop/data';
 import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import { getPublicProductBySlug } from '@/db/queries/shop/products';
diff --git a/frontend/app/[locale]/shop/products/page.tsx b/frontend/app/[locale]/shop/products/page.tsx
index 8757db69..8d57d782 100644
--- a/frontend/app/[locale]/shop/products/page.tsx
+++ b/frontend/app/[locale]/shop/products/page.tsx
@@ -2,9 +2,9 @@ import { Suspense } from 'react';
 import { redirect } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 
-import { ProductFilters } from '@/components/shop/product-filters';
-import { CatalogProductsClient } from '@/components/shop/catalog-products-client';
-import { ProductsToolbar } from '@/components/shop/products-toolbar';
+import { ProductFilters } from '@/components/shop/ProductFilters';
+import { CatalogProductsClient } from '@/components/shop/CatalogProductsClient';
+import { ProductsToolbar } from '@/components/shop/ProductsToolbar';
 import { getCatalogProducts } from '@/lib/shop/data';
 import { catalogQuerySchema } from '@/lib/validation/shop';
 import { CATALOG_PAGE_SIZE } from '@/lib/config/catalog';
diff --git a/frontend/app/api/shop/webhooks/stripe/route.ts b/frontend/app/api/shop/webhooks/stripe/route.ts
index 73671d9a..f1ff4a6a 100644
--- a/frontend/app/api/shop/webhooks/stripe/route.ts
+++ b/frontend/app/api/shop/webhooks/stripe/route.ts
@@ -1518,9 +1518,14 @@ export async function POST(request: NextRequest) {
             isNull(stripeEvents.processedAt)
           )
         );
-    } catch {
-      // best-effort
+    } catch (err) {
+      logWarn('stripe_webhook_claim_release_failed', {
+        ...eventMeta(),
+        code: 'CLAIM_RELEASE_FAILED',
+        message: err instanceof Error ? err.message : String(err),
+      });
     }
+
     return noStoreJson({ error: 'internal_error' }, { status: 500 });
   }
 }
diff --git a/frontend/components/header/AppChrome.tsx b/frontend/components/header/AppChrome.tsx
index 55a68e77..aca5f3b8 100644
--- a/frontend/components/header/AppChrome.tsx
+++ b/frontend/components/header/AppChrome.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { useSelectedLayoutSegments } from 'next/navigation';
 
 import { UnifiedHeader } from '@/components/header/UnifiedHeader';
-import { CartProvider } from '@/components/shop/cart-provider';
+import { CartProvider } from '@/components/shop/CartProvider';
 
 type AppChromeProps = {
   userExists: boolean;
diff --git a/frontend/components/header/DesktopActions.tsx b/frontend/components/header/DesktopActions.tsx
index d0e627f2..4b59b2e2 100644
--- a/frontend/components/header/DesktopActions.tsx
+++ b/frontend/components/header/DesktopActions.tsx
@@ -7,7 +7,7 @@ import { HeaderButton } from '@/components/shared/HeaderButton';
 import { GitHubStarButton } from '@/components/shared/GitHubStarButton';
 import LanguageSwitcher from '@/components/shared/LanguageSwitcher';
 import { LogoutButton } from '@/components/auth/logoutButton';
-import { CartButton } from '@/components/shop/header/cart-button';
+import { CartButton } from '@/components/shop/header/CartButton';
 import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
 
 type DesktopActionsProps = {
diff --git a/frontend/components/header/DesktopNav.tsx b/frontend/components/header/DesktopNav.tsx
index 957fc6ef..2041273f 100644
--- a/frontend/components/header/DesktopNav.tsx
+++ b/frontend/components/header/DesktopNav.tsx
@@ -6,7 +6,7 @@ import { SITE_LINKS } from '@/lib/navigation';
 
 import { NavLink } from '@/components/header/NavLink';
 import { HeaderButton } from '@/components/shared/HeaderButton';
-import { NavLinks } from '@/components/shop/header/nav-links';
+import { NavLinks } from '@/components/shop/header/NavLinks';
 import { BlogCategoryLinks } from '@/components/blog/BlogCategoryLinks';
 
 type Category = {
diff --git a/frontend/components/header/MobileActions.tsx b/frontend/components/header/MobileActions.tsx
index 76cf49c9..263048ee 100644
--- a/frontend/components/header/MobileActions.tsx
+++ b/frontend/components/header/MobileActions.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import LanguageSwitcher from '@/components/shared/LanguageSwitcher';
-import { CartButton } from '@/components/shop/header/cart-button';
+import { CartButton } from '@/components/shop/header/CartButton';
 import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
 import { AppMobileMenu } from '@/components/header/AppMobileMenu';
 
diff --git a/frontend/components/shop/add-to-cart-button.tsx b/frontend/components/shop/AddToCartButton.tsx
similarity index 99%
rename from frontend/components/shop/add-to-cart-button.tsx
rename to frontend/components/shop/AddToCartButton.tsx
index 7cdfb619..56a53a73 100644
--- a/frontend/components/shop/add-to-cart-button.tsx
+++ b/frontend/components/shop/AddToCartButton.tsx
@@ -19,7 +19,7 @@ import {
   SHOP_STEPPER_BUTTON_BASE,
 } from '@/lib/shop/ui-classes';
 
-import { useCart } from './cart-provider';
+import { useCart } from './CartProvider';
 
 interface AddToCartButtonProps {
   product: ShopProduct;
diff --git a/frontend/components/shop/cart-provider.tsx b/frontend/components/shop/CartProvider.tsx
similarity index 100%
rename from frontend/components/shop/cart-provider.tsx
rename to frontend/components/shop/CartProvider.tsx
diff --git a/frontend/components/shop/catalog-load-more.tsx b/frontend/components/shop/CatalogLoadMore.tsx
similarity index 100%
rename from frontend/components/shop/catalog-load-more.tsx
rename to frontend/components/shop/CatalogLoadMore.tsx
diff --git a/frontend/components/shop/catalog-products-client.tsx b/frontend/components/shop/CatalogProductsClient.tsx
similarity index 96%
rename from frontend/components/shop/catalog-products-client.tsx
rename to frontend/components/shop/CatalogProductsClient.tsx
index 44c5c2a8..7748ae04 100644
--- a/frontend/components/shop/catalog-products-client.tsx
+++ b/frontend/components/shop/CatalogProductsClient.tsx
@@ -4,8 +4,8 @@ import React from 'react';
 import { useSearchParams, type ReadonlyURLSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 
-import { CatalogLoadMore } from '@/components/shop/catalog-load-more';
-import { ProductCard } from '@/components/shop/product-card';
+import { CatalogLoadMore } from '@/components/shop/CatalogLoadMore';
+import { ProductCard } from '@/components/shop/ProductCard';
 import { logError } from '@/lib/logging';
 
 type Product = React.ComponentProps<typeof ProductCard>['product'] & {
diff --git a/frontend/components/shop/category-tile.tsx b/frontend/components/shop/CategoryTile.tsx
similarity index 100%
rename from frontend/components/shop/category-tile.tsx
rename to frontend/components/shop/CategoryTile.tsx
diff --git a/frontend/components/shop/clear-cart-on-mount.tsx b/frontend/components/shop/ClearCartOnMount.tsx
similarity index 88%
rename from frontend/components/shop/clear-cart-on-mount.tsx
rename to frontend/components/shop/ClearCartOnMount.tsx
index 603b3c37..f79ea7c5 100644
--- a/frontend/components/shop/clear-cart-on-mount.tsx
+++ b/frontend/components/shop/ClearCartOnMount.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useRef } from 'react';
-import { useCart } from '@/components/shop/cart-provider';
+import { useCart } from '@/components/shop/CartProvider';
 
 type ClearCartOnMountProps = {
   enabled?: boolean;
diff --git a/frontend/components/shop/product-card.tsx b/frontend/components/shop/ProductCard.tsx
similarity index 100%
rename from frontend/components/shop/product-card.tsx
rename to frontend/components/shop/ProductCard.tsx
diff --git a/frontend/components/shop/product-filters.tsx b/frontend/components/shop/ProductFilters.tsx
similarity index 98%
rename from frontend/components/shop/product-filters.tsx
rename to frontend/components/shop/ProductFilters.tsx
index bb538ac3..67554934 100644
--- a/frontend/components/shop/product-filters.tsx
+++ b/frontend/components/shop/ProductFilters.tsx
@@ -68,7 +68,7 @@ export function ProductFilters() {
                   SHOP_FOCUS,
                   currentCategory === cat.slug
                     ? 'text-accent'
-                    : 'text-muted-foreground hover:text-accent'
+                    : 'text-muted-foreground hover:text-accent active:text-accent'
                 )}
               >
                 {tCategories(
@@ -109,7 +109,7 @@ export function ProductFilters() {
                     SHOP_FOCUS,
                     isSelected
                       ? 'text-accent'
-                      : 'text-muted-foreground hover:text-accent'
+                      : 'text-muted-foreground hover:text-accent active:text-accent'
                   )}
                 >
                   {tTypes(type.slug)}
diff --git a/frontend/components/shop/product-sort.tsx b/frontend/components/shop/ProductSort.tsx
similarity index 100%
rename from frontend/components/shop/product-sort.tsx
rename to frontend/components/shop/ProductSort.tsx
diff --git a/frontend/components/shop/products-toolbar.tsx b/frontend/components/shop/ProductsToolbar.tsx
similarity index 97%
rename from frontend/components/shop/products-toolbar.tsx
rename to frontend/components/shop/ProductsToolbar.tsx
index e8f2a3d6..2353d802 100644
--- a/frontend/components/shop/products-toolbar.tsx
+++ b/frontend/components/shop/ProductsToolbar.tsx
@@ -4,8 +4,8 @@ import React from 'react';
 import { Filter, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
-import { ProductSort } from '@/components/shop/product-sort';
-import { ProductFilters } from '@/components/shop/product-filters';
+import { ProductSort } from '@/components/shop/ProductSort';
+import { ProductFilters } from '@/components/shop/ProductFilters';
 
 export function ProductsToolbar() {
   const [open, setOpen] = React.useState(false);
diff --git a/frontend/components/shop/shop-hero.tsx b/frontend/components/shop/ShopHero.tsx
similarity index 100%
rename from frontend/components/shop/shop-hero.tsx
rename to frontend/components/shop/ShopHero.tsx
diff --git a/frontend/components/shop/admin/admin-pagination.tsx b/frontend/components/shop/admin/AdminPagination.tsx
similarity index 100%
rename from frontend/components/shop/admin/admin-pagination.tsx
rename to frontend/components/shop/admin/AdminPagination.tsx
diff --git a/frontend/components/shop/admin/admin-product-delete-button.tsx b/frontend/components/shop/admin/AdminProductDeleteButton.tsx
similarity index 100%
rename from frontend/components/shop/admin/admin-product-delete-button.tsx
rename to frontend/components/shop/admin/AdminProductDeleteButton.tsx
diff --git a/frontend/components/shop/admin/admin-product-status-toggle.tsx b/frontend/components/shop/admin/AdminProductStatusToggle.tsx
similarity index 100%
rename from frontend/components/shop/admin/admin-product-status-toggle.tsx
rename to frontend/components/shop/admin/AdminProductStatusToggle.tsx
diff --git a/frontend/components/shop/admin/shop-admin-topbar.tsx b/frontend/components/shop/admin/ShopAdminTopbar.tsx
similarity index 100%
rename from frontend/components/shop/admin/shop-admin-topbar.tsx
rename to frontend/components/shop/admin/ShopAdminTopbar.tsx
diff --git a/frontend/components/shop/header/cart-button.tsx b/frontend/components/shop/header/CartButton.tsx
similarity index 94%
rename from frontend/components/shop/header/cart-button.tsx
rename to frontend/components/shop/header/CartButton.tsx
index 7e8ed8c8..5077846e 100644
--- a/frontend/components/shop/header/cart-button.tsx
+++ b/frontend/components/shop/header/CartButton.tsx
@@ -5,7 +5,7 @@ import { ShoppingBag } from 'lucide-react';
 import { useMounted } from '@/hooks/use-mounted';
 import { HeaderButton } from '@/components/shared/HeaderButton';
 
-import { useCart } from '../cart-provider';
+import { useCart } from '../CartProvider';
 
 export function CartButton() {
   const { cart } = useCart();
diff --git a/frontend/components/shop/header/nav-links.tsx b/frontend/components/shop/header/NavLinks.tsx
similarity index 100%
rename from frontend/components/shop/header/nav-links.tsx
rename to frontend/components/shop/header/NavLinks.tsx
diff --git a/frontend/lib/admin/parseAdminProductForm.ts b/frontend/lib/admin/parseAdminProductForm.ts
index 735a43a9..fa365899 100644
--- a/frontend/lib/admin/parseAdminProductForm.ts
+++ b/frontend/lib/admin/parseAdminProductForm.ts
@@ -83,8 +83,8 @@ function parseMajorToMinor(
     typeof value === 'string'
       ? value.trim()
       : typeof value === 'number'
-      ? String(value)
-      : '';
+        ? String(value)
+        : '';
 
   if (!raw) return null;
 
@@ -104,12 +104,6 @@ function parseLegacyPriceMinorField(
   return toCents(v);
 }
 
-/**
- * Legacy optional field semantics:
- * - if field missing => undefined (PATCH omit)
- * - if present but empty => null (explicit clear)
- * - if present and value => cents int
- */
 function parseLegacyOptionalOriginalMinorField(
   formData: FormData,
   name: string
@@ -135,8 +129,8 @@ function parseMinorInt(
     typeof value === 'number'
       ? value
       : typeof value === 'string'
-      ? Number(value.trim())
-      : NaN;
+        ? Number(value.trim())
+        : NaN;
 
   if (!Number.isFinite(raw) || !Number.isInteger(raw) || raw < 0) {
     throw zodPricesJsonError(`Invalid ${opts.field} for ${opts.currency}`);
@@ -149,7 +143,6 @@ function requirePositivePriceMinor(
   priceMinor: number | null,
   currency: string
 ) {
-  // DB check: priceMinor > 0
   if (priceMinor == null || priceMinor <= 0) {
     throw zodPricesJsonError(`Missing price for ${currency}`);
   }
@@ -206,13 +199,11 @@ function parsePricesJsonField(formData: FormData, mode: ParseMode) {
         throw zodPricesJsonError('Invalid currency in prices payload');
       }
 
-      // Prefer canonical minor payload
       let priceMinor = parseMinorInt(row?.priceMinor, {
         field: 'priceMinor',
         currency: currency as string,
       });
 
-      // Legacy major fallback
       if (priceMinor == null) {
         priceMinor = parseMajorToMinor(row?.price, {
           field: 'price',
@@ -240,10 +231,8 @@ function parsePricesJsonField(formData: FormData, mode: ParseMode) {
         });
       }
 
-      // Normalize: empty -> null
       if (originalPriceMinor == null) originalPriceMinor = null;
 
-      // DB invariant: originalPriceMinor is null OR > priceMinor
       if (originalPriceMinor !== null && priceMinor != null) {
         if (originalPriceMinor <= priceMinor) {
           throw zodPricesJsonError(
@@ -285,13 +274,11 @@ export function parseAdminProductForm(
 > {
   const mode: ParseMode = options.mode ?? 'create';
 
-  // 1) Prefer canonical "prices" JSON payload if present
   const pricesJson = parsePricesJsonField(formData, mode);
   if (pricesJson && 'ok' in pricesJson && pricesJson.ok === false) {
     return { ok: false, error: pricesJson.error };
   }
 
-  // 2) Legacy fallback (priceUsd/priceUah) -> MINOR units
   const priceUsdMinor = parseLegacyPriceMinorField(formData, 'priceUsd');
   const originalPriceUsdMinor = parseLegacyOptionalOriginalMinorField(
     formData,
@@ -325,13 +312,12 @@ export function parseAdminProductForm(
       : []),
   ];
 
-  // Resolve final prices with PATCH semantics
   const prices =
     pricesJson && 'value' in pricesJson
       ? pricesJson.value
       : mode === 'update' && legacyRawPrices.length === 0
-      ? undefined
-      : legacyRawPrices;
+        ? undefined
+        : legacyRawPrices;
 
   const payload = {
     title: getStringField(formData, 'title'),
diff --git a/frontend/lib/auth/admin.ts b/frontend/lib/auth/admin.ts
index 4a4b356b..b5682545 100644
--- a/frontend/lib/auth/admin.ts
+++ b/frontend/lib/auth/admin.ts
@@ -1,70 +1,60 @@
-import "server-only"
+import 'server-only';
 
-import type { NextRequest } from "next/server"
+import type { NextRequest } from 'next/server';
 
-import { getCurrentUser } from "@/lib/auth"
+import { getCurrentUser } from '@/lib/auth';
 
 export class AdminApiDisabledError extends Error {
-  code = "ADMIN_API_DISABLED" as const
-  constructor(message = "Admin API is disabled by configuration") {
-    super(message)
-    this.name = "AdminApiDisabledError"
+  code = 'ADMIN_API_DISABLED' as const;
+  constructor(message = 'Admin API is disabled by configuration') {
+    super(message);
+    this.name = 'AdminApiDisabledError';
   }
 }
 
 export class AdminUnauthorizedError extends Error {
-  code = "UNAUTHORIZED" as const
-  constructor(message = "Authentication required") {
-    super(message)
-    this.name = "AdminUnauthorizedError"
+  code = 'UNAUTHORIZED' as const;
+  constructor(message = 'Authentication required') {
+    super(message);
+    this.name = 'AdminUnauthorizedError';
   }
 }
 
 export class AdminForbiddenError extends Error {
-  code = "FORBIDDEN" as const
-  constructor(message = "Admin role required") {
-    super(message)
-    this.name = "AdminForbiddenError"
+  code = 'FORBIDDEN' as const;
+  constructor(message = 'Admin role required') {
+    super(message);
+    this.name = 'AdminForbiddenError';
   }
 }
 
-/**
- * Kill-switch for production.
- * Keeps MVP safety: you can hard-disable admin mutating endpoints in prod instantly.
- */
 export function assertAdminApiEnabled(): void {
-  if (process.env.NODE_ENV === "production" && process.env.ENABLE_ADMIN_API !== "true") {
-    throw new AdminApiDisabledError()
+  if (
+    process.env.NODE_ENV === 'production' &&
+    process.env.ENABLE_ADMIN_API !== 'true'
+  ) {
+    throw new AdminApiDisabledError();
   }
 }
 
-/**
- * API guard: must be enabled in prod + must be authenticated admin.
- * Return value is useful if later you want audit logs (adminId, email).
- */
 export async function requireAdminApi(_request?: NextRequest) {
-  void _request
-  assertAdminApiEnabled()
+  void _request;
+  assertAdminApiEnabled();
 
-  const user = await getCurrentUser()
-  if (!user) throw new AdminUnauthorizedError()
+  const user = await getCurrentUser();
+  if (!user) throw new AdminUnauthorizedError();
 
-  // Harden against unexpected role strings from DB
-  if (user.role !== "admin") throw new AdminForbiddenError()
+  if (user.role !== 'admin') throw new AdminForbiddenError();
 
-  return user
+  return user;
 }
 
-/**
- * Page guard: same logic as API guard.
- * Use from Server Components (layouts/pages) to protect /shop/admin/**.
- */
 export async function requireAdminPage() {
-  assertAdminApiEnabled()
+  assertAdminApiEnabled();
 
-  const user = await getCurrentUser()
-  if (!user) throw new AdminUnauthorizedError()
-  if (user.role !== "admin") throw new AdminForbiddenError()
+  const user = await getCurrentUser();
+  if (!user) throw new AdminUnauthorizedError();
+  if (user.role !== 'admin') throw new AdminForbiddenError();
 
-  return user
+  return user;
 }
diff --git a/frontend/lib/auth/internal-janitor.ts b/frontend/lib/auth/internal-janitor.ts
index 5c7ad629..a44163b4 100644
--- a/frontend/lib/auth/internal-janitor.ts
+++ b/frontend/lib/auth/internal-janitor.ts
@@ -1,13 +1,9 @@
-// lib/auth/internal-janitor.ts
 import { NextRequest, NextResponse } from 'next/server';
 import crypto from 'crypto';
 
 function timingSafeEqual(a: string, b: string) {
   const aBuf = Buffer.from(a, 'utf8');
   const bBuf = Buffer.from(b, 'utf8');
-
-  // Pad both buffers to the same length to avoid length-based early return timing leak.
-  // Ensure min length 1 because timingSafeEqual requires non-zero length buffers.
   const maxLen = Math.max(aBuf.length, bBuf.length, 1);
 
   const aPadded = Buffer.alloc(maxLen);
@@ -18,7 +14,6 @@ function timingSafeEqual(a: string, b: string) {
 
   const equalPadded = crypto.timingSafeEqual(aPadded, bPadded);
 
-  // Length check AFTER timingSafeEqual; no early return.
   const lengthEqual = aBuf.length === bBuf.length;
 
   return equalPadded && lengthEqual;
diff --git a/frontend/lib/cart.ts b/frontend/lib/cart.ts
index 14d8ff2c..b1285aa5 100644
--- a/frontend/lib/cart.ts
+++ b/frontend/lib/cart.ts
@@ -106,7 +106,9 @@ export function persistCartItems(items: CartClientItem[]): void {
   }
 }
 
-function normalizeItemsForStorage(items: CartRehydrateItem[]): CartClientItem[] {
+function normalizeItemsForStorage(
+  items: CartRehydrateItem[]
+): CartClientItem[] {
   return items.map(item => ({
     productId: item.productId,
     quantity: item.quantity,
@@ -115,11 +117,9 @@ function normalizeItemsForStorage(items: CartRehydrateItem[]): CartClientItem[]
   }));
 }
 
-/**
- * IMPORTANT:
- * Cart money fields are MINOR UNITS (integers).
- */
-export function computeSummaryFromItems(items: CartRehydrateItem[]): CartSummary {
+export function computeSummaryFromItems(
+  items: CartRehydrateItem[]
+): CartSummary {
   if (!items.length) {
     return {
       totalAmountMinor: 0,
@@ -135,7 +135,6 @@ export function computeSummaryFromItems(items: CartRehydrateItem[]): CartSummary
   let itemCount = 0;
 
   for (const item of items) {
-    // Production-safety: cart must not mix currencies (usually indicates locale switch + stale cart)
     if (item.currency !== currency) {
       throw new Error(
         `Cart contains mixed currencies (${currency} and ${item.currency}). Clear cart and try again.`
@@ -163,12 +162,9 @@ function extractApiError(data: unknown): {
   message: string;
   details?: unknown;
 } {
-  // legacy: { error: "..." }
   if (isRecord(data) && typeof data.error === 'string') {
     return { code: 'UNKNOWN_ERROR', message: data.error };
   }
-
-  // preferred: { error: { code, message, details } }
   if (isRecord(data) && isRecord(data.error)) {
     const errObj = data.error;
     const code =
@@ -181,8 +177,6 @@ function extractApiError(data: unknown): {
         : 'Request failed';
     return { code, message, details: errObj.details };
   }
-
-  // fallback: { code, message, details }
   if (isRecord(data)) {
     const code =
       typeof data.code === 'string' && data.code.trim().length > 0
@@ -245,7 +239,8 @@ export async function rehydrateCart(items: CartClientItem[]): Promise<Cart> {
     const apiErr = extractApiError(data);
     throw new CartRehydrateError({
       code: apiErr.code,
-      message: apiErr.message || `Unable to rehydrate cart (HTTP ${response.status})`,
+      message:
+        apiErr.message || `Unable to rehydrate cart (HTTP ${response.status})`,
       status: response.status,
       details: apiErr.details,
     });
diff --git a/frontend/lib/env/cloudinary.ts b/frontend/lib/env/cloudinary.ts
index 6576599c..80e42bba 100644
--- a/frontend/lib/env/cloudinary.ts
+++ b/frontend/lib/env/cloudinary.ts
@@ -23,10 +23,6 @@ export type CloudinaryEnv = {
   uploadFolder: string;
 };
 
-/**
- * Returns null if Cloudinary is not configured.
- * Never throws — safe to call anywhere (including during build).
- */
 export function getCloudinaryEnvOptional(): CloudinaryEnv | null {
   const cloudName = process.env.CLOUDINARY_CLOUD_NAME;
   const apiKey = process.env.CLOUDINARY_API_KEY;
@@ -46,10 +42,6 @@ export function getCloudinaryEnvOptional(): CloudinaryEnv | null {
   };
 }
 
-/**
- * Throws a typed error if Cloudinary is not configured.
- * Use this ONLY in code paths that actually upload/delete images.
- */
 export function getCloudinaryEnvRequired(): CloudinaryEnv {
   const missing: string[] = [];
   if (!process.env.CLOUDINARY_CLOUD_NAME) missing.push('CLOUDINARY_CLOUD_NAME');
diff --git a/frontend/lib/errors/products.ts b/frontend/lib/errors/products.ts
index 822e24d5..a652c59f 100644
--- a/frontend/lib/errors/products.ts
+++ b/frontend/lib/errors/products.ts
@@ -1,5 +1,3 @@
-// frontend/lib/errors/products.ts
-
 export class ProductNotFoundError extends Error {
   readonly code = 'PRODUCT_NOT_FOUND' as const;
 
diff --git a/frontend/lib/logging.ts b/frontend/lib/logging.ts
index 5fb57ae9..b0af111e 100644
--- a/frontend/lib/logging.ts
+++ b/frontend/lib/logging.ts
@@ -45,7 +45,6 @@ function toErrorShape(
   }
 }
 
-// Simple redaction: prevents accidental leaking of secrets in logs.
 function redactJsonStringify(value: unknown): string {
   const SENSITIVE_KEY_RE =
     /(secret|token|password|authorization|cookie|api[_-]?key)/i;
@@ -75,15 +74,11 @@ function emit(
 
   const line = redactJsonStringify(payload);
 
-  // stderr for warn/error, stdout for debug/info
   if (level === 'error') console.error(line);
   else if (level === 'warn') console.warn(line);
   else console.log(line);
 }
 
-/**
- * Backward-compatible API (keep existing call sites working).
- */
 export function logError(
   context: string,
   error: unknown,
diff --git a/frontend/lib/pagination.ts b/frontend/lib/pagination.ts
index 2d07673b..864e8fbc 100644
--- a/frontend/lib/pagination.ts
+++ b/frontend/lib/pagination.ts
@@ -1,4 +1,3 @@
-// frontend/lib/pagination.ts
 export function parsePage(input?: string): number {
   const n = Number.parseInt(input ?? '1', 10);
   return Number.isFinite(n) && n > 0 ? n : 1;
diff --git a/frontend/lib/psp/stripe.ts b/frontend/lib/psp/stripe.ts
index 72e8185d..c37d92c7 100644
--- a/frontend/lib/psp/stripe.ts
+++ b/frontend/lib/psp/stripe.ts
@@ -13,7 +13,7 @@ type CreateRefundInput = {
   orderId: string;
   paymentIntentId?: string | null;
   chargeId?: string | null;
-  amountMinor?: number; // full refund: pass totalAmountMinor (recommended)
+  amountMinor?: number;
   idempotencyKey?: string;
 };
 
@@ -113,7 +113,6 @@ export async function createPaymentIntent({
     throw new Error('STRIPE_DISABLED');
   }
 
-  // Stripe amount must be an integer in minor units. Fail-closed on floats/NaN/huge values.
   if (!Number.isSafeInteger(amount) || amount <= 0) {
     throw new Error('STRIPE_INVALID_AMOUNT');
   }
diff --git a/frontend/lib/security/admin-csrf.ts b/frontend/lib/security/admin-csrf.ts
index bc445d16..e40c87c1 100644
--- a/frontend/lib/security/admin-csrf.ts
+++ b/frontend/lib/security/admin-csrf.ts
@@ -20,16 +20,6 @@ function readTokenFromHeader(request: unknown): string | null {
   return typeof raw === 'string' ? raw.trim() : null;
 }
 
-/**
- * Admin CSRF gate for cookie-based auth.
- * Token source:
- * - multipart/form-data: field CSRF_FORM_FIELD
- * - otherwise: header x-csrf-token
- *
- * Fail-closed:
- * - missing/invalid token => 403
- * - CSRF secret misconfigured => 503 (not 500)
- */
 export function requireAdminCsrf(
   request: NextRequest,
   purpose: string,
@@ -48,7 +38,6 @@ export function requireAdminCsrf(
     }
     return null;
   } catch (err) {
-    // e.g. CSRF_SECRET missing -> csrf.ts throws
     logError('CSRF verification failed (misconfigured)', err);
     return NextResponse.json({ code: 'CSRF_DISABLED' }, { status: 503 });
   }
diff --git a/frontend/lib/security/csrf.ts b/frontend/lib/security/csrf.ts
index a1f7589d..cb23be93 100644
--- a/frontend/lib/security/csrf.ts
+++ b/frontend/lib/security/csrf.ts
@@ -5,8 +5,7 @@ import type { NextRequest } from 'next/server';
 
 export const CSRF_FORM_FIELD = 'csrfToken' as const;
 
-const DEFAULT_TTL_SECONDS = 60 * 60; // 1h
-
+const DEFAULT_TTL_SECONDS = 60 * 60;
 function getSecret(): string {
   const secret = process.env.CSRF_SECRET;
   if (!secret) throw new Error('Missing env var: CSRF_SECRET');
@@ -35,10 +34,6 @@ function b64urlDecodeUtf8(input: string): string {
   return Buffer.from(input, 'base64url').toString('utf8');
 }
 
-/**
- * Stateless CSRF token: payload(JSON)->base64url + HMAC signature.
- * TTL enforced via exp (unix seconds).
- */
 export function issueCsrfToken(
   purpose: string,
   ttlSeconds = DEFAULT_TTL_SECONDS
@@ -80,17 +75,12 @@ export function verifyCsrfToken(token: string, purpose: string): boolean {
   if (typeof iat !== 'number' || !Number.isFinite(iat)) return false;
   if (typeof exp !== 'number' || !Number.isFinite(exp)) return false;
 
-  // TTL + basic sanity: exp must be >= now and not before iat
   if (exp < now) return false;
   if (exp < iat) return false;
 
   return true;
 }
 
-/**
- * Secondary defense: same-origin check.
- * Use Origin when present, otherwise fall back to Referer.
- */
 export function isSameOrigin(req: NextRequest): boolean {
   const expected = req.nextUrl.origin;
 
diff --git a/frontend/lib/security/origin.ts b/frontend/lib/security/origin.ts
index 00f66581..9fecea22 100644
--- a/frontend/lib/security/origin.ts
+++ b/frontend/lib/security/origin.ts
@@ -13,7 +13,6 @@ function buildErrorResponse(code: string, message: string) {
     { status: 403 }
   );
 
-  // Ensure security errors are never cached by intermediaries.
   res.headers.set('Cache-Control', 'no-store');
 
   return res;
@@ -23,10 +22,8 @@ export function normalizeOrigin(input: string): string {
   const trimmed = input.trim().replace(/\/+$/, '');
 
   try {
-    // If the input is a valid URL (incl. scheme), normalize to canonical origin.
     return new URL(trimmed).origin;
   } catch {
-    // Backward-compatible fallback for values like "example.com" (no scheme).
     return trimmed;
   }
 }
diff --git a/frontend/lib/security/rate-limit.ts b/frontend/lib/security/rate-limit.ts
index cc5e5ab2..08b53f22 100644
--- a/frontend/lib/security/rate-limit.ts
+++ b/frontend/lib/security/rate-limit.ts
@@ -114,14 +114,11 @@ export function getClientIpFromHeaders(headers: Headers): string | null {
   );
   const trustCf = envBool('TRUST_CF_CONNECTING_IP', false);
 
-  // Allow Cloudflare canonical header (highest priority) only when explicitly trusted.
   if (trustCf) {
     const cf = (headers.get('cf-connecting-ip') ?? '').trim();
     if (cf && isIP(cf)) return cf;
   }
 
-  // Trusted boundary: if we don't trust forwarded headers,
-  // do NOT fall back to spoofable headers.
   if (!trustForwarded) return null;
 
   const xr = (headers.get('x-real-ip') ?? '').trim();
@@ -144,7 +141,6 @@ export function getClientIp(request: NextRequest): string | null {
 
 export function getRateLimitSubject(request: NextRequest): string {
   const ip = getClientIp(request);
-  // Keep subject clean/stable for IPv6 (no ":"), consistent with key normalization.
   if (ip) return normalizeRateLimitSubject(ip);
 
   const ua = (request.headers.get('user-agent') ?? '').trim();
@@ -158,11 +154,6 @@ export type RateLimitOk = { ok: true; remaining: number };
 export type RateLimitNo = { ok: false; retryAfterSeconds: number };
 export type RateLimitDecision = RateLimitOk | RateLimitNo;
 
-/**
- * DB-backed fixed-window limiter (cross-instance).
- * - Atomic insert/update with conditional WHERE to avoid going above limit.
- * - If limited: computes Retry-After from stored window_started_at.
- */
 export async function enforceRateLimit(params: {
   key: string;
   limit: number;
@@ -173,7 +164,6 @@ export async function enforceRateLimit(params: {
   const { legacyKey, normalizedKey } = normalizeRateLimitKey(params.key);
   const key = normalizedKey;
 
-  // Allow disabling via env (for emergency): RATE_LIMIT_DISABLED=1
   if (envInt('RATE_LIMIT_DISABLED', 0) === 1) {
     return { ok: true, remaining: Number.MAX_SAFE_INTEGER };
   }
@@ -192,8 +182,12 @@ export async function enforceRateLimit(params: {
             SELECT 1 FROM api_rate_limits WHERE key = ${normalizedKey}
           )
       `);
-    } catch {
-      // Ignore conflicts; fall through to use normalizedKey for enforcement.
+    } catch (err) {
+      console.warn(
+        '[rate-limit] Failed to migrate legacy key:',
+        legacyKey,
+        err
+      );
     }
   }
 
diff --git a/frontend/lib/security/stripe-webhook-rate-limit.ts b/frontend/lib/security/stripe-webhook-rate-limit.ts
index 38dbbac2..22875b43 100644
--- a/frontend/lib/security/stripe-webhook-rate-limit.ts
+++ b/frontend/lib/security/stripe-webhook-rate-limit.ts
@@ -5,7 +5,6 @@ type StripeWebhookRateLimitConfig = {
   windowSeconds: number;
 };
 
-// Must match previous inline defaults in the webhook route.
 const DEFAULT_STRIPE_WEBHOOK_RL_MAX = 30;
 const DEFAULT_STRIPE_WEBHOOK_RL_WINDOW_SECONDS = 60;
 
@@ -15,7 +14,6 @@ function parsePositiveIntStrict(raw: string | undefined): number | null {
   const trimmed = raw.trim();
   if (!trimmed) return null;
 
-  // Strict: digits only (no "+", "-", decimals, exponent, or "10abc").
   if (!/^\d+$/.test(trimmed)) return null;
 
   const parsed = Number.parseInt(trimmed, 10);
@@ -44,7 +42,7 @@ export function resolveStripeWebhookRateLimit(
         [
           process.env.STRIPE_WEBHOOK_MISSING_SIG_RL_MAX,
           process.env.STRIPE_WEBHOOK_RL_MAX,
-          // legacy fallback to preserve current behavior:
+
           process.env.STRIPE_WEBHOOK_INVALID_SIG_RL_MAX,
         ],
         DEFAULT_STRIPE_WEBHOOK_RL_MAX
@@ -53,7 +51,7 @@ export function resolveStripeWebhookRateLimit(
         [
           process.env.STRIPE_WEBHOOK_MISSING_SIG_RL_WINDOW_SECONDS,
           process.env.STRIPE_WEBHOOK_RL_WINDOW_SECONDS,
-          // legacy fallback to preserve current behavior:
+
           process.env.STRIPE_WEBHOOK_INVALID_SIG_RL_WINDOW_SECONDS,
         ],
         DEFAULT_STRIPE_WEBHOOK_RL_WINDOW_SECONDS
diff --git a/frontend/lib/services/errors.ts b/frontend/lib/services/errors.ts
index 529eca16..42be4771 100644
--- a/frontend/lib/services/errors.ts
+++ b/frontend/lib/services/errors.ts
@@ -1,7 +1,3 @@
-// export class InvalidPayloadError extends Error {
-//   code = "INVALID_PAYLOAD" as const
-// }
-
 export class IdempotencyConflictError extends Error {
   code = 'IDEMPOTENCY_CONFLICT' as const;
   details?: Record<string, unknown>;
@@ -31,9 +27,6 @@ export class OrderNotFoundError extends Error {
   }
 }
 
-// export class SlugConflictError extends Error {
-//   code = "SLUG_CONFLICT" as const
-// }
 export class InvalidPayloadError extends Error {
   code: string;
 
diff --git a/frontend/lib/services/inventory.ts b/frontend/lib/services/inventory.ts
index 9d34b8c4..e19947d4 100644
--- a/frontend/lib/services/inventory.ts
+++ b/frontend/lib/services/inventory.ts
@@ -12,26 +12,19 @@ function releaseKey(orderId: string, productId: string) {
   return `release:${orderId}:${productId}`;
 }
 
-// Robust status extractor for Drizzle/Neon variations.
-// We do NOT treat "unknown shape" as "insufficient" because that breaks invariants.
 function readStatus(res: unknown): string {
   const r: any = res as any;
 
-  // Common shapes:
-  // 1) { rows: [ { status: '...' } ] }
-  // 2) [ { status: '...' } ]
-  // 3) { rowCount, rows } but keys can be uppercase depending on driver
   const rows = Array.isArray(r)
     ? r
     : Array.isArray(r?.rows)
-    ? r.rows
-    : undefined;
+      ? r.rows
+      : undefined;
   const row = rows?.[0];
 
   const status = row?.status ?? row?.STATUS;
   if (typeof status === 'string' && status.length > 0) return status;
 
-  // Fail hard: better than silently turning into OUT_OF_STOCK and doing release.
   throw new Error(
     `inventory: unexpected db.execute result shape (missing status). ` +
       `Got: ${JSON.stringify(
diff --git a/frontend/lib/services/orders/_shared.ts b/frontend/lib/services/orders/_shared.ts
index b1495f94..a82055f5 100644
--- a/frontend/lib/services/orders/_shared.ts
+++ b/frontend/lib/services/orders/_shared.ts
@@ -4,7 +4,10 @@ import { createCartItemKey } from '@/lib/shop/cart-item-key';
 import { type PaymentProvider } from '@/lib/shop/payments';
 import { type CurrencyCode } from '@/lib/shop/currency';
 import { MAX_QUANTITY_PER_LINE } from '@/lib/validation/shop';
-import { type CheckoutItem, type OrderSummaryWithMinor } from '@/lib/types/shop';
+import {
+  type CheckoutItem,
+  type OrderSummaryWithMinor,
+} from '@/lib/types/shop';
 import { orders } from '@/db/schema/shop';
 import { db } from '@/db';
 
@@ -33,11 +36,9 @@ export function resolvePaymentProvider(
 
   if (provider === 'stripe' || provider === 'none') return provider;
 
-  // legacy / corrupted data fallback:
   if (order.paymentIntentId) return 'stripe';
   if (order.paymentStatus === 'paid') return 'none';
 
-  // safest default: treat as stripe to avoid skipping payment flows
   return 'stripe';
 }
 
@@ -92,7 +93,6 @@ export function hashIdempotencyRequest(params: {
   currency: string;
   userId: string | null;
 }) {
-  // Stable canonical form:
   const normalized = [...params.items]
     .map(i => ({
       productId: i.productId,
diff --git a/frontend/lib/services/orders/checkout.ts b/frontend/lib/services/orders/checkout.ts
index a767b7e8..acecc5a2 100644
--- a/frontend/lib/services/orders/checkout.ts
+++ b/frontend/lib/services/orders/checkout.ts
@@ -46,9 +46,6 @@ import { getOrderById, getOrderByIdempotencyKey } from './summary';
 import { restockOrder } from './restock';
 import { guardedPaymentStatusUpdate } from './payment-state';
 
-// NOTE: PaymentStatus semantics for Stripe:
-// pending (no PI yet) -> requires_payment (PI attached) -> paid/failed/refunded via provider events.
-
 async function reconcileNoPaymentOrder(
   orderId: string
 ): Promise<OrderSummaryWithMinor> {
@@ -76,7 +73,6 @@ async function reconcileNoPaymentOrder(
     paymentStatus: row.paymentStatus as PaymentStatus,
   });
 
-  // Only reconcile "no payments" workflow.
   if (provider !== 'none') return getOrderById(orderId);
 
   if (row.paymentIntentId) {
@@ -86,16 +82,11 @@ async function reconcileNoPaymentOrder(
     );
   }
 
-  // IMPORTANT:
-  // With DB CHECK, provider='none' cannot use pending/requires_payment.
-  // Therefore paymentStatus is not a reliable "finality" signal here.
-  // Finality is inventory-driven: if inventory is reserved, the order is complete.
   if (row.inventoryStatus === 'reserved') {
     return getOrderById(orderId);
   }
 
   if (row.inventoryStatus === 'release_pending') {
-    // Do not attempt to reserve again while release is pending.
     try {
       await restockOrder(orderId, {
         reason: 'failed',
@@ -112,8 +103,6 @@ async function reconcileNoPaymentOrder(
       row.failureMessage ?? 'Order cannot be completed (release pending).'
     );
   }
-
-  // If it was already released/restocked - treat as failed.
   if (
     row.inventoryStatus === 'released' ||
     row.stockRestored ||
@@ -192,8 +181,6 @@ async function reconcileNoPaymentOrder(
     return getOrderById(orderId);
   } catch (e) {
     const failAt = new Date();
-
-    // Mark as "release pending" only. Finalization must happen via restockOrder().
     const isOos = e instanceof InsufficientStockError;
 
     await db
@@ -205,7 +192,6 @@ async function reconcileNoPaymentOrder(
         failureMessage: isOos
           ? e.message
           : 'Checkout failed after reservation attempt.',
-        // IMPORTANT: do NOT set stockRestored/restockedAt here.
         updatedAt: failAt,
       })
       .where(eq(orders.id, orderId));
@@ -216,7 +202,6 @@ async function reconcileNoPaymentOrder(
         workerId: 'reconcileNoPaymentOrder',
       });
     } catch (restockErr) {
-      // If release fails, we must not lie in order state; leave it for sweeps/janitor.
       logError(
         `[reconcileNoPaymentOrder] restock failed orderId=${orderId}`,
         restockErr
@@ -241,14 +226,11 @@ async function getProductsForCheckout(
       stock: products.stock,
       sku: products.sku,
 
-      // variant option sets (text/CSV/JSON)
       colors: products.colors,
       sizes: products.sizes,
 
-      // canonical price (minor)
       priceMinor: productPrices.priceMinor,
 
-      // legacy fallback (keep for safety during rollout)
       price: productPrices.price,
 
       originalPrice: productPrices.originalPrice,
@@ -274,21 +256,18 @@ type CheckoutProductRow = Awaited<
 function parseVariantList(raw: unknown): string[] {
   if (raw == null) return [];
 
-  // If DB returns array (e.g. text[] / jsonb)
   if (Array.isArray(raw)) {
     const out = raw.map(x => normVariant(String(x))).filter(x => x.length > 0);
     return Array.from(new Set(out));
   }
 
   if (typeof raw !== 'string') {
-    // Unknown shape -> treat as "no configured variants"
     return [];
   }
 
   const v0 = raw.trim();
   if (!v0) return [];
 
-  // JSON array: '["S","M"]'
   if (v0.startsWith('[')) {
     try {
       const parsed = JSON.parse(v0);
@@ -299,17 +278,15 @@ function parseVariantList(raw: unknown): string[] {
         return Array.from(new Set(out));
       }
     } catch {
-      // fallthrough to CSV parsing
+      // Intentionally empty: fall through to delimiter-based parsing
     }
   }
 
-  // Postgres array literal string: '{S,M}'
   const v =
     v0.startsWith('{') && v0.endsWith('}')
       ? v0.slice(1, -1).replace(/"/g, '')
       : v0;
 
-  // CSV / ';' / newline
   const out = v
     .split(/[,;\n\r]+/g)
     .map(x => normVariant(x))
@@ -329,8 +306,6 @@ function priceItems(
     if (!product) {
       throw new InvalidPayloadError('Some products are unavailable.');
     }
-    //Price must exist for requested currency.
-    // With leftJoin, missing row => priceCurrency null and both price fields null.
     if (
       !product.priceCurrency ||
       (product.priceMinor == null && product.price == null)
@@ -341,7 +316,6 @@ function priceItems(
       });
     }
 
-    // canonical: int minor
     let unitPriceCents: number | null = null;
     if (product.priceMinor !== null && product.priceMinor !== undefined) {
       if (
@@ -352,8 +326,6 @@ function priceItems(
       }
       unitPriceCents = product.priceMinor;
     }
-
-    // safety fallback (should become dead code after migration + dual-write stabilizes)
     if (unitPriceCents == null) {
       const unitPrice = coercePriceFromDb(product.price, {
         field: 'price',
@@ -405,10 +377,6 @@ export async function createOrderWithItems({
   const paymentsEnabled = isPaymentsEnabled();
   const paymentProvider: PaymentProvider = paymentsEnabled ? 'stripe' : 'none';
 
-  // paymentStatus is initialized here only; ALL transitions must go via guardedPaymentStatusUpdate.
-  // IMPORTANT: DB CHECK requires provider='none' => payment_status in ('paid','failed')
-  // Avoid the cycle: requires_payment -> pending -> requires_payment.
-  // For Stripe, start at pending and switch to requires_payment only after PI is attached.
   const initialPaymentStatus: PaymentStatus =
     paymentProvider === 'none' ? 'paid' : 'pending';
 
@@ -438,7 +406,6 @@ export async function createOrderWithItems({
 
     if (!row) throw new OrderNotFoundError('Order not found');
 
-    // currency mismatch => hard conflict
     if (row.currency !== currency) {
       throw new IdempotencyConflictError(
         'Idempotency key already used with different currency.',
@@ -446,7 +413,6 @@ export async function createOrderWithItems({
       );
     }
 
-    // If DB hash is missing (legacy), derive from persisted state (order_items + order currency + userId)
     const derivedExistingHash =
       row.idempotencyRequestHash ??
       hashIdempotencyRequest({
@@ -461,7 +427,6 @@ export async function createOrderWithItems({
       });
 
     if (!row.idempotencyRequestHash) {
-      // best-effort: backfill for future strict checks
       try {
         await db
           .update(orders)
@@ -489,7 +454,6 @@ export async function createOrderWithItems({
     }
 
     if (row.paymentStatus === 'failed') {
-      // Best-effort cleanup if inventory was left reserved due to crash.
       try {
         await restockOrder(existing.id, { reason: 'failed' });
       } catch (restockErr) {
@@ -505,12 +469,9 @@ export async function createOrderWithItems({
     }
   }
 
-  // 1) idempotency read
   const existing = await getOrderByIdempotencyKey(db, idempotencyKey);
   if (existing) {
     await assertIdempotencyCompatible(existing);
-    // If payments are disabled, we must guarantee a final consistent state
-    // (previous run could have crashed after order insert).
     if (!paymentsEnabled) {
       const reconciled = await reconcileNoPaymentOrder(existing.id);
       return {
@@ -525,8 +486,6 @@ export async function createOrderWithItems({
       totalCents: requireTotalCents(existing),
     };
   }
-
-  // 3) pricing (read-only)
   const uniqueProductIds = Array.from(
     new Set(normalizedItems.map(i => i.productId))
   );
@@ -537,7 +496,6 @@ export async function createOrderWithItems({
   }
 
   const productMap = new Map(dbProducts.map(p => [p.id, p]));
-  // 3.1) Variant validation (fail-fast; no side effects)
   const variantMap = new Map(
     dbProducts.map(p => [
       p.id,
@@ -550,7 +508,11 @@ export async function createOrderWithItems({
 
   for (const item of normalizedItems) {
     const cfg = variantMap.get(item.productId);
-    if (!cfg) continue; // product existence handled elsewhere
+    if (!cfg) {
+      throw new InvalidPayloadError(
+        `Invariant violation: missing variant config for product ${item.productId} (normalizedItems=${normalizedItems.length}, uniqueProductIds=${uniqueProductIds.length}, dbProducts=${dbProducts.length}).`
+      );
+    }
 
     const selectedSize = normVariant(item.selectedSize ?? '');
     const selectedColor = normVariant(item.selectedColor ?? '');
@@ -587,7 +549,6 @@ export async function createOrderWithItems({
   const pricedItems = priceItems(normalizedItems, productMap, currency);
   const orderTotalCents = sumLineTotals(pricedItems.map(i => i.lineTotalCents));
 
-  // 4) create order skeleton (CREATED/none)
   let orderId: string;
   try {
     const [created] = await db
@@ -601,16 +562,13 @@ export async function createOrderWithItems({
         paymentProvider,
         paymentIntentId: null,
 
-        // new workflow fields:
         status: 'CREATED',
-        // IMPORTANT (no-payments): payment_status must be 'paid' due to DB CHECK,
-        // so we must track in-progress via inventory_status.
+
         inventoryStatus: paymentsEnabled ? 'none' : 'reserving',
         failureCode: null,
         failureMessage: null,
         idempotencyRequestHash: requestHash,
 
-        // legacy/idempotency:
         stockRestored: false,
         restockedAt: null,
         idempotencyKey,
@@ -624,7 +582,6 @@ export async function createOrderWithItems({
     if ((error as { code?: string }).code === '23505') {
       const existingOrder = await getOrderByIdempotencyKey(db, idempotencyKey);
       if (existingOrder) {
-        // IMPORTANT: in race conditions, we MUST still enforce hash/currency compatibility
         await assertIdempotencyCompatible(existingOrder);
         if (!paymentsEnabled) {
           const reconciled = await reconcileNoPaymentOrder(existingOrder.id);
@@ -644,7 +601,6 @@ export async function createOrderWithItems({
     throw error;
   }
 
-  // 5) upsert order_items (requires UNIQUE(order_id, product_id, selected_size, selected_color))
   if (pricedItems.length) {
     await db
       .insert(orderItems)
@@ -693,13 +649,11 @@ export async function createOrderWithItems({
     .set({ inventoryStatus: 'reserving', updatedAt: now })
     .where(eq(orders.id, orderId));
 
-  // stock is per-product => reserve aggregated by productId across variants
   const itemsToReserve = aggregateReserveByProductId(
     pricedItems.map(i => ({ productId: i.productId, quantity: i.quantity }))
   );
 
   try {
-    // 7) reserve inventory (idempotent + atomic in inventory.ts)
     for (const item of itemsToReserve) {
       const res = await applyReserveMove(
         orderId,
@@ -713,7 +667,6 @@ export async function createOrderWithItems({
       }
     }
 
-    // 8) success
     await db
       .update(orders)
       .set({
@@ -768,7 +721,6 @@ export async function createOrderWithItems({
         failureMessage: isOos
           ? e.message
           : 'Checkout failed after reservation attempt.',
-        // IMPORTANT: do NOT set stockRestored/restockedAt here.
         updatedAt: failAt,
       })
       .where(eq(orders.id, orderId));
diff --git a/frontend/lib/services/orders/payment-attempts.ts b/frontend/lib/services/orders/payment-attempts.ts
index 8bcbfa83..f0f81bde 100644
--- a/frontend/lib/services/orders/payment-attempts.ts
+++ b/frontend/lib/services/orders/payment-attempts.ts
@@ -99,7 +99,6 @@ async function createActiveAttempt(
     if (!row) throw new Error('Failed to insert payment_attempts row');
     return row;
   } catch (e) {
-    // race: another request may have created active attempt, return it
     const existing = await getActiveAttempt(orderId, provider);
     if (existing) return existing;
     throw e;
@@ -114,7 +113,6 @@ async function upsertBackfillAttemptForExistingPI(args: {
 }): Promise<PaymentAttemptRow> {
   const { orderId, provider, paymentIntentId, maxAttempts } = args;
 
-  // If an attempt already references this PI, reuse it.
   const found = await db
     .select()
     .from(paymentAttempts)
@@ -128,11 +126,8 @@ async function upsertBackfillAttemptForExistingPI(args: {
 
   const existingAttempt = found[0] ?? null;
   if (existingAttempt) {
-    // Guard: never reuse attempt that belongs to a different order (cross-order PI reuse).
     if (existingAttempt.orderId === orderId) return existingAttempt;
 
-    // Fail-closed: PI is already linked to another order. Do NOT create a new attempt
-    // that would bind this PI to a second order.
     throw new OrderStateInvalidError(
       'PaymentIntent is already associated with a different order.',
       {
@@ -173,21 +168,12 @@ async function upsertBackfillAttemptForExistingPI(args: {
 
     return inserted[0]!;
   } catch (e) {
-    // On conflict (active unique), return active attempt.
     const active = await getActiveAttempt(orderId, provider);
     if (active) return active;
     throw e;
   }
 }
 
-/**
- * P0.7 entrypoint:
- * - no infinite PaymentIntents per order (durable attempt)
- * - controlled init (one active attempt)
- * - audit trail (payment_attempts)
- *
- * Returns clientSecret to initialize Stripe Elements.
- */
 export async function ensureStripePaymentIntentForOrder(args: {
   orderId: string;
   existingPaymentIntentId?: string | null;
@@ -202,10 +188,8 @@ export async function ensureStripePaymentIntentForOrder(args: {
   const provider: PaymentProvider = 'stripe';
   const maxAttempts = args.maxAttempts ?? DEFAULT_MAX_ATTEMPTS;
 
-  // 1) If we already have an active attempt, prefer it.
   let attempt = await getActiveAttempt(orderId, provider);
 
-  // 2) If order already has a PI, ensure there is an attempt row for it (audit/backfill).
   if (!attempt && existingPaymentIntentId && existingPaymentIntentId.trim()) {
     attempt = await upsertBackfillAttemptForExistingPI({
       orderId,
@@ -214,12 +198,10 @@ export async function ensureStripePaymentIntentForOrder(args: {
       maxAttempts,
     });
   }
-  // 3) If still none — create new attempt (with limit).
   if (!attempt) {
     attempt = await createActiveAttempt(orderId, provider, maxAttempts);
   }
 
-  // 4) If attempt already has PI — retrieve (and handle canceled).
   if (
     attempt.providerPaymentIntentId &&
     attempt.providerPaymentIntentId.trim()
@@ -228,7 +210,6 @@ export async function ensureStripePaymentIntentForOrder(args: {
       attempt.providerPaymentIntentId.trim()
     );
 
-    // If PI was canceled, mark attempt canceled and create a new attempt (bounded by maxAttempts).
     if (pi.status === 'canceled') {
       await db
         .update(paymentAttempts)
@@ -284,7 +265,6 @@ export async function ensureStripePaymentIntentForOrder(args: {
     };
   }
 
-  // 5) No PI yet -> create PI using DB readback (P0.6 invariant), idempotent by attempt.
   try {
     const snapshot = await readStripePaymentIntentParams(orderId);
 
@@ -336,10 +316,6 @@ export async function ensureStripePaymentIntentForOrder(args: {
   }
 }
 
-/**
- * Webhook helper: mark attempt final by Stripe PI id.
- * Call this from stripe webhook route for succeeded/failed/canceled.
- */
 export async function markStripeAttemptFinal(args: {
   paymentIntentId: string;
   status: 'succeeded' | 'failed' | 'canceled';
@@ -353,8 +329,8 @@ export async function markStripeAttemptFinal(args: {
       status === 'succeeded'
         ? 'succeeded'
         : status === 'canceled'
-        ? 'canceled'
-        : 'failed';
+          ? 'canceled'
+          : 'failed';
 
     await db
       .update(paymentAttempts)
@@ -368,7 +344,6 @@ export async function markStripeAttemptFinal(args: {
       })
       .where(eq(paymentAttempts.providerPaymentIntentId, paymentIntentId));
   } catch (error) {
-    // IMPORTANT: fail-open — не ламаємо webhook через audit layer
     logError('payment_attempt_finalize_failed', error, {
       paymentIntentId: args.paymentIntentId,
       status: args.status,
diff --git a/frontend/lib/services/orders/payment-intent.ts b/frontend/lib/services/orders/payment-intent.ts
index 45019e5d..b82f8120 100644
--- a/frontend/lib/services/orders/payment-intent.ts
+++ b/frontend/lib/services/orders/payment-intent.ts
@@ -35,8 +35,6 @@ export async function setOrderPaymentIntent({
     );
   }
 
-  // New flow: pending -> requires_payment when attaching PI.
-  // Keep requires_payment only for backward-compat (old orders created before this change).
   const allowed: PaymentStatus[] = ['pending', 'requires_payment'];
   if (!allowed.includes(existing.paymentStatus as PaymentStatus)) {
     throw new InvalidPayloadError(
@@ -71,8 +69,6 @@ export async function setOrderPaymentIntent({
   });
 
   if (!res.applied) {
-    // Keep error semantics consistent with previous validation rules.
-    // This also guarantees we won't ever do failed/refunded -> requires_payment.
     throw new InvalidPayloadError(
       `Order payment intent update blocked (${res.reason}).`
     );
@@ -110,7 +106,6 @@ export async function readStripePaymentIntentParams(orderId: string): Promise<{
     );
   }
 
-  // Payable-state gate: fail-closed for paid/failed/refunded/canceled/etc.
   const allowed: PaymentStatus[] = ['pending', 'requires_payment'];
   if (!allowed.includes(existing.paymentStatus as PaymentStatus)) {
     throw new OrderStateInvalidError(
@@ -130,7 +125,6 @@ export async function readStripePaymentIntentParams(orderId: string): Promise<{
 
   const amountMinor = existing.totalAmountMinor;
 
-  // Canonical money source = DB minor units. Fail-closed on invalid totals.
   if (!Number.isSafeInteger(amountMinor) || amountMinor <= 0) {
     throw new OrderStateInvalidError(
       'Invalid order total for Stripe payment intent creation.',
diff --git a/frontend/lib/services/orders/payment-state.ts b/frontend/lib/services/orders/payment-state.ts
index a2838d8c..703a4b34 100644
--- a/frontend/lib/services/orders/payment-state.ts
+++ b/frontend/lib/services/orders/payment-state.ts
@@ -12,19 +12,14 @@ export type PaymentTransitionSource =
   | 'janitor'
   | 'system';
 
-// Stripe flow transitions
 const ALLOWED_FROM_STRIPE: Record<PaymentStatus, readonly PaymentStatus[]> = {
   pending: ['requires_payment'],
   requires_payment: ['pending'],
   paid: ['pending', 'requires_payment'],
   failed: ['pending', 'requires_payment'],
-  // allow refunds even if we missed/never persisted "paid" (webhook ordering / retries)
   refunded: ['paid', 'pending', 'requires_payment'],
 };
 
-// payment_provider='none' (no-payments) rules:
-// DB CHECK already enforces only ('paid','failed'), and in this workflow 'paid' is not finality.
-// We allow paid -> failed (e.g. inventory failed / stale orphan), but NOT failed -> paid.
 const ALLOWED_FROM_NONE: Record<PaymentStatus, readonly PaymentStatus[]> = {
   pending: [],
   requires_payment: [],
@@ -57,29 +52,14 @@ function hasSetFields(set: unknown): boolean {
 export type GuardedPaymentUpdateArgs = {
   orderId: string;
 
-  /**
-   * IMPORTANT: caller must pass the provider policy explicitly.
-   * This prevents accidental use of Stripe rules for no-payments (and vice versa).
-   */
   paymentProvider: PaymentProvider;
 
   to: PaymentStatus;
 
-  /**
-   * Extra fields updated together with paymentStatus (psp fields, status, timestamps, etc).
-   * paymentStatus MUST NOT be provided here.
-   */
   set?: Partial<Omit<typeof orders.$inferInsert, 'paymentStatus' | 'id'>>;
 
-  /**
-   * Extra WHERE conditions (stock/inventory safety gates, repair gates, etc)
-   */
   extraWhere?: SQL;
 
-  /**
-   * Allow "same-state update" to apply set (needed for repair updates).
-   * Default: true if set has any fields.
-   */
   allowSameStateUpdate?: boolean;
 
   source: PaymentTransitionSource;
@@ -101,9 +81,7 @@ export type GuardedPaymentUpdateResult =
       currentProvider?: PaymentProvider;
     };
 
-async function getCurrentState(
-  orderId: string
-): Promise<{
+async function getCurrentState(orderId: string): Promise<{
   paymentStatus: PaymentStatus;
   paymentProvider: PaymentProvider;
 } | null> {
@@ -124,7 +102,6 @@ export async function guardedPaymentStatusUpdate(
 ): Promise<GuardedPaymentUpdateResult> {
   const { orderId, paymentProvider, to, source, eventId, note } = args;
 
-  // Hard reject invalid targets for no-payments before we even touch DB.
   if (
     paymentProvider === 'none' &&
     (to === 'pending' || to === 'requires_payment' || to === 'refunded')
@@ -158,7 +135,6 @@ export async function guardedPaymentStatusUpdate(
     ? Array.from(new Set([...baseAllowed, to]))
     : baseAllowed;
 
-  // If nothing is eligible (e.g. provider none + pending), block early
   if (!eligibleFrom.length) {
     const current = await getCurrentState(orderId);
     if (!current) return { applied: false, reason: 'NOT_FOUND' };
@@ -201,7 +177,6 @@ export async function guardedPaymentStatusUpdate(
 
   if (updated.length > 0) return { applied: true };
 
-  // Diagnose why not applied
   const current = await getCurrentState(orderId);
   if (!current) return { applied: false, reason: 'NOT_FOUND' };
 
@@ -253,7 +228,6 @@ export async function guardedPaymentStatusUpdate(
     };
   }
 
-  // Transition is allowed by matrix, but blocked by extraWhere (stockRestored/inventoryStatus gates etc)
   return {
     applied: false,
     reason: 'BLOCKED',
@@ -262,5 +236,4 @@ export async function guardedPaymentStatusUpdate(
   };
 }
 
-// Export for unit testing (transition matrix)
 export const __paymentTransitions = { isAllowed, allowedFrom };
diff --git a/frontend/lib/services/orders/psp-metadata/refunds.ts b/frontend/lib/services/orders/psp-metadata/refunds.ts
index 80e85d5a..14d3089e 100644
--- a/frontend/lib/services/orders/psp-metadata/refunds.ts
+++ b/frontend/lib/services/orders/psp-metadata/refunds.ts
@@ -23,7 +23,6 @@ function toNonEmptyString(v: unknown): string | null {
 function toCurrency(v: unknown, fallback: string): string {
   const s = toNonEmptyString(v);
   if (!s) return fallback;
-  // keep tolerant but normalize common cases (usd -> USD)
   return s.toUpperCase();
 }
 
@@ -32,12 +31,11 @@ function toAmountMinor(v: unknown): number | null {
     typeof v === 'number'
       ? v
       : typeof v === 'string' && v.trim().length
-      ? Number(v)
-      : NaN;
+        ? Number(v)
+        : NaN;
 
   if (!Number.isFinite(n)) return null;
 
-  // money minor must be integer >= 0
   const i = Math.trunc(n);
   if (i < 0) return null;
   if (!Number.isSafeInteger(i)) return null;
@@ -58,8 +56,8 @@ function normalizeRefundRecord(
     (typeof (r as any).refundId === 'number'
       ? String((r as any).refundId)
       : typeof (r as any).id === 'number'
-      ? String((r as any).id)
-      : null);
+        ? String((r as any).id)
+        : null);
 
   if (!refundId) return null;
 
@@ -98,7 +96,6 @@ export function normalizeRefundsFromMeta(
   const m = ensureMetaObject(meta) as any;
 
   if (Array.isArray(m.refunds)) {
-    // hardening: only return validated records
     return (m.refunds as unknown[])
       .map(r => normalizeRefundRecord(r, fallback))
       .filter((r): r is RefundMetaRecord => r !== null);
diff --git a/frontend/lib/services/orders/refund.ts b/frontend/lib/services/orders/refund.ts
index 6cfc37af..f4dcbf6d 100644
--- a/frontend/lib/services/orders/refund.ts
+++ b/frontend/lib/services/orders/refund.ts
@@ -36,7 +36,6 @@ export async function refundOrder(
 
   if (!order) throw new OrderNotFoundError(orderId);
 
-  // Preconditions (fail-closed)
   if (order.paymentProvider !== 'stripe') {
     throw invalid(
       'REFUND_PROVIDER_NOT_STRIPE',
@@ -79,7 +78,6 @@ export async function refundOrder(
     currency
   );
 
-  // Domain idempotency: if already recorded in metadata — return summary
   const existingRefunds = normalizeRefundsFromMeta(order.pspMetadata, {
     currency,
     createdAt: order.createdAt.toISOString(),
@@ -92,7 +90,6 @@ export async function refundOrder(
     return await getOrderById(orderId);
   }
 
-  // Real Stripe call (Stripe-idempotent)
   const { refundId, status } = await createRefund({
     orderId,
     paymentIntentId,
@@ -117,7 +114,6 @@ export async function refundOrder(
     },
   });
 
-  // Persist ONLY metadata. payment_status not touched (source of truth = webhook)
   await db
     .update(orders)
     .set({
diff --git a/frontend/lib/services/orders/restock.ts b/frontend/lib/services/orders/restock.ts
index b842c071..a92f7d1a 100644
--- a/frontend/lib/services/orders/restock.ts
+++ b/frontend/lib/services/orders/restock.ts
@@ -10,14 +10,13 @@ import { OrderNotFoundError, OrderStateInvalidError } from '../errors';
 import { resolvePaymentProvider } from './_shared';
 import { logWarn } from '@/lib/logging';
 
+const PAYMENT_STATUS_KEY = 'paymentStatus' as const;
+
 export type RestockReason = 'failed' | 'refunded' | 'canceled' | 'stale';
 export type RestockOptions = {
   reason?: RestockReason;
-  /** If caller already claimed the order (e.g. sweep), skip local claim. */
   alreadyClaimed?: boolean;
-  /** Lease TTL for restock claim */
   claimTtlMinutes?: number;
-  /** Who is claiming (trace/debug) */
   workerId?: string;
 };
 
@@ -42,7 +41,6 @@ async function tryClaimRestockLease(params: {
       and(
         eq(orders.id, params.orderId),
         eq(orders.stockRestored, false),
-        // claim gate: only unclaimed or expired claims can be claimed
         or(
           isNull(orders.sweepClaimExpiresAt),
           lt(orders.sweepClaimExpiresAt, now)
@@ -64,7 +62,7 @@ export async function restockOrder(
     .select({
       id: orders.id,
       paymentProvider: orders.paymentProvider,
-      paymentStatus: orders.paymentStatus,
+      [PAYMENT_STATUS_KEY]: orders.paymentStatus,
       paymentIntentId: orders.paymentIntentId,
       inventoryStatus: orders.inventoryStatus,
       stockRestored: orders.stockRestored,
@@ -82,7 +80,6 @@ export async function restockOrder(
   const provider = resolvePaymentProvider(order);
   const transitionSource = options?.alreadyClaimed ? 'janitor' : 'system';
 
-  // already released / legacy idempotency
   if (
     order.inventoryStatus === 'released' ||
     order.stockRestored ||
@@ -90,7 +87,6 @@ export async function restockOrder(
   )
     return;
 
-  // If state says "none" we still may have reserve moves (crash between reserve and status update).
   const reservedMoves = await db
     .select({
       productId: inventoryMoves.productId,
@@ -105,7 +101,6 @@ export async function restockOrder(
     );
 
   if (reservedMoves.length === 0) {
-    // safety: paid can only be terminalized via refund
     if (
       !isNoPayment &&
       order.paymentStatus === 'paid' &&
@@ -113,11 +108,13 @@ export async function restockOrder(
     ) {
       throw new OrderStateInvalidError(
         `Cannot terminalize an orphan paid order without refund reason.`,
-        { orderId, details: { reason, paymentStatus: order.paymentStatus } }
+        {
+          orderId,
+          details: { reason, [PAYMENT_STATUS_KEY]: order.paymentStatus },
+        }
       );
     }
 
-    // No inventory was reserved. If caller gave no reason, do nothing (fail-closed).
     if (!reason) return;
 
     const now = new Date();
@@ -129,8 +126,8 @@ export async function restockOrder(
       (reason === 'failed'
         ? 'FAILED_ORPHAN'
         : reason === 'canceled'
-        ? 'CANCELED_ORPHAN'
-        : 'STALE_ORPHAN');
+          ? 'CANCELED_ORPHAN'
+          : 'STALE_ORPHAN');
 
     const [touched] = await db
       .update(orders)
@@ -166,7 +163,6 @@ export async function restockOrder(
         paymentProvider: provider,
         to: normalizedStatus,
         source: transitionSource,
-        // bind to this exact finalize marker (prevents races)
         extraWhere: eq(orders.restockedAt, now),
       });
     }
@@ -174,18 +170,15 @@ export async function restockOrder(
     return;
   }
 
-  // safety: paid can only be released via refund
-  // IMPORTANT: for payment_provider='none', payment_status='paid' is not a finality signal
-  // (forced by DB CHECK). Finality is inventory_status='reserved'.
   if (!isNoPayment && order.paymentStatus === 'paid' && reason !== 'refunded') {
     throw new OrderStateInvalidError(
       `Cannot restock a paid order without refund reason.`,
-      { orderId, details: { reason, paymentStatus: order.paymentStatus } }
+      {
+        orderId,
+        details: { reason, [PAYMENT_STATUS_KEY]: order.paymentStatus },
+      }
     );
   }
-  // If we have reserved moves, we must claim a lease to avoid concurrent double-processing.
-  // (Actual stock safety is guaranteed by inventory_moves move_key, but lease prevents wasted work
-  // and prevents "restocked_at" churn under concurrency.)
   const claimTtlMinutes = options?.claimTtlMinutes ?? 5;
   const workerId = options?.workerId ?? 'restock';
   if (!options?.alreadyClaimed) {
@@ -194,7 +187,7 @@ export async function restockOrder(
       workerId,
       claimTtlMinutes,
     });
-    if (!claimed) return; // someone else is processing
+    if (!claimed) return;
   }
   const now = new Date();
 
@@ -203,9 +196,6 @@ export async function restockOrder(
     .set({ inventoryStatus: 'release_pending', updatedAt: now })
     .where(and(eq(orders.id, orderId), ne(orders.inventoryStatus, 'released')));
 
-  // Apply release moves. IMPORTANT invariant:
-  // do NOT mark released/stockRestored/restockedAt unless all releases are CONFIRMED ok.
-
   const releaseFailures: Array<{ productId: string; reason: string }> = [];
 
   for (const item of reservedMoves) {
@@ -220,8 +210,8 @@ export async function restockOrder(
         typeof res === 'boolean'
           ? res === false
           : res && typeof res === 'object' && 'applied' in (res as any)
-          ? (res as any).applied === false
-          : false;
+            ? (res as any).applied === false
+            : false;
 
       if (appliedFalse) {
         const detail =
@@ -258,8 +248,6 @@ export async function restockOrder(
       details +
       (releaseFailures.length > 3 ? ', ...' : '');
 
-    // FAIL-SAFE: leave order in a state janitor can safely retry.
-    // Do NOT set: inventoryStatus='released' OR stockRestored=true OR restockedAt!=null.
     const shouldSetFailureCode = reason === 'failed' || reason === 'stale';
     await db
       .update(orders)
@@ -279,8 +267,7 @@ export async function restockOrder(
 
     return;
   }
-  // FINALIZE ONCE: only one caller may flip stock_restored/restocked_at
-  // If RETURNING is empty => already finalized by another worker (or previous attempt).
+
   const finalizedAt = new Date();
   const [finalized] = await db
     .update(orders)
@@ -317,7 +304,7 @@ export async function restockOrder(
       paymentProvider: provider,
       to: normalizedStatus,
       source: transitionSource,
-      // bind to finalize-once marker
+
       extraWhere: eq(orders.restockedAt, finalizedAt),
     });
   }
diff --git a/frontend/lib/services/orders/summary.ts b/frontend/lib/services/orders/summary.ts
index 58803ff6..1327b220 100644
--- a/frontend/lib/services/orders/summary.ts
+++ b/frontend/lib/services/orders/summary.ts
@@ -5,10 +5,7 @@ import { orderItems, orders, products } from '@/db/schema/shop';
 import { fromCents, fromDbMoney } from '@/lib/shop/money';
 import { type OrderDetail, type OrderSummaryWithMinor } from '@/lib/types/shop';
 
-import {
-  OrderNotFoundError,
-  OrderStateInvalidError,
-} from '../errors';
+import { OrderNotFoundError, OrderStateInvalidError } from '../errors';
 
 import {
   type DbClient,
@@ -97,12 +94,8 @@ export function parseOrderSummary(
       selectedSize: item.selectedSize ?? '',
       selectedColor: item.selectedColor ?? '',
       quantity: item.quantity,
-
-      // canonical:
       unitPriceMinor,
       lineTotalMinor,
-
-      // display/legacy:
       unitPrice: fromCents(unitPriceMinor),
       lineTotal: fromCents(lineTotalMinor),
     };
@@ -130,9 +123,7 @@ export function parseOrderSummary(
 
   return {
     id: order.id,
-    // canonical:
     totalAmountMinor,
-    // display/legacy:
     totalAmount: fromCents(totalAmountMinor),
     currency: order.currency,
     paymentStatus: order.paymentStatus,
@@ -169,7 +160,6 @@ export async function getOrderSummary(
   return getOrderById(id);
 }
 
-// Internal helper (used by checkout idempotency)
 export async function getOrderByIdempotencyKey(
   dbClient: DbClient,
   key: string
diff --git a/frontend/lib/services/orders/sweeps.ts b/frontend/lib/services/orders/sweeps.ts
index f2e82a91..d07ba19e 100644
--- a/frontend/lib/services/orders/sweeps.ts
+++ b/frontend/lib/services/orders/sweeps.ts
@@ -11,9 +11,9 @@ export async function restockStalePendingOrders(options?: {
   olderThanMinutes?: number;
   batchSize?: number;
   orderIds?: string[];
-  claimTtlMinutes?: number; // claim TTL window
-  workerId?: string; // identify who claimed
-  timeBudgetMs?: number; // max runtime budget for this sweep
+  claimTtlMinutes?: number;
+  workerId?: string;
+  timeBudgetMs?: number;
 }): Promise<number> {
   const MIN_OLDER_MIN = 10;
   const MAX_OLDER_MIN = 60 * 24 * 7;
@@ -57,7 +57,6 @@ export async function restockStalePendingOrders(options?: {
   );
   const deadlineMs = Date.now() + timeBudgetMs;
 
-  // If explicitly provided empty list => nothing to do (test helper).
   if (options?.orderIds && options.orderIds.length === 0) return 0;
 
   const hasExplicitIds = Boolean(options?.orderIds?.length);
@@ -81,14 +80,11 @@ export async function restockStalePendingOrders(options?: {
       eq(orders.stockRestored, false),
       isNull(orders.restockedAt),
       ne(orders.inventoryStatus, 'released'),
-      // claim gate: only unclaimed or expired claims are eligible
       or(
         isNull(orders.sweepClaimExpiresAt),
         lt(orders.sweepClaimExpiresAt, now)
       ),
     ];
-
-    // If not targeting specific orders, apply age cutoff.
     if (!hasExplicitIds) {
       baseConditions.push(lt(orders.createdAt, cutoff));
     }
@@ -140,7 +136,6 @@ export async function restockStalePendingOrders(options?: {
 
   return processed;
 }
-// Cleanup for orders stuck in "reserving" phase (inventory reservation started but never completed).
 export async function restockStuckReservingOrders(options?: {
   olderThanMinutes?: number;
   batchSize?: number;
@@ -199,29 +194,23 @@ export async function restockStuckReservingOrders(options?: {
     const claimExpiresAt = new Date(Date.now() + claimTtlMinutes * 60 * 1000);
 
     const baseConditions = [
-      // Only Stripe flow here; no-payments has its own sweep.
       eq(orders.paymentProvider, 'stripe'),
 
-      // "still in progress" payment states
       inArray(orders.paymentStatus, [
         'pending',
         'requires_payment',
       ] as PaymentStatus[]),
 
-      // stuck in reserving/releasing phase (not final)
       inArray(orders.inventoryStatus, [
         'reserving',
         'release_pending',
       ] as const),
 
-      // not already restocked/finalized
       eq(orders.stockRestored, false),
       isNull(orders.restockedAt),
 
-      // age cutoff
       lt(orders.createdAt, cutoff),
 
-      // claim gate
       or(
         isNull(orders.sweepClaimExpiresAt),
         lt(orders.sweepClaimExpiresAt, now)
@@ -242,7 +231,6 @@ export async function restockStuckReservingOrders(options?: {
         sweepClaimExpiresAt: claimExpiresAt,
         sweepRunId: runId,
         sweepClaimedBy: workerId,
-        // set failure details only if absent (keeps real error if it already exists)
         failureCode: sql`coalesce(${orders.failureCode}, 'STUCK_RESERVING_TIMEOUT')`,
         failureMessage: sql`coalesce(${orders.failureMessage}, 'Order timed out while reserving inventory.')`,
         updatedAt: now,
@@ -263,7 +251,6 @@ export async function restockStuckReservingOrders(options?: {
     for (const { id } of claimed) {
       if (Date.now() >= deadlineMs) break;
 
-      // IMPORTANT: reuse hardened exactly-once restock
       await restockOrder(id, {
         reason: 'stale',
         alreadyClaimed: true,
@@ -277,7 +264,6 @@ export async function restockStuckReservingOrders(options?: {
   return processed;
 }
 
-// Cleanup for payment_provider='none' flow where payment_status may be 'paid' before inventory reservation completes.
 export async function restockStaleNoPaymentOrders(options?: {
   olderThanMinutes?: number;
   batchSize?: number;
@@ -347,7 +333,6 @@ export async function restockStaleNoPaymentOrders(options?: {
         'release_pending',
       ] as const),
 
-      // claim gate
       or(
         isNull(orders.sweepClaimExpiresAt),
         lt(orders.sweepClaimExpiresAt, now)
@@ -387,7 +372,7 @@ export async function restockStaleNoPaymentOrders(options?: {
       if (Date.now() >= deadlineMs) break;
 
       await restockOrder(id, {
-        reason: 'stale', // reuse existing terminalization semantics
+        reason: 'stale',
         alreadyClaimed: true,
         workerId,
       });
@@ -398,4 +383,3 @@ export async function restockStaleNoPaymentOrders(options?: {
 
   return processed;
 }
-
diff --git a/frontend/lib/services/products.ts b/frontend/lib/services/products.ts
index 17fa2c8d..0c4528a0 100644
--- a/frontend/lib/services/products.ts
+++ b/frontend/lib/services/products.ts
@@ -1,6 +1,3 @@
-// frontend/lib/services/products.ts
-// Facade: keep legacy import path stable (no index.ts required)
-
 export { createProduct } from './products/mutations/create';
 export { updateProduct } from './products/mutations/update';
 export { deleteProduct } from './products/mutations/delete';
diff --git a/frontend/lib/services/products/admin/queries.ts b/frontend/lib/services/products/admin/queries.ts
index a16d4ed7..ba1d219d 100644
--- a/frontend/lib/services/products/admin/queries.ts
+++ b/frontend/lib/services/products/admin/queries.ts
@@ -24,26 +24,25 @@ export async function getAdminProductById(id: string): Promise<DbProduct> {
   return mapRowToProduct(row);
 }
 
-
 export async function getAdminProductPrices(
   productId: string
 ): Promise<AdminProductPriceRow[]> {
   const rows = await db
     .select({
       currency: productPrices.currency,
-      // canonical:
+
       priceMinor: productPrices.priceMinor,
       originalPriceMinor: productPrices.originalPriceMinor,
-      // legacy (keep during rollout):
+
       price: productPrices.price,
       originalPrice: productPrices.originalPrice,
     })
     .from(productPrices)
     .where(eq(productPrices.productId, productId));
 
-  // Guard: drizzle int columns should come as number, but never trust the driver implicitly.
   return rows.map(r => ({
     currency: r.currency as CurrencyCode,
+    // Defensive: some DB drivers return NUMERIC/DECIMAL as string/unknown at runtime; enforce safe integer minor-units here.
     priceMinor: assertMoneyMinorInt(
       r.priceMinor,
       `${String(r.currency)} priceMinor`
diff --git a/frontend/lib/services/products/cart/rehydrate.ts b/frontend/lib/services/products/cart/rehydrate.ts
index f0646ea0..61830b30 100644
--- a/frontend/lib/services/products/cart/rehydrate.ts
+++ b/frontend/lib/services/products/cart/rehydrate.ts
@@ -21,17 +21,13 @@ import { logWarn } from '@/lib/logging';
 import { PriceConfigError } from '../../errors';
 
 const fromMinorUnits = fromCents;
-// 2-decimal currencies (money helpers fromCents/toCents assume exponent=2)
 
 function assertTwoDecimalCurrency(currency: CurrencyCode): void {
-  // fromCents/toCents assume exponent=2.
-  // Guard against 0-decimal (JPY) / 3-decimal (BHD) and any future non-2-decimal currency.
   if (isTwoDecimalCurrency(currency)) return;
 
   throw new PriceConfigError(
     'Unsupported currency minor units exponent in cart rehydrate (expected 2-decimal currency).',
     {
-      // Keep productId to avoid breaking error-contract shape if it's required.
       productId: '__cart__',
       currency,
     }
@@ -140,8 +136,6 @@ export async function rehydrateCartItems(
 
   const productMap = new Map(rows.map(r => [r.id, r]));
   const removed: CartRemovedItem[] = [];
-
-  // Merge by canonical key AFTER sanitization (prevents duplicate lines).
   const merged = new Map<
     string,
     Omit<
diff --git a/frontend/lib/services/products/mutations/create.ts b/frontend/lib/services/products/mutations/create.ts
index c2b7d0da..5e570a71 100644
--- a/frontend/lib/services/products/mutations/create.ts
+++ b/frontend/lib/services/products/mutations/create.ts
@@ -1,8 +1,6 @@
 import { eq } from 'drizzle-orm';
 
-import {
-  uploadProductImageFromFile,
-} from '@/lib/cloudinary';
+import { uploadProductImageFromFile } from '@/lib/cloudinary';
 import { db } from '@/db';
 import { products, productPrices } from '@/db/schema';
 import { logError } from '@/lib/logging';
@@ -36,7 +34,6 @@ export async function createProduct(input: ProductInput): Promise<DbProduct> {
 
   const prices = normalizePricesFromInput(input);
   if (!prices.length) {
-    // Hard fail: admin flow must provide prices
     throw new InvalidPayloadError('Product pricing is required.');
   }
 
@@ -58,8 +55,6 @@ export async function createProduct(input: ProductInput): Promise<DbProduct> {
         description: (input as any).description ?? null,
         imageUrl: uploaded?.secureUrl ?? '',
         imagePublicId: uploaded?.publicId,
-
-        // legacy mirror (USD) — required by products.price NOT NULL
         price: toDbMoney(usd.priceMinor),
         originalPrice:
           usd.originalPriceMinor == null
@@ -94,12 +89,8 @@ export async function createProduct(input: ProductInput): Promise<DbProduct> {
         return {
           productId: row.id,
           currency: p.currency,
-
-          // canonical
           priceMinor,
           originalPriceMinor: originalMinor,
-
-          // legacy mirror
           price: toDbMoney(priceMinor),
           originalPrice:
             originalMinor == null ? null : toDbMoney(originalMinor),
diff --git a/frontend/lib/services/products/mutations/delete.ts b/frontend/lib/services/products/mutations/delete.ts
index 928fe85a..e1590715 100644
--- a/frontend/lib/services/products/mutations/delete.ts
+++ b/frontend/lib/services/products/mutations/delete.ts
@@ -7,8 +7,6 @@ import { logError } from '@/lib/logging';
 import { ProductNotFoundError } from '@/lib/errors/products';
 
 export async function deleteProduct(id: string): Promise<void> {
-  // Atomic delete: prices first, then product, all-or-nothing.
-  // Return imagePublicId from the deleted row to avoid stale pre-reads.
   const result = await db.execute(sql`
     WITH del_prices AS (
       DELETE FROM ${productPrices}
@@ -32,7 +30,6 @@ export async function deleteProduct(id: string): Promise<void> {
   const [deleted] = rows;
 
   if (!deleted) {
-    // not found or concurrent delete edge-case
     throw new ProductNotFoundError(id);
   }
 
diff --git a/frontend/lib/services/products/mutations/toggle.ts b/frontend/lib/services/products/mutations/toggle.ts
index 84bc3a7b..7a430c3a 100644
--- a/frontend/lib/services/products/mutations/toggle.ts
+++ b/frontend/lib/services/products/mutations/toggle.ts
@@ -1,4 +1,3 @@
-// frontend/lib/services/products/mutations/toggle.ts
 import { eq } from 'drizzle-orm';
 
 import { db } from '@/db';
@@ -26,7 +25,6 @@ export async function toggleProductStatus(id: string): Promise<DbProduct> {
     .returning();
 
   if (!updated) {
-    // concurrent delete between SELECT and UPDATE
     throw new ProductNotFoundError(id);
   }
 
diff --git a/frontend/lib/services/products/mutations/update.ts b/frontend/lib/services/products/mutations/update.ts
index b3c16e99..4c9f444e 100644
--- a/frontend/lib/services/products/mutations/update.ts
+++ b/frontend/lib/services/products/mutations/update.ts
@@ -59,10 +59,6 @@ export async function updateProduct(
 
   const finalBadge = (input as any).badge ?? existing.badge;
 
-  // Enforce merged-state invariants (DB rows + incoming upserts)
-  // - If prices are patched, validate merged currency policy (e.g. USD must exist)
-  // - If final badge is SALE, enforce originalPrice for ALL currencies in merged state
-
   if (prices.length || finalBadge === 'SALE') {
     const existingPriceRows = await db
       .select({
@@ -98,19 +94,15 @@ export async function updateProduct(
 
     const mergedRows = Array.from(merged.values());
 
-    // Currency-set policy should be enforced on merged state ONLY when prices are patched.
-    // This keeps PATCH semantics: partial prices payload is allowed, and policy is checked post-merge.
     if (prices.length) {
       assertMergedPricesPolicy(mergedRows, { productId: id, requireUsd: true });
     }
 
-    // SALE invariant must be enforced on merged state when badge is SALE (even if prices are not patched).
     if (finalBadge === 'SALE') {
       enforceSaleBadgeRequiresOriginal('SALE', mergedRows);
     }
   }
 
-  // Base fields update
   const updateData: Partial<ProductsTable['$inferInsert']> = {
     slug,
     title: (input as any).title ?? existing.title,
@@ -133,13 +125,11 @@ export async function updateProduct(
           : null
         : existing.sku,
 
-    // legacy invariants: keep stable as USD mirror
     currency: 'USD',
     price: existing.price,
     originalPrice: existing.originalPrice,
   };
 
-  // If USD provided in prices, update legacy mirror
   if (prices.length) {
     const usd = prices.find(p => p.currency === 'USD');
     if (usd?.priceMinor) {
@@ -153,7 +143,6 @@ export async function updateProduct(
   }
 
   try {
-    // 1) upsert prices
     if (prices.length) {
       const upsertRows = prices.map(p => {
         const priceMinor = p.priceMinor;
@@ -185,7 +174,6 @@ export async function updateProduct(
         });
     }
 
-    // 2) update products
     const [row] = await db
       .update(products)
       .set(updateData)
@@ -206,7 +194,6 @@ export async function updateProduct(
 
     return mapRowToProduct(row);
   } catch (error) {
-    // IMPORTANT: cleanup new image on failure (price upsert or product update)
     if (uploaded?.publicId) {
       try {
         await destroyProductImage(uploaded.publicId);
diff --git a/frontend/lib/services/products/prices.ts b/frontend/lib/services/products/prices.ts
index 242301a4..260d0914 100644
--- a/frontend/lib/services/products/prices.ts
+++ b/frontend/lib/services/products/prices.ts
@@ -21,7 +21,6 @@ export function assertMoneyMinorInt(value: unknown, field: string): number {
     throw new InvalidPayloadError(`${field} must be a number.`);
   }
 
-  // Critical: reject fractional minor units (no truncation)
   if (!Number.isInteger(n)) {
     throw new InvalidPayloadError(`${field} must be an integer (minor units).`);
   }
@@ -92,10 +91,6 @@ function toMoneyMinorNullable(
 }
 
 export function normalizePricesFromInput(input: unknown): NormalizedPriceRow[] {
-  // Transitional-safe:
-  // - NEW: input.prices[] uses MINOR units: { currency, priceMinor, originalPriceMinor }
-  // - LEGACY: input.prices[] uses MAJOR strings: { currency, price, originalPrice }
-  // - VERY LEGACY: top-level price/originalPrice/currency
   const anyInput = input as any;
 
   const prices = anyInput?.prices;
@@ -108,7 +103,6 @@ export function normalizePricesFromInput(input: unknown): NormalizedPriceRow[] {
         );
       }
 
-      // NEW path: minor units
       if (p?.priceMinor != null) {
         const priceMinor = assertMoneyMinorInt(
           p.priceMinor,
@@ -133,7 +127,6 @@ export function normalizePricesFromInput(input: unknown): NormalizedPriceRow[] {
         return { currency, priceMinor, originalPriceMinor };
       }
 
-      // LEGACY path: major strings
       const price = String(p?.price ?? '').trim();
       const originalPrice =
         p?.originalPrice == null ? null : String(p.originalPrice).trim();
@@ -152,7 +145,6 @@ export function normalizePricesFromInput(input: unknown): NormalizedPriceRow[] {
     });
   }
 
-  // Legacy fallback (only if present)
   if (anyInput?.price != null) {
     const currency = (anyInput?.currency as CurrencyCode) ?? 'USD';
     if (!currencyValues.includes(currency as any)) {
@@ -188,7 +180,6 @@ export function requireUsd(prices: NormalizedPriceRow[]): NormalizedPriceRow {
 }
 
 export function validatePriceRows(prices: NormalizedPriceRow[]) {
-  // Safety: no duplicates even if upstream schema is bypassed
   const seen = new Set<CurrencyCode>();
   for (const p of prices) {
     if (seen.has(p.currency)) {
@@ -196,19 +187,16 @@ export function validatePriceRows(prices: NormalizedPriceRow[]) {
     }
     seen.add(p.currency);
 
-    // Runtime guard (transitional input can bypass TS/Zod)
     if (!currencyValues.includes(p.currency as any)) {
       throw new InvalidPayloadError(
         `Unsupported currency: ${String(p.currency)}.`
       );
     }
 
-    // priceMinor must be positive integer (minor units)
     if (!Number.isSafeInteger(p.priceMinor) || p.priceMinor < 1) {
       throw new InvalidPayloadError(`${p.currency}: price is required.`);
     }
 
-    // originalPriceMinor must be > priceMinor when present
     if (p.originalPriceMinor != null) {
       if (!Number.isSafeInteger(p.originalPriceMinor)) {
         throw new InvalidPayloadError(
diff --git a/frontend/lib/services/products/types.ts b/frontend/lib/services/products/types.ts
index 9a90cb86..c9193f06 100644
--- a/frontend/lib/services/products/types.ts
+++ b/frontend/lib/services/products/types.ts
@@ -2,10 +2,10 @@ import type { CurrencyCode } from '@/lib/shop/currency';
 
 export type AdminProductPriceRow = {
   currency: CurrencyCode;
-  // canonical (minor units)
+
   priceMinor: number;
   originalPriceMinor: number | null;
-  // legacy mirror (keep during rollout)
+
   price: string;
   originalPrice: string | null;
 };
@@ -16,7 +16,6 @@ export type AdminProductsFilter = {
   type?: string;
 };
 
-// Internal typing helpers (used across products/* modules)
 export type ProductsTable = typeof import('@/db/schema').products;
 export type ProductRow = ProductsTable['$inferSelect'];
 export type DbClient = typeof import('@/db').db;
diff --git a/frontend/lib/shop/currency.ts b/frontend/lib/shop/currency.ts
index deba4b1f..fe0a2a21 100644
--- a/frontend/lib/shop/currency.ts
+++ b/frontend/lib/shop/currency.ts
@@ -11,7 +11,12 @@ export function isTwoDecimalCurrency(currency: CurrencyCode): boolean {
 }
 
 function assertMinorUnitsStrict(minor: number): number {
-  if (!Number.isFinite(minor) || !Number.isInteger(minor) || minor < 0) {
+  if (
+    !Number.isFinite(minor) ||
+    !Number.isInteger(minor) ||
+    !Number.isSafeInteger(minor) ||
+    minor < 0
+  ) {
     throw new Error('Invalid money minor-units value');
   }
   return minor;
@@ -20,15 +25,9 @@ function assertMinorUnitsStrict(minor: number): number {
 function normalizeLocaleTag(locale: string | null | undefined): string {
   const raw = (locale ?? '').trim().toLowerCase();
   if (!raw) return '';
-  // "uk-UA" -> "uk", "uk_UA" -> "uk"
   return raw.split(/[-_]/)[0] ?? raw;
 }
 
-/**
- * D1 policy:
- * - uk -> UAH
- * - otherwise -> USD
- */
 export function resolveCurrencyFromLocale(
   locale: string | null | undefined
 ): CurrencyCode {
@@ -36,9 +35,6 @@ export function resolveCurrencyFromLocale(
   return primary === 'uk' ? 'UAH' : 'USD';
 }
 
-/**
- * "uk-UA,uk;q=0.9,en-US;q=0.8" -> "uk-UA"
- */
 export function parsePrimaryLocaleFromAcceptLanguage(
   acceptLanguage: string | null | undefined
 ): string | null {
@@ -51,10 +47,6 @@ export function parsePrimaryLocaleFromAcceptLanguage(
   return token && token.length ? token : null;
 }
 
-/**
- * Server-only resolution at API boundaries:
- * currency is derived ONLY from locale (Accept-Language).
- */
 export function resolveCurrencyFromHeaders(headers: Headers): CurrencyCode {
   const locale = parsePrimaryLocaleFromAcceptLanguage(
     headers.get('accept-language')
@@ -62,10 +54,6 @@ export function resolveCurrencyFromHeaders(headers: Headers): CurrencyCode {
   return resolveCurrencyFromLocale(locale);
 }
 
-/**
- * UI locale normalization.
- * Route param locale is usually "uk" | "en", but Intl wants a BCP-47 tag.
- */
 function normalizeLocaleForIntl(
   locale: string | null | undefined,
   currency: CurrencyCode
@@ -78,7 +66,6 @@ function normalizeLocaleForIntl(
 
   if (raw) return raw.replaceAll('_', '-');
 
-  // Safe fallback (still yields correct narrow symbol for currency)
   return currency === 'UAH' ? 'uk-UA' : 'en-US';
 }
 
@@ -91,7 +78,7 @@ function getFormatter(locale: string, currency: CurrencyCode) {
   const created = new Intl.NumberFormat(locale, {
     style: 'currency',
     currency,
-    currencyDisplay: 'narrowSymbol', // ₴ for UAH when available
+    currencyDisplay: 'narrowSymbol',
   });
 
   formatterCache.set(key, created);
@@ -99,10 +86,8 @@ function getFormatter(locale: string, currency: CurrencyCode) {
 }
 
 function getCurrencyFractionDigits(currency: CurrencyCode): number {
-  // Single source of truth: we only support 2-decimal currencies for now.
   if (isTwoDecimalCurrency(currency)) return 2;
 
-  // Future-proof: if CurrencyCode expands (e.g., JPY/BHD), fail closed.
   throw new Error(`Unsupported currency fraction digits: ${currency}`);
 }
 
@@ -112,10 +97,6 @@ function minorToMajor(amountMinor: number, currency: CurrencyCode): number {
   return assertMinorUnitsStrict(amountMinor) / factor;
 }
 
-/**
- * Canonical UI money formatter.
- * amountMinor is in minor units (cents/kopeks), integer.
- */
 export function formatMoney(
   amountMinor: number,
   currency: CurrencyCode,
@@ -131,10 +112,6 @@ export function formatMoney(
   }
 }
 
-/**
- * @deprecated Prefer formatMoney(minor, currency, locale).
- * Legacy formatter for MAJOR units (e.g. 10.50).
- */
 export function formatPrice(
   amountMajor: number,
   currencyOrOptions?:
diff --git a/frontend/lib/shop/data.ts b/frontend/lib/shop/data.ts
index 284307eb..855b54b8 100644
--- a/frontend/lib/shop/data.ts
+++ b/frontend/lib/shop/data.ts
@@ -193,11 +193,6 @@ function mapToShopProduct(product: DbProduct): ShopProduct | null {
   return parsed.data;
 }
 
-/**
- * IMPORTANT:
- * Pass `locale` from the route segment when possible (app/[locale]/...),
- * because currency policy is locale-based: uk -> UAH, otherwise USD.
- */
 export async function getCatalogProducts(
   filters: unknown,
   locale: string = 'en'
@@ -250,14 +245,12 @@ export async function getHomepageContent(
 ): Promise<HomepageContent> {
   const currency = resolveCurrencyFromLocale(locale);
 
-  // 1) primary: featured (може бути < 4)
   const featured: DbProduct[] = await getFeaturedProducts(currency, 4);
 
   const featuredProducts = featured
     .map(mapToShopProduct)
     .filter((product): product is ShopProduct => product !== null);
 
-  // helper: докомплектувати до N без дублікатів
   const fillTo = (
     primary: ShopProduct[],
     fallback: ShopProduct[],
@@ -276,8 +269,6 @@ export async function getHomepageContent(
     return merged.slice(0, count);
   };
 
-  // 2) fallback source: newest active products (щоб завжди було чим добрати до 4)
-  // беремо більше ніж 4, щоб було що фільтрувати після дедупу
   const newestCatalog = await getCatalogProducts(
     {
       category: 'all',
diff --git a/frontend/lib/shop/money.ts b/frontend/lib/shop/money.ts
index 20e23226..fd2bad9b 100644
--- a/frontend/lib/shop/money.ts
+++ b/frontend/lib/shop/money.ts
@@ -1,13 +1,6 @@
-export type Money = number;      // legacy/display only
-export type MoneyCents = number; // canonical minor units (safe int >= 0)
-
-/**
- * Strict invariant for canonical minor-units:
- * - finite
- * - integer (no trunc/round normalization here)
- * - >= 0
- * - safe integer
- */
+export type Money = number;
+export type MoneyCents = number;
+
 export function assertIntegerCentsStrict(cents: number): MoneyCents {
   if (!Number.isFinite(cents) || !Number.isInteger(cents) || cents < 0) {
     throw new Error('Invalid money cents value');
@@ -32,53 +25,36 @@ function isScientificNotation(s: string): boolean {
   return /e[+-]?\d+/i.test(s);
 }
 
-/**
- * Parse decimal "major units" string/number into minor units (cents) WITHOUT floats.
- * Rules:
- * - accepts: "12", "12.3", "12.34", ".5", "0.5"
- * - rejects: negatives, NaN/Infinity, scientific notation ("1e-3"), non-numeric
- * - rounds HALF_UP to 2 decimals if more than 2 fractional digits
- */
 function parseMajorToMinor(input: string | number): MoneyCents {
-  const raw =
-    typeof input === 'string'
-      ? input.trim()
-      : Number.isFinite(input)
-        ? String(input)
-        : String(input);
+  const raw = typeof input === 'string' ? input.trim() : String(input);
 
   if (!raw.length) throw new Error('Invalid money value');
 
   if (typeof input === 'number') {
-    if (!Number.isFinite(input) || input < 0) throw new Error('Invalid money value');
+    if (!Number.isFinite(input) || input < 0)
+      throw new Error('Invalid money value');
   }
-
   const s = raw;
 
   if (s.startsWith('-')) throw new Error('Invalid money value');
   if (isScientificNotation(s)) {
-    // JS numbers can stringify to "1e-7" – refuse to avoid ambiguous rounding
     throw new Error('Invalid money value');
   }
 
-  // Normalize leading-dot ".5" -> "0.5"
   const normalized = s.startsWith('.') ? `0${s}` : s;
 
-  // Accept only digits with optional single dot
   const m = normalized.match(/^(\d+)(?:\.(\d+))?$/);
   if (!m) throw new Error('Invalid money value');
 
   const intStr = m[1] ?? '0';
   const fracStrRaw = m[2] ?? '';
 
-  // int part safe range pre-check
   const maxIntPart = Math.floor(Number.MAX_SAFE_INTEGER / 100);
   const intPart = Number(intStr);
   if (!Number.isSafeInteger(intPart) || intPart < 0 || intPart > maxIntPart) {
     throw new Error('Invalid money value');
   }
 
-  // Fractional rounding to 2 digits, HALF_UP
   let frac2 = fracStrRaw.slice(0, 2);
   while (frac2.length < 2) frac2 += '0';
 
@@ -87,13 +63,11 @@ function parseMajorToMinor(input: string | number): MoneyCents {
     throw new Error('Invalid money value');
   }
 
-  // Round if there are extra digits beyond 2
   if (fracStrRaw.length > 2) {
-    const third = fracStrRaw.charCodeAt(2) - 48; // '0' => 0
+    const third = fracStrRaw.charCodeAt(2) - 48;
     if (third >= 5) {
       cents += 1;
       if (cents === 100) {
-        // carry
         cents = 0;
         if (intPart + 1 > maxIntPart) throw new Error('Invalid money value');
         const minor = (intPart + 1) * 100 + cents;
@@ -106,11 +80,6 @@ function parseMajorToMinor(input: string | number): MoneyCents {
   return assertIntegerCentsStrict(minor);
 }
 
-/**
- * Public API: major -> cents (minor).
- * NOTE: prefer passing strings from DB/inputs; numbers are accepted but may be rejected
- * if they stringify to scientific notation.
- */
 export function toCents(value: number | string): MoneyCents {
   if (typeof value !== 'string' && typeof value !== 'number') {
     throw new Error('Invalid money value');
@@ -118,22 +87,14 @@ export function toCents(value: number | string): MoneyCents {
   return parseMajorToMinor(value);
 }
 
-/**
- * Minor -> legacy major number (display only).
- * Still returns a JS number; do NOT use for money comparisons.
- */
 export function fromCents(cents: MoneyCents): Money {
   const v = assertIntegerCentsStrict(cents);
   const intPart = Math.floor(v / 100);
   const frac = v % 100;
-  // Controlled string -> number (display only)
+
   return Number(`${intPart}.${String(frac).padStart(2, '0')}`);
 }
 
-/**
- * Legacy DB numeric money (string/number like "12.34") -> canonical cents (int >= 0).
- * No floats.
- */
 export function fromDbMoney(value: unknown): MoneyCents {
   if (typeof value !== 'string' && typeof value !== 'number') {
     throw new Error('Invalid money value');
@@ -141,9 +102,6 @@ export function fromDbMoney(value: unknown): MoneyCents {
   return toCents(value);
 }
 
-/**
- * Canonical cents -> DB decimal string "12.34" WITHOUT floats/toFixed.
- */
 export function toDbMoney(cents: MoneyCents): string {
   const v = assertIntegerCentsStrict(cents);
   const intPart = Math.floor(v / 100);
diff --git a/frontend/lib/shop/request-locale.ts b/frontend/lib/shop/request-locale.ts
index e761dc17..fd37b1a7 100644
--- a/frontend/lib/shop/request-locale.ts
+++ b/frontend/lib/shop/request-locale.ts
@@ -8,12 +8,6 @@ import {
   type CurrencyCode,
 } from "@/lib/shop/currency";
 
-/**
- * Canonical locale resolution at API boundaries:
- * 1) next-intl / custom headers (from middleware)
- * 2) locale cookies
- * 3) Accept-Language
- */
 export function resolveRequestLocale(request: NextRequest): string | null {
   const headerLocale =
     request.headers.get("x-next-intl-locale") ??
diff --git a/frontend/lib/shop/ui-classes.ts b/frontend/lib/shop/ui-classes.ts
index 22c6c737..155e66b4 100644
--- a/frontend/lib/shop/ui-classes.ts
+++ b/frontend/lib/shop/ui-classes.ts
@@ -25,11 +25,9 @@ export const SHOP_CTA_INSET = `
   opacity-40 supports-[hover:hover]:group-hover:opacity-60 transition-opacity
 `;
 
-// Shared interaction for “chips” (swatches, size pills, +/- stepper)
 export const SHOP_CHIP_INTERACTIVE =
   'transition-[box-shadow,border-color,color,background-color,filter] duration-500 ease-out hover:brightness-110';
 
-// Optional “lift” (НЕ використовуй для size/+/- якщо хочеш без тремтіння)
 export const SHOP_CHIP_LIFT =
   'transition-transform duration-500 ease-out hover:-translate-y-0.5';
 
@@ -39,7 +37,6 @@ export const SHOP_CHIP_HOVER =
 export const SHOP_CHIP_SELECTED =
   'border-accent ring-2 ring-accent ring-offset-2 ring-offset-background shadow-[var(--shop-chip-shadow-selected)]';
 
-// Optional: base shapes (so you don’t repeat layout primitives)
 export const SHOP_SWATCH_BASE =
   'group relative h-9 w-9 rounded-full border border-border shadow-none';
 
@@ -49,16 +46,9 @@ export const SHOP_SIZE_CHIP_BASE =
 export const SHOP_STEPPER_BUTTON_BASE =
   'flex h-10 w-10 items-center justify-center rounded-md border border-border text-foreground bg-transparent';
 
-/**
- * Builds a horizontal gradient background from two CSS vars.
- * Example: shopCtaGradient('--shop-cta-bg', '--shop-cta-bg-hover')
- */
-
-// Text-link-ish filter items (category/type lists)
 export const SHOP_FILTER_ITEM_BASE =
   'inline-flex text-sm font-medium transition-[color,transform] duration-300 ease-out hover:-translate-y-[1px]';
 
-// If you want the “chip hover border” to be consistent (used in filters + size)
 export const SHOP_CHIP_BORDER_HOVER = 'hover:border-foreground/60';
 
 export const SHOP_DISABLED = 'disabled:pointer-events-none disabled:opacity-60';
@@ -66,10 +56,6 @@ export const SHOP_DISABLED = 'disabled:pointer-events-none disabled:opacity-60';
 export const SHOP_CHIP_SHADOW_HOVER =
   'hover:shadow-[var(--shop-chip-shadow-hover)]';
 
-/**
- * Reusable “text link” for product names / order links / “go to order”, etc.
- * Size додаєш окремо (text-xs, text-[15px], …).
- */
 export const SHOP_LINK_BASE =
   'inline-flex font-medium text-foreground underline underline-offset-4 decoration-2 decoration-foreground/30 ' +
   'transition-[color,transform,text-decoration-color] duration-300 ease-out ' +
@@ -78,14 +64,9 @@ export const SHOP_LINK_BASE =
 export const SHOP_LINK_MD = 'text-[15px]';
 export const SHOP_LINK_XS = 'text-xs';
 
-/**
- * CTA interaction (додатково до SHOP_CTA_BASE).
- * SHOP_CTA_BASE залишаємо як layout+typography+active.
- */
 export const SHOP_CTA_INTERACTIVE =
   'transition-[transform,filter,box-shadow] duration-700 ease-out';
 
-// Outline button (inverted to CTA; used in error pages, secondary actions)
 export const SHOP_OUTLINE_BTN_BASE =
   'inline-flex items-center justify-center rounded-xl border px-4 py-2 ' +
   'text-sm font-semibold uppercase tracking-[0.25em] ' +
@@ -96,14 +77,12 @@ export const SHOP_OUTLINE_BTN_INTERACTIVE =
   'hover:-translate-y-[1px] hover:shadow-[var(--shop-chip-shadow-hover)] hover:brightness-110 ' +
   'hover:border-[color:var(--accent-primary)] hover:text-[color:var(--accent-primary)]';
 
-// Nav/breadcrumb-ish links (e.g. "My orders", "Shop", "Back to ...")
 export const SHOP_NAV_LINK_BASE =
   'inline-flex font-medium underline underline-offset-4 decoration-2 ' +
   'text-muted-foreground decoration-foreground/30 ' +
   'transition-[color,transform,text-decoration-color] duration-300 ease-out ' +
   'hover:-translate-y-[1px] hover:text-accent hover:decoration-[color:var(--accent-primary)]';
 
-// Select / dropdown (e.g. sort)
 export const SHOP_SELECT_BASE =
   'peer h-10 w-full appearance-none rounded-xl border border-border bg-background pl-3 pr-11 text-sm font-medium';
 
diff --git a/frontend/lib/tests/helpers/makeCheckoutReq.ts b/frontend/lib/tests/helpers/makeCheckoutReq.ts
index 95de7b9e..72abb811 100644
--- a/frontend/lib/tests/helpers/makeCheckoutReq.ts
+++ b/frontend/lib/tests/helpers/makeCheckoutReq.ts
@@ -10,7 +10,7 @@ export type CheckoutItemInput = {
 
 export function makeCheckoutReq(params: {
   idempotencyKey: string;
-  locale?: string; // mapped to Accept-Language
+  locale?: string;
   items?: CheckoutItemInput[];
   userId?: string;
   origin?: string | null;
@@ -24,7 +24,6 @@ export function makeCheckoutReq(params: {
     {
       productId: '11111111-1111-4111-8111-111111111111',
       quantity: 1,
-      // IMPORTANT: не форсимо selectedSize/selectedColor
     },
   ];
 
diff --git a/frontend/lib/tests/order-items-snapshot-immutable.test.ts b/frontend/lib/tests/order-items-snapshot-immutable.test.ts
deleted file mode 100644
index 744496dc..00000000
--- a/frontend/lib/tests/order-items-snapshot-immutable.test.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-// lib/tests/order-items-snapshot-immutable.test.ts
-import { randomUUID } from "node:crypto";
-
-import { and, eq } from "drizzle-orm";
-import { NextRequest } from "next/server";
-import { describe, expect, it, vi } from "vitest";
-
-import { db } from "@/db";
-import {
-	inventoryMoves,
-	orderItems,
-	orders,
-	productPrices,
-	products,
-} from "@/db/schema";
-
-// IMPORTANT: checkout route calls getCurrentUser(), which uses next/headers cookies()
-// In vitest there is no request scope, so we must mock it to avoid noisy error + flakiness.
-vi.mock("@/lib/auth", async () => {
-	const actual = await vi.importActual<Record<string, unknown>>("@/lib/auth");
-	return {
-		...actual,
-		getCurrentUser: vi.fn(async () => null),
-	};
-});
-
-// Force "no-payments" path so checkout never touches Stripe network.
-// This test is only about snapshot immutability.
-vi.mock("@/lib/env/stripe", async () => {
-	const actual =
-		await vi.importActual<Record<string, unknown>>("@/lib/env/stripe");
-	return {
-		...actual,
-		isPaymentsEnabled: () => false,
-	};
-});
-
-type CheckoutResponse = {
-	success: boolean;
-	orderId?: string;
-	order?: { id?: string };
-};
-
-function makeJsonRequest(
-	url: string,
-	body: unknown,
-	headers: Record<string, string>,
-) {
-	return new NextRequest(url, {
-		method: "POST",
-		headers,
-		body: JSON.stringify(body),
-	});
-}
-
-async function cleanupByIds(params: { orderId?: string; productId: string }) {
-	const { orderId, productId } = params;
-
-	if (orderId) {
-		// delete children first
-		await db.delete(inventoryMoves).where(eq(inventoryMoves.orderId, orderId));
-		await db.delete(orderItems).where(eq(orderItems.orderId, orderId));
-		await db.delete(orders).where(eq(orders.id, orderId));
-	}
-
-	await db.delete(productPrices).where(eq(productPrices.productId, productId));
-
-	await db.delete(products).where(eq(products.id, productId));
-}
-
-describe("P0-6 snapshots: order_items immutability", () => {
-	it("snapshot fields must not change after products/product_prices update", async () => {
-		const productId = randomUUID();
-		const priceId = randomUUID();
-
-		const titleV1 = "Snapshot Test Product";
-		const slugV1 = `snapshot-test-${productId.slice(0, 8)}`;
-		const skuV1 = `SKU-${productId.slice(0, 8)}`;
-
-		// Seed product (USD-only per your CHECK constraint)
-		await db.insert(products).values({
-			id: productId,
-			slug: slugV1,
-			title: titleV1,
-			description: "snapshot test",
-			imageUrl: "https://res.cloudinary.com/devlovers/image/upload/v1/test.png",
-			imagePublicId: null,
-			price: "9.00",
-			originalPrice: null,
-			currency: "USD",
-			category: null,
-			type: null,
-			colors: [],
-			sizes: [],
-			badge: "NONE",
-			isActive: true,
-			isFeatured: false,
-			stock: 10,
-			sku: skuV1,
-		});
-
-		// Seed product_prices (USD)
-		await db.insert(productPrices).values({
-			id: priceId,
-			productId,
-			currency: "USD",
-			priceMinor: 900,
-			originalPriceMinor: null,
-			price: "9.00",
-			originalPrice: null,
-		});
-
-		const idem = randomUUID();
-		const req = makeJsonRequest(
-			"http://localhost:3000/api/shop/checkout",
-			{ items: [{ productId, quantity: 1 }] },
-			{
-				"Accept-Language": "en-US,en;q=0.9",
-				"Content-Type": "application/json",
-				"Idempotency-Key": idem,
-				Origin: "http://localhost:3000",
-			},
-		);
-		const { POST: checkoutPOST } = await import(
-			"@/app/api/shop/checkout/route"
-		);
-
-		const res = await checkoutPOST(req);
-
-		// Your checkout returns 201 Created on success.
-		expect(res.status).toBeGreaterThanOrEqual(200);
-		expect(res.status).toBeLessThan(300);
-
-		const json = (await res.json()) as CheckoutResponse;
-		expect(json.success).toBe(true);
-
-		const orderId = json.orderId ?? json.order?.id;
-		expect(typeof orderId).toBe("string");
-		if (!orderId) throw new Error("Missing orderId from checkout response");
-
-		let primaryError: unknown = null;
-		let cleanupError: unknown = null;
-
-		try {
-			// Baseline snapshot
-			const before = await db
-				.select({
-					orderId: orderItems.orderId,
-					productId: orderItems.productId,
-					quantity: orderItems.quantity,
-					unitPriceMinor: orderItems.unitPriceMinor,
-					lineTotalMinor: orderItems.lineTotalMinor,
-					productTitle: orderItems.productTitle,
-					productSlug: orderItems.productSlug,
-					productSku: orderItems.productSku,
-				})
-				.from(orderItems)
-				.where(eq(orderItems.orderId, orderId));
-
-			expect(before.length).toBe(1);
-			expect(before[0].productId).toBe(productId);
-			expect(before[0].productTitle).toBe(titleV1);
-			expect(before[0].productSlug).toBe(slugV1);
-			expect(before[0].productSku).toBe(skuV1);
-			expect(before[0].unitPriceMinor).toBe(900);
-			expect(before[0].lineTotalMinor).toBe(900);
-
-			// Mutate product + product_prices aggressively (attempt to "break" snapshots)
-			const titleV2 = `${titleV1} UPDATED`;
-			const slugV2 = `${slugV1}-updated`;
-			const skuV2 = `${skuV1}-UPDATED`;
-
-			await db
-				.update(products)
-				.set({
-					title: titleV2,
-					slug: slugV2,
-					sku: skuV2,
-					updatedAt: new Date(),
-				})
-				.where(eq(products.id, productId));
-
-			await db
-				.update(productPrices)
-				.set({
-					priceMinor: 1000,
-					price: "10.00",
-					updatedAt: new Date(),
-				})
-				.where(
-					and(
-						eq(productPrices.productId, productId),
-						eq(productPrices.currency, "USD"),
-					),
-				);
-
-			const after = await db
-				.select({
-					orderId: orderItems.orderId,
-					productId: orderItems.productId,
-					quantity: orderItems.quantity,
-					unitPriceMinor: orderItems.unitPriceMinor,
-					lineTotalMinor: orderItems.lineTotalMinor,
-					productTitle: orderItems.productTitle,
-					productSlug: orderItems.productSlug,
-					productSku: orderItems.productSku,
-				})
-				.from(orderItems)
-				.where(eq(orderItems.orderId, orderId));
-
-			expect(after.length).toBe(1);
-
-			// Snapshot MUST remain V1 even after product changes
-			expect(after[0]).toEqual(before[0]);
-		} catch (e) {
-			primaryError = e;
-			throw e;
-		} finally {
-			try {
-				await cleanupByIds({ orderId, productId });
-			} catch (e) {
-				cleanupError = e;
-				console.error("[test cleanup failed]", { orderId, productId }, e);
-			}
-		}
-		if (!primaryError && cleanupError) {
-			throw cleanupError;
-		}
-	}, 30_000);
-});
diff --git a/frontend/lib/tests/orders-access.test.ts b/frontend/lib/tests/orders-access.test.ts
deleted file mode 100644
index 028182fe..00000000
--- a/frontend/lib/tests/orders-access.test.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest"
-import { NextRequest } from "next/server"
-
-vi.mock("@/lib/auth", () => ({
-  getCurrentUser: vi.fn(),
-}))
-
-vi.mock("@/db", () => ({
-  db: {
-    select: vi.fn(),
-  },
-}))
-
-import { getCurrentUser } from "@/lib/auth"
-import { db } from "@/db"
-
-type MockUser = { id: string; role: "user" | "admin" }
-
-describe("P0-SEC-1.1: GET /api/shop/orders/[id] access control", () => {
-  const orderId = "00000000-0000-0000-0000-000000000000"
-  const ownerId = "11111111-1111-1111-1111-111111111111"
-  const otherUserId = "22222222-2222-2222-2222-222222222222"
-  const adminId = "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa"
-
-  function mockDbRows(rows: any[]) {
-    const builder = {
-      from: vi.fn().mockReturnThis(),
-      leftJoin: vi.fn().mockReturnThis(),
-      where: vi.fn().mockResolvedValue(rows),
-    }
-    ;(db.select as any).mockReturnValue(builder)
-    return builder
-  }
-
-  async function callGet(id: string) {
-    const { GET } = await import("@/app/api/shop/orders/[id]/route")
-    const req = new NextRequest(`http://localhost/api/shop/orders/${id}`, {
-      method: "GET",
-    })
-
-    // route expects: context: { params: Promise<{ id: string }> }
-    const res = await (GET as any)(req, { params: Promise.resolve({ id }) })
-    return res as Response
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it("no session -> 401", async () => {
-    ;(getCurrentUser as any).mockResolvedValue(null)
-
-    const res = await callGet(orderId)
-    expect(res.status).toBe(401)
-    expect(db.select).not.toHaveBeenCalled()
-  })
-
-  it("not owner and not admin -> 404 (hide existence)", async () => {
-    const user: MockUser = { id: otherUserId, role: "user" }
-    ;(getCurrentUser as any).mockResolvedValue(user)
-
-    mockDbRows([]) // whereClause should filter out чужий order => 0 rows
-
-    const res = await callGet(orderId)
-    expect(res.status).toBe(404)
-  })
-
-  it("owner -> 200", async () => {
-    const user: MockUser = { id: ownerId, role: "user" }
-    ;(getCurrentUser as any).mockResolvedValue(user)
-
-    const now = new Date()
-    mockDbRows([
-      {
-        order: {
-          id: orderId,
-          userId: ownerId,
-          totalAmount: "10.00",
-          currency: "USD",
-          paymentStatus: "pending",
-          paymentProvider: "stripe",
-          paymentIntentId: null,
-          stockRestored: false,
-          restockedAt: null,
-          idempotencyKey: "idem_key",
-          createdAt: now,
-          updatedAt: now,
-        },
-        item: null,
-      },
-    ])
-
-    const res = await callGet(orderId)
-    expect(res.status).toBe(200)
-
-    const json = await res.json()
-    expect(json?.success).toBe(true)
-    expect(json?.order?.id).toBe(orderId)
-    expect(json?.order?.userId).toBe(ownerId)
-  })
-
-  it("admin -> 200", async () => {
-    const user: MockUser = { id: adminId, role: "admin" }
-    ;(getCurrentUser as any).mockResolvedValue(user)
-
-    const now = new Date()
-    mockDbRows([
-      {
-        order: {
-          id: orderId,
-          userId: ownerId,
-          totalAmount: "10.00",
-          currency: "USD",
-          paymentStatus: "pending",
-          paymentProvider: "stripe",
-          paymentIntentId: null,
-          stockRestored: false,
-          restockedAt: null,
-          idempotencyKey: "idem_key",
-          createdAt: now,
-          updatedAt: now,
-        },
-        item: null,
-      },
-    ])
-
-    const res = await callGet(orderId)
-    expect(res.status).toBe(200)
-  })
-})
diff --git a/frontend/lib/tests/admin-api-killswitch.test.ts b/frontend/lib/tests/shop/admin-api-killswitch.test.ts
similarity index 87%
rename from frontend/lib/tests/admin-api-killswitch.test.ts
rename to frontend/lib/tests/shop/admin-api-killswitch.test.ts
index 2dd39ea0..63afdaad 100644
--- a/frontend/lib/tests/admin-api-killswitch.test.ts
+++ b/frontend/lib/tests/shop/admin-api-killswitch.test.ts
@@ -4,7 +4,6 @@ import { NextRequest } from 'next/server';
 
 const BASE_URL = 'http://localhost';
 
-// Valid UUIDs for dynamic routes; format matters more than real existence.
 const TEST_PRODUCT_ID = '00000000-0000-4000-8000-000000000001';
 const TEST_ORDER_ID = '00000000-0000-4000-8000-000000000002';
 
@@ -78,15 +77,12 @@ function makeReq(path: string, method: string) {
   const url = `${BASE_URL}${path}`;
   const origin = process.env.APP_ORIGIN ?? 'http://localhost:3000';
 
-  // Intentionally invalid JSON payload to ensure kill-switch guard runs
-  // BEFORE any req.json()/formData() parsing.
   const init: RequestInit = {
     method,
     headers: { 'content-type': 'application/json', origin },
   };
 
   if (method !== 'GET' && method !== 'HEAD') {
-    // Using invalid JSON lets us detect incorrect handler ordering.
     (init as any).body = '{';
   }
 
@@ -98,7 +94,6 @@ async function readCodeFromResponse(
 ): Promise<{ status: number; code?: string; raw: string }> {
   const status = res.status;
 
-  // Read body ONCE to avoid "body used already"
   const raw = await res.text();
 
   if (!raw) return { status, raw: '' };
@@ -120,8 +115,6 @@ async function expectAdminDisabled(res: Response) {
 
   expect(body.status).toBe(403);
 
-  // Contract: we must surface ADMIN_API_DISABLED.
-  // Allow either {code} or {error:{code}}; also allow plain text containing the code.
   if (body.code) {
     expect(body.code).toBe('ADMIN_API_DISABLED');
   } else {
@@ -145,9 +138,7 @@ describe('P0-7.1 Admin API kill-switch coverage (production)', () => {
   beforeEach(() => {
     vi.resetModules();
 
-    // Emulate production and disabled admin API.
     vi.stubEnv('NODE_ENV', 'production');
-    // Treat anything except 'true' as disabled; empty string is explicitly disabled.
     vi.stubEnv('ENABLE_ADMIN_API', '');
     vi.stubEnv('APP_ORIGIN', 'https://admin.example.test');
   });
diff --git a/frontend/lib/tests/admin-csrf-contract.test.ts b/frontend/lib/tests/shop/admin-csrf-contract.test.ts
similarity index 96%
rename from frontend/lib/tests/admin-csrf-contract.test.ts
rename to frontend/lib/tests/shop/admin-csrf-contract.test.ts
index 99965180..fd920796 100644
--- a/frontend/lib/tests/admin-csrf-contract.test.ts
+++ b/frontend/lib/tests/shop/admin-csrf-contract.test.ts
@@ -1,7 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { NextRequest } from 'next/server';
 
-// Mock admin auth to "pass"
 vi.mock('@/lib/auth/admin', () => {
   class AdminApiDisabledError extends Error {
     code = 'ADMIN_API_DISABLED';
@@ -20,7 +19,6 @@ vi.mock('@/lib/auth/admin', () => {
   };
 });
 
-// Import AFTER mocking
 import { PATCH as patchStatus } from '@/app/api/shop/admin/products/[id]/status/route';
 
 describe('P0-SEC: admin CSRF required for mutating endpoints', () => {
diff --git a/frontend/lib/tests/admin-product-patch-price-config-error-contract.test.ts b/frontend/lib/tests/shop/admin-product-patch-price-config-error-contract.test.ts
similarity index 94%
rename from frontend/lib/tests/admin-product-patch-price-config-error-contract.test.ts
rename to frontend/lib/tests/shop/admin-product-patch-price-config-error-contract.test.ts
index 95c4105e..edd6bffe 100644
--- a/frontend/lib/tests/admin-product-patch-price-config-error-contract.test.ts
+++ b/frontend/lib/tests/shop/admin-product-patch-price-config-error-contract.test.ts
@@ -45,14 +45,12 @@ beforeEach(() => {
 function makeReq(): NextRequest {
   const fd = new FormData();
 
-  // Make payload realistic enough to pass parseAdminProductForm in PATCH
   fd.set('title', 'Test product');
   fd.set('badge', 'NONE');
   fd.set('isActive', 'true');
   fd.set('isFeatured', 'false');
   fd.set('stock', '0');
 
-  // Include USD to avoid parser-level USD requirements if any still exist
   fd.set(
     'prices',
     JSON.stringify([
diff --git a/frontend/lib/tests/admin-product-sale-contract.test.ts b/frontend/lib/tests/shop/admin-product-sale-contract.test.ts
similarity index 96%
rename from frontend/lib/tests/admin-product-sale-contract.test.ts
rename to frontend/lib/tests/shop/admin-product-sale-contract.test.ts
index 4264de3a..4887bc1b 100644
--- a/frontend/lib/tests/admin-product-sale-contract.test.ts
+++ b/frontend/lib/tests/shop/admin-product-sale-contract.test.ts
@@ -1,15 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { NextRequest } from 'next/server';
 
-/**
- * We intentionally mock:
- * - getCurrentUser() -> always admin
- * - parseAdminProductForm() -> returns controlled payload
- *
- * This isolates contract behavior of the API route:
- * returns stable code + details for SALE rule violations.
- */
-
 const { getCurrentUserMock, parseAdminProductFormMock } = vi.hoisted(() => ({
   getCurrentUserMock: vi.fn(async () => ({
     id: 'u_test_admin',
diff --git a/frontend/lib/tests/cart-rehydrate-variant-sanitize.test.ts b/frontend/lib/tests/shop/cart-rehydrate-variant-sanitize.test.ts
similarity index 100%
rename from frontend/lib/tests/cart-rehydrate-variant-sanitize.test.ts
rename to frontend/lib/tests/shop/cart-rehydrate-variant-sanitize.test.ts
diff --git a/frontend/lib/tests/checkout-concurrency-stock1.test.ts b/frontend/lib/tests/shop/checkout-concurrency-stock1.test.ts
similarity index 86%
rename from frontend/lib/tests/checkout-concurrency-stock1.test.ts
rename to frontend/lib/tests/shop/checkout-concurrency-stock1.test.ts
index e459e36b..8bfdb1a4 100644
--- a/frontend/lib/tests/checkout-concurrency-stock1.test.ts
+++ b/frontend/lib/tests/shop/checkout-concurrency-stock1.test.ts
@@ -1,4 +1,3 @@
-// lib/tests/checkout-concurrency-stock1.test.ts
 import { describe, it, expect, beforeAll, afterAll, vi } from 'vitest';
 import crypto from 'crypto';
 import { NextRequest } from 'next/server';
@@ -13,13 +12,11 @@ import {
   inventoryMoves,
 } from '@/db/schema/shop';
 
-// NOTE: checkout route will be imported dynamically after mocks are installed.
-
 vi.mock('@/lib/auth', async () => {
   const actual = await vi.importActual<any>('@/lib/auth');
   return {
     ...actual,
-    getCurrentUser: async () => null, // avoid cookies() in vitest
+    getCurrentUser: async () => null,
   };
 });
 
@@ -81,7 +78,6 @@ describe('P0-8.10.1 checkout concurrency: stock=1, two parallel checkouts', () =
   });
 
   it('must allow only one success and must not double-reserve (stock must not go below 0)', async () => {
-    // ---------- Arrange: create isolated product + USD price, stock=1 ----------
     const productId = crypto.randomUUID();
     const slug = `__test_checkout_concurrency_${productId.slice(0, 8)}`;
     const now = new Date();
@@ -91,7 +87,6 @@ describe('P0-8.10.1 checkout concurrency: stock=1, two parallel checkouts', () =
       title: `TEST concurrency stock=1 (${slug})`,
       imageUrl: '/placeholder.svg',
 
-      // FIX: products.price is NOT NULL in DB (legacy column)
       price: 1000,
       originalPrice: null,
       currency: 'USD',
@@ -107,23 +102,19 @@ describe('P0-8.10.1 checkout concurrency: stock=1, two parallel checkouts', () =
       productId,
       currency: 'USD',
 
-      // minor-units
       priceMinor: 1000,
       originalPriceMinor: null,
 
-      // FIX: legacy major-unit columns are NOT NULL
-      price: 10, // 1000 minor -> 10.00
+      price: 10,
       originalPrice: null,
 
       createdAt: now,
       updatedAt: now,
     } as any);
 
-    // ---------- Helper: call checkout with given idempotency key ----------
     const baseUrl = 'http://localhost:3000';
-    const { POST: checkoutPOST } = await import(
-      '@/app/api/shop/checkout/route'
-    );
+    const { POST: checkoutPOST } =
+      await import('@/app/api/shop/checkout/route');
 
     async function callCheckout(idemKey: string) {
       const body = JSON.stringify({
@@ -147,7 +138,6 @@ describe('P0-8.10.1 checkout concurrency: stock=1, two parallel checkouts', () =
       return { status: res.status, json };
     }
 
-    // ---------- Act: run two requests in parallel (start-gated) ----------
     const idemA = crypto.randomUUID();
     const idemB = crypto.randomUUID();
 
@@ -168,7 +158,6 @@ describe('P0-8.10.1 checkout concurrency: stock=1, two parallel checkouts', () =
 
     const [r1, r2] = await Promise.all([p1, p2]);
 
-    // ---------- Assert: exactly one success, the other controlled failure ----------
     const results = [r1, r2];
     const success = results.filter(r => r.status === 201);
     const fail = results.filter(r => r.status !== 201);
@@ -194,7 +183,6 @@ describe('P0-8.10.1 checkout concurrency: stock=1, two parallel checkouts', () =
       ).toBe(true);
     }
 
-    // ---------- DB asserts: stock must be 0 ----------
     const prodRows = await db
       .select()
       .from(products)
@@ -209,7 +197,6 @@ describe('P0-8.10.1 checkout concurrency: stock=1, two parallel checkouts', () =
     expect(toNum(stock)).toBe(0);
     expect(toNum(stock)).toBeGreaterThanOrEqual(0);
 
-    // ---------- Ledger asserts: no double reserve for this product ----------
     const moves = await db
       .select()
       .from(inventoryMoves)
@@ -237,7 +224,6 @@ describe('P0-8.10.1 checkout concurrency: stock=1, two parallel checkouts', () =
     expect(reservedUnits).toBe(1);
     expect(reserveMoves.length).toBe(1);
 
-    // ---------- Cleanup: best-effort ----------
     try {
       const oi = await db
         .select({ orderId: (orderItems as any).orderId })
@@ -261,8 +247,13 @@ describe('P0-8.10.1 checkout concurrency: stock=1, two parallel checkouts', () =
       }
 
       await db.delete(products).where(eq((products as any).id, productId));
-    } catch {
-      // best-effort cleanup
+    } catch (err) {
+      // Do not swallow cleanup failures: they can leave residual rows and cause flaky follow-up tests.
+      // In CI we fail fast so flakes are visible.
+      if (process.env.CI) throw err;
+
+      // eslint-disable-next-line no-console
+      console.warn('checkout concurrency cleanup failed', err);
     }
   }, 30000);
 });
diff --git a/frontend/lib/tests/checkout-currency-policy.test.ts b/frontend/lib/tests/shop/checkout-currency-policy.test.ts
similarity index 94%
rename from frontend/lib/tests/checkout-currency-policy.test.ts
rename to frontend/lib/tests/shop/checkout-currency-policy.test.ts
index 0d34c8c6..0af8357c 100644
--- a/frontend/lib/tests/checkout-currency-policy.test.ts
+++ b/frontend/lib/tests/shop/checkout-currency-policy.test.ts
@@ -8,9 +8,8 @@ process.env.STRIPE_SECRET_KEY = '';
 process.env.STRIPE_WEBHOOK_SECRET = '';
 
 vi.mock('@/lib/auth', async () => {
-  const actual = await vi.importActual<typeof import('@/lib/auth')>(
-    '@/lib/auth'
-  );
+  const actual =
+    await vi.importActual<typeof import('@/lib/auth')>('@/lib/auth');
   return {
     ...actual,
     getCurrentUser: async () => null, // guest
@@ -42,9 +41,8 @@ const logErrorMock = vi.fn((..._args: any[]) => undefined);
 const logWarnMock = vi.fn((..._args: any[]) => undefined);
 
 vi.mock('@/lib/logging', async () => {
-  const actual = await vi.importActual<typeof import('@/lib/logging')>(
-    '@/lib/logging'
-  );
+  const actual =
+    await vi.importActual<typeof import('@/lib/logging')>('@/lib/logging');
   return {
     ...actual,
     logError: (...args: any[]) => logErrorMock(...args),
@@ -69,13 +67,11 @@ beforeAll(() => {
 });
 
 beforeAll(async () => {
-  // Import route after env + mocks are set
   const mod = await import('@/app/api/shop/checkout/route');
   POST = mod.POST;
 });
 
 afterAll(async () => {
-  // delete orders first (cascade order_items)
   if (createdOrderIds.length) {
     await db.delete(orders).where(inArray(orders.id, createdOrderIds));
   }
@@ -88,7 +84,6 @@ afterAll(async () => {
 });
 
 function makeIdempotencyKey(): string {
-  // 36 chars, allowed by your schema
   return crypto.randomUUID();
 }
 
@@ -127,7 +122,6 @@ async function seedProduct(options: {
       imageUrl: 'https://example.com/img.png',
       imagePublicId: null,
 
-      // legacy mirror required by schema
       price: '10.00',
       originalPrice: null,
       currency: 'USD',
@@ -165,7 +159,7 @@ async function debugIfNotExpected(res: Response, expectedStatus: number) {
   if (res.status === expectedStatus) return;
 
   const text = await res.text().catch(() => '<failed to read body>');
-  // Keep output minimal but decisive
+
   console.log('checkout failed', { status: res.status, body: text });
   console.log('logError calls', logErrorMock.mock.calls);
   console.log(
diff --git a/frontend/lib/tests/checkout-no-payments.test.ts b/frontend/lib/tests/shop/checkout-no-payments.test.ts
similarity index 85%
rename from frontend/lib/tests/checkout-no-payments.test.ts
rename to frontend/lib/tests/shop/checkout-no-payments.test.ts
index 4b119870..a0648620 100644
--- a/frontend/lib/tests/checkout-no-payments.test.ts
+++ b/frontend/lib/tests/shop/checkout-no-payments.test.ts
@@ -24,11 +24,10 @@ vi.mock('@/lib/logging', async () => {
   const actual = await vi.importActual<any>('@/lib/logging');
   return {
     ...actual,
-    logWarn: () => {}, // silence expected business warnings in this test file
+    logWarn: () => {},
   };
 });
 
-// Force "no payments" for this whole test file.
 vi.mock('@/lib/env/stripe', async () => {
   const actual = await vi.importActual<any>('@/lib/env/stripe');
   return {
@@ -41,7 +40,7 @@ vi.mock('@/lib/auth', async () => {
   const actual = await vi.importActual<any>('@/lib/auth');
   return {
     ...actual,
-    getCurrentUser: async () => null, // critical: avoid cookies() in tests
+    getCurrentUser: async () => null,
   };
 });
 
@@ -53,19 +52,12 @@ function logTestCleanupFailed(meta: Record<string, unknown>, error: unknown) {
   });
 }
 
-/**
- * Creates an isolated product + product_prices row to avoid stock races
- * with parallel test files that also reserve/release inventory.
- *
- * Product is created as inactive by default; tests activate it only for the minimal window needed.
- */
 async function createIsolatedProductForCurrency(opts: {
   currency: 'USD' | 'UAH';
   stock: number;
 }): Promise<{ productId: string }> {
   const now = new Date();
 
-  // Clone a real product row to satisfy NOT NULL columns (schema varies).
   const [tpl] = await db
     .select()
     .from(products)
@@ -82,7 +74,6 @@ async function createIsolatedProductForCurrency(opts: {
   const slug = `t-iso-nopay-${crypto.randomUUID()}`;
   const sku = `t-iso-nopay-${crypto.randomUUID()}`;
 
-  // Keep inactive by default to avoid being picked by other tests.
   await db.insert(products).values({
     ...(tpl as any),
     id: productId,
@@ -95,7 +86,6 @@ async function createIsolatedProductForCurrency(opts: {
     updatedAt: now,
   } as any);
 
-  // Ensure price exists for requested currency (minor + legacy).
   try {
     await db.insert(productPrices).values({
       productId,
@@ -108,7 +98,6 @@ async function createIsolatedProductForCurrency(opts: {
       updatedAt: now,
     } as any);
   } catch (e) {
-    // Cleanup orphaned product on price insert failure (best-effort)
     try {
       await db.delete(products).where(eq(products.id, productId));
     } catch (cleanupError) {
@@ -130,14 +119,12 @@ async function createIsolatedProductForCurrency(opts: {
 }
 
 async function cleanupIsolatedProduct(productId: string) {
-  // Make sure it won't be visible for any selector.
   try {
     await db
       .update(products)
       .set({ isActive: false, updatedAt: new Date() } as any)
       .where(eq(products.id, productId));
   } catch (e) {
-    // Non-fatal: best-effort test teardown
     logTestCleanupFailed(
       { fn: 'cleanupIsolatedProduct', step: 'deactivate product', productId },
       e
@@ -231,8 +218,6 @@ async function countMovesForProduct(productId: string): Promise<number> {
 }
 
 async function bestEffortHardDeleteOrder(orderId: string) {
-  // Keep DB reasonably clean in dev.
-  // Use raw SQL because inventory_moves/order_items may not be exported as Drizzle tables.
   try {
     await db.execute(
       sql`delete from inventory_moves where order_id = ${orderId}::uuid`
@@ -283,7 +268,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
     let orderId: string | null = null;
 
     try {
-      // Activate only for the minimal window needed by checkout.
       await db
         .update(products)
         .set({ isActive: true, updatedAt: new Date() } as any)
@@ -314,18 +298,15 @@ describe.sequential('Checkout (no payments) invariants', () => {
       expect(typeof orderId).toBe('string');
       expect(orderId.length).toBeGreaterThan(10);
 
-      // Deactivate immediately to minimize chance other parallel tests pick it.
       await db
         .update(products)
         .set({ isActive: false, updatedAt: new Date() } as any)
         .where(eq(products.id, productId));
 
-      // response-level contract
       expect(json.order.paymentProvider).toBe('none');
       expect(json.order.paymentStatus).toBe('paid');
       expect(json.order.currency).toBe('USD');
 
-      // DB contract (source of truth)
       const [row] = await db
         .select({
           id: orders.id,
@@ -342,13 +323,12 @@ describe.sequential('Checkout (no payments) invariants', () => {
 
       expect(row).toBeTruthy();
       expect(row!.paymentProvider).toBe('none');
-      expect(row!.paymentStatus).toBe('paid'); // forced by DB CHECK for provider=none
-      expect(row!.inventoryStatus).toBe('reserved'); // TRUE finality for no-payments
+      expect(row!.paymentStatus).toBe('paid');
+      expect(row!.inventoryStatus).toBe('reserved');
       expect(row!.status).toBe('PAID');
       expect(row!.currency).toBe('USD');
       expect(row!.totalAmountMinor).toBeGreaterThan(0);
 
-      // Ledger: exactly one reserve (no duplicates on single request)
       const moves = await readMoves(orderId);
       const reserves = moves.filter(m => m.type === 'reserve');
       const releases = moves.filter(m => m.type === 'release');
@@ -358,7 +338,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
       expect(reserves[0]!.quantity).toBe(1);
       expect(releases.length).toBe(0);
 
-      // Stock decreased
       const [p1] = await db
         .select({ stock: products.stock })
         .from(products)
@@ -368,7 +347,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
       expect(p1).toBeTruthy();
       expect(p1!.stock).toBe(stockBefore - 1);
 
-      // cleanup: restore stock via release
       const { restockOrder } = await import('@/lib/services/orders');
       await restockOrder(orderId, { reason: 'stale' });
 
@@ -384,7 +362,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
       await bestEffortHardDeleteOrder(orderId);
       orderId = null;
     } finally {
-      // If test failed after creating an order, try to delete it.
       if (orderId) {
         await bestEffortHardDeleteOrder(orderId);
       }
@@ -429,13 +406,11 @@ describe.sequential('Checkout (no payments) invariants', () => {
       orderId1 = (j1?.order?.id ?? j1?.orderId) as string;
       expect(orderId1).toBeTruthy();
 
-      // Deactivate immediately (same reason as in success-path test)
       await db
         .update(products)
         .set({ isActive: false, updatedAt: new Date() } as any)
         .where(eq(products.id, productId));
 
-      // same IdemKey + same payload => same order id (no extra reserve)
       const r2 = await postCheckout({
         idemKey,
         acceptLanguage: 'en',
@@ -450,9 +425,8 @@ describe.sequential('Checkout (no payments) invariants', () => {
 
       const movesAfter2 = await readMoves(orderId1);
       const reservesAfter2 = movesAfter2.filter(m => m.type === 'reserve');
-      expect(reservesAfter2.length).toBe(1); // critical: no double-reserve
+      expect(reservesAfter2.length).toBe(1);
 
-      // same IdemKey but different payload => 409 conflict
       const r3 = await postCheckout({
         idemKey,
         acceptLanguage: 'en',
@@ -460,7 +434,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
       });
       expect(r3.status).toBe(409);
 
-      // cleanup: restore stock via release
       const { restockOrder } = await import('@/lib/services/orders');
       await restockOrder(orderId1, { reason: 'stale' });
 
@@ -492,13 +465,11 @@ describe.sequential('Checkout (no payments) invariants', () => {
     let unexpectedOrderId: string | null = null;
 
     try {
-      // Activate only for the minimal window needed by checkout.
       await db
         .update(products)
         .set({ isActive: true, updatedAt: new Date() } as any)
         .where(eq(products.id, productId));
 
-      // Make variants deterministic for this test.
       await db
         .update(products)
         .set({
@@ -518,7 +489,7 @@ describe.sequential('Checkout (no payments) invariants', () => {
 
       expect(p0).toBeTruthy();
       const stockBefore = p0!.stock;
-      // ДО checkout: порахували moves
+
       const countBefore = await countMovesForProduct(productId);
 
       const res = await postCheckout({
@@ -537,7 +508,7 @@ describe.sequential('Checkout (no payments) invariants', () => {
       expect(res.status).toBe(400);
 
       const json: any = await res.json();
-      // Deactivate immediately to minimize chance other parallel tests pick it.
+
       await db
         .update(products)
         .set({ isActive: false, updatedAt: new Date() } as any)
@@ -547,7 +518,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
       const countAfter = await countMovesForProduct(productId);
       expect(countAfter).toBe(countBefore);
 
-      // No order should be created for invalid variant
       const [maybeOrder] = await db
         .select({ id: orders.id })
         .from(orders)
@@ -557,7 +527,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
       if (maybeOrder?.id) unexpectedOrderId = maybeOrder.id;
       expect(maybeOrder).toBeFalsy();
 
-      // Stock must not change
       const [p1] = await db
         .select({ stock: products.stock })
         .from(products)
@@ -567,7 +536,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
       expect(p1).toBeTruthy();
       expect(p1!.stock).toBe(stockBefore);
     } finally {
-      // Deactivate to reduce cross-test interference.
       try {
         await db
           .update(products)
@@ -575,7 +543,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
           .where(eq(products.id, productId));
       } catch {}
 
-      // If an order was unexpectedly created, remove it (keep DB clean).
       if (unexpectedOrderId) {
         await bestEffortHardDeleteOrder(unexpectedOrderId);
       }
@@ -594,13 +561,11 @@ describe.sequential('Checkout (no payments) invariants', () => {
     let unexpectedOrderId: string | null = null;
 
     try {
-      // Activate only for the minimal window needed by checkout.
       await db
         .update(products)
         .set({ isActive: true, updatedAt: new Date() } as any)
         .where(eq(products.id, productId));
 
-      // Simulate "no variants configured" (empty lists).
       await db
         .update(products)
         .set({
@@ -621,7 +586,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
       expect(p0).toBeTruthy();
       const stockBefore = p0!.stock;
 
-      // ДО checkout: порахували moves
       const countBefore = await countMovesForProduct(productId);
 
       const res = await postCheckout({
@@ -631,7 +595,7 @@ describe.sequential('Checkout (no payments) invariants', () => {
           {
             productId,
             quantity: 1,
-            // Client sends options, but product has none => must be rejected.
+
             selectedSize: 'S',
             selectedColor: 'Red',
           },
@@ -642,7 +606,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
 
       const json: any = await res.json();
 
-      // Deactivate immediately to minimize chance other parallel tests pick it.
       await db
         .update(products)
         .set({ isActive: false, updatedAt: new Date() } as any)
@@ -650,11 +613,9 @@ describe.sequential('Checkout (no payments) invariants', () => {
 
       expect(json?.code).toBe('INVALID_VARIANT');
 
-      // Після checkout: moves count must be unchanged
       const countAfter = await countMovesForProduct(productId);
       expect(countAfter).toBe(countBefore);
 
-      // No order should be created for this idemKey
       const [maybeOrder] = await db
         .select({ id: orders.id })
         .from(orders)
@@ -664,7 +625,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
       if (maybeOrder?.id) unexpectedOrderId = maybeOrder.id;
       expect(maybeOrder).toBeFalsy();
 
-      // Stock must not change
       const [p1] = await db
         .select({ stock: products.stock })
         .from(products)
@@ -674,7 +634,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
       expect(p1).toBeTruthy();
       expect(p1!.stock).toBe(stockBefore);
     } finally {
-      // Deactivate to reduce cross-test interference.
       try {
         await db
           .update(products)
@@ -682,7 +641,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
           .where(eq(products.id, productId));
       } catch {}
 
-      // If an order was unexpectedly created, remove it (keep DB clean).
       if (unexpectedOrderId) {
         await bestEffortHardDeleteOrder(unexpectedOrderId);
       }
@@ -696,7 +654,6 @@ describe.sequential('Checkout (no payments) invariants', () => {
     const idemKey = crypto.randomUUID();
     const createdAt = new Date(Date.now() - 11 * 60_000);
 
-    // Insert orphan order (no inventory_moves)
     await db.insert(orders).values({
       id: orphanId,
       currency: 'USD',
@@ -721,9 +678,8 @@ describe.sequential('Checkout (no payments) invariants', () => {
     const moves0 = await readMoves(orphanId);
     expect(moves0.length).toBe(0);
 
-    const { restockStaleNoPaymentOrders } = await import(
-      '@/lib/services/orders'
-    );
+    const { restockStaleNoPaymentOrders } =
+      await import('@/lib/services/orders');
     const processed = await restockStaleNoPaymentOrders({
       olderThanMinutes: 10,
       batchSize: 50,
diff --git a/frontend/lib/tests/checkout-origin-posture-contract.test.ts b/frontend/lib/tests/shop/checkout-origin-posture-contract.test.ts
similarity index 100%
rename from frontend/lib/tests/checkout-origin-posture-contract.test.ts
rename to frontend/lib/tests/shop/checkout-origin-posture-contract.test.ts
diff --git a/frontend/lib/tests/checkout-set-payment-intent-reject-contract.test.ts b/frontend/lib/tests/shop/checkout-set-payment-intent-reject-contract.test.ts
similarity index 92%
rename from frontend/lib/tests/checkout-set-payment-intent-reject-contract.test.ts
rename to frontend/lib/tests/shop/checkout-set-payment-intent-reject-contract.test.ts
index a2068474..a77bbaf5 100644
--- a/frontend/lib/tests/checkout-set-payment-intent-reject-contract.test.ts
+++ b/frontend/lib/tests/shop/checkout-set-payment-intent-reject-contract.test.ts
@@ -11,8 +11,6 @@ import { makeCheckoutReq } from '@/lib/tests/helpers/makeCheckoutReq';
 import { InvalidPayloadError } from '@/lib/services/errors';
 import { ensureStripePaymentIntentForOrder } from '@/lib/services/orders/payment-attempts';
 
-// Force payments enabled so route goes into Stripe flow
-// gitleaks:allow
 vi.mock('@/lib/env/stripe', () => ({
   getStripeEnv: () => ({
     paymentsEnabled: true,
@@ -20,15 +18,13 @@ vi.mock('@/lib/env/stripe', () => ({
     secretKey: 'sk_test_dummy',
     webhookSecret: 'whsec_test_dummy',
   }),
-  isPaymentsEnabled: () => true, // kept for backward compatibility
+  isPaymentsEnabled: () => true,
 }));
 
-// Avoid auth coupling
 vi.mock('@/lib/auth', () => ({
   getCurrentUser: vi.fn().mockResolvedValue(null),
 }));
 
-// Stripe: PI creation succeeds
 vi.mock('@/lib/psp/stripe', () => ({
   createPaymentIntent: vi.fn(async () => ({
     paymentIntentId: 'pi_test_attach_reject',
@@ -37,7 +33,6 @@ vi.mock('@/lib/psp/stripe', () => ({
   retrievePaymentIntent: vi.fn(),
 }));
 
-// Avoid DB coupling introduced by #6 (DB-canonical PI amount/currency)
 vi.mock('@/lib/services/orders/payment-intent', () => ({
   readStripePaymentIntentParams: vi.fn(async () => ({
     amountMinor: 1000,
@@ -45,7 +40,6 @@ vi.mock('@/lib/services/orders/payment-intent', () => ({
   })),
 }));
 
-// Mock order services
 vi.mock('@/lib/services/orders', async () => {
   const actual = await vi.importActual<any>('@/lib/services/orders');
   return {
@@ -134,7 +128,6 @@ describe('checkout: setOrderPaymentIntent rejection after order creation must no
     const json = await res.json();
     expect(json.code).toBe('CHECKOUT_CONFLICT');
 
-    // Policy: conflict should not trigger immediate restock here.
     expect(restock).not.toHaveBeenCalled();
   });
 
diff --git a/frontend/lib/tests/checkout-stripe-error-contract.test.ts b/frontend/lib/tests/shop/checkout-stripe-error-contract.test.ts
similarity index 88%
rename from frontend/lib/tests/checkout-stripe-error-contract.test.ts
rename to frontend/lib/tests/shop/checkout-stripe-error-contract.test.ts
index 208aa6c6..5f6bb582 100644
--- a/frontend/lib/tests/checkout-stripe-error-contract.test.ts
+++ b/frontend/lib/tests/shop/checkout-stripe-error-contract.test.ts
@@ -9,7 +9,6 @@ import {
 } from 'vitest';
 import { makeCheckoutReq } from '@/lib/tests/helpers/makeCheckoutReq';
 
-// 1) force payments enabled so route goes into Stripe flow
 vi.mock('@/lib/env/stripe', () => ({
   getStripeEnv: () => ({
     paymentsEnabled: true,
@@ -17,15 +16,13 @@ vi.mock('@/lib/env/stripe', () => ({
     secretKey: 'sk_test_dummy',
     webhookSecret: 'whsec_test_dummy',
   }),
-  isPaymentsEnabled: () => true, // kept for backward compatibility
+  isPaymentsEnabled: () => true,
 }));
 
-// 2) avoid auth coupling
 vi.mock('@/lib/auth', () => ({
   getCurrentUser: vi.fn().mockResolvedValue(null),
 }));
 
-// 3) force Stripe PI creation to fail AFTER "DB writes" (simulated by createOrderWithItems resolving)
 vi.mock('@/lib/psp/stripe', () => ({
   createPaymentIntent: vi.fn(async () => {
     throw new Error('STRIPE_TEST_DOWN');
@@ -33,7 +30,6 @@ vi.mock('@/lib/psp/stripe', () => ({
   retrievePaymentIntent: vi.fn(),
 }));
 
-// Avoid DB coupling introduced by #6 (DB-canonical PI amount/currency)
 vi.mock('@/lib/services/orders/payment-intent', () => ({
   readStripePaymentIntentParams: vi.fn(async () => ({
     amountMinor: 1000,
@@ -41,7 +37,6 @@ vi.mock('@/lib/services/orders/payment-intent', () => ({
   })),
 }));
 
-// 4) mock orders services so we don't depend on DB schema/seed here
 vi.mock('@/lib/services/orders', async () => {
   const actual = await vi.importActual<any>('@/lib/services/orders');
   return {
diff --git a/frontend/lib/tests/currency.test.ts b/frontend/lib/tests/shop/currency.test.ts
similarity index 98%
rename from frontend/lib/tests/currency.test.ts
rename to frontend/lib/tests/shop/currency.test.ts
index 848d1f71..990df2e8 100644
--- a/frontend/lib/tests/currency.test.ts
+++ b/frontend/lib/tests/shop/currency.test.ts
@@ -3,7 +3,7 @@ import {
   parsePrimaryLocaleFromAcceptLanguage,
   resolveCurrencyFromHeaders,
   resolveCurrencyFromLocale,
-} from "../shop/currency";
+} from "../../shop/currency";
 
 describe("currency policy (CUR-0 / D1)", () => {
   it("uk -> UAH", () => {
diff --git a/frontend/lib/tests/format-money.test.ts b/frontend/lib/tests/shop/format-money.test.ts
similarity index 100%
rename from frontend/lib/tests/format-money.test.ts
rename to frontend/lib/tests/shop/format-money.test.ts
diff --git a/frontend/lib/tests/shop/order-items-snapshot-immutable.test.ts b/frontend/lib/tests/shop/order-items-snapshot-immutable.test.ts
new file mode 100644
index 00000000..5606444c
--- /dev/null
+++ b/frontend/lib/tests/shop/order-items-snapshot-immutable.test.ts
@@ -0,0 +1,218 @@
+import { randomUUID } from 'node:crypto';
+
+import { and, eq } from 'drizzle-orm';
+import { NextRequest } from 'next/server';
+import { describe, expect, it, vi } from 'vitest';
+
+import { db } from '@/db';
+import {
+  inventoryMoves,
+  orderItems,
+  orders,
+  productPrices,
+  products,
+} from '@/db/schema';
+
+vi.mock('@/lib/auth', async () => {
+  const actual = await vi.importActual<Record<string, unknown>>('@/lib/auth');
+  return {
+    ...actual,
+    getCurrentUser: vi.fn(async () => null),
+  };
+});
+
+vi.mock('@/lib/env/stripe', async () => {
+  const actual =
+    await vi.importActual<Record<string, unknown>>('@/lib/env/stripe');
+  return {
+    ...actual,
+    isPaymentsEnabled: () => false,
+  };
+});
+
+type CheckoutResponse = {
+  success: boolean;
+  orderId?: string;
+  order?: { id?: string };
+};
+
+function makeJsonRequest(
+  url: string,
+  body: unknown,
+  headers: Record<string, string>
+) {
+  return new NextRequest(url, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(body),
+  });
+}
+
+async function cleanupByIds(params: { orderId?: string; productId: string }) {
+  const { orderId, productId } = params;
+
+  if (orderId) {
+    // delete children first
+    await db.delete(inventoryMoves).where(eq(inventoryMoves.orderId, orderId));
+    await db.delete(orderItems).where(eq(orderItems.orderId, orderId));
+    await db.delete(orders).where(eq(orders.id, orderId));
+  }
+
+  await db.delete(productPrices).where(eq(productPrices.productId, productId));
+
+  await db.delete(products).where(eq(products.id, productId));
+}
+
+describe('P0-6 snapshots: order_items immutability', () => {
+  it('snapshot fields must not change after products/product_prices update', async () => {
+    const productId = randomUUID();
+    const priceId = randomUUID();
+
+    const titleV1 = 'Snapshot Test Product';
+    const slugV1 = `snapshot-test-${productId.slice(0, 8)}`;
+    const skuV1 = `SKU-${productId.slice(0, 8)}`;
+
+    await db.insert(products).values({
+      id: productId,
+      slug: slugV1,
+      title: titleV1,
+      description: 'snapshot test',
+      imageUrl: 'https://res.cloudinary.com/devlovers/image/upload/v1/test.png',
+      imagePublicId: null,
+      price: '9.00',
+      originalPrice: null,
+      currency: 'USD',
+      category: null,
+      type: null,
+      colors: [],
+      sizes: [],
+      badge: 'NONE',
+      isActive: true,
+      isFeatured: false,
+      stock: 10,
+      sku: skuV1,
+    });
+
+    await db.insert(productPrices).values({
+      id: priceId,
+      productId,
+      currency: 'USD',
+      priceMinor: 900,
+      originalPriceMinor: null,
+      price: '9.00',
+      originalPrice: null,
+    });
+
+    const idem = randomUUID();
+    const req = makeJsonRequest(
+      'http://localhost:3000/api/shop/checkout',
+      { items: [{ productId, quantity: 1 }] },
+      {
+        'Accept-Language': 'en-US,en;q=0.9',
+        'Content-Type': 'application/json',
+        'Idempotency-Key': idem,
+        Origin: 'http://localhost:3000',
+      }
+    );
+    const { POST: checkoutPOST } =
+      await import('@/app/api/shop/checkout/route');
+
+    const res = await checkoutPOST(req);
+
+    expect(res.status).toBeGreaterThanOrEqual(200);
+    expect(res.status).toBeLessThan(300);
+
+    const json = (await res.json()) as CheckoutResponse;
+    expect(json.success).toBe(true);
+
+    const orderId = json.orderId ?? json.order?.id;
+    expect(typeof orderId).toBe('string');
+    if (!orderId) throw new Error('Missing orderId from checkout response');
+
+    let primaryError: unknown = null;
+    let cleanupError: unknown = null;
+
+    try {
+      const before = await db
+        .select({
+          orderId: orderItems.orderId,
+          productId: orderItems.productId,
+          quantity: orderItems.quantity,
+          unitPriceMinor: orderItems.unitPriceMinor,
+          lineTotalMinor: orderItems.lineTotalMinor,
+          productTitle: orderItems.productTitle,
+          productSlug: orderItems.productSlug,
+          productSku: orderItems.productSku,
+        })
+        .from(orderItems)
+        .where(eq(orderItems.orderId, orderId));
+
+      expect(before.length).toBe(1);
+      expect(before[0].productId).toBe(productId);
+      expect(before[0].productTitle).toBe(titleV1);
+      expect(before[0].productSlug).toBe(slugV1);
+      expect(before[0].productSku).toBe(skuV1);
+      expect(before[0].unitPriceMinor).toBe(900);
+      expect(before[0].lineTotalMinor).toBe(900);
+
+      const titleV2 = `${titleV1} UPDATED`;
+      const slugV2 = `${slugV1}-updated`;
+      const skuV2 = `${skuV1}-UPDATED`;
+
+      await db
+        .update(products)
+        .set({
+          title: titleV2,
+          slug: slugV2,
+          sku: skuV2,
+          updatedAt: new Date(),
+        })
+        .where(eq(products.id, productId));
+
+      await db
+        .update(productPrices)
+        .set({
+          priceMinor: 1000,
+          price: '10.00',
+          updatedAt: new Date(),
+        })
+        .where(
+          and(
+            eq(productPrices.productId, productId),
+            eq(productPrices.currency, 'USD')
+          )
+        );
+
+      const after = await db
+        .select({
+          orderId: orderItems.orderId,
+          productId: orderItems.productId,
+          quantity: orderItems.quantity,
+          unitPriceMinor: orderItems.unitPriceMinor,
+          lineTotalMinor: orderItems.lineTotalMinor,
+          productTitle: orderItems.productTitle,
+          productSlug: orderItems.productSlug,
+          productSku: orderItems.productSku,
+        })
+        .from(orderItems)
+        .where(eq(orderItems.orderId, orderId));
+
+      expect(after.length).toBe(1);
+
+      expect(after[0]).toEqual(before[0]);
+    } catch (e) {
+      primaryError = e;
+      throw e;
+    } finally {
+      try {
+        await cleanupByIds({ orderId, productId });
+      } catch (e) {
+        cleanupError = e;
+        console.error('[test cleanup failed]', { orderId, productId }, e);
+      }
+    }
+    if (!primaryError && cleanupError) {
+      throw cleanupError;
+    }
+  }, 30_000);
+});
diff --git a/frontend/lib/tests/order-items-variants.test.ts b/frontend/lib/tests/shop/order-items-variants.test.ts
similarity index 86%
rename from frontend/lib/tests/order-items-variants.test.ts
rename to frontend/lib/tests/shop/order-items-variants.test.ts
index f23d72dd..be5f5d4b 100644
--- a/frontend/lib/tests/order-items-variants.test.ts
+++ b/frontend/lib/tests/shop/order-items-variants.test.ts
@@ -16,7 +16,6 @@ describe('order_items variants (selected_size/selected_color)', () => {
 
     let orderId: string | null = null;
 
-    // Arrange: create product + price row (USD)
     await db.insert(products).values({
       id: productId,
       slug,
@@ -27,7 +26,6 @@ describe('order_items variants (selected_size/selected_color)', () => {
       isActive: true,
       stock: 50,
 
-      // NEW: allow selected variants used below
       ...({
         sizes: ['S', 'M'],
         colors: ['Red'],
@@ -45,7 +43,6 @@ describe('order_items variants (selected_size/selected_color)', () => {
     });
 
     try {
-      // Act: checkout with two variants for same productId
       const idem = crypto.randomUUID();
       const result = await createOrderWithItems({
         idempotencyKey: idem,
@@ -55,14 +52,14 @@ describe('order_items variants (selected_size/selected_color)', () => {
           {
             productId,
             quantity: 1,
-            // variants:
+
             selectedSize: 'S',
             selectedColor: 'Red',
           } as any,
           {
             productId,
             quantity: 1,
-            // variants:
+
             selectedSize: 'M',
             selectedColor: 'Red',
           } as any,
@@ -71,7 +68,6 @@ describe('order_items variants (selected_size/selected_color)', () => {
 
       orderId = result.order.id;
 
-      // Assert (API-level): should keep two lines
       expect(result.order.items.length).toBe(2);
       const norm = (v: unknown) =>
         String(v ?? '')
@@ -86,8 +82,6 @@ describe('order_items variants (selected_size/selected_color)', () => {
       expect(sizes.sort()).toEqual(['m', 's']);
       expect(colors.sort()).toEqual(['red', 'red']);
 
-      // DB-level
-
       const rows = await db
         .select({
           productId: orderItems.productId,
@@ -108,15 +102,12 @@ describe('order_items variants (selected_size/selected_color)', () => {
 
       expect(rowKeys).toEqual([`${productId}|m|red`, `${productId}|s|red`]);
     } finally {
-      // Cleanup: delete order first (cascade deletes order_items + inventory_moves)
       if (orderId) {
         await db.delete(orders).where(eq(orders.id, orderId));
       }
-      // Then delete product (cascade deletes product_prices)
+
       await db.delete(products).where(eq(products.id, productId));
 
-      // Safety: if something was left behind (shouldn't), try to clear by ids
-      // (No-throw best-effort)
       try {
         await db.execute(
           sql`delete from product_prices where product_id = ${productId}::uuid`
diff --git a/frontend/lib/tests/shop/orders-access.test.ts b/frontend/lib/tests/shop/orders-access.test.ts
new file mode 100644
index 00000000..ba33e0e2
--- /dev/null
+++ b/frontend/lib/tests/shop/orders-access.test.ts
@@ -0,0 +1,129 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { NextRequest } from 'next/server';
+
+vi.mock('@/lib/auth', () => ({
+  getCurrentUser: vi.fn(),
+}));
+
+vi.mock('@/db', () => ({
+  db: {
+    select: vi.fn(),
+  },
+}));
+
+import { getCurrentUser } from '@/lib/auth';
+import { db } from '@/db';
+
+type MockUser = { id: string; role: 'user' | 'admin' };
+
+describe('P0-SEC-1.1: GET /api/shop/orders/[id] access control', () => {
+  const orderId = '00000000-0000-0000-0000-000000000000';
+  const ownerId = '11111111-1111-1111-1111-111111111111';
+  const otherUserId = '22222222-2222-2222-2222-222222222222';
+  const adminId = 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa';
+
+  function mockDbRows(rows: any[]) {
+    const builder = {
+      from: vi.fn().mockReturnThis(),
+      leftJoin: vi.fn().mockReturnThis(),
+      where: vi.fn().mockResolvedValue(rows),
+    };
+    (db.select as any).mockReturnValue(builder);
+    return builder;
+  }
+
+  async function callGet(id: string) {
+    const { GET } = await import('@/app/api/shop/orders/[id]/route');
+    const req = new NextRequest(`http://localhost/api/shop/orders/${id}`, {
+      method: 'GET',
+    });
+
+    const res = await (GET as any)(req, { params: Promise.resolve({ id }) });
+    return res as Response;
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('no session -> 401', async () => {
+    (getCurrentUser as any).mockResolvedValue(null);
+
+    const res = await callGet(orderId);
+    expect(res.status).toBe(401);
+    expect(db.select).not.toHaveBeenCalled();
+  });
+
+  it('not owner and not admin -> 404 (hide existence)', async () => {
+    const user: MockUser = { id: otherUserId, role: 'user' };
+    (getCurrentUser as any).mockResolvedValue(user);
+
+    mockDbRows([]);
+
+    const res = await callGet(orderId);
+    expect(res.status).toBe(404);
+  });
+
+  it('owner -> 200', async () => {
+    const user: MockUser = { id: ownerId, role: 'user' };
+    (getCurrentUser as any).mockResolvedValue(user);
+
+    const now = new Date();
+    mockDbRows([
+      {
+        order: {
+          id: orderId,
+          userId: ownerId,
+          totalAmount: '10.00',
+          currency: 'USD',
+          paymentStatus: 'pending',
+          paymentProvider: 'stripe',
+          paymentIntentId: null,
+          stockRestored: false,
+          restockedAt: null,
+          idempotencyKey: 'idem_key',
+          createdAt: now,
+          updatedAt: now,
+        },
+        item: null,
+      },
+    ]);
+
+    const res = await callGet(orderId);
+    expect(res.status).toBe(200);
+
+    const json = await res.json();
+    expect(json?.success).toBe(true);
+    expect(json?.order?.id).toBe(orderId);
+    expect(json?.order?.userId).toBe(ownerId);
+  });
+
+  it('admin -> 200', async () => {
+    const user: MockUser = { id: adminId, role: 'admin' };
+    (getCurrentUser as any).mockResolvedValue(user);
+
+    const now = new Date();
+    mockDbRows([
+      {
+        order: {
+          id: orderId,
+          userId: ownerId,
+          totalAmount: '10.00',
+          currency: 'USD',
+          paymentStatus: 'pending',
+          paymentProvider: 'stripe',
+          paymentIntentId: null,
+          stockRestored: false,
+          restockedAt: null,
+          idempotencyKey: 'idem_key',
+          createdAt: now,
+          updatedAt: now,
+        },
+        item: null,
+      },
+    ]);
+
+    const res = await callGet(orderId);
+    expect(res.status).toBe(200);
+  });
+});
diff --git a/frontend/lib/tests/origin-posture.test.ts b/frontend/lib/tests/shop/origin-posture.test.ts
similarity index 100%
rename from frontend/lib/tests/origin-posture.test.ts
rename to frontend/lib/tests/shop/origin-posture.test.ts
diff --git a/frontend/lib/tests/payment-state-legacy-writers.test.ts b/frontend/lib/tests/shop/payment-state-legacy-writers.test.ts
similarity index 98%
rename from frontend/lib/tests/payment-state-legacy-writers.test.ts
rename to frontend/lib/tests/shop/payment-state-legacy-writers.test.ts
index 337d9d9d..f6e109ad 100644
--- a/frontend/lib/tests/payment-state-legacy-writers.test.ts
+++ b/frontend/lib/tests/shop/payment-state-legacy-writers.test.ts
@@ -18,7 +18,7 @@ async function seedOrder(args: SeedArgs): Promise<string> {
   const orderId = crypto.randomUUID();
   const now = new Date();
 
-  // NOTE: if your orders schema has extra NOT NULL columns, add them here once.
+
   const idempotencyKey = `test:${orderId}`;
 
   await db.insert(orders).values({
diff --git a/frontend/lib/tests/payment-state-machine.helper.test.ts b/frontend/lib/tests/shop/payment-state-machine.helper.test.ts
similarity index 91%
rename from frontend/lib/tests/payment-state-machine.helper.test.ts
rename to frontend/lib/tests/shop/payment-state-machine.helper.test.ts
index 3cec96da..5ed27222 100644
--- a/frontend/lib/tests/payment-state-machine.helper.test.ts
+++ b/frontend/lib/tests/shop/payment-state-machine.helper.test.ts
@@ -35,7 +35,6 @@ vi.mock('@/db', () => ({
 }));
 
 vi.mock('@/db/schema/shop', () => ({
-  // minimal runtime shape needed by payment-state.ts
   orders: {
     id: 'orders.id',
     paymentStatus: 'orders.payment_status',
@@ -86,21 +85,20 @@ describe('P1-6 payment state machine helper', () => {
   });
 
   it('forbidden transition does not change state and logs warn', async () => {
-    // simulate "no row updated"
     updateReturningRows = [];
-    // current state returned by getCurrentState() after failed update
+
     selectQueue = [[{ paymentStatus: 'failed', paymentProvider: 'stripe' }]];
 
     const res = await mod.guardedPaymentStatusUpdate({
       orderId: 'o2',
       paymentProvider: 'stripe',
-      to: 'paid', // failed -> paid is forbidden by matrix
+      to: 'paid',
       source: 'system',
       eventId: 'evt_2',
       note: 'test-forbidden',
       set: { updatedAt: new Date() } as any,
     });
-    
+
     expect(res.applied).toBe(false);
     if (res.applied) throw new Error('expected not applied');
     expect(res.reason).toBe('INVALID_TRANSITION');
@@ -116,13 +114,12 @@ describe('P1-6 payment state machine helper', () => {
   });
 
   it('provider=none hard-rejects invalid targets before UPDATE and logs warn', async () => {
-    // helper reads current state to log context
     selectQueue = [[{ paymentStatus: 'paid', paymentProvider: 'none' }]];
 
     const res = await mod.guardedPaymentStatusUpdate({
       orderId: 'o3',
       paymentProvider: 'none',
-      to: 'refunded', // explicitly forbidden for provider none
+      to: 'refunded',
       source: 'system',
       eventId: 'evt_3',
       note: 'test-none',
diff --git a/frontend/lib/tests/payment-status-tripwire.test.ts b/frontend/lib/tests/shop/payment-status-tripwire.test.ts
similarity index 80%
rename from frontend/lib/tests/payment-status-tripwire.test.ts
rename to frontend/lib/tests/shop/payment-status-tripwire.test.ts
index 96bc0a1d..d9f76637 100644
--- a/frontend/lib/tests/payment-status-tripwire.test.ts
+++ b/frontend/lib/tests/shop/payment-status-tripwire.test.ts
@@ -2,19 +2,6 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { describe, it, expect } from 'vitest';
 
-/**
- * Tripwire: fail if any code writes orders.paymentStatus via direct:
- *   - db.update(orders).set({ paymentStatus: ... })
- *   - db.insert(orders).values({ paymentStatus: ... })
- * outside an explicit allowlist.
- *
- * Scope: repo TS/TSX files (excluding node_modules/.next/dist/etc).
- * NOTE: This is NOT an AST parser. It is a scoped scan:
- *   - Finds `.set({ ... })` / `.values({ ... })`
- *   - Extracts ONLY the balanced object literal argument `{ ... }`
- *   - Detects `paymentStatus` only as a TOP-LEVEL key inside that object literal
- */
-
 const REPO_ROOT = process.cwd();
 
 const EXCLUDED_DIRS = new Set([
@@ -33,19 +20,12 @@ function norm(p: string): string {
   return p.replaceAll('\\', '/');
 }
 
-// Keep this allowlist very small on purpose.
-// Rules are per-file and per-operation (insert(values) vs update(set)).
 type AllowedWriters = { set: boolean; values: boolean };
 
 const WRITER_RULES = new Map<string, AllowedWriters>([
-  // Guarded writer (allowed): internal state machine transitions
   [norm('lib/services/orders/payment-state.ts'), { set: true, values: true }],
 
-  // Allowed ONLY for initial order creation (insert). Updates must stay guarded.
   [norm('lib/services/orders/checkout.ts'), { set: false, values: true }],
-
-  // If you ever intentionally allow route-level inserts, add explicitly:
-  // [norm('app/api/shop/checkout/route.ts'), { set: false, values: true }],
 ]);
 
 function getAllowed(rel: string): AllowedWriters {
@@ -72,10 +52,6 @@ function walk(dirAbs: string, relBase: string, out: string[]) {
 
 type ExtractedObject = { text: string; endIndex: number };
 
-/**
- * Extracts a balanced object literal starting at `braceStart` (which MUST point to '{').
- * Handles strings and comments to avoid premature brace matching.
- */
 function extractBalancedObjectLiteral(
   src: string,
   braceStart: number
@@ -89,14 +65,12 @@ function extractBalancedObjectLiteral(
 
   let depth = 0;
 
-  // For `${ ... }` inside template strings
   const templateExprDepth: number[] = [];
 
   for (let i = braceStart; i < src.length; i++) {
     const ch = src[i];
     const next = i + 1 < src.length ? src[i + 1] : '';
 
-    // --- comment/string handling ---
     if (mode() === 'line') {
       if (ch === '\n') stack.pop();
       continue;
@@ -133,18 +107,17 @@ function extractBalancedObjectLiteral(
         stack.pop();
         continue;
       }
-      // Enter template expr `${`
+
       if (ch === '$' && next === '{') {
         depth++;
         templateExprDepth.push(1);
         stack.push('code');
-        i++; // skip '{'
+        i++;
         continue;
       }
       continue;
     }
 
-    // --- code mode ---
     if (ch === '/' && next === '/') {
       stack.push('line');
       i++;
@@ -168,7 +141,6 @@ function extractBalancedObjectLiteral(
       continue;
     }
 
-    // --- braces ---
     if (ch === '{') {
       depth++;
       if (templateExprDepth.length > 0) {
@@ -182,9 +154,8 @@ function extractBalancedObjectLiteral(
         templateExprDepth[templateExprDepth.length - 1]--;
         if (templateExprDepth[templateExprDepth.length - 1] === 0) {
           templateExprDepth.pop();
-          // return to template mode (we entered code because of `${ ... }`)
           if (stack.length >= 2 && stack[stack.length - 2] === 'template') {
-            stack.pop(); // pop 'code'
+            stack.pop();
           }
         }
       }
@@ -198,10 +169,6 @@ function extractBalancedObjectLiteral(
   return null;
 }
 
-/**
- * Returns true if the extracted `{ ... }` contains a TOP-LEVEL key `paymentStatus`
- * (identifier, quoted, shorthand, or computed string literal).
- */
 function hasTopLevelPaymentStatusKey(objectLiteralWithBraces: string): boolean {
   if (
     objectLiteralWithBraces.length < 2 ||
@@ -217,7 +184,6 @@ function hasTopLevelPaymentStatusKey(objectLiteralWithBraces: string): boolean {
   const stack: Mode[] = ['code'];
   const mode = () => stack[stack.length - 1];
 
-  // nesting inside the object literal body (nested { [ ( )
   let nest = 0;
 
   const isIdentStart = (c: string) => /[A-Za-z_$]/.test(c);
@@ -250,7 +216,6 @@ function hasTopLevelPaymentStatusKey(objectLiteralWithBraces: string): boolean {
     const ch = body[i];
     const next = i + 1 < body.length ? body[i + 1] : '';
 
-    // --- comment/string handling ---
     if (mode() === 'line') {
       if (ch === '\n') stack.pop();
       continue;
@@ -290,7 +255,6 @@ function hasTopLevelPaymentStatusKey(objectLiteralWithBraces: string): boolean {
       continue;
     }
 
-    // --- code mode ---
     if (ch === '/' && next === '/') {
       stack.push('line');
       i++;
@@ -314,7 +278,6 @@ function hasTopLevelPaymentStatusKey(objectLiteralWithBraces: string): boolean {
       continue;
     }
 
-    // nesting
     if (ch === '{' || ch === '[' || ch === '(') {
       nest++;
       continue;
@@ -324,12 +287,10 @@ function hasTopLevelPaymentStatusKey(objectLiteralWithBraces: string): boolean {
       continue;
     }
 
-    // only top-level keys
     if (nest !== 0) continue;
 
     if (ch === ',' || /\s/.test(ch)) continue;
 
-    // identifier key: paymentStatus: ... OR shorthand: paymentStatus,
     if (isIdentStart(ch)) {
       let j = i + 1;
       while (j < body.length && isIdentPart(body[j])) j++;
@@ -345,7 +306,6 @@ function hasTopLevelPaymentStatusKey(objectLiteralWithBraces: string): boolean {
       continue;
     }
 
-    // quoted key: 'paymentStatus': or "paymentStatus":
     if (ch === "'" || ch === '"') {
       const q = readQuoted(body, i);
       if (q) {
@@ -359,7 +319,6 @@ function hasTopLevelPaymentStatusKey(objectLiteralWithBraces: string): boolean {
       continue;
     }
 
-    // computed key: ['paymentStatus']:
     if (ch === '[') {
       let j = skipWs(body, i + 1);
       const qch = body[j];
@@ -402,26 +361,20 @@ function hasDirectOrdersWriter(
     return /\binsert\s*\(\s*orders\s*\)/m.test(chunk);
   };
 
-  // Scan `.set({ ... })` / `.values({ ... })` call sites, then inspect ONLY their object literal argument.
   const CALL_RE = /\.(set|values)\s*\(\s*{/g;
 
   let m: RegExpExecArray | null;
   while ((m = CALL_RE.exec(source)) !== null) {
     const callKind = m[1] as 'set' | 'values';
 
-    // Only enforce for orders table chains:
-    // - db.update(orders).set({ ... })
-    // - db.insert(orders).values({ ... })
     if (callKind === 'set' && !isOrdersUpdateContext(source, m.index)) continue;
     if (callKind === 'values' && !isOrdersInsertContext(source, m.index))
       continue;
 
-    // `m[0]` ends with `{` due to the regex
     const braceStart = m.index + (m[0].length - 1);
     const extracted = extractBalancedObjectLiteral(source, braceStart);
     if (!extracted) continue;
 
-    // If this operation is explicitly allowed for this file, ignore it
     if (callKind === 'set' && allowed.set) {
       CALL_RE.lastIndex = Math.max(CALL_RE.lastIndex, extracted.endIndex);
       continue;
@@ -433,7 +386,6 @@ function hasDirectOrdersWriter(
 
     if (hasTopLevelPaymentStatusKey(extracted.text)) return true;
 
-    // jump forward to end of this object to avoid rescanning inside it
     CALL_RE.lastIndex = Math.max(CALL_RE.lastIndex, extracted.endIndex);
   }
 
@@ -448,7 +400,6 @@ describe('Task 6: Tripwire — no direct orders.paymentStatus writers outside al
     const offenders: string[] = [];
 
     for (const rel of files) {
-      // Skip tests entirely (they contain regex/fixtures that look like writers)
       if (rel.startsWith('lib/tests/')) continue;
       if (rel.endsWith('.test.ts') || rel.endsWith('.test.tsx')) continue;
       if (rel.endsWith('.spec.ts') || rel.endsWith('.spec.tsx')) continue;
diff --git a/frontend/lib/tests/prices.test.ts b/frontend/lib/tests/shop/prices.test.ts
similarity index 90%
rename from frontend/lib/tests/prices.test.ts
rename to frontend/lib/tests/shop/prices.test.ts
index eed21c86..16db179f 100644
--- a/frontend/lib/tests/prices.test.ts
+++ b/frontend/lib/tests/shop/prices.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { adminPriceRowSchema } from "../validation/shop";
+import { adminPriceRowSchema } from "../../validation/shop";
 
 describe("pricing validation", () => {
   it("rejects originalPriceMinor == priceMinor (SALE must be strict)", () => {
diff --git a/frontend/lib/tests/product-admin-merged-prices-policy.test.ts b/frontend/lib/tests/shop/product-admin-merged-prices-policy.test.ts
similarity index 100%
rename from frontend/lib/tests/product-admin-merged-prices-policy.test.ts
rename to frontend/lib/tests/shop/product-admin-merged-prices-policy.test.ts
diff --git a/frontend/lib/tests/product-admin-update-prices-patch-semantics.test.ts b/frontend/lib/tests/shop/product-admin-update-prices-patch-semantics.test.ts
similarity index 100%
rename from frontend/lib/tests/product-admin-update-prices-patch-semantics.test.ts
rename to frontend/lib/tests/shop/product-admin-update-prices-patch-semantics.test.ts
diff --git a/frontend/lib/tests/product-sale-invariant.test.ts b/frontend/lib/tests/shop/product-sale-invariant.test.ts
similarity index 86%
rename from frontend/lib/tests/product-sale-invariant.test.ts
rename to frontend/lib/tests/shop/product-sale-invariant.test.ts
index 5bb9c894..6c78cd0d 100644
--- a/frontend/lib/tests/product-sale-invariant.test.ts
+++ b/frontend/lib/tests/shop/product-sale-invariant.test.ts
@@ -24,7 +24,6 @@ describe('SALE invariant: originalPriceMinor is required', () => {
   const createdProductIds: string[] = [];
 
   afterEach(async () => {
-    // cleanup (cascade deletes product_prices)
     for (const id of createdProductIds.splice(0)) {
       await db.delete(products).where(eq(products.id, id));
     }
@@ -52,7 +51,6 @@ describe('SALE invariant: originalPriceMinor is required', () => {
   it('updateProduct: existing SALE + PATCH that removes originalPriceMinor must reject (final state invariant)', async () => {
     const slug = uniqueSlug();
 
-    // Seed DB: product is SALE and has valid originalPriceMinor in DB
     const [p] = await db
       .insert(products)
       .values({
@@ -61,8 +59,8 @@ describe('SALE invariant: originalPriceMinor is required', () => {
         description: null,
         imageUrl: 'https://example.com/seed.png',
         imagePublicId: null,
-        price: toDbMoney(1000), // 10.00
-        originalPrice: toDbMoney(2000), // 20.00
+        price: toDbMoney(1000),
+        originalPrice: toDbMoney(2000),
         currency: 'USD',
         category: null,
         type: null,
@@ -87,7 +85,6 @@ describe('SALE invariant: originalPriceMinor is required', () => {
       originalPrice: toDbMoney(2000),
     });
 
-    // Attempt to "remove" originalPrice via PATCH (prices upsert with null originalPriceMinor)
     await expect(
       updateProduct(p.id, {
         prices: [
@@ -97,11 +94,9 @@ describe('SALE invariant: originalPriceMinor is required', () => {
             originalPriceMinor: null,
           },
         ],
-        // badge omitted intentionally: finalBadge derives from existing.badge (SALE)
       } as any)
     ).rejects.toThrow(/SALE badge requires originalPrice/i);
 
-    // Ensure DB was not modified by the failed update
     const [pp] = await db
       .select({
         priceMinor: productPrices.priceMinor,
diff --git a/frontend/lib/tests/public-product-visibility.test.ts b/frontend/lib/tests/shop/public-product-visibility.test.ts
similarity index 93%
rename from frontend/lib/tests/public-product-visibility.test.ts
rename to frontend/lib/tests/shop/public-product-visibility.test.ts
index a05b25c7..c1960ea0 100644
--- a/frontend/lib/tests/public-product-visibility.test.ts
+++ b/frontend/lib/tests/shop/public-product-visibility.test.ts
@@ -53,7 +53,6 @@ describe('P0-5 Public products: inactive not visible', () => {
         stock: 5,
         sku: null,
 
-        // legacy mirror required by schema + checks
         price: '10.00',
         originalPrice: null,
         currency: 'USD',
@@ -64,7 +63,6 @@ describe('P0-5 Public products: inactive not visible', () => {
         productId,
         currency: 'USD',
 
-        // canonical + mirror must match checks
         priceMinor: 1000,
         originalPriceMinor: null,
         price: '10.00',
@@ -100,7 +98,6 @@ describe('P0-5 Public products: inactive not visible', () => {
         stock: 5,
         sku: null,
 
-        // legacy mirror required by schema + checks
         price: '19.99',
         originalPrice: null,
         currency: 'USD',
@@ -111,7 +108,6 @@ describe('P0-5 Public products: inactive not visible', () => {
         productId,
         currency: 'USD',
 
-        // canonical + mirror must match checks
         priceMinor: 1999,
         originalPriceMinor: null,
         price: '19.99',
diff --git a/frontend/lib/tests/rate-limit-subject-normalization.test.ts b/frontend/lib/tests/shop/rate-limit-subject-normalization.test.ts
similarity index 100%
rename from frontend/lib/tests/rate-limit-subject-normalization.test.ts
rename to frontend/lib/tests/shop/rate-limit-subject-normalization.test.ts
diff --git a/frontend/lib/tests/rate-limit-subject.test.ts b/frontend/lib/tests/shop/rate-limit-subject.test.ts
similarity index 98%
rename from frontend/lib/tests/rate-limit-subject.test.ts
rename to frontend/lib/tests/shop/rate-limit-subject.test.ts
index 749a8a4b..8717b7c0 100644
--- a/frontend/lib/tests/rate-limit-subject.test.ts
+++ b/frontend/lib/tests/shop/rate-limit-subject.test.ts
@@ -67,7 +67,6 @@ describe('rate limit subject', () => {
       'x-real-ip': '198.51.100.4',
     });
 
-    // cf invalid; trust disabled => must NOT accept x-real-ip
     expect(getClientIpFromHeaders(headers)).toBeNull();
   });
 
diff --git a/frontend/lib/tests/restock-order-only-once.test.ts b/frontend/lib/tests/shop/restock-order-only-once.test.ts
similarity index 100%
rename from frontend/lib/tests/restock-order-only-once.test.ts
rename to frontend/lib/tests/shop/restock-order-only-once.test.ts
diff --git a/frontend/lib/tests/restock-release-failure-invariant.test.ts b/frontend/lib/tests/shop/restock-release-failure-invariant.test.ts
similarity index 76%
rename from frontend/lib/tests/restock-release-failure-invariant.test.ts
rename to frontend/lib/tests/shop/restock-release-failure-invariant.test.ts
index 3dd1b23e..865c86de 100644
--- a/frontend/lib/tests/restock-release-failure-invariant.test.ts
+++ b/frontend/lib/tests/shop/restock-release-failure-invariant.test.ts
@@ -24,29 +24,24 @@ describe('P0 Inventory release invariants', () => {
     const slug = `t-${productId.slice(0, 8)}`;
     const sku = `SKU-${productId.slice(0, 8)}`;
 
-    // Keep references for cleanup
     const now = new Date();
 
-    // Spy/mocking: force release to fail
-    // NOTE: if applyReleaseMove throws in your impl, mockRejectedValueOnce is also OK.
     const releaseSpy = vi
       .spyOn(inventory, 'applyReleaseMove')
       .mockRejectedValue(new Error('SIMULATED_RELEASE_FAIL'));
 
     try {
-      // 1) Seed product + price
       await db.insert(products).values({
         id: productId,
         slug,
         title: 'Test product',
         description: 'Test description',
         imageUrl: 'https://example.com/test.png',
-        imagePublicId: 'test-public-id', // додай одразу, щоб не впертись у NOT NULL, якщо він є
+        imagePublicId: 'test-public-id',
         sku,
 
-        // IMPORTANT: products.price is NOT NULL (legacy)
         currency: 'USD',
-        price: toDbMoney(1000), // 10.00
+        price: toDbMoney(1000),
         originalPrice: null,
 
         stock: 1,
@@ -59,14 +54,13 @@ describe('P0 Inventory release invariants', () => {
       await db.insert(productPrices).values({
         productId,
         currency: 'USD',
-        // canonical minor (int)
+
         priceMinor: 1000,
-        // legacy fallback (numeric)
+
         price: 10,
         originalPrice: null,
       } as any);
 
-      // 2) Seed order + order item (minimal required fields)
       await db.insert(orders).values({
         id: orderId,
         totalAmountMinor: 1000,
@@ -75,10 +69,10 @@ describe('P0 Inventory release invariants', () => {
 
         paymentProvider: 'stripe',
         paymentIntentId: null,
-        paymentStatus: 'failed', // we are testing restock on "failed" path
+        paymentStatus: 'failed',
 
         status: 'INVENTORY_FAILED',
-        inventoryStatus: 'reserving', // will reserve first, then switch to release_pending
+        inventoryStatus: 'reserving',
         failureCode: 'INTERNAL_ERROR',
         failureMessage: 'fail before release',
 
@@ -111,8 +105,6 @@ describe('P0 Inventory release invariants', () => {
         productSku: sku,
       } as any);
 
-      // 3) Create an ACTUAL reservation move (so “release” is реально потрібен)
-      //    This should decrement product stock from 1 -> 0.
       const reserveRes = await inventory.applyReserveMove(
         orderId,
         productId,
@@ -128,7 +120,6 @@ describe('P0 Inventory release invariants', () => {
 
       expect(pAfterReserve?.stock).toBe(0);
 
-      // 4) Put order into release_pending so restockOrder will attempt release
       await db
         .update(orders)
         .set({
@@ -138,17 +129,30 @@ describe('P0 Inventory release invariants', () => {
         } as any)
         .where(eq(orders.id, orderId));
 
-      // 5) Call restockOrder — release fails; function may throw OR no-op, but must NOT finalize release fields
+      let restockErr: unknown;
+
       try {
         await restockOrder(orderId, {
           reason: 'failed',
           workerId: 'test',
         } as any);
-      } catch {
-        // acceptable: some implementations throw for manual/admin path
+      } catch (err) {
+        restockErr = err;
+      }
+
+      if (restockErr) {
+        // Accept ONLY the simulated release failure; rethrow anything else.
+        if (
+          restockErr instanceof Error &&
+          restockErr.message.includes('SIMULATED_RELEASE_FAIL')
+        ) {
+          expect(restockErr).toBeInstanceOf(Error);
+          expect(restockErr.message).toContain('SIMULATED_RELEASE_FAIL');
+        } else {
+          throw restockErr;
+        }
       }
 
-      // 6) Assert invariants: order NOT finalized to released/stockRestored/restockedAt
       const [o] = await db
         .select({
           inventoryStatus: orders.inventoryStatus,
@@ -161,12 +165,10 @@ describe('P0 Inventory release invariants', () => {
 
       expect(o).toBeTruthy();
 
-      // Key invariants:
       expect(o!.inventoryStatus).not.toBe('released');
       expect(o!.stockRestored).toBe(false);
       expect(o!.restockedAt).toBeNull();
 
-      // 7) Assert product stock DID NOT increment (release not confirmed)
       const [pAfterFail] = await db
         .select({ stock: products.stock })
         .from(products)
@@ -177,9 +179,7 @@ describe('P0 Inventory release invariants', () => {
     } finally {
       releaseSpy.mockRestore();
 
-      // cleanup (best-effort)
       try {
-        // delete ledger rows for this order if table exists in your schema
         if (inventoryMoves) {
           await db
             .delete(inventoryMoves as any)
diff --git a/frontend/lib/tests/restock-stale-claim-gate.test.ts b/frontend/lib/tests/shop/restock-stale-claim-gate.test.ts
similarity index 89%
rename from frontend/lib/tests/restock-stale-claim-gate.test.ts
rename to frontend/lib/tests/shop/restock-stale-claim-gate.test.ts
index 5efa9ece..389c4b86 100644
--- a/frontend/lib/tests/restock-stale-claim-gate.test.ts
+++ b/frontend/lib/tests/shop/restock-stale-claim-gate.test.ts
@@ -14,7 +14,7 @@ describe('restockStalePendingOrders claim gate', () => {
     const createdAt = new Date(Date.now() - 2 * 60 * 60 * 1000);
 
     const claimNow = new Date();
-    const activeExpires = new Date(Date.now() + 5 * 60 * 1000); // not expired
+    const activeExpires = new Date(Date.now() + 5 * 60 * 1000);
 
     try {
       await db.insert(orders).values({
@@ -40,7 +40,6 @@ describe('restockStalePendingOrders claim gate', () => {
         restockedAt: null,
         idempotencyKey: idem,
 
-        // claim fields:
         sweepClaimedAt: claimNow,
         sweepClaimExpiresAt: activeExpires,
         sweepRunId: crypto.randomUUID(),
@@ -93,7 +92,7 @@ describe('restockStalePendingOrders claim gate', () => {
     const createdAt = new Date(Date.now() - 2 * 60 * 60 * 1000);
 
     const claimNow = new Date(Date.now() - 10 * 60 * 1000);
-    const expiredAt = new Date(Date.now() - 5 * 60 * 1000); // expired
+    const expiredAt = new Date(Date.now() - 5 * 60 * 1000);
 
     try {
       await db.insert(orders).values({
@@ -119,7 +118,6 @@ describe('restockStalePendingOrders claim gate', () => {
         restockedAt: null,
         idempotencyKey: idem,
 
-        // expired claim fields:
         sweepClaimedAt: claimNow,
         sweepClaimExpiresAt: expiredAt,
         sweepRunId: crypto.randomUUID(),
@@ -138,6 +136,19 @@ describe('restockStalePendingOrders claim gate', () => {
       });
 
       expect(processed).toBe(1);
+
+      const [row] = await db
+        .select({
+          stockRestored: orders.stockRestored,
+          restockedAt: orders.restockedAt,
+        })
+        .from(orders)
+        .where(eq(orders.id, orderId))
+        .limit(1);
+
+      expect(row).toBeTruthy();
+      expect(row!.stockRestored).toBe(true);
+      expect(row!.restockedAt).not.toBeNull();
     } finally {
       try {
         await db.delete(orders).where(eq(orders.id, orderId));
diff --git a/frontend/lib/tests/restock-stale-stripe-orphan.test.ts b/frontend/lib/tests/shop/restock-stale-stripe-orphan.test.ts
similarity index 95%
rename from frontend/lib/tests/restock-stale-stripe-orphan.test.ts
rename to frontend/lib/tests/shop/restock-stale-stripe-orphan.test.ts
index ea06b49a..36d3426c 100644
--- a/frontend/lib/tests/restock-stale-stripe-orphan.test.ts
+++ b/frontend/lib/tests/shop/restock-stale-stripe-orphan.test.ts
@@ -12,7 +12,6 @@ describe('P0-3.x Restock stale pending orders: stripe orphan cleanup', () => {
     const orderId = crypto.randomUUID();
     const idem = `test-stale-orphan-stripe-${crypto.randomUUID()}`;
 
-    // Make it old enough to be considered stale.
     const createdAt = new Date(Date.now() - 2 * 60 * 60 * 1000); // 2h ago
     const totalAmountMinor = 1234;
 
@@ -44,11 +43,10 @@ describe('P0-3.x Restock stale pending orders: stripe orphan cleanup', () => {
         updatedAt: createdAt,
       });
 
-      // Run sweep
       const processed = await restockStalePendingOrders({
         olderThanMinutes: 60,
         batchSize: 50,
-        orderIds: [orderId], // <-- add
+        orderIds: [orderId],
       });
 
       expect(processed).toBeGreaterThan(0);
@@ -78,7 +76,6 @@ describe('P0-3.x Restock stale pending orders: stripe orphan cleanup', () => {
       expect(row!.stockRestored).toBe(true);
       expect(row!.restockedAt).not.toBeNull();
     } finally {
-      // cleanup
       try {
         await db.delete(orders).where(eq(orders.id, orderId));
       } catch (error) {
diff --git a/frontend/lib/tests/restock-stuck-reserving-sweep.test.ts b/frontend/lib/tests/shop/restock-stuck-reserving-sweep.test.ts
similarity index 92%
rename from frontend/lib/tests/restock-stuck-reserving-sweep.test.ts
rename to frontend/lib/tests/shop/restock-stuck-reserving-sweep.test.ts
index 4a4454de..5c368fc9 100644
--- a/frontend/lib/tests/restock-stuck-reserving-sweep.test.ts
+++ b/frontend/lib/tests/shop/restock-stuck-reserving-sweep.test.ts
@@ -8,6 +8,8 @@ import { toDbMoney } from '@/lib/shop/money';
 import { applyReserveMove } from '@/lib/services/inventory';
 import { restockStuckReservingOrders } from '@/lib/services/orders';
 
+const TWO_HOURS_MS = 2 * 60 * 60 * 1000;
+
 function readRows(res: any): any[] {
   if (Array.isArray(res)) return res;
   if (Array.isArray(res?.rows)) return res.rows;
@@ -25,7 +27,6 @@ async function countMoveKey(moveKey: string): Promise<number> {
 async function cleanupTestRows(params: { orderId: string; productId: string }) {
   const { orderId, productId } = params;
 
-  // IMPORTANT: delete children first to avoid FK failures and silent leftovers.
   await db.execute(
     sql`delete from inventory_moves where order_id = ${orderId}::uuid`
   );
@@ -46,12 +47,12 @@ describe('P0-7 stuckReserving sweep: restock exactly-once', () => {
 
     const initialStock = 5;
     const qty = 2;
-    const createdAt = new Date(Date.now() - 2 * 60 * 60 * 1000); // old enough
+    const createdAt = new Date(Date.now() - TWO_HOURS_MS);
     const idem = `test-stuck-${crypto.randomUUID()}`;
     let originalError: unknown = null;
 
     try {
-      await db.insert(products).values({
+      const productInsert = {
         id: productId,
         title: 'Test Product',
         slug,
@@ -64,9 +65,11 @@ describe('P0-7 stuckReserving sweep: restock exactly-once', () => {
         currency: 'USD',
         createdAt,
         updatedAt: createdAt,
-      } as any);
+      } satisfies typeof products.$inferInsert;
+
+      await db.insert(products).values(productInsert);
 
-      await db.insert(orders).values({
+      const orderInsert = {
         id: orderId,
         userId: null,
 
@@ -91,7 +94,9 @@ describe('P0-7 stuckReserving sweep: restock exactly-once', () => {
 
         createdAt,
         updatedAt: createdAt,
-      } as any);
+      } satisfies typeof orders.$inferInsert;
+
+      await db.insert(orders).values(orderInsert);
 
       const r = await applyReserveMove(orderId, productId, qty);
       expect(r.ok).toBe(true);
@@ -172,14 +177,12 @@ describe('P0-7 stuckReserving sweep: restock exactly-once', () => {
         await cleanupTestRows({ orderId, productId });
       } catch (cleanupError) {
         if (originalError) {
-          // cleanup failed, but do NOT hide the real test failure
           console.error('[test cleanup failed]', {
             orderId,
             productId,
             error: cleanupError,
           });
         } else {
-          // no original failure -> cleanup error is the failure
           originalError = cleanupError;
         }
       }
diff --git a/frontend/lib/tests/restock-sweep-claim.test.ts b/frontend/lib/tests/shop/restock-sweep-claim.test.ts
similarity index 100%
rename from frontend/lib/tests/restock-sweep-claim.test.ts
rename to frontend/lib/tests/shop/restock-sweep-claim.test.ts
diff --git a/frontend/lib/tests/stripe-webhook-contract.test.ts b/frontend/lib/tests/shop/stripe-webhook-contract.test.ts
similarity index 85%
rename from frontend/lib/tests/stripe-webhook-contract.test.ts
rename to frontend/lib/tests/shop/stripe-webhook-contract.test.ts
index 4071b0c5..2be8c55e 100644
--- a/frontend/lib/tests/stripe-webhook-contract.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-contract.test.ts
@@ -1,9 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { NextRequest } from 'next/server';
-/**
- * Silence expected stderr noise for this contract test file only.
- * We keep assertions intact; we only suppress logging side effects.
- */
+
 vi.mock('@/lib/logging', async () => {
   const actual = await vi.importActual<any>('@/lib/logging');
   return {
@@ -33,7 +30,6 @@ describe('P0-3.3 Stripe webhook contract: disabled vs invalid signature', () =>
     vi.clearAllMocks();
     process.env = { ...ORIG_ENV };
 
-    // stderr (console.error) spam is expected in these negative scenarios
     consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
   });
 
@@ -48,7 +44,7 @@ describe('P0-3.3 Stripe webhook contract: disabled vs invalid signature', () =>
 
     process.env.PAYMENTS_ENABLED = 'true';
     process.env.STRIPE_SECRET_KEY = 'sk_test_dummy';
-    process.env.STRIPE_WEBHOOK_SECRET = ''; // ключове: після імпорту і саме порожній рядок
+    process.env.STRIPE_WEBHOOK_SECRET = '';
 
     const res = await POST(
       makeReq('{"id":"evt_test"}', { 'stripe-signature': 't=0,v1=deadbeef' })
diff --git a/frontend/lib/tests/stripe-webhook-mismatch.test.ts b/frontend/lib/tests/shop/stripe-webhook-mismatch.test.ts
similarity index 83%
rename from frontend/lib/tests/stripe-webhook-mismatch.test.ts
rename to frontend/lib/tests/shop/stripe-webhook-mismatch.test.ts
index 167184dc..6e76b483 100644
--- a/frontend/lib/tests/stripe-webhook-mismatch.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-mismatch.test.ts
@@ -55,9 +55,6 @@ describe('P0-3.4 Stripe webhook: amount/currency mismatch (minor) must not set p
   });
 
   it('mismatch: does NOT set paid and stores pspStatusReason + pspMetadata(expected/actual + event id)', async () => {
-    /**
-     * 1) Create an order with payments disabled (so no Stripe network calls).
-     */
     process.env.PAYMENTS_ENABLED = 'false';
 
     vi.doMock('@/lib/auth', async () => {
@@ -69,14 +66,12 @@ describe('P0-3.4 Stripe webhook: amount/currency mismatch (minor) must not set p
       };
     });
 
-    // IMPORTANT: mock stripe module BEFORE importing ANY route modules
-    // so webhook route doesn't cache the real module.
     vi.doMock('@/lib/psp/stripe', async () => {
       const actual = await vi.importActual<any>('@/lib/psp/stripe');
       return {
         __esModule: true,
         ...actual,
-        // IMPORTANT: route.ts calls this SYNC (no await). So mock MUST be sync.
+
         verifyWebhookSignature: vi.fn((params: any) => {
           const rawBody = params?.rawBody;
           if (typeof rawBody !== 'string' || !rawBody.trim()) {
@@ -86,9 +81,8 @@ describe('P0-3.4 Stripe webhook: amount/currency mismatch (minor) must not set p
         }),
       };
     });
-    const { POST: checkoutPOST } = await import(
-      '@/app/api/shop/checkout/route'
-    );
+    const { POST: checkoutPOST } =
+      await import('@/app/api/shop/checkout/route');
 
     const productId = await pickActiveProductIdForCurrency('UAH');
     const idemKey =
@@ -119,9 +113,6 @@ describe('P0-3.4 Stripe webhook: amount/currency mismatch (minor) must not set p
       /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
     );
 
-    /**
-     * 2) Read expected total_amount_minor + currency from DB.
-     */
     const row0 = (await db.execute(sql`
       select total_amount_minor, currency
       from orders
@@ -136,9 +127,6 @@ describe('P0-3.4 Stripe webhook: amount/currency mismatch (minor) must not set p
     expect(expectedMinor).toBeGreaterThan(0);
     expect(expectedCurrency).toBe('UAH');
 
-    /**
-     * 3) Turn this order into a "Stripe" order in DB (no real Stripe PI needed).
-     */
     const piId = `pi_test_mismatch_${orderId.slice(0, 8)}`;
     await db.execute(sql`
       update orders
@@ -148,10 +136,6 @@ describe('P0-3.4 Stripe webhook: amount/currency mismatch (minor) must not set p
       where id = ${orderId}
     `);
 
-    /**
-     * 4) Prepare mocked Stripe event with mismatched amount (expectedMinor + 1).
-     *    We mock verifyWebhookSignature so we don't need real Stripe signature.
-     */
     process.env.PAYMENTS_ENABLED = 'true';
     process.env.STRIPE_SECRET_KEY = 'stripe_secret_key_placeholder';
     process.env.STRIPE_WEBHOOK_SECRET = 'stripe_webhook_secret_placeholder';
@@ -175,9 +159,8 @@ describe('P0-3.4 Stripe webhook: amount/currency mismatch (minor) must not set p
       },
     };
 
-    const { POST: webhookPOST } = await import(
-      '@/app/api/shop/webhooks/stripe/route'
-    );
+    const { POST: webhookPOST } =
+      await import('@/app/api/shop/webhooks/stripe/route');
 
     const webhookRes = await webhookPOST(
       makeReq(
@@ -189,12 +172,8 @@ describe('P0-3.4 Stripe webhook: amount/currency mismatch (minor) must not set p
       )
     );
 
-    // webhook handler should accept the event and record mismatch (usually 200)
     expect([200, 202]).toContain(webhookRes.status);
 
-    /**
-     * 5) Assert DB: not paid + pspStatusReason set + pspMetadata contains expected/actual + event id.
-     */
     const row1 = (await db.execute(sql`
       select payment_status, psp_status_reason, psp_metadata
       from orders
@@ -214,7 +193,7 @@ describe('P0-3.4 Stripe webhook: amount/currency mismatch (minor) must not set p
     expect(reason && reason.length > 0).toBe(true);
 
     const metaObj =
-      typeof metaRaw === 'string' ? JSON.parse(metaRaw) : metaRaw ?? {};
+      typeof metaRaw === 'string' ? JSON.parse(metaRaw) : (metaRaw ?? {});
 
     expect(metaObj?.mismatch?.eventId).toBe(evtId);
     expect(metaObj?.mismatch?.expected?.amountMinor).toBe(expectedMinor);
diff --git a/frontend/lib/tests/stripe-webhook-paid-status-repair.test.ts b/frontend/lib/tests/shop/stripe-webhook-paid-status-repair.test.ts
similarity index 91%
rename from frontend/lib/tests/stripe-webhook-paid-status-repair.test.ts
rename to frontend/lib/tests/shop/stripe-webhook-paid-status-repair.test.ts
index 6ed80c87..188a6704 100644
--- a/frontend/lib/tests/stripe-webhook-paid-status-repair.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-paid-status-repair.test.ts
@@ -15,9 +15,9 @@ async function seedOrder(params: { orderId: string; pi: string }) {
     totalAmount: toDbMoney(2500),
     currency: 'USD',
     paymentProvider: 'stripe',
-    paymentStatus: 'paid', // mismatch: already "paid"
+    paymentStatus: 'paid',
     paymentIntentId: params.pi,
-    status: 'INVENTORY_RESERVED', // mismatch: not "PAID"
+    status: 'INVENTORY_RESERVED',
     inventoryStatus: 'reserved',
     stockRestored: false,
     restockedAt: null,
@@ -31,7 +31,6 @@ async function callWebhook(params: {
   pi: string;
   orderId: string;
 }) {
-  // Keep this pattern: reset module cache so route picks up env + mocks.
   vi.resetModules();
 
   vi.doMock('@/lib/psp/stripe', async () => {
@@ -55,7 +54,6 @@ async function callWebhook(params: {
     };
   });
 
-  // Task #5: avoid process.env mutation; use stubEnv + restore in afterEach.
   vi.stubEnv('STRIPE_SECRET_KEY', 'sk_test_dummy');
   vi.stubEnv('STRIPE_WEBHOOK_SECRET', 'whsec_test_dummy');
 
@@ -68,7 +66,7 @@ async function callWebhook(params: {
       'content-type': 'application/json',
     },
     body: JSON.stringify({ id: params.eventId }),
-    // Node-fetch/undici інколи вимагає duplex при body; безпечно лишити як any.
+
     duplex: 'half',
   } as any);
 
@@ -121,7 +119,6 @@ describe('stripe webhook: repair paid status mismatch', () => {
   let lastEventId: string | null = null;
 
   afterEach(async () => {
-    // restore env stubs to avoid cross-test coupling
     vi.unstubAllEnvs();
 
     if (lastOrderId || lastEventId) {
diff --git a/frontend/lib/tests/stripe-webhook-psp-fields.test.ts b/frontend/lib/tests/shop/stripe-webhook-psp-fields.test.ts
similarity index 91%
rename from frontend/lib/tests/stripe-webhook-psp-fields.test.ts
rename to frontend/lib/tests/shop/stripe-webhook-psp-fields.test.ts
index bb9c41fd..f5f61ab7 100644
--- a/frontend/lib/tests/stripe-webhook-psp-fields.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-psp-fields.test.ts
@@ -1,4 +1,3 @@
-// lib/tests/stripe-webhook-psp-fields.test.ts
 import { describe, it, expect, vi } from 'vitest';
 import { NextRequest } from 'next/server';
 import { eq } from 'drizzle-orm';
@@ -14,9 +13,8 @@ import {
 } from '@/db/schema';
 
 vi.mock('@/lib/psp/stripe', async () => {
-  const actual = await vi.importActual<Record<string, unknown>>(
-    '@/lib/psp/stripe'
-  );
+  const actual =
+    await vi.importActual<Record<string, unknown>>('@/lib/psp/stripe');
   return {
     ...actual,
     verifyWebhookSignature: vi.fn(),
@@ -39,7 +37,6 @@ function makeWebhookRequest(rawBody: string) {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
-      // route calls verifyWebhookSignature(rawBody, signatureHeader)
       'Stripe-Signature': 't=1,v1=test',
     },
     body: rawBody,
@@ -53,7 +50,6 @@ async function cleanup(params: {
 }) {
   const { orderId, productId, eventId } = params;
 
-  // teardown must not mask assertion failures, but must surface cleanup problems
   try {
     await db.delete(stripeEvents).where(eq(stripeEvents.eventId, eventId));
   } catch (e) {
@@ -125,7 +121,6 @@ describe('P0-6 webhook: writes PSP fields on succeeded', () => {
     const slug = `webhook-psp-${productId.slice(0, 8)}`;
     const sku = `SKU-${productId.slice(0, 8)}`;
 
-    // Seed product + price (needed because order_items FK -> products)
     await db.insert(products).values({
       id: productId,
       slug,
@@ -157,7 +152,6 @@ describe('P0-6 webhook: writes PSP fields on succeeded', () => {
       originalPrice: null,
     });
 
-    // Seed order in the pre-payment state that webhook expects
     await db.insert(orders).values({
       id: orderId,
       totalAmountMinor: 900,
@@ -166,7 +160,7 @@ describe('P0-6 webhook: writes PSP fields on succeeded', () => {
       paymentStatus: 'requires_payment',
       paymentProvider: 'stripe',
       paymentIntentId,
-      // keep defaults for PSP fields; metadata default is {}
+
       idempotencyKey: idemKey,
       status: 'INVENTORY_RESERVED',
       inventoryStatus: 'reserved',
@@ -253,10 +247,8 @@ describe('P0-6 webhook: writes PSP fields on succeeded', () => {
       expect(updated1.length).toBe(1);
       expect(updated1[0].paymentIntentId).toBe(paymentIntentId);
 
-      // Must be marked paid (or at minimum be terminal + PSP fields set; but your flow expects paid)
       expect(updated1[0].paymentStatus).toBe('paid');
 
-      // PSP fields must be written
       expect(updated1[0].pspChargeId).toBe(chargeId);
       expect(typeof updated1[0].pspPaymentMethod).toBe('string');
       expect((updated1[0].pspPaymentMethod ?? '').length).toBeGreaterThan(0);
@@ -266,14 +258,12 @@ describe('P0-6 webhook: writes PSP fields on succeeded', () => {
         'succeeded'
       );
 
-      // pspMetadata must not stay "{}"
       expect(updated1[0].pspMetadata).toBeTruthy();
       expect(
         Object.keys((updated1[0].pspMetadata ?? {}) as Record<string, unknown>)
           .length
       ).toBeGreaterThan(0);
 
-      // stripe_events must record the eventId once
       const ev1 = await db
         .select({ eventId: stripeEvents.eventId })
         .from(stripeEvents)
@@ -281,7 +271,6 @@ describe('P0-6 webhook: writes PSP fields on succeeded', () => {
 
       expect(ev1.length).toBe(1);
 
-      // Duplicate delivery must not break (idempotency / dedupe)
       const req2 = makeWebhookRequest(rawBody);
       const res2 = await webhookPOST(req2);
       expect(res2.status).toBeGreaterThanOrEqual(200);
diff --git a/frontend/lib/tests/stripe-webhook-rate-limit-env.test.ts b/frontend/lib/tests/shop/stripe-webhook-rate-limit-env.test.ts
similarity index 97%
rename from frontend/lib/tests/stripe-webhook-rate-limit-env.test.ts
rename to frontend/lib/tests/shop/stripe-webhook-rate-limit-env.test.ts
index fa14b0b4..0c8251fa 100644
--- a/frontend/lib/tests/stripe-webhook-rate-limit-env.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-rate-limit-env.test.ts
@@ -65,7 +65,7 @@ describe('stripe webhook rate limit env precedence', () => {
 
   it('supports partial config (field-by-field): missing_sig MAX can override while WINDOW falls back', () => {
     vi.stubEnv('STRIPE_WEBHOOK_MISSING_SIG_RL_MAX', '66');
-    vi.stubEnv('STRIPE_WEBHOOK_RL_WINDOW_SECONDS', '555'); // fallback source for window
+    vi.stubEnv('STRIPE_WEBHOOK_RL_WINDOW_SECONDS', '555');
 
     expect(resolveStripeWebhookRateLimit('missing_sig')).toEqual({
       max: 66,
diff --git a/frontend/lib/tests/stripe-webhook-refund-full.test.ts b/frontend/lib/tests/shop/stripe-webhook-refund-full.test.ts
similarity index 89%
rename from frontend/lib/tests/stripe-webhook-refund-full.test.ts
rename to frontend/lib/tests/shop/stripe-webhook-refund-full.test.ts
index 8b81bc82..48fa6789 100644
--- a/frontend/lib/tests/stripe-webhook-refund-full.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-refund-full.test.ts
@@ -1,5 +1,3 @@
-// frontend/lib/tests/stripe-webhook-refund-full.test.ts
-
 import crypto from 'node:crypto';
 import { eq } from 'drizzle-orm';
 import { NextRequest } from 'next/server';
@@ -7,9 +5,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type Stripe from 'stripe';
 
 vi.mock('@/lib/psp/stripe', async () => {
-  const actual = await vi.importActual<typeof import('@/lib/psp/stripe')>(
-    '@/lib/psp/stripe'
-  );
+  const actual =
+    await vi.importActual<typeof import('@/lib/psp/stripe')>(
+      '@/lib/psp/stripe'
+    );
 
   return {
     ...actual,
@@ -123,8 +122,6 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
   beforeEach(async () => {
     vi.clearAllMocks();
 
-    // restockOrder mocked: we don't retest inventory ledger here (it is covered by restock tests),
-    // we only assert webhook triggers it exactly-once and marks order as restocked.
     restockOrderMock.mockImplementation(async (orderId: string) => {
       await db
         .update(orders)
@@ -182,7 +179,7 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
       .limit(1);
 
     expect(row1.paymentStatus).toBe('refunded');
-    expect(row1.status).toBe('CANCELED'); // terminal status per current enum
+    expect(row1.status).toBe('CANCELED');
     expect(row1.stockRestored).toBe(true);
 
     expect(restockOrderMock).toHaveBeenCalledTimes(1);
@@ -190,7 +187,6 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
       reason: 'refunded',
     });
 
-    // 2nd call with SAME event.id -> dedupe => no side effects
     const res2 = await POST(makeRequest());
     expect(res2.status).toBe(200);
 
@@ -217,12 +213,11 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
       amount: 2500,
       status: 'succeeded',
       reason: null,
-      charge: chargeId, // IMPORTANT: real Stripe shape is usually string id
+      charge: chargeId,
       payment_intent: inserted.paymentIntentId,
       metadata: {},
     };
 
-    // Webhook code should retrieve the charge by id to get cumulative refunded, etc.
     retrieveChargeMock.mockResolvedValue(
       makeCharge({
         chargeId,
@@ -256,7 +251,7 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
     expect(row.paymentStatus).toBe('refunded');
     expect(row.status).toBe('CANCELED');
     expect(row.stockRestored).toBe(true);
-    expect(row.pspChargeId).toBe(chargeId); // requires PATCH 1 in webhook
+    expect(row.pspChargeId).toBe(chargeId);
 
     expect(retrieveChargeMock).toHaveBeenCalledTimes(1);
     expect(retrieveChargeMock).toHaveBeenCalledWith(chargeId);
@@ -279,7 +274,7 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
       chargeId,
       paymentIntentId: inserted.paymentIntentId,
       amount: 2500,
-      amountRefunded: 1000, // partial
+      amountRefunded: 1000,
       refunds: [{ id: refundId, amount: 1000 }],
     });
 
@@ -330,7 +325,6 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
       data: { object: charge },
     } as unknown as Stripe.Event);
 
-    // first call: restock throws => webhook returns 500
     restockOrderMock
       .mockImplementationOnce(async () => {
         throw new Error('RESTOCK_FAILED');
@@ -350,7 +344,6 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
     const res1 = await POST(makeRequest());
     expect(res1.status).toBe(500);
 
-    // same eventId retry: MUST reprocess (processedAt is still NULL) and restock succeeds
     const res2 = await POST(makeRequest());
     expect(res2.status).toBe(200);
 
@@ -387,19 +380,17 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
     const refund2Id = `re_${crypto.randomUUID()}`;
     const refund3Id = `re_${crypto.randomUUID()}`;
 
-    // current event refund is only 500 (not full by itself)
     const refund = {
       id: refund3Id,
       object: 'refund',
       amount: 500,
       status: 'succeeded',
       reason: null,
-      charge: chargeId, // IMPORTANT: real Stripe shape is usually string id
+      charge: chargeId,
       payment_intent: inserted.paymentIntentId,
       metadata: {},
     };
 
-    // Charge says cumulative refunded is FULL (2500), but refund.amount is only 500.
     retrieveChargeMock.mockResolvedValue(
       makeCharge({
         chargeId,
@@ -454,14 +445,13 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
       chargeId,
       paymentIntentId: inserted.paymentIntentId,
       amount: 2500,
-      amountRefunded: 2500, // will be deleted to force fallback
+      amountRefunded: 2500,
       refunds: [
         { id: refund1Id, amount: 1000 },
         { id: refund2Id, amount: 1500 },
       ],
     });
 
-    // force edge-case: Stripe object without amount_refunded
     delete (charge as any).amount_refunded;
 
     verifyWebhookSignatureMock.mockReturnValue({
@@ -502,14 +492,12 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
       chargeId,
       paymentIntentId: inserted.paymentIntentId,
       amount: 2500,
-      amountRefunded: 0, // will be deleted to force "missing"
-      refunds: [], // empty list => refund object unavailable (refund == null)
+      amountRefunded: 0,
+      refunds: [],
     });
 
-    // Edge-case: Stripe object WITHOUT amount_refunded
     delete (charge as any).amount_refunded;
 
-    // Ensure refunds list is present but empty (covers "refunds.data = []")
     (charge as any).refunds = { object: 'list', data: [] };
 
     verifyWebhookSignatureMock.mockReturnValue({
@@ -523,11 +511,9 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
     const res = await POST(makeRequest());
     expect(res.status).toBe(500);
 
-    // If you kept the explicit diagnostic mapping:
     const body = await res.json();
     expect(body).toEqual({ code: 'REFUND_FULLNESS_UNDETERMINED' });
 
-    // stripe_events.processed_at must remain NULL (no ack -> Stripe retries)
     const [evt] = await db
       .select({
         processedAt: stripeEvents.processedAt,
@@ -542,7 +528,6 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
     expect(evt.processedAt).toBeNull();
     expect(evt.paymentIntentId).toBe(inserted.paymentIntentId);
 
-    // Order must NOT change (safe no-op)
     const [row] = await db
       .select({
         paymentStatus: orders.paymentStatus,
@@ -561,7 +546,6 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
 
     expect(restockOrderMock).toHaveBeenCalledTimes(0);
 
-    // Optional: assert warning fired (locks observability behavior)
     expect(warnSpy).toHaveBeenCalled();
 
     const firstArg = warnSpy.mock.calls[0]?.[0];
@@ -577,7 +561,6 @@ describe('stripe webhook refund (full only): PI fallback + terminal status + ded
     expect(parsed.level).toBe('warn');
     expect(parsed.msg).toBe('stripe_webhook_refund_fullness_undetermined');
 
-    // (опційно, але корисно: зафіксувати reason)
     expect(parsed.meta?.reason).toBe(
       'missing_amount_refunded_and_empty_refunds_list'
     );
diff --git a/frontend/lib/types/shop.ts b/frontend/lib/types/shop.ts
index 25b3773c..5f387c18 100644
--- a/frontend/lib/types/shop.ts
+++ b/frontend/lib/types/shop.ts
@@ -30,14 +30,12 @@ export type OrderSummary = z.infer<typeof orderSummarySchema> & {
 export type OrderDetail = OrderSummary;
 
 export type OrderSummaryWithMinor = OrderSummary & {
-  // canonical money model (minor units)
   totalAmountMinor: number;
 };
 
 export type CheckoutResult = {
   order: OrderSummaryWithMinor;
   isNew: boolean;
-  // legacy name (keep for back-compat in client/tests)
   totalCents: number;
 };
 
diff --git a/frontend/lib/validation/shop.ts b/frontend/lib/validation/shop.ts
index 9ba5c181..9fd07e20 100644
--- a/frontend/lib/validation/shop.ts
+++ b/frontend/lib/validation/shop.ts
@@ -99,8 +99,6 @@ export const dbProductSchema = z.object({
     .string()
     .nullish()
     .transform(value => value ?? undefined),
-  // NOTE: DB shape is still "price/originalPrice" here (whatever your query returns).
-  // You convert to minor in the mapper (fromDbMoney), so we keep these permissive.
   price: z.coerce.number(),
   originalPrice: z.coerce
     .number()
@@ -137,7 +135,6 @@ export const dbProductSchema = z.object({
   updatedAt: z.coerce.date(),
 });
 
-// IMPORTANT: shopProduct.price/originalPrice are MINOR units (integers).
 export const shopProductSchema = z.object({
   id: z.string(),
   slug: z.string(),
@@ -166,7 +163,6 @@ const booleanFromString = z.preprocess(value => {
   return undefined;
 }, z.boolean().optional());
 
-// Money in MINOR units (integers)
 const moneyMinor = z.number().int().min(0);
 const moneyMinorPositive = z.number().int().min(1);
 
@@ -177,7 +173,6 @@ export const adminPriceRowSchema = z
     originalPriceMinor: moneyMinor.optional().nullable(),
   })
   .superRefine((v, ctx) => {
-    // priceMinor already validated > 0
     if (v.originalPriceMinor != null) {
       if (!Number.isFinite(v.originalPriceMinor)) {
         ctx.addIssue({
@@ -239,10 +234,8 @@ export const productAdminSchema = z
     isFeatured: booleanFromString.default(false),
   })
   .superRefine((data, ctx) => {
-    // 1) no duplicate currencies
     refineNoDuplicateCurrencies(data.prices, ctx);
 
-    // 2) USD is required
     const usd = data.prices.find(p => p.currency === 'USD');
     if (!usd) {
       ctx.addIssue({
@@ -251,7 +244,7 @@ export const productAdminSchema = z
         message: 'USD price is required',
       });
     }
-    // 3) SALE badge requires compare-at/original price for every provided currency
+
     if (data.badge === 'SALE') {
       data.prices.forEach((p, idx) => {
         if (p.originalPriceMinor == null) {
@@ -358,10 +351,10 @@ export const cartRehydratedItemSchema = z.object({
   slug: z.string(),
   title: z.string(),
   quantity: z.number().int().min(1).max(MAX_QUANTITY_PER_LINE),
-  // canonical:
+
   unitPriceMinor: moneyMinorPositive,
   lineTotalMinor: moneyMinor,
-  // display/legacy:
+
   unitPrice: z.number().min(0),
   lineTotal: z.number().min(0),
 
@@ -381,9 +374,8 @@ export const cartRehydrateResultSchema = z.object({
   items: z.array(cartRehydratedItemSchema),
   removed: z.array(cartRemovedItemSchema),
   summary: z.object({
-    // canonical:
     totalAmountMinor: moneyMinor,
-    // display/legacy:
+
     totalAmount: z.number().min(0),
     itemCount: z.number().int().min(0),
     currency: currencySchema,
@@ -396,9 +388,9 @@ export const orderIdParamSchema = z.object({
 
 export const orderSummarySchema = z.object({
   id: z.string().uuid(),
-  // canonical:
+
   totalAmountMinor: moneyMinor,
-  // display/legacy:
+
   totalAmount: z.number().min(0),
   currency: currencySchema,
   paymentStatus: paymentStatusSchema,
@@ -414,10 +406,10 @@ export const orderSummarySchema = z.object({
       productTitle: z.string(),
       productSlug: z.string(),
       quantity: z.number().int().min(1),
-      // canonical:
+
       unitPriceMinor: moneyMinorPositive,
       lineTotalMinor: moneyMinor,
-      // display/legacy:
+
       unitPrice: z.number().min(0),
       lineTotal: z.number().min(0),
     })
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 03972cb6..d372edd7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1210,9 +1210,9 @@
       }
     },
     "node_modules/@exodus/bytes": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.10.0.tgz",
-      "integrity": "sha512-tf8YdcbirXdPnJ+Nd4UN1EXnz+IP2DI45YVEr3vvzcVTOyrApkmIB4zvOQVd3XPr7RXnfBtAx+PXImXOIU0Ajg==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.11.0.tgz",
+      "integrity": "sha512-wO3vd8nsEHdumsXrjGO/v4p6irbg7hy9kvIeR6i2AwylZSk4HJdWgL0FNaVquW1+AweJcdvU1IEpuIWk/WaPnA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -9660,8 +9660,9 @@
       "version": "0.5.18",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
       "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
-      "extraneous": true,
       "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "tslib": "^2.8.0"
       }

From 9ade51d2916cf622ccf6c26a2addad0bfda6804c Mon Sep 17 00:00:00 2001
From: Tetiana Zorii <131365289+TiZorii@users.noreply.github.com>
Date: Mon, 2 Feb 2026 15:13:57 -0500
Subject: [PATCH 17/24]   feat(i18n): add translations for blog categories, and
 UI components (#253)

- Translate blog category labels in mobile menu, cards, and filters
  - Add CTA hover variants translations
  - Add aria-label translations for theme toggle, cart, search, GitHub star
  - Update translation files for EN, UK, PL locales
---
 frontend/components/blog/BlogCard.tsx         | 21 ++++++++++++++++-
 frontend/components/blog/BlogFilters.tsx      |  2 +-
 frontend/components/blog/BlogHeaderSearch.tsx |  3 ++-
 frontend/components/header/AppMobileMenu.tsx  | 21 ++++++++++++++++-
 frontend/components/header/DesktopActions.tsx |  5 ++--
 .../components/home/InteractiveCTAButton.tsx  | 15 ++++++------
 frontend/components/quiz/QuizContainer.tsx    |  2 +-
 .../components/shared/GitHubStarButton.tsx    |  4 +++-
 .../components/shop/header/CartButton.tsx     |  5 +++-
 frontend/components/theme/ThemeToggle.tsx     | 12 ++++++----
 frontend/messages/en.json                     | 23 ++++++++++++++++---
 frontend/messages/pl.json                     | 23 ++++++++++++++++---
 frontend/messages/uk.json                     | 23 ++++++++++++++++---
 13 files changed, 129 insertions(+), 30 deletions(-)

diff --git a/frontend/components/blog/BlogCard.tsx b/frontend/components/blog/BlogCard.tsx
index 646f282e..b7e09afe 100644
--- a/frontend/components/blog/BlogCard.tsx
+++ b/frontend/components/blog/BlogCard.tsx
@@ -22,6 +22,24 @@ export default function BlogCard({
   disableHoverColor?: boolean;
 }) {
   const t = useTranslations('blog');
+
+  const getCategoryLabel = (categoryName: string): string => {
+    const key = categoryName.toLowerCase() as
+      | 'tech'
+      | 'career'
+      | 'insights'
+      | 'news'
+      | 'growth';
+    const categoryTranslations: Record<string, string> = {
+      tech: t('categories.tech'),
+      career: t('categories.career'),
+      insights: t('categories.insights'),
+      news: t('categories.news'),
+      growth: t('categories.growth'),
+    };
+    return categoryTranslations[key] || categoryName;
+  };
+
   const excerpt =
     (post.body ?? [])
       .filter((b): b is PortableTextBlock => b._type === 'block')
@@ -34,8 +52,9 @@ export default function BlogCard({
     () => formatBlogDate(post.publishedAt),
     [post.publishedAt]
   );
-  const categoryLabel =
+  const rawCategory =
     post.categories?.[0] === 'Growth' ? 'Career' : post.categories?.[0];
+  const categoryLabel = rawCategory ? getCategoryLabel(rawCategory) : undefined;
 
   return (
     <article
diff --git a/frontend/components/blog/BlogFilters.tsx b/frontend/components/blog/BlogFilters.tsx
index 9c44f154..2fc10216 100644
--- a/frontend/components/blog/BlogFilters.tsx
+++ b/frontend/components/blog/BlogFilters.tsx
@@ -502,7 +502,7 @@ export default function BlogFilters({
             <div className="relative flex flex-col h-full pt-8">
               {featuredPost.categories?.[0] && (
                 <div className="absolute top-0 left-0 text-xs font-bold uppercase tracking-[0.2em] text-[var(--accent-primary)]">
-                  {featuredPost.categories[0]}
+                  {getCategoryLabel(featuredPost.categories[0] === 'Growth' ? 'Career' : featuredPost.categories[0])}
                 </div>
               )}
               <div className="my-auto">
diff --git a/frontend/components/blog/BlogHeaderSearch.tsx b/frontend/components/blog/BlogHeaderSearch.tsx
index 42ac9d35..c934883f 100644
--- a/frontend/components/blog/BlogHeaderSearch.tsx
+++ b/frontend/components/blog/BlogHeaderSearch.tsx
@@ -42,6 +42,7 @@ function normalizeSearchText(value: string) {
 
 export function BlogHeaderSearch() {
   const t = useTranslations('blog');
+  const tAria = useTranslations('aria');
   const locale = useLocale();
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -158,7 +159,7 @@ export function BlogHeaderSearch() {
           })
         }
         className="flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-        aria-label="Search blog"
+        aria-label={tAria('searchBlog')}
       >
         <Search className="h-4 w-4" aria-hidden="true" />
       </button>
diff --git a/frontend/components/header/AppMobileMenu.tsx b/frontend/components/header/AppMobileMenu.tsx
index 45b91f45..78bf4d13 100644
--- a/frontend/components/header/AppMobileMenu.tsx
+++ b/frontend/components/header/AppMobileMenu.tsx
@@ -30,7 +30,25 @@ export function AppMobileMenu({
   const tMobileMenu = useTranslations('mobileMenu');
   const tCategories = useTranslations('shop.catalog.categories');
   const tProducts = useTranslations('shop.products');
+  const tBlog = useTranslations('blog');
   const pathname = usePathname();
+
+  const getBlogCategoryLabel = (categoryName: string): string => {
+    const key = categoryName.toLowerCase() as
+      | 'tech'
+      | 'career'
+      | 'insights'
+      | 'news'
+      | 'growth';
+    const categoryTranslations: Record<string, string> = {
+      tech: tBlog('categories.tech'),
+      career: tBlog('categories.career'),
+      insights: tBlog('categories.insights'),
+      news: tBlog('categories.news'),
+      growth: tBlog('categories.growth'),
+    };
+    return categoryTranslations[key] || categoryName;
+  };
   const searchParams = useSearchParams();
   const currentCategory = searchParams.get('category');
   const [open, setOpen] = useState(false);
@@ -176,6 +194,7 @@ export function AppMobileMenu({
                     const slug = slugify(category.title || '');
                     const href = `/blog/category/${slug}`;
                     const isActive = pathname === href;
+                    const displayTitle = category.title === 'Growth' ? 'Career' : category.title;
                     return (
                       <Link
                         key={category._id}
@@ -183,7 +202,7 @@ export function AppMobileMenu({
                         onClick={close}
                         className={linkClass(isActive)}
                       >
-                        {category.title}
+                        {getBlogCategoryLabel(displayTitle)}
                       </Link>
                     );
                   })}
diff --git a/frontend/components/header/DesktopActions.tsx b/frontend/components/header/DesktopActions.tsx
index 4b59b2e2..9bb3fbc0 100644
--- a/frontend/components/header/DesktopActions.tsx
+++ b/frontend/components/header/DesktopActions.tsx
@@ -22,6 +22,7 @@ export function DesktopActions({
   showAdminLink = false,
 }: DesktopActionsProps) {
   const t = useTranslations('navigation');
+  const tAria = useTranslations('aria');
   const isShop = variant === 'shop';
   const isBlog = variant === 'blog';
 
@@ -32,7 +33,7 @@ export function DesktopActions({
           variant="icon"
           href="/dashboard"
           icon={User}
-          label="Dashboard"
+          label={tAria('dashboard')}
         />
       )}
 
@@ -41,7 +42,7 @@ export function DesktopActions({
           variant="icon"
           href="/shop/admin"
           icon={Settings}
-          label="Shop admin"
+          label={tAria('shopAdmin')}
         />
       )}
 
diff --git a/frontend/components/home/InteractiveCTAButton.tsx b/frontend/components/home/InteractiveCTAButton.tsx
index d0426479..e072ef08 100644
--- a/frontend/components/home/InteractiveCTAButton.tsx
+++ b/frontend/components/home/InteractiveCTAButton.tsx
@@ -12,13 +12,15 @@ export function InteractiveCTAButton() {
   const [variantIndex, setVariantIndex] = React.useState(1);
   const [isHovered, setIsHovered] = React.useState(false);
 
-  // Тимчасово для тестування - цифри замість текстів
   const textVariants = [
-    `${t('cta')} 1`,
-    `${t('cta')} 2`,
-    `${t('cta')} 3`,
-    `${t('cta')} 4`,
-    `${t('cta')} 5`,
+    t('ctaVariants.1'),
+    t('ctaVariants.2'),
+    t('ctaVariants.3'),
+    t('ctaVariants.4'),
+    t('ctaVariants.5'),
+    t('ctaVariants.6'),
+    t('ctaVariants.7'),
+    t('ctaVariants.8'),
   ];
 
   const defaultVariant = t('cta');
@@ -35,7 +37,6 @@ export function InteractiveCTAButton() {
     setVariantIndex(prev => (prev + 1) % textVariants.length);
   };
 
-  // Орбітальні частинки
   const particles = Array.from({ length: 12 }, (_, i) => ({
     id: i,
     angle: (i * 360) / 8,
diff --git a/frontend/components/quiz/QuizContainer.tsx b/frontend/components/quiz/QuizContainer.tsx
index cdaa04ed..6b1a4003 100644
--- a/frontend/components/quiz/QuizContainer.tsx
+++ b/frontend/components/quiz/QuizContainer.tsx
@@ -501,7 +501,7 @@ export function QuizContainer({
               d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
             />
           </svg>
-          Exit Quiz
+          {tExit('exitButton')}
         </Button>
       </div>
       <QuizProgress
diff --git a/frontend/components/shared/GitHubStarButton.tsx b/frontend/components/shared/GitHubStarButton.tsx
index 04bd9393..d79a58aa 100644
--- a/frontend/components/shared/GitHubStarButton.tsx
+++ b/frontend/components/shared/GitHubStarButton.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Star } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useState, useEffect, useRef } from 'react';
 
 interface GitHubStarButtonProps {
@@ -8,6 +9,7 @@ interface GitHubStarButtonProps {
 }
 
 export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
+  const t = useTranslations('aria');
   const [displayCount, setDisplayCount] = useState(0);
   const [finalCount, setFinalCount] = useState<number | null>(null);
   const githubUrl = 'https://github.com/DevLoversTeam/devlovers.net';
@@ -74,7 +76,7 @@ export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
       href={githubUrl}
       target="_blank"
       rel="noopener noreferrer"
-      aria-label={`Star on GitHub - ${displayCount} stars`}
+      aria-label={t('starOnGithub', { count: displayCount })}
       className={`
         hidden lg:inline-flex
         group relative
diff --git a/frontend/components/shop/header/CartButton.tsx b/frontend/components/shop/header/CartButton.tsx
index 5077846e..fdb15f31 100644
--- a/frontend/components/shop/header/CartButton.tsx
+++ b/frontend/components/shop/header/CartButton.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { ShoppingBag } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 import { useMounted } from '@/hooks/use-mounted';
 import { HeaderButton } from '@/components/shared/HeaderButton';
@@ -10,18 +11,20 @@ import { useCart } from '../CartProvider';
 export function CartButton() {
   const { cart } = useCart();
   const mounted = useMounted();
+  const t = useTranslations('aria');
 
   const itemCount = mounted ? cart.summary.itemCount : 0;
   const showCount = itemCount > 0;
 
   const badgeText = itemCount > 99 ? '99+' : itemCount;
+  const label = showCount ? t('cartWithItems', { count: itemCount }) : t('cart');
 
   return (
     <HeaderButton
       href="/shop/cart"
       variant="icon"
       icon={ShoppingBag}
-      label={showCount ? `Cart, ${itemCount} items` : 'Cart'}
+      label={label}
       badge={showCount ? badgeText : undefined}
       badgeClassName="bg-[color:var(--accent-primary)] text-white"
     />
diff --git a/frontend/components/theme/ThemeToggle.tsx b/frontend/components/theme/ThemeToggle.tsx
index 515f96d4..770586b0 100644
--- a/frontend/components/theme/ThemeToggle.tsx
+++ b/frontend/components/theme/ThemeToggle.tsx
@@ -1,18 +1,20 @@
 'use client';
 
 import { useTheme } from 'next-themes';
+import { useTranslations } from 'next-intl';
 import { Monitor, Sun, Moon } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 
 const themes = [
-  { value: 'system', icon: Monitor, label: 'System theme' },
-  { value: 'light', icon: Sun, label: 'Light theme' },
-  { value: 'dark', icon: Moon, label: 'Dark theme' },
+  { value: 'system', icon: Monitor, labelKey: 'themeSystem' },
+  { value: 'light', icon: Sun, labelKey: 'themeLight' },
+  { value: 'dark', icon: Moon, labelKey: 'themeDark' },
 ] as const;
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
+  const t = useTranslations('aria');
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
@@ -36,11 +38,11 @@ export function ThemeToggle() {
 
   return (
     <div className="flex h-9 items-center gap-1 rounded-full bg-neutral-100 p-1 dark:border dark:border-neutral-800 dark:bg-neutral-950">
-      {themes.map(({ value, icon: Icon, label }) => (
+      {themes.map(({ value, icon: Icon, labelKey }) => (
         <button
           key={value}
           onClick={() => setTheme(value)}
-          aria-label={label}
+          aria-label={t(labelKey)}
           className="theme-toggle-btn relative flex h-7 w-7 items-center justify-center rounded-full"
         >
           {theme === value && (
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index d8eab905..d41c0664 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -17,7 +17,13 @@
     "searchBlog": "Search blog",
     "toggleMenu": "Toggle menu",
     "closeMenu": "Close menu",
-    "logout": "Log out"
+    "logout": "Log out",
+    "themeSystem": "System theme",
+    "themeLight": "Light theme",
+    "themeDark": "Dark theme",
+    "cart": "Cart",
+    "cartWithItems": "Cart, {count} items",
+    "starOnGithub": "Star on GitHub - {count} stars"
   },
   "mobileMenu": {
     "newProduct": "New product",
@@ -41,7 +47,17 @@
     "title": "DevLovers",
     "subtitle": "Platform for Technical Interview Preparation",
     "description": "Master frontend, backend, and full-stack development with our interview questions, quizzes, and learning materials.",
-    "cta": "Start Learning"
+    "cta": "Take the first step",
+    "ctaVariants": {
+      "1": "No pressure. Just start.",
+      "2": "This might actually be fun",
+      "3": "You're already halfway",
+      "4": "One click from progress",
+      "5": "You clicked. That counts.",
+      "6": "Brave move, by the way",
+      "7": "Okay, now it's happening",
+      "8": "Hello, new commit"
+    }
   },
   "qa": {
     "title": "Questions and Answers",
@@ -178,7 +194,8 @@
       "title": "Exit Quiz?",
       "message": "Your progress will not be saved.",
       "confirm": "Exit",
-      "cancel": "Continue"
+      "cancel": "Continue",
+      "exitButton": "Exit Quiz"
     },
     "antiCheat": {
       "copy": "Copying is not allowed during the quiz",
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
index 06113f66..f7aa383d 100644
--- a/frontend/messages/pl.json
+++ b/frontend/messages/pl.json
@@ -17,7 +17,13 @@
     "searchBlog": "Szukaj w blogu",
     "toggleMenu": "Przełącz menu",
     "closeMenu": "Zamknij menu",
-    "logout": "Wyloguj się"
+    "logout": "Wyloguj się",
+    "themeSystem": "Motyw systemowy",
+    "themeLight": "Jasny motyw",
+    "themeDark": "Ciemny motyw",
+    "cart": "Koszyk",
+    "cartWithItems": "Koszyk, {count} produktów",
+    "starOnGithub": "Gwiazdka na GitHub - {count} gwiazdek"
   },
   "mobileMenu": {
     "newProduct": "Nowy produkt",
@@ -41,7 +47,17 @@
     "title": "DevLovers",
     "subtitle": "Platforma do Przygotowania do Rozmów Kwalifikacyjnych",
     "description": "Opanuj frontend, backend i full-stack development dzięki naszym pytaniom do rozmów kwalifikacyjnych, quizom i materiałom edukacyjnym.",
-    "cta": "Rozpocznij naukę"
+    "cta": "Rozpocznij naukę",
+    "ctaVariants": {
+      "1": "Bez presji. Po prostu zacznij.",
+      "2": "To może być ciekawsze, niż myślisz.",
+      "3": "Właśnie tutaj to się zaczyna.",
+      "4": "Jesteś już w połowie drogi.",
+      "5": "Jeden klik do postępu.",
+      "6": "Klik był — to się liczy.",
+      "7": "Postęp ważniejszy niż perfekcja.",
+      "8": "Zacząć to też funkcja."
+    }
   },
   "qa": {
     "title": "Pytania i Odpowiedzi",
@@ -178,7 +194,8 @@
       "title": "Wyjść z Quizu?",
       "message": "Twój postęp nie zostanie zapisany.",
       "confirm": "Wyjdź",
-      "cancel": "Kontynuuj"
+      "cancel": "Kontynuuj",
+      "exitButton": "Wyjdź z quizu"
     },
     "antiCheat": {
       "copy": "Kopiowanie jest zabronione podczas quizu",
diff --git a/frontend/messages/uk.json b/frontend/messages/uk.json
index 7be5f3b7..28e844f1 100644
--- a/frontend/messages/uk.json
+++ b/frontend/messages/uk.json
@@ -17,7 +17,13 @@
     "searchBlog": "Пошук у блозі",
     "toggleMenu": "Відкрити/закрити меню",
     "closeMenu": "Закрити меню",
-    "logout": "Вийти"
+    "logout": "Вийти",
+    "themeSystem": "Системна тема",
+    "themeLight": "Світла тема",
+    "themeDark": "Темна тема",
+    "cart": "Кошик",
+    "cartWithItems": "Кошик, {count} товарів",
+    "starOnGithub": "Зірка на GitHub - {count} зірок"
   },
   "mobileMenu": {
     "newProduct": "Новий товар",
@@ -41,7 +47,17 @@
     "title": "DevLovers",
     "subtitle": "Платформа для підготовки до технічних співбесід",
     "description": "Опануйте frontend, backend та full-stack-розробку за допомогою наших питань для співбесід, квізів і навчальних матеріалів.",
-    "cta": "Стартуємо"
+    "cta": "Зроби перший крок",
+    "ctaVariants": {
+      "1": "Без тиску. Просто почни.",
+      "2": "Це може бути цікавіше, ніж здається.",
+      "3": "Ось тут усе й починається.",
+      "4": "Ти вже на пів шляху.",
+      "5": "Один клік до прогресу.",
+      "6": "Ну все, процес пішов.",
+      "7": "Простіше, ніж виглядає",
+      "8": "Почати — це теж фіча."
+    }
   },
   "qa": {
     "title": "Питання та Відповіді",
@@ -178,7 +194,8 @@
       "title": "Вийти з квізу?",
       "message": "Ваш прогрес не буде збережено.",
       "confirm": "Вийти",
-      "cancel": "Продовжити"
+      "cancel": "Продовжити",
+      "exitButton": "Вийти з квізу"
     },
     "antiCheat": {
       "copy": "Копіювання заборонено під час квізу",

From 9615bff37c7ea582cdf697dc0fe450b0771167fc Mon Sep 17 00:00:00 2001
From: KomrakovaAnna <komrakova.anna@gmail.com>
Date: Mon, 2 Feb 2026 20:33:58 +0000
Subject: [PATCH 18/24] feat blog: fix for paddings on mobile  (#254)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(Blog):fix for clickable link in post details, fix for author details

* feat(Blog):refactoring after removing author modal

* feat(Blog): fix unified date format

* feat(Blog): Fix for  click-outside-to-close search, recommended posts are limited to 3

* feat(Blog): selectedAuthorData fixed

* feat(Blog): Added description for /blog/[slug] metadata, Added Schema.org JSON‑LD for Article (BlogPosting) and BreadcrumbList , Added <time datetime> tags where blog dates renders

* feat(Blog): fix hover social links, fixed duplication not found search

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added scroll on the main blog page on filtering by author, fied breadcrumbs category translaion, added category to the recommended cards, fixed search for localisations

* feat(Blog): Changed image size on the post details page

* feat(Blog): added tests

* feat(Blog): fix for big post on the post page, added tests

* feat(Blog): resolving comments

* feat(Blog): fixed hover for social links icins - dark theme

* feat(Blog): bringing the style on the blog page to a single site style

* feat(blog): aligning syles

* feat(blog): resolving comment from CodeRabbit

* feat(blog):fix comment for deployment

* feat(Blog): adding pagination

* feat(Blog): Addind Text formatting visibility

* feat(Blog):adding text formating fix
---
 frontend/app/[locale]/blog/page.tsx         |  2 +-
 frontend/components/header/MainSwitcher.tsx |  4 +-
 frontend/package-lock.json                  | 68 +++++++++++++------
 studio/package-lock.json                    | 74 +++++++++++++++------
 4 files changed, 103 insertions(+), 45 deletions(-)

diff --git a/frontend/app/[locale]/blog/page.tsx b/frontend/app/[locale]/blog/page.tsx
index 8e393a19..06fd5486 100644
--- a/frontend/app/[locale]/blog/page.tsx
+++ b/frontend/app/[locale]/blog/page.tsx
@@ -86,7 +86,7 @@ export default async function BlogPage({
 
   return (
     <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
-      <main className="relative z-10 mx-auto max-w-7xl px-4 pt-6 pb-12 sm:px-6 lg:px-8">
+      <main className="relative z-10 mx-auto max-w-7xl pt-6 pb-12">
         {!hasAuthorFilter && (
           <BlogPageHeader title={t('title')} subtitle={t('subtitle')} />
         )}
diff --git a/frontend/components/header/MainSwitcher.tsx b/frontend/components/header/MainSwitcher.tsx
index 63a313e0..47d7c045 100644
--- a/frontend/components/header/MainSwitcher.tsx
+++ b/frontend/components/header/MainSwitcher.tsx
@@ -55,7 +55,9 @@ export function MainSwitcher({
           showAdminLink={showAdminLink}
           blogCategories={blogCategories}
         />
-        <main className="mx-auto px-6 min-h-[80vh]">{children}</main>
+        <main className="mx-auto px-4 sm:px-6 lg:px-8 min-h-[80vh]">
+          {children}
+        </main>
       </>
     );
   }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d372edd7..e1482495 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -181,6 +181,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -498,6 +499,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -538,6 +540,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -3266,6 +3269,7 @@
       "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.7.0.tgz",
       "integrity": "sha512-tNUerSstwNC1KuHgX4CASGO0Md3CB26IJzSXmVlSuFvhsBP4ZaEPpY4jxWOn9tfdDscuVT4Kqb8cZ2o9nLCgRQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12.16"
       }
@@ -3731,6 +3735,7 @@
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3962,6 +3967,7 @@
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3972,6 +3978,7 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -4021,6 +4028,7 @@
       "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.54.0",
         "@typescript-eslint/types": "8.54.0",
@@ -4509,6 +4517,7 @@
       "resolved": "https://registry.npmjs.org/@upstash/redis/-/redis-1.36.1.tgz",
       "integrity": "sha512-N6SjDcgXdOcTAF+7uNoY69o7hCspe9BcA7YjQdxVu5d25avljTwyLaHBW3krWjrP0FfocgMk94qyVtQbeDp39A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "uncrypto": "^0.1.3"
       }
@@ -4711,6 +4720,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5150,6 +5160,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -5242,9 +5253,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001766",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
-      "integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==",
+      "version": "1.0.30001767",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001767.tgz",
+      "integrity": "sha512-34+zUAMhSH+r+9eKmYG+k2Rpt8XttfE4yXAjoZvkAPs15xcYQhyBYdalJ65BzivAvGRMViEjy6oKr/S91loekQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -6204,6 +6215,7 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -6617,6 +6629,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -7452,9 +7465,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.29.2",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.2.tgz",
-      "integrity": "sha512-lSNRzBJk4wuIy0emYQ/nfZ7eWhqud2umPKw2QAQki6uKhZPKm2hRQHeQoHTG9MIvfobb+A/LbEWPJU794ZUKrg==",
+      "version": "12.29.3",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.3.tgz",
+      "integrity": "sha512-naVvtFA7IiRTU5n7w7Nj51QFVWu955bU0p9H0gGC4AbhHDQR0TcohoEYwdOZXWEkXrEYNTl95EDOxsjDqn1AvQ==",
       "license": "MIT",
       "dependencies": {
         "motion-dom": "^12.29.2",
@@ -7987,9 +8000,9 @@
       }
     },
     "node_modules/icu-minify": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/icu-minify/-/icu-minify-4.8.1.tgz",
-      "integrity": "sha512-RhXrTA19/PUt5/xs3B/eyx3DCjnMmcfdgqNYBE5vdrEqM4PQK2GWjHa1zdArTxPGgEc4jfuDMH1LkKhmIxwLFw==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/icu-minify/-/icu-minify-4.8.2.tgz",
+      "integrity": "sha512-LHBQV+skKkjZSPd590pZ7ZAHftUgda3eFjeuNwA8/15L8T8loCNBktKQyTlkodAU86KovFXeg/9WntlAo5wA5A==",
       "funding": [
         {
           "type": "individual",
@@ -8652,6 +8665,7 @@
       "integrity": "sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@acemir/cssom": "^0.9.28",
         "@asamuzakjp/dom-selector": "^6.7.6",
@@ -9532,6 +9546,7 @@
       "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
       "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@next/env": "16.1.6",
         "@swc/helpers": "0.5.15",
@@ -9581,9 +9596,9 @@
       }
     },
     "node_modules/next-intl": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-4.8.1.tgz",
-      "integrity": "sha512-7V0Ewm6bP12Lgn6cjcKi6NbVy0JeIp1K9EzHfTIsuLAUn4NuH8dhon2WYJywHCyWnxKepm34xF6G1fR2dsNoqA==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-4.8.2.tgz",
+      "integrity": "sha512-GuuwyvyEI49/oehQbBXEoY8KSIYCzmfMLhmIwhMXTb+yeBmly1PnJcpgph3KczQ+HTJMXwXCmkizgtT8jBMf3A==",
       "funding": [
         {
           "type": "individual",
@@ -9595,11 +9610,11 @@
         "@formatjs/intl-localematcher": "^0.5.4",
         "@parcel/watcher": "^2.4.1",
         "@swc/core": "^1.15.2",
-        "icu-minify": "^4.8.1",
+        "icu-minify": "^4.8.2",
         "negotiator": "^1.0.0",
-        "next-intl-swc-plugin-extractor": "^4.8.1",
+        "next-intl-swc-plugin-extractor": "^4.8.2",
         "po-parser": "^2.1.1",
-        "use-intl": "^4.8.1"
+        "use-intl": "^4.8.2"
       },
       "peerDependencies": {
         "next": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
@@ -9613,9 +9628,9 @@
       }
     },
     "node_modules/next-intl-swc-plugin-extractor": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/next-intl-swc-plugin-extractor/-/next-intl-swc-plugin-extractor-4.8.1.tgz",
-      "integrity": "sha512-4RXyce0ZrQl/6lkfwvDpP8r5B7wbAQakCW9BuMPh+7/DgXFyE+cBXxcmfDkxFDkpXvBFqBZ2HsN4pav49reAZQ==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/next-intl-swc-plugin-extractor/-/next-intl-swc-plugin-extractor-4.8.2.tgz",
+      "integrity": "sha512-sHDs36L1VZmFHj3tPHsD+KZJtnsRudHlNvT0ieIe3iFVn5OpGLTxW3d/Zc/2LXSj5GpGuR6wQeikbhFjU9tMQQ==",
       "license": "MIT"
     },
     "node_modules/next-intl/node_modules/@swc/core": {
@@ -10084,6 +10099,7 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.18.0.tgz",
       "integrity": "sha512-xqrUDL1b9MbkydY/s+VZ6v+xiMUmOUk7SS9d/1kpyQxoJ6U9AO1oIJyUWVZojbfe5Cc/oluutcgFG4L9RDP1iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.11.0",
         "pg-pool": "^3.11.0",
@@ -10247,6 +10263,7 @@
       "resolved": "https://registry.npmjs.org/postgres/-/postgres-3.4.8.tgz",
       "integrity": "sha512-d+JFcLM17njZaOLkv6SCev7uoLaBtfK86vMUXhW1Z4glPWh4jozno9APvW/XKFJ3CCxVoC7OL38BqRydtu5nGg==",
       "license": "Unlicense",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -10400,6 +10417,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10409,6 +10427,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -11410,6 +11429,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11857,6 +11877,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11997,9 +12018,9 @@
       }
     },
     "node_modules/use-intl": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-4.8.1.tgz",
-      "integrity": "sha512-wH85ro36JAw9NrtogpEsqHghD21Ul6/zAKxTqHktnO6WTQzqhbcfPkO5iXu3YOnJBA8Anm7IvWSTqSzRE+2PsA==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-4.8.2.tgz",
+      "integrity": "sha512-3VNXZgDnPFqhIYosQ9W1Hc6K5q+ZelMfawNbexdwL/dY7BTHbceLUBX5Eeex9lgogxTp0pf1SjHuhYNAjr9H3g==",
       "funding": [
         {
           "type": "individual",
@@ -12010,7 +12031,7 @@
       "dependencies": {
         "@formatjs/fast-memoize": "^3.1.0",
         "@schummar/icu-type-parser": "1.21.5",
-        "icu-minify": "^4.8.1",
+        "icu-minify": "^4.8.2",
         "intl-messageformat": "^11.1.0"
       },
       "peerDependencies": {
@@ -12223,6 +12244,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12236,6 +12258,7 @@
       "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.0.18",
         "@vitest/mocker": "4.0.18",
@@ -12609,6 +12632,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/studio/package-lock.json b/studio/package-lock.json
index ae267f6a..17c8340c 100644
--- a/studio/package-lock.json
+++ b/studio/package-lock.json
@@ -316,6 +316,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -2045,6 +2046,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.12.tgz",
       "integrity": "sha512-f+/VsHVn/kOA9lltk/GFzuYwVVAKmOnNjxbrhkk3tPHntFqjWeI2TbIXx006YkBkqC10wZ4NsnWXCQiFPeAISQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.5.0",
         "crelt": "^1.0.6",
@@ -2136,6 +2138,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -2158,6 +2161,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2191,6 +2195,7 @@
       "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
       "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -2246,6 +2251,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
       "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@emotion/memoize": "^0.9.0"
       }
@@ -3744,6 +3750,7 @@
       "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.2.tgz",
       "integrity": "sha512-/g2d4sW9nUDJOMz3mabVQvOGhVa4e/BN/Um7yca9Bb2XTzPPnfTWHWQg+IsEYO7M3Vx+EXvaM/I2pJWIMun1bg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@octokit/auth-token": "^4.0.0",
         "@octokit/graphql": "^7.1.0",
@@ -3958,6 +3965,7 @@
       "resolved": "https://registry.npmjs.org/@portabletext/editor/-/editor-3.3.18.tgz",
       "integrity": "sha512-K+504jYuodi4b4C+U1SibeHELIBsTDwF30pUZd2IAKp4+avfzpvgX5qKxtPg3aW8z++L3U5Y33ggC9IbJDIVOg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@portabletext/block-tools": "^4.1.11",
         "@portabletext/keyboard-shortcuts": "^2.1.1",
@@ -4128,6 +4136,7 @@
       "resolved": "https://registry.npmjs.org/@portabletext/sanity-bridge/-/sanity-bridge-1.2.14.tgz",
       "integrity": "sha512-Is4ggV86dEMm1XjTJVLswsCeWobJm5E61T9jzm64eyr9d25oVEr9lqskxPuXemap6m9t3lnKDln/Ey/qEaAeCw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@portabletext/schema": "^2.1.0",
         "@sanity/schema": "^4.20.3",
@@ -4204,9 +4213,9 @@
       }
     },
     "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.53",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
-      "integrity": "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==",
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
+      "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==",
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
@@ -4627,6 +4636,7 @@
       "resolved": "https://registry.npmjs.org/@sanity/client/-/client-7.14.1.tgz",
       "integrity": "sha512-lCDx0vuNUgg9FL2E5Hiv1q7u6iHd1Z+jjMZAaYtfzzFPoBKOiyZlaFwqyLVHRyTbwnXQdIGDPmx2AvfBTbGQsQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@sanity/eventsource": "^5.0.2",
         "get-it": "^8.7.0",
@@ -5944,6 +5954,7 @@
       "resolved": "https://registry.npmjs.org/@sanity/types/-/types-4.22.0.tgz",
       "integrity": "sha512-VWAUc8Xtj4IipQt99SzudRldJWHfBVnde+g5qnLZ/Nc1MpFjGiRWu/3smRN5mPOqlrtUfrr0ho/fBZnjE1CEMg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@sanity/client": "^7.13.2",
         "@sanity/media-library-types": "^1.0.1"
@@ -6576,6 +6587,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.0.tgz",
       "integrity": "sha512-DZ8VwRFUNzuqJ5khrvwMXHmvPe+zGayJhr2CDNiKB1WBE1ST8Djl00D0IC4vvNmHMdj6DlbYRIaFE7WHjlDl5w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -6597,6 +6609,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -6713,6 +6726,7 @@
       "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.54.0",
         "@typescript-eslint/types": "8.54.0",
@@ -6997,15 +7011,15 @@
       "license": "Apache-2.0"
     },
     "node_modules/@vitejs/plugin-react": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.2.tgz",
-      "integrity": "sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.3.tgz",
+      "integrity": "sha512-NVUnA6gQCl8jfoYqKqQU5Clv0aPw14KkZYCsX6T9Lfu9slI0LOU10OTwFHS/WmptsMMpshNd/1tuWsHQ2Uk+cg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.28.5",
+        "@babel/core": "^7.29.0",
         "@babel/plugin-transform-react-jsx-self": "^7.27.1",
         "@babel/plugin-transform-react-jsx-source": "^7.27.1",
-        "@rolldown/pluginutils": "1.0.0-beta.53",
+        "@rolldown/pluginutils": "1.0.0-rc.2",
         "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.18.0"
       },
@@ -7052,6 +7066,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -7682,6 +7697,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -7838,9 +7854,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001766",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
-      "integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==",
+      "version": "1.0.30001767",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001767.tgz",
+      "integrity": "sha512-34+zUAMhSH+r+9eKmYG+k2Rpt8XttfE4yXAjoZvkAPs15xcYQhyBYdalJ65BzivAvGRMViEjy6oKr/S91loekQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -9168,6 +9184,7 @@
       "integrity": "sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -9242,6 +9259,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -10041,9 +10059,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.29.2",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.2.tgz",
-      "integrity": "sha512-lSNRzBJk4wuIy0emYQ/nfZ7eWhqud2umPKw2QAQki6uKhZPKm2hRQHeQoHTG9MIvfobb+A/LbEWPJU794ZUKrg==",
+      "version": "12.29.3",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.3.tgz",
+      "integrity": "sha512-naVvtFA7IiRTU5n7w7Nj51QFVWu955bU0p9H0gGC4AbhHDQR0TcohoEYwdOZXWEkXrEYNTl95EDOxsjDqn1AvQ==",
       "license": "MIT",
       "dependencies": {
         "motion-dom": "^12.29.2",
@@ -10937,6 +10955,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.2"
       }
@@ -12178,6 +12197,7 @@
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
       "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssstyle": "^4.2.1",
         "data-urls": "^5.0.0",
@@ -12995,12 +13015,12 @@
       "license": "MIT"
     },
     "node_modules/motion": {
-      "version": "12.29.2",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-12.29.2.tgz",
-      "integrity": "sha512-jMpHdAzEDF1QQ055cB+1lOBLdJ6ialVWl6QQzpJI2OvmHequ7zFVHM2mx0HNAy+Tu4omUlApfC+4vnkX0geEOg==",
+      "version": "12.29.3",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.29.3.tgz",
+      "integrity": "sha512-susHRkAolcmJQNy7xkV8UJ1DrB2Rg9IDTHnGR2ASXBCzc1L9eC5GVLj08zUU6ZnNLNX6Jb7urD6N0IJjOSGQBQ==",
       "license": "MIT",
       "dependencies": {
-        "framer-motion": "^12.29.2",
+        "framer-motion": "^12.29.3",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -14226,6 +14246,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14256,6 +14277,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -14322,7 +14344,8 @@
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
       "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-redux": {
       "version": "9.2.0",
@@ -14642,7 +14665,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
@@ -14971,6 +14995,7 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -15082,6 +15107,7 @@
       "resolved": "https://registry.npmjs.org/sanity/-/sanity-4.22.0.tgz",
       "integrity": "sha512-wBmr/euVC6Kvni1gKP2qwkEsyxGQlfnPOhjowT7tjm0a0eOvBwS6uHnHtjr24wjhf8PeongurQzMewx2tTP8Wg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@date-fns/tz": "^1.4.1",
         "@dnd-kit/core": "^6.3.1",
@@ -16121,7 +16147,8 @@
       "version": "0.120.0",
       "resolved": "https://registry.npmjs.org/slate/-/slate-0.120.0.tgz",
       "integrity": "sha512-CXK/DADGgMZb4z9RTtXylzIDOxvmNJEF9bXV2bAGkLWhQ3rm7GORY9q0H/W41YJvAGZsLbH7nnrhMYr550hWDQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/slate-dom": {
       "version": "0.119.0",
@@ -16625,6 +16652,7 @@
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.3.8.tgz",
       "integrity": "sha512-Kq/W41AKQloOqKM39zfaMdJ4BcYDw/N5CIq4/GTI0YjU6pKcZ1KKhk6b4du0a+6RA9pIfOP/eu94Ge7cu+PDCA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@emotion/is-prop-valid": "1.4.0",
         "@emotion/unitless": "0.10.0",
@@ -16818,6 +16846,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -17101,6 +17130,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -17457,6 +17487,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -17567,6 +17598,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },

From 7b8f89a4b17a96d9b2d28bccd519ab57baf7f60d Mon Sep 17 00:00:00 2001
From: Viktor Svertoka <victor.svertoka@gmail.com>
Date: Tue, 3 Feb 2026 12:22:28 +0200
Subject: [PATCH 19/24] chore(lint): finalize ESLint + Prettier (#256)

---
 .prettierrc                                   |   10 -
 frontend/.prettierrc                          |    5 +-
 frontend/README.md                            |   29 +-
 frontend/actions/quiz.ts                      |   19 +-
 frontend/app/[locale]/about/page.tsx          |   38 +-
 .../app/[locale]/blog/[slug]/PostDetails.tsx  |   29 +-
 frontend/app/[locale]/blog/[slug]/page.tsx    |    6 +-
 .../blog/category/[category]/page.tsx         |   32 +-
 frontend/app/[locale]/blog/page.tsx           |    6 +-
 frontend/app/[locale]/dashboard/page.tsx      |   50 +-
 .../app/[locale]/forgot-password/page.tsx     |    8 +-
 frontend/app/[locale]/layout.tsx              |   20 +-
 frontend/app/[locale]/leaderboard/page.tsx    |    5 +-
 frontend/app/[locale]/login/page.tsx          |   24 +-
 frontend/app/[locale]/page.tsx                |    1 +
 frontend/app/[locale]/privacy-policy/page.tsx |    1 +
 frontend/app/[locale]/q&a/page.tsx            |   11 +-
 frontend/app/[locale]/quiz/[slug]/page.tsx    |   35 +-
 frontend/app/[locale]/quizzes/page.tsx        |   41 +-
 frontend/app/[locale]/reset-password/page.tsx |   15 +-
 .../shop/admin/orders/[id]/RefundButton.tsx   |    6 +-
 .../[locale]/shop/admin/orders/[id]/page.tsx  |   58 +-
 .../app/[locale]/shop/admin/orders/page.tsx   |   70 +-
 frontend/app/[locale]/shop/admin/page.tsx     |   20 +-
 .../shop/admin/products/[id]/edit/page.tsx    |   15 +-
 .../products/_components/ProductForm.tsx      |   90 +-
 .../[locale]/shop/admin/products/new/page.tsx |    3 +-
 .../app/[locale]/shop/admin/products/page.tsx |   75 +-
 .../app/[locale]/shop/cart/CartPageClient.tsx |   64 +-
 frontend/app/[locale]/shop/cart/page.tsx      |    1 +
 .../app/[locale]/shop/checkout/error/page.tsx |   51 +-
 .../checkout/payment/StripePaymentClient.tsx  |   34 +-
 .../shop/checkout/payment/[orderId]/page.tsx  |   70 +-
 .../success/OrderStatusAutoRefresh.tsx        |    2 +-
 .../[locale]/shop/checkout/success/page.tsx   |   44 +-
 .../app/[locale]/shop/orders/[id]/page.tsx    |   45 +-
 frontend/app/[locale]/shop/orders/error.tsx   |    6 +-
 frontend/app/[locale]/shop/orders/page.tsx    |   33 +-
 frontend/app/[locale]/shop/page.tsx           |   41 +-
 .../[locale]/shop/products/[slug]/page.tsx    |   23 +-
 frontend/app/[locale]/shop/products/page.tsx  |   16 +-
 frontend/app/[locale]/signup/page.tsx         |   24 +-
 .../app/[locale]/terms-of-service/page.tsx    |    1 +
 frontend/app/api/ai/explain/route.ts          |    3 +-
 .../app/api/auth/github/callback/route.ts     |  298 +++--
 frontend/app/api/auth/github/route.ts         |   34 +-
 .../app/api/auth/google/callback/route.ts     |   62 +-
 frontend/app/api/auth/google/route.ts         |   20 +-
 frontend/app/api/auth/login/route.ts          |   51 +-
 frontend/app/api/auth/logout/route.ts         |    9 +-
 frontend/app/api/auth/me/route.ts             |   11 +-
 .../api/auth/password-reset/confirm/route.ts  |  112 +-
 frontend/app/api/auth/password-reset/route.ts |  102 +-
 .../app/api/auth/resend-verification/route.ts |  106 +-
 frontend/app/api/auth/signup/route.ts         |   67 +-
 frontend/app/api/auth/verify-email/route.ts   |   96 +-
 frontend/app/api/blog-author/route.ts         |    1 +
 frontend/app/api/blog-search/route.ts         |    1 +
 .../app/api/questions/[category]/route.ts     |    3 +-
 frontend/app/api/quiz/[slug]/route.ts         |    1 +
 frontend/app/api/quiz/guest-result/route.ts   |   47 +-
 frontend/app/api/quiz/verify-answer/route.ts  |    1 +
 frontend/app/api/sessions/activity/route.ts   |    7 +-
 .../shop/admin/orders/[id]/refund/route.ts    |    8 +-
 .../app/api/shop/admin/orders/[id]/route.ts   |    6 +-
 .../admin/orders/reconcile-stale/route.ts     |    4 +-
 frontend/app/api/shop/admin/orders/route.ts   |    8 +-
 .../app/api/shop/admin/products/[id]/route.ts |   19 +-
 .../shop/admin/products/[id]/status/route.ts  |    6 +-
 frontend/app/api/shop/admin/products/route.ts |   18 +-
 frontend/app/api/shop/cart/rehydrate/route.ts |    8 +-
 frontend/app/api/shop/catalog/route.ts        |    5 +-
 frontend/app/api/shop/checkout/route.ts       |   31 +-
 .../internal/orders/restock-stale/route.ts    |   12 +-
 frontend/app/api/shop/orders/[id]/route.ts    |   12 +-
 .../app/api/shop/webhooks/stripe/route.ts     |   24 +-
 frontend/app/api/stats/route.ts               |    1 +
 frontend/app/layout.tsx                       |    5 +-
 frontend/app/not-found.tsx                    |   34 +-
 frontend/client.ts                            |    8 +-
 .../components/about/CommunitySection.tsx     |  204 ++--
 frontend/components/about/FeaturesSection.tsx | 1005 ++++++++++------
 frontend/components/about/HeroSection.tsx     |  277 +++--
 frontend/components/about/InteractiveGame.tsx | 1056 +++++++++--------
 frontend/components/about/PricingSection.tsx  |  363 +++---
 frontend/components/about/SponsorsWall.tsx    |  182 +--
 frontend/components/about/TopicsSection.tsx   |  175 ++-
 frontend/components/auth/AuthErrorBanner.tsx  |   38 +-
 .../components/auth/AuthProvidersBlock.tsx    |   33 +-
 frontend/components/auth/AuthShell.tsx        |   38 +-
 .../components/auth/AuthSuccessBanner.tsx     |   29 +-
 .../components/auth/ForgotPasswordForm.tsx    |  141 +--
 frontend/components/auth/LoginForm.tsx        |  340 +++---
 frontend/components/auth/OAuthButtons.tsx     |   36 +-
 frontend/components/auth/PostAuthQuizSync.tsx |  117 +-
 frontend/components/auth/ProviderButton.tsx   |   49 +-
 .../components/auth/ResetPasswordForm.tsx     |  126 +-
 frontend/components/auth/SignupForm.tsx       |  276 ++---
 .../components/auth/fields/EmailField.tsx     |   62 +-
 frontend/components/auth/fields/NameField.tsx |   52 +-
 .../components/auth/fields/PasswordField.tsx  |   86 +-
 frontend/components/auth/icons/GitHubIcon.tsx |   24 +-
 frontend/components/auth/icons/GoogleIcon.tsx |   40 +-
 frontend/components/auth/logoutButton.tsx     |    7 +-
 frontend/components/blog/BlogCard.tsx         |   62 +-
 frontend/components/blog/BlogCategoryGrid.tsx |    3 +-
 .../components/blog/BlogCategoryLinks.tsx     |    7 +-
 frontend/components/blog/BlogFilters.tsx      |   58 +-
 frontend/components/blog/BlogGrid.tsx         |    3 +-
 frontend/components/blog/BlogHeaderSearch.tsx |   35 +-
 frontend/components/blog/BlogNavLinks.tsx     |   11 +-
 frontend/components/blog/BlogPageHeader.tsx   |    2 +-
 frontend/components/blog/BlogPagination.tsx   |   25 +-
 .../components/blog/FeaturedPostCtaButton.tsx |    1 +
 frontend/components/dashboard/ProfileCard.tsx |   32 +-
 .../components/dashboard/QuizSavedBanner.tsx  |   50 +-
 frontend/components/dashboard/StatsCard.tsx   |   39 +-
 frontend/components/header/AppChrome.tsx      |    2 +-
 frontend/components/header/AppMobileMenu.tsx  |   55 +-
 frontend/components/header/DesktopActions.tsx |    8 +-
 frontend/components/header/DesktopNav.tsx     |    6 +-
 frontend/components/header/MainSwitcher.tsx   |    7 +-
 frontend/components/header/MobileActions.tsx  |    4 +-
 frontend/components/header/NavLink.tsx        |    1 +
 frontend/components/header/UnifiedHeader.tsx  |    6 +-
 frontend/components/home/CodeCard.tsx         |   14 +-
 frontend/components/home/HeroBackground.tsx   |   12 +-
 frontend/components/home/HeroCodeCards.tsx    |    2 +-
 frontend/components/home/HeroSection.tsx      |   26 +-
 .../components/home/InteractiveCTAButton.tsx  |   26 +-
 .../leaderboard/LeaderboardClient.tsx         |   26 +-
 .../leaderboard/LeaderboardPodium.tsx         |   24 +-
 .../leaderboard/LeaderboardTable.tsx          |   80 +-
 frontend/components/leaderboard/types.ts      |    2 +-
 frontend/components/legal/LegalBlock.tsx      |   11 +-
 frontend/components/legal/LegalPageShell.tsx  |   38 +-
 .../components/legal/PrivacyPolicyContent.tsx |   10 +-
 .../legal/TermsOfServiceContent.tsx           |    5 +-
 frontend/components/q&a/AIWordHelper.tsx      |   44 +-
 frontend/components/q&a/AccordionList.tsx     |   26 +-
 frontend/components/q&a/CodeBlock.tsx         |   13 +-
 .../components/q&a/FloatingExplainButton.tsx  |    5 +-
 .../components/q&a/HighlightCachedTerms.tsx   |    5 +-
 frontend/components/q&a/Pagination.tsx        |   25 +-
 frontend/components/q&a/QaSection.tsx         |   41 +-
 frontend/components/q&a/types.ts              |    6 +-
 frontend/components/q&a/useQaTabs.ts          |    7 +-
 frontend/components/quiz/CountdownTimer.tsx   |   15 +-
 .../components/quiz/ExplanationRenderer.tsx   |   11 +-
 .../components/quiz/PendingResultHandler.tsx  |   20 +-
 frontend/components/quiz/QuizCard.tsx         |   34 +-
 frontend/components/quiz/QuizContainer.tsx    |   54 +-
 frontend/components/quiz/QuizProgress.tsx     |   52 +-
 frontend/components/quiz/QuizQuestion.tsx     |   32 +-
 frontend/components/quiz/QuizResult.tsx       |  134 ++-
 frontend/components/quiz/QuizzesSection.tsx   |   83 +-
 .../quiz/tests/quiz-container-flow.test.tsx   |    9 +-
 .../components/shared/AnimatedNavLink.tsx     |   43 +-
 .../components/shared/CategoryTabButton.tsx   |    8 +-
 frontend/components/shared/CookieBanner.tsx   |   15 +-
 .../shared/DynamicGridBackground.tsx          |    6 +-
 frontend/components/shared/Footer.tsx         |   52 +-
 .../components/shared/GitHubStarButton.tsx    |   31 +-
 frontend/components/shared/HeaderButton.tsx   |   18 +-
 .../components/shared/LanguageSwitcher.tsx    |   13 +-
 frontend/components/shared/Logo.tsx           |   15 +-
 .../components/shared/OnlineCounterPopup.tsx  |   67 +-
 frontend/components/shop/AddToCartButton.tsx  |   29 +-
 frontend/components/shop/CartProvider.tsx     |    6 +-
 frontend/components/shop/CatalogLoadMore.tsx  |    3 +-
 .../components/shop/CatalogProductsClient.tsx |    6 +-
 frontend/components/shop/CategoryTile.tsx     |    7 +-
 frontend/components/shop/ClearCartOnMount.tsx |    1 +
 frontend/components/shop/ProductCard.tsx      |   21 +-
 frontend/components/shop/ProductFilters.tsx   |   25 +-
 frontend/components/shop/ProductSort.tsx      |   13 +-
 frontend/components/shop/ProductsToolbar.tsx  |   16 +-
 frontend/components/shop/ShopHero.tsx         |   17 +-
 .../components/shop/admin/AdminPagination.tsx |    5 +-
 .../shop/admin/AdminProductDeleteButton.tsx   |    4 +-
 .../shop/admin/AdminProductStatusToggle.tsx   |    4 +-
 .../components/shop/admin/ShopAdminTopbar.tsx |   13 +-
 .../components/shop/header/CartButton.tsx     |    6 +-
 frontend/components/shop/header/NavLinks.tsx  |   35 +-
 .../components/tests/CookieBanner.test.tsx    |    5 +-
 .../components/tests/blog/blog-card.test.tsx  |   25 +-
 .../tests/blog/blog-category-grid.test.tsx    |   22 +-
 .../tests/blog/blog-category-links.test.tsx   |    7 +-
 .../tests/blog/blog-filters.test.tsx          |    9 +-
 .../components/tests/blog/blog-grid.test.tsx  |    6 +-
 .../tests/blog/blog-header-search.test.tsx    |    5 +-
 .../tests/blog/blog-nav-links.test.tsx        |    3 +-
 .../tests/q&a/accordion-list.test.tsx         |   26 +-
 .../tests/q&a/ai-word-helper.test.tsx         |   76 +-
 .../components/tests/q&a/code-block.test.tsx  |   16 +-
 .../q&a/floating-explain-button.test.tsx      |    4 +-
 .../tests/q&a/highlight-cached-terms.test.tsx |    4 +-
 .../components/tests/q&a/pagination.test.tsx  |    4 +-
 .../components/tests/q&a/qa-section.test.tsx  |    6 +-
 .../tests/q&a/selectable-text.test.tsx        |    4 +-
 frontend/components/tests/q&a/types.test.ts   |    2 +-
 .../components/tests/q&a/use-qa-tabs.test.tsx |    4 +-
 frontend/components/theme/ThemeProvider.tsx   |   10 +-
 frontend/components/theme/ThemeToggle.tsx     |    8 +-
 frontend/components/ui/accordion.tsx          |   26 +-
 frontend/components/ui/badge.tsx              |   15 +-
 frontend/components/ui/button.tsx             |    7 +-
 frontend/components/ui/confirm-modal.tsx      |   21 +-
 frontend/components/ui/gradient-badge.tsx     |   24 +-
 frontend/components/ui/radio-group.tsx        |   82 +-
 frontend/components/ui/section-heading.tsx    |   37 +-
 frontend/components/ui/tabs.tsx               |   24 +-
 frontend/data/about.ts                        |  293 ++---
 frontend/db/index.ts                          |   18 +-
 .../drizzle_legacy/meta/0000_snapshot.json    |  118 +-
 .../drizzle_legacy/meta/0001_snapshot.json    |  164 +--
 .../drizzle_legacy/meta/0002_snapshot.json    |  164 +--
 .../drizzle_legacy/meta/0003_snapshot.json    |  172 +--
 .../drizzle_legacy/meta/0004_snapshot.json    |  198 +---
 .../drizzle_legacy/meta/0005_snapshot.json    |  206 +---
 .../drizzle_legacy/meta/0006_snapshot.json    |  215 +---
 .../drizzle_legacy/meta/0007_snapshot.json    |  215 +---
 .../drizzle_legacy/meta/0008_snapshot.json    |  215 +---
 .../drizzle_legacy/meta/0009_snapshot.json    |  215 +---
 .../drizzle_legacy/meta/0010_snapshot.json    |  215 +---
 .../drizzle_legacy/meta/0012_snapshot.json    |  236 +---
 .../drizzle_legacy/meta/0013_snapshot.json    |  244 +---
 .../drizzle_legacy/meta/0014_snapshot.json    |  244 +---
 .../drizzle_legacy/meta/0015_snapshot.json    |  236 +---
 .../drizzle_legacy/meta/_journal.json         |   21 +-
 .../drizzle_legacy/relations.ts               |  299 +++--
 .../drizzle_legacy/schema.ts                  |  864 ++++++++------
 frontend/db/queries/leaderboard.ts            |   10 +-
 frontend/db/queries/points.ts                 |    9 +-
 frontend/db/queries/quiz.ts                   |   17 +-
 frontend/db/queries/shop/admin-orders.ts      |    3 +-
 frontend/db/queries/shop/orders.ts            |  108 +-
 frontend/db/queries/shop/products.ts          |    9 +-
 frontend/db/queries/users.ts                  |    6 +-
 frontend/db/schema/categories.ts              |   12 +-
 frontend/db/schema/emailVerificationTokens.ts |   28 +-
 frontend/db/schema/index.ts                   |   10 +-
 frontend/db/schema/passwordResetTokens.ts     |   28 +-
 frontend/db/schema/points.ts                  |   45 +-
 frontend/db/schema/questions.ts               |   15 +-
 frontend/db/schema/quiz.ts                    |   21 +-
 frontend/db/schema/sessions.ts                |   10 +-
 frontend/db/schema/shop.ts                    |    7 +-
 frontend/db/schema/users.ts                   |   41 +-
 frontend/db/seed-categories.ts                |    3 +-
 frontend/db/seed-demo-leaderboard.ts          |    5 +-
 frontend/db/seed-questions.ts                 |    4 +-
 frontend/db/seed-quiz-angular-advanced.ts     |   11 +-
 frontend/db/seed-quiz-angular.ts              |   11 +-
 frontend/db/seed-quiz-css-advanced.ts         |    9 +-
 frontend/db/seed-quiz-css.ts                  |    9 +-
 frontend/db/seed-quiz-from-json.ts            |   12 +-
 frontend/db/seed-quiz-git.ts                  |  123 +-
 frontend/db/seed-quiz-html-advanced.ts        |    9 +-
 frontend/db/seed-quiz-html.ts                 |    9 +-
 frontend/db/seed-quiz-javascript-advanced.ts  |    9 +-
 frontend/db/seed-quiz-javascript.ts           |    9 +-
 frontend/db/seed-quiz-nodejs-advanced.ts      |   11 +-
 frontend/db/seed-quiz-nodejs.ts               |   11 +-
 frontend/db/seed-quiz-react.ts                |   12 +-
 frontend/db/seed-quiz-typescript-advanced.ts  |  132 ++-
 frontend/db/seed-quiz-typescript.ts           |    9 +-
 frontend/db/seed-quiz-verify.ts               |   14 +-
 frontend/db/seed-quiz-vue.ts                  |  127 +-
 frontend/db/seed-users.ts                     |   41 +-
 frontend/drizzle/meta/0000_snapshot.json      |  244 +---
 frontend/drizzle/meta/0001_snapshot.json      |  252 +---
 frontend/drizzle/meta/0002_snapshot.json      |  252 +---
 frontend/drizzle/meta/0003_snapshot.json      |  252 +---
 frontend/drizzle/meta/0004_snapshot.json      |  252 +---
 frontend/drizzle/meta/0005_snapshot.json      |  252 +---
 frontend/drizzle/meta/_journal.json           |    2 +-
 frontend/eslint.config.mjs                    |   47 +-
 frontend/hooks/use-mounted.ts                 |   12 +-
 frontend/hooks/useAntiCheat.ts                |    2 +-
 frontend/hooks/useQuizGuards.ts               |   18 +-
 frontend/hooks/useQuizSession.ts              |   16 +-
 frontend/i18n/request.ts                      |    3 +-
 frontend/i18n/routing.ts                      |    3 +-
 frontend/lib/about/github-sponsors.ts         |   97 +-
 frontend/lib/about/stats.ts                   |   85 +-
 frontend/lib/admin/parseAdminProductForm.ts   |    5 +-
 frontend/lib/ai/prompts.ts                    |    1 -
 frontend/lib/auth.ts                          |    4 +-
 frontend/lib/auth/email-verification.ts       |   21 +-
 frontend/lib/auth/guard-shop-admin-page.ts    |    1 +
 frontend/lib/auth/internal-janitor.ts         |    2 +-
 frontend/lib/auth/oauth-state.ts              |   45 +-
 frontend/lib/auth/password-reset.ts           |   33 +-
 frontend/lib/auth/safe-redirect.ts            |   18 +-
 frontend/lib/cart.ts                          |   12 +-
 frontend/lib/config/catalog.ts                |   77 +-
 frontend/lib/email/sendPasswordResetEmail.ts  |   39 +-
 frontend/lib/email/sendVerificationEmail.ts   |   18 +-
 frontend/lib/email/templates/base-layout.ts   |   13 +-
 .../lib/email/templates/reset-password.ts     |   12 +-
 frontend/lib/email/templates/verify-email.ts  |   12 +-
 frontend/lib/email/transporter.ts             |   16 +-
 frontend/lib/env/auth.ts                      |   88 +-
 frontend/lib/env/stripe.ts                    |   47 +-
 frontend/lib/http/getBaseUrl.ts               |   22 +-
 frontend/lib/logout.ts                        |   11 +-
 frontend/lib/psp/stripe.ts                    |    1 +
 frontend/lib/quiz/guest-quiz.ts               |   10 +-
 frontend/lib/quiz/quiz-crypto.ts              |    9 +-
 frontend/lib/quiz/quiz-session.ts             |    5 +-
 frontend/lib/redis.ts                         |    1 +
 frontend/lib/security/client-ip.ts            |    3 +-
 frontend/lib/security/csrf.ts                 |    1 +
 frontend/lib/security/rate-limit.ts           |    7 +-
 frontend/lib/services/inventory.ts            |    1 +
 frontend/lib/services/orders.ts               |   10 +-
 frontend/lib/services/orders/_shared.ts       |    8 +-
 frontend/lib/services/orders/checkout.ts      |   24 +-
 .../lib/services/orders/payment-attempts.ts   |    6 +-
 .../lib/services/orders/payment-intent.ts     |    3 +-
 frontend/lib/services/orders/payment-state.ts |    1 +
 frontend/lib/services/orders/refund.ts        |    3 +-
 frontend/lib/services/orders/restock.ts       |    8 +-
 frontend/lib/services/orders/summary.ts       |    1 -
 frontend/lib/services/orders/sweeps.ts        |    2 +-
 frontend/lib/services/products.ts             |   13 +-
 .../lib/services/products/admin/queries.ts    |    6 +-
 .../lib/services/products/cart/rehydrate.ts   |   16 +-
 frontend/lib/services/products/mapping.ts     |    1 +
 .../lib/services/products/mutations/create.ts |    8 +-
 .../lib/services/products/mutations/delete.ts |    6 +-
 .../lib/services/products/mutations/toggle.ts |    2 +-
 .../lib/services/products/mutations/update.ts |   15 +-
 frontend/lib/services/products/prices.ts      |    5 +-
 frontend/lib/services/products/slug.ts        |    1 +
 frontend/lib/shop/data.ts                     |   27 +-
 frontend/lib/shop/idempotency.ts              |   23 +-
 frontend/lib/shop/payments.ts                 |   12 +-
 frontend/lib/shop/request-locale.ts           |   18 +-
 frontend/lib/shop/slug.ts                     |   10 +-
 .../lib/tests/blog/blog-author-route.test.ts  |    6 +-
 .../lib/tests/blog/blog-search-route.test.ts  |    6 +-
 frontend/lib/tests/factories/quiz/quiz.ts     |    4 +-
 frontend/lib/tests/helpers/makeCheckoutReq.ts |    1 +
 .../lib/tests/q&a/questions-route.test.ts     |    4 +-
 frontend/lib/tests/quiz/guest-quiz.test.ts    |   12 +-
 .../lib/tests/quiz/guest-result-route.test.ts |   11 +-
 .../lib/tests/quiz/quiz-anticheat.test.ts     |   49 +-
 frontend/lib/tests/quiz/quiz-crypto.test.ts   |   12 +-
 frontend/lib/tests/quiz/quiz-session.test.ts  |   32 +-
 frontend/lib/tests/quiz/quiz-setup.test.ts    |    7 +-
 .../lib/tests/quiz/quiz-slug-route.test.ts    |   37 +-
 frontend/lib/tests/quiz/setup.ts              |    2 +-
 .../lib/tests/quiz/use-quiz-guards.test.ts    |   25 +-
 .../lib/tests/quiz/use-quiz-session.test.ts   |   35 +-
 frontend/lib/tests/quiz/verify-answer.test.ts |    8 +-
 .../tests/shop/admin-api-killswitch.test.ts   |    4 +-
 .../tests/shop/admin-csrf-contract.test.ts    |    2 +-
 ...-patch-price-config-error-contract.test.ts |    3 +-
 .../shop/admin-product-sale-contract.test.ts  |    2 +-
 .../cart-rehydrate-variant-sanitize.test.ts   |    5 +-
 .../shop/checkout-concurrency-stock1.test.ts  |   14 +-
 .../shop/checkout-currency-policy.test.ts     |    6 +-
 .../tests/shop/checkout-no-payments.test.ts   |    7 +-
 .../checkout-origin-posture-contract.test.ts  |    3 +-
 ...set-payment-intent-reject-contract.test.ts |   13 +-
 .../checkout-stripe-error-contract.test.ts    |    9 +-
 frontend/lib/tests/shop/currency.test.ts      |   51 +-
 frontend/lib/tests/shop/format-money.test.ts  |   19 +-
 .../tests/shop/order-items-variants.test.ts   |    4 +-
 frontend/lib/tests/shop/orders-access.test.ts |    4 +-
 .../lib/tests/shop/origin-posture.test.ts     |    5 +-
 .../shop/payment-state-legacy-writers.test.ts |    3 +-
 .../shop/payment-status-tripwire.test.ts      |    3 +-
 frontend/lib/tests/shop/prices.test.ts        |   16 +-
 ...product-admin-merged-prices-policy.test.ts |    3 +-
 ...dmin-update-prices-patch-semantics.test.ts |    5 +-
 .../tests/shop/product-sale-invariant.test.ts |    6 +-
 .../shop/public-product-visibility.test.ts    |    7 +-
 .../lib/tests/shop/rate-limit-subject.test.ts |    3 +-
 .../shop/restock-order-only-once.test.ts      |    4 +-
 .../restock-release-failure-invariant.test.ts |   13 +-
 .../shop/restock-stale-claim-gate.test.ts     |    4 +-
 .../shop/restock-stale-stripe-orphan.test.ts  |    4 +-
 .../restock-stuck-reserving-sweep.test.ts     |    4 +-
 .../tests/shop/restock-sweep-claim.test.ts    |    4 +-
 .../shop/stripe-webhook-contract.test.ts      |    2 +-
 .../shop/stripe-webhook-mismatch.test.ts      |    5 +-
 .../stripe-webhook-paid-status-repair.test.ts |    3 +-
 .../shop/stripe-webhook-psp-fields.test.ts    |   14 +-
 .../stripe-webhook-rate-limit-env.test.ts     |    1 +
 .../shop/stripe-webhook-refund-full.test.ts   |    3 +-
 frontend/lib/utils.ts                         |    6 +-
 frontend/lib/validation/checkout.ts           |    6 +-
 frontend/lib/validation/shop.ts               |    3 +-
 frontend/messages/en.json                     |   55 +-
 frontend/messages/pl.json                     |  100 +-
 frontend/messages/uk.json                     |   60 +-
 frontend/package-lock.json                    |  161 ++-
 frontend/package.json                         |    8 +-
 frontend/postcss.config.mjs                   |    2 +-
 frontend/proxy.ts                             |   29 +-
 frontend/tsconfig.json                        |   19 +-
 frontend/vitest.config.ts                     |   11 +-
 405 files changed, 8619 insertions(+), 9858 deletions(-)
 delete mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 3fed3135..00000000
--- a/.prettierrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "printWidth": 80,
-  "useTabs": false,
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "bracketSpacing": true,
-  "arrowParens": "avoid",
-  "proseWrap": "always"
-}
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index 3fed3135..e6e05952 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -6,5 +6,8 @@
   "trailingComma": "es5",
   "bracketSpacing": true,
   "arrowParens": "avoid",
-  "proseWrap": "always"
+  "proseWrap": "always",
+
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["clsx", "cn"]
 }
diff --git a/frontend/README.md b/frontend/README.md
index e215bc4c..0a7fac56 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,4 +1,5 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+This is a [Next.js](https://nextjs.org) project bootstrapped with
+[`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
 ## Getting Started
 
@@ -14,23 +15,35 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/page.tsx`. The page
+auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+This project uses
+[`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts)
+to automatically optimize and load [Geist](https://vercel.com/font), a new font
+family for Vercel.
 
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+You can check out
+[the Next.js GitHub repository](https://github.com/vercel/next.js) - your
+feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The easiest way to deploy your Next.js app is to use the
+[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
+from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+Check out our
+[Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying)
+for more details.
diff --git a/frontend/actions/quiz.ts b/frontend/actions/quiz.ts
index 85724b50..20aac9fb 100644
--- a/frontend/actions/quiz.ts
+++ b/frontend/actions/quiz.ts
@@ -1,15 +1,16 @@
 'use server';
 
+import { and,eq, inArray } from 'drizzle-orm';
+
 import { db } from '@/db';
+import { awardQuizPoints, calculateQuizPoints } from '@/db/queries/points';
 import {
-  quizAttempts,
-  quizAttemptAnswers,
   quizAnswers,
+  quizAttemptAnswers,
+  quizAttempts,
   quizQuestions,
 } from '@/db/schema/quiz';
-import { awardQuizPoints,calculateQuizPoints  } from '@/db/queries/points';
 import { getCurrentUser } from '@/lib/auth';
-import { eq, inArray, and } from 'drizzle-orm';
 
 export interface UserAnswer {
   questionId: string;
@@ -93,7 +94,8 @@ export async function submitQuizAttempt(
       return { success: false, error: 'Unauthorized' };
     }
 
-    const { userId, quizId, answers, violations, startedAt, completedAt } = input;
+    const { userId, quizId, answers, violations, startedAt, completedAt } =
+      input;
 
     if (userId && userId !== session.id) {
       return { success: false, error: 'User mismatch' };
@@ -186,9 +188,10 @@ export async function submitQuizAttempt(
       };
     }
 
-    const percentage = ((correctAnswersCount / questionIds.length) * 100).toFixed(
-      2
-    );
+    const percentage = (
+      (correctAnswersCount / questionIds.length) *
+      100
+    ).toFixed(2);
     const integrityScore = calculateIntegrityScore(violations);
     const timeSpentSeconds = Math.floor(
       (completedAtDate.getTime() - startedAtDate.getTime()) / 1000
diff --git a/frontend/app/[locale]/about/page.tsx b/frontend/app/[locale]/about/page.tsx
index 57c93a75..e4313412 100644
--- a/frontend/app/[locale]/about/page.tsx
+++ b/frontend/app/[locale]/about/page.tsx
@@ -1,38 +1,34 @@
-import { getTranslations } from "next-intl/server"
-import { getPlatformStats } from "@/lib/about/stats"
-import { getSponsors } from "@/lib/about/github-sponsors"
+import { getTranslations } from 'next-intl/server';
 
-import { HeroSection } from "@/components/about/HeroSection"
-import { TopicsSection } from "@/components/about/TopicsSection"
-import { FeaturesSection } from "@/components/about/FeaturesSection"
-import { PricingSection } from "@/components/about/PricingSection"
-import { CommunitySection } from "@/components/about/CommunitySection"
+import { CommunitySection } from '@/components/about/CommunitySection';
+import { FeaturesSection } from '@/components/about/FeaturesSection';
+import { HeroSection } from '@/components/about/HeroSection';
+import { PricingSection } from '@/components/about/PricingSection';
+import { TopicsSection } from '@/components/about/TopicsSection';
+import { getSponsors } from '@/lib/about/github-sponsors';
+import { getPlatformStats } from '@/lib/about/stats';
 
 export async function generateMetadata() {
-  const t = await getTranslations("about")
+  const t = await getTranslations('about');
   return {
-    title: t("metaTitle"),
-    description: t("metaDescription"),
-  }
+    title: t('metaTitle'),
+    description: t('metaDescription'),
+  };
 }
 
 export default async function AboutPage() {
   const [stats, sponsors] = await Promise.all([
     getPlatformStats(),
-    getSponsors()
-  ])
+    getSponsors(),
+  ]);
 
   return (
-    <main className="min-h-screen bg-gray-50 dark:bg-black overflow-hidden text-gray-900 dark:text-white
-      w-[100vw] relative left-[50%] right-[50%] -ml-[50vw] -mr-[50vw]"
-    >
-
+    <main className="relative right-[50%] left-[50%] -mr-[50vw] -ml-[50vw] min-h-screen w-[100vw] overflow-hidden bg-gray-50 text-gray-900 dark:bg-black dark:text-white">
       <HeroSection stats={stats} />
       <TopicsSection />
       <FeaturesSection />
       <PricingSection sponsors={sponsors} />
       <CommunitySection />
-
     </main>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/app/[locale]/blog/[slug]/PostDetails.tsx b/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
index 7ce07d19..f16b593a 100644
--- a/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
+++ b/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
@@ -1,11 +1,12 @@
+import groq from 'groq';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
-import groq from 'groq';
 import { getTranslations } from 'next-intl/server';
+
 import { client } from '@/client';
+import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
 import { Link } from '@/i18n/routing';
 import { formatBlogDate } from '@/lib/blog/date';
-import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
 
 export const revalidate = 0;
 
@@ -189,7 +190,7 @@ function renderPortableTextBlock(block: any, index: number): React.ReactNode {
     return (
       <h6
         key={block._key || `block-${index}`}
-        className="mt-6 mb-2 text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-300"
+        className="mt-6 mb-2 text-sm font-semibold tracking-wide text-gray-700 uppercase dark:text-gray-300"
       >
         {children}
       </h6>
@@ -209,7 +210,7 @@ function renderPortableTextBlock(block: any, index: number): React.ReactNode {
   return (
     <p
       key={block._key || `block-${index}`}
-      className="mb-4 whitespace-pre-line text-base leading-relaxed text-gray-700 dark:text-gray-300"
+      className="mb-4 text-base leading-relaxed whitespace-pre-line text-gray-700 dark:text-gray-300"
     >
       {children}
     </p>
@@ -283,7 +284,7 @@ function renderPortableText(
           key={block._key || `image-${i}`}
           src={block.url}
           alt={postTitle || 'Post image'}
-          className="rounded-xl border border-gray-200 my-6"
+          className="my-6 rounded-xl border border-gray-200"
         />
       );
       i += 1;
@@ -482,7 +483,7 @@ export default async function PostDetails({
     : null;
 
   return (
-    <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
+    <DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
       <main className="relative z-10 mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
         {breadcrumbsJsonLd && (
           <script
@@ -512,7 +513,7 @@ export default async function PostDetails({
                   {!isLast && item.href ? (
                     <Link
                       href={item.href}
-                      className="transition hover:text-[var(--accent-primary)] hover:underline underline-offset-4"
+                      className="underline-offset-4 transition hover:text-[var(--accent-primary)] hover:underline"
                     >
                       {item.name}
                     </Link>
@@ -533,7 +534,7 @@ export default async function PostDetails({
 
         <div className="mx-auto w-full max-w-3xl">
           {categoryLabel && (
-            <div className="text-sm font-medium text-gray-500 dark:text-gray-400 text-center">
+            <div className="text-center text-sm font-medium text-gray-500 dark:text-gray-400">
               <Link
                 href={categoryHref || '/blog'}
                 className="inline-flex items-center gap-1 text-[var(--accent-primary)] transition"
@@ -542,7 +543,7 @@ export default async function PostDetails({
               </Link>
             </div>
           )}
-          <h1 className="mt-3 text-4xl font-bold text-gray-900 dark:text-gray-100 text-center">
+          <h1 className="mt-3 text-center text-4xl font-bold text-gray-900 dark:text-gray-100">
             {post.title}
           </h1>
 
@@ -569,7 +570,7 @@ export default async function PostDetails({
         {(post.tags?.length || 0) > 0 && null}
 
         {post.mainImage && (
-          <div className="relative w-full h-[520px] rounded-2xl overflow-hidden my-8">
+          <div className="relative my-8 h-[520px] w-full overflow-hidden rounded-2xl">
             <Image
               src={post.mainImage}
               alt={post.title || 'Post image'}
@@ -596,7 +597,7 @@ export default async function PostDetails({
                 <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
                   {t('recommendedPosts')}
                 </h2>
-                <div className="mt-6 grid gap-6 auto-rows-fr sm:grid-cols-2 lg:grid-cols-3">
+                <div className="mt-6 grid auto-rows-fr gap-6 sm:grid-cols-2 lg:grid-cols-3">
                   {recommendedPosts.map(item => {
                     const itemCategory = item.categories?.[0];
                     const itemCategoryDisplay = itemCategory
@@ -619,18 +620,18 @@ export default async function PostDetails({
                             />
                           </div>
                         )}
-                        <h3 className="mt-4 text-lg font-semibold text-gray-900 transition group-hover:underline underline-offset-4 dark:text-gray-100">
+                        <h3 className="mt-4 text-lg font-semibold text-gray-900 underline-offset-4 transition group-hover:underline dark:text-gray-100">
                           {item.title}
                         </h3>
                         {item.body && (
-                          <p className="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-2">
+                          <p className="mt-2 line-clamp-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
                             {plainTextFromPortableText(item.body)}
                           </p>
                         )}
                         {(item.author?.name ||
                           itemCategoryDisplay ||
                           item.publishedAt) && (
-                          <div className="mt-auto pt-3 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+                          <div className="mt-auto flex flex-wrap items-center gap-2 pt-3 text-sm text-gray-500 dark:text-gray-400">
                             {item.author?.image && (
                               <span className="relative h-5 w-5 overflow-hidden rounded-full">
                                 <Image
diff --git a/frontend/app/[locale]/blog/[slug]/page.tsx b/frontend/app/[locale]/blog/[slug]/page.tsx
index c4721b0f..1b8be81f 100644
--- a/frontend/app/[locale]/blog/[slug]/page.tsx
+++ b/frontend/app/[locale]/blog/[slug]/page.tsx
@@ -1,7 +1,9 @@
-import PostDetails from './PostDetails';
-import { client } from '@/client';
 import groq from 'groq';
 
+import { client } from '@/client';
+
+import PostDetails from './PostDetails';
+
 export async function generateStaticParams() {
   const slugs = await client.fetch<string[]>(
     groq`*[_type == "post" && defined(slug.current)][].slug.current`
diff --git a/frontend/app/[locale]/blog/category/[category]/page.tsx b/frontend/app/[locale]/blog/category/[category]/page.tsx
index ce23cd29..ea470ee9 100644
--- a/frontend/app/[locale]/blog/category/[category]/page.tsx
+++ b/frontend/app/[locale]/blog/category/[category]/page.tsx
@@ -1,13 +1,14 @@
 import groq from 'groq';
+import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
-import Image from 'next/image';
+
 import { client } from '@/client';
-import { Link } from '@/i18n/routing';
 import { BlogCategoryGrid } from '@/components/blog/BlogCategoryGrid';
-import { formatBlogDate } from '@/lib/blog/date';
-import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
 import { FeaturedPostCtaButton } from '@/components/blog/FeaturedPostCtaButton';
+import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
+import { Link } from '@/i18n/routing';
+import { formatBlogDate } from '@/lib/blog/date';
 
 export const revalidate = 0;
 
@@ -87,33 +88,34 @@ export default async function BlogCategoryPage({
   const featuredDate = formatBlogDate(featuredPost?.publishedAt);
 
   return (
-    <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
+    <DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
       <main className="relative z-10 mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
         <nav className="mb-6" aria-label="Breadcrumb">
           <ol className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
             <li className="flex items-center gap-2">
               <Link
                 href="/blog"
-                className="transition hover:text-[var(--accent-primary)] hover:underline underline-offset-4"
+                className="underline-offset-4 transition hover:text-[var(--accent-primary)] hover:underline"
               >
                 {tNav('blog')}
               </Link>
               <span>&gt;</span>
             </li>
             <li className="flex items-center gap-2">
-              <span className="text-[var(--accent-primary)]" aria-current="page">
+              <span
+                className="text-[var(--accent-primary)]"
+                aria-current="page"
+              >
                 {categoryDisplay}
               </span>
             </li>
           </ol>
         </nav>
-        <h1 className="text-4xl font-bold mb-4 text-left">
-          {categoryDisplay}
-        </h1>
+        <h1 className="mb-4 text-left text-4xl font-bold">{categoryDisplay}</h1>
         {featuredPost?.mainImage && (
           <section className="mt-10">
             <article className="group relative overflow-hidden rounded-3xl bg-white dark:bg-black">
-              <div className="h-[320px] w-full overflow-hidden sm:h-[380px] md:h-[450px] lg:h-[618px] max-h-[65vh]">
+              <div className="h-[320px] max-h-[65vh] w-full overflow-hidden sm:h-[380px] md:h-[450px] lg:h-[618px]">
                 <Image
                   src={featuredPost.mainImage}
                   alt={featuredPost.title}
@@ -123,14 +125,14 @@ export default async function BlogCategoryPage({
                   priority={false}
                 />
               </div>
-              <div className="pointer-events-none absolute inset-x-0 bottom-0 h-56 bg-gradient-to-t from-white/95 via-white/70 to-transparent dark:from-black/90 dark:via-black/60 sm:h-64" />
+              <div className="pointer-events-none absolute inset-x-0 bottom-0 h-56 bg-gradient-to-t from-white/95 via-white/70 to-transparent sm:h-64 dark:from-black/90 dark:via-black/60" />
               <div className="absolute inset-x-0 bottom-0 p-6 sm:p-8">
                 {featuredPost.categories?.[0] && (
                   <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
                     {featuredPost.categories[0]}
                   </div>
                 )}
-                <h2 className="mt-2 text-3xl font-semibold text-gray-900 transition group-hover:text-[var(--accent-primary)] dark:text-white dark:group-hover:text-[var(--accent-primary)] sm:text-4xl">
+                <h2 className="mt-2 text-3xl font-semibold text-gray-900 transition group-hover:text-[var(--accent-primary)] sm:text-4xl dark:text-white dark:group-hover:text-[var(--accent-primary)]">
                   {featuredPost.title}
                 </h2>
                 <div className="mt-3 flex items-center gap-3 text-sm text-gray-800 dark:text-gray-200">
@@ -157,7 +159,7 @@ export default async function BlogCategoryPage({
               <FeaturedPostCtaButton
                 href={`/blog/${featuredPost.slug.current}`}
                 label={featuredPost.title || 'Read more'}
-                className="!absolute !bottom-6 !right-6 z-10 h-11 w-11 rounded-full bg-[var(--accent-primary)] text-white opacity-0 shadow-sm transition group-hover:opacity-100 focus-visible:opacity-100 group-focus-within:opacity-100"
+                className="!absolute !right-6 !bottom-6 z-10 h-11 w-11 rounded-full bg-[var(--accent-primary)] text-white opacity-0 shadow-sm transition group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100"
               />
             </article>
           </section>
@@ -166,7 +168,7 @@ export default async function BlogCategoryPage({
           <BlogCategoryGrid posts={restPosts} />
         </div>
         {!posts.length && (
-          <p className="text-center text-gray-500 mt-10">{t('noPosts')}</p>
+          <p className="mt-10 text-center text-gray-500">{t('noPosts')}</p>
         )}
       </main>
     </DynamicGridBackground>
diff --git a/frontend/app/[locale]/blog/page.tsx b/frontend/app/[locale]/blog/page.tsx
index 06fd5486..e24a0808 100644
--- a/frontend/app/[locale]/blog/page.tsx
+++ b/frontend/app/[locale]/blog/page.tsx
@@ -1,6 +1,7 @@
 import groq from 'groq';
 import { unstable_noStore as noStore } from 'next/cache';
 import { getTranslations } from 'next-intl/server';
+
 import { client } from '@/client';
 import BlogFilters from '@/components/blog/BlogFilters';
 import { BlogPageHeader } from '@/components/blog/BlogPageHeader';
@@ -33,8 +34,7 @@ export default async function BlogPage({
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'blog' });
   const sp = searchParams ? await searchParams : undefined;
-  const authorParam =
-    typeof sp?.author === 'string' ? sp.author.trim() : '';
+  const authorParam = typeof sp?.author === 'string' ? sp.author.trim() : '';
   const hasAuthorFilter = authorParam.length > 0;
 
   const posts = await client.withConfig({ useCdn: false }).fetch(
@@ -85,7 +85,7 @@ export default async function BlogPage({
   const featuredPost = posts?.[0];
 
   return (
-    <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
+    <DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
       <main className="relative z-10 mx-auto max-w-7xl pt-6 pb-12">
         {!hasAuthorFilter && (
           <BlogPageHeader title={t('title')} subtitle={t('subtitle')} />
diff --git a/frontend/app/[locale]/dashboard/page.tsx b/frontend/app/[locale]/dashboard/page.tsx
index 1153fc2d..15fe68e9 100644
--- a/frontend/app/[locale]/dashboard/page.tsx
+++ b/frontend/app/[locale]/dashboard/page.tsx
@@ -1,14 +1,14 @@
-import { redirect } from '@/i18n/routing';
-import { Link } from '@/i18n/routing'
 import { getTranslations } from 'next-intl/server';
-import { getCurrentUser } from '@/lib/auth';
-import { getUserProfile } from '@/db/queries/users';
-import { getUserQuizStats } from '@/db/queries/quiz';
 
+import { PostAuthQuizSync } from '@/components/auth/PostAuthQuizSync';
 import { ProfileCard } from '@/components/dashboard/ProfileCard';
-import { StatsCard } from '@/components/dashboard/StatsCard';
 import { QuizSavedBanner } from '@/components/dashboard/QuizSavedBanner';
-import { PostAuthQuizSync } from "@/components/auth/PostAuthQuizSync";
+import { StatsCard } from '@/components/dashboard/StatsCard';
+import { getUserQuizStats } from '@/db/queries/quiz';
+import { getUserProfile } from '@/db/queries/users';
+import { redirect } from '@/i18n/routing';
+import { Link } from '@/i18n/routing';
+import { getCurrentUser } from '@/lib/auth';
 
 export async function generateMetadata({
   params,
@@ -24,13 +24,23 @@ export async function generateMetadata({
   };
 }
 
-export default async function DashboardPage({ params }: { params: Promise<{ locale: string }> }) {
+export default async function DashboardPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
   const session = await getCurrentUser();
   const { locale } = await params;
-  if (!session) { redirect({ href: '/login', locale }); return; }
+  if (!session) {
+    redirect({ href: '/login', locale });
+    return;
+  }
 
   const user = await getUserProfile(session.id);
-  if (!user) { redirect({ href: '/login', locale }); return; }
+  if (!user) {
+    redirect({ href: '/login', locale });
+    return;
+  }
 
   const t = await getTranslations('dashboard');
 
@@ -41,9 +51,9 @@ export default async function DashboardPage({ params }: { params: Promise<{ loca
   const averageScore =
     totalAttempts > 0
       ? Math.round(
-        attempts.reduce((acc, curr) => acc + Number(curr.percentage), 0) /
-        totalAttempts
-      )
+          attempts.reduce((acc, curr) => acc + Number(curr.percentage), 0) /
+            totalAttempts
+        )
       : 0;
 
   const lastActiveDate =
@@ -72,24 +82,24 @@ export default async function DashboardPage({ params }: { params: Promise<{ loca
     <main className="relative min-h-[calc(100vh-80px)] overflow-hidden">
       <PostAuthQuizSync />
       <div
-        className="absolute inset-0 pointer-events-none -z-10"
+        className="pointer-events-none absolute inset-0 -z-10"
         aria-hidden="true"
       >
         <div className="absolute inset-0 bg-gradient-to-b from-sky-50 via-white to-rose-50 dark:from-slate-950 dark:via-slate-950 dark:to-black" />
         <div className="absolute top-0 left-1/4 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-sky-300/20 blur-3xl dark:bg-sky-500/10" />
-        <div className="absolute bottom-0 right-0 h-[26rem] w-[26rem] rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" />
+        <div className="absolute right-0 bottom-0 h-[26rem] w-[26rem] rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" />
         <div className="absolute bottom-10 left-10 h-[20rem] w-[20rem] rounded-full bg-pink-300/20 blur-3xl dark:bg-fuchsia-500/10" />
       </div>
 
-      <div className="relative z-10 max-w-5xl mx-auto py-12 px-6">
-        <header className="flex flex-col md:flex-row md:items-center justify-between mb-12 gap-6">
+      <div className="relative z-10 mx-auto max-w-5xl px-6 py-12">
+        <header className="mb-12 flex flex-col justify-between gap-6 md:flex-row md:items-center">
           <div>
-            <h1 className="text-4xl md:text-5xl font-black tracking-tight drop-shadow-sm">
-              <span className="bg-gradient-to-r from-sky-400 via-violet-400 to-pink-400 dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500 bg-clip-text text-transparent">
+            <h1 className="text-4xl font-black tracking-tight drop-shadow-sm md:text-5xl">
+              <span className="bg-gradient-to-r from-sky-400 via-violet-400 to-pink-400 bg-clip-text text-transparent dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500">
                 {t('title')}
               </span>
             </h1>
-            <p className="mt-2 text-slate-600 dark:text-slate-400 text-lg">
+            <p className="mt-2 text-lg text-slate-600 dark:text-slate-400">
               {t('subtitle')}
             </p>
           </div>
diff --git a/frontend/app/[locale]/forgot-password/page.tsx b/frontend/app/[locale]/forgot-password/page.tsx
index 90be6e32..125d4f1d 100644
--- a/frontend/app/[locale]/forgot-password/page.tsx
+++ b/frontend/app/[locale]/forgot-password/page.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { ForgotPasswordForm } from "@/components/auth/ForgotPasswordForm";
+import { ForgotPasswordForm } from '@/components/auth/ForgotPasswordForm';
 
 export default function ForgotPasswordPage() {
-    return <ForgotPasswordForm />;
-}
\ No newline at end of file
+  return <ForgotPasswordForm />;
+}
diff --git a/frontend/app/[locale]/layout.tsx b/frontend/app/[locale]/layout.tsx
index dddb6391..cd9cafba 100644
--- a/frontend/app/[locale]/layout.tsx
+++ b/frontend/app/[locale]/layout.tsx
@@ -1,21 +1,19 @@
-import type React from 'react';
-import { Toaster } from 'sonner';
+import groq from 'groq';
+import { notFound } from 'next/navigation';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
-import { notFound } from 'next/navigation';
-import groq from 'groq';
+import type React from 'react';
+import { Toaster } from 'sonner';
 
-import { locales } from '@/i18n/config';
-import Footer from '@/components/shared/Footer';
-import { ThemeProvider } from '@/components/theme/ThemeProvider';
-import { getCurrentUser } from '@/lib/auth';
 import { client } from '@/client';
-
-import { MainSwitcher } from '@/components/header/MainSwitcher';
 import { AppChrome } from '@/components/header/AppChrome';
-
+import { MainSwitcher } from '@/components/header/MainSwitcher';
 import { CookieBanner } from '@/components/shared/CookieBanner';
+import Footer from '@/components/shared/Footer';
 import { OnlineCounterPopup } from '@/components/shared/OnlineCounterPopup';
+import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import { locales } from '@/i18n/config';
+import { getCurrentUser } from '@/lib/auth';
 
 export const dynamic = 'force-dynamic';
 
diff --git a/frontend/app/[locale]/leaderboard/page.tsx b/frontend/app/[locale]/leaderboard/page.tsx
index 2bde255c..06eccc66 100644
--- a/frontend/app/[locale]/leaderboard/page.tsx
+++ b/frontend/app/[locale]/leaderboard/page.tsx
@@ -1,7 +1,8 @@
-import { getLeaderboardData } from '@/db/queries/leaderboard';
+import { Metadata } from 'next';
+
 import LeaderboardClient from '@/components/leaderboard/LeaderboardClient';
+import { getLeaderboardData } from '@/db/queries/leaderboard';
 import { getCurrentUser } from '@/lib/auth';
-import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Leaderboard | DevLovers',
diff --git a/frontend/app/[locale]/login/page.tsx b/frontend/app/[locale]/login/page.tsx
index 0f3509c6..f8cea2ed 100644
--- a/frontend/app/[locale]/login/page.tsx
+++ b/frontend/app/[locale]/login/page.tsx
@@ -1,22 +1,16 @@
-"use client";
+'use client';
 
-import { useLocale } from "next-intl";
-import { useSearchParams } from "next/navigation";
-import { LoginForm } from "@/components/auth/LoginForm";
-import { getSafeRedirect } from "@/lib/auth/safe-redirect";
+import { useSearchParams } from 'next/navigation';
+import { useLocale } from 'next-intl';
+
+import { LoginForm } from '@/components/auth/LoginForm';
+import { getSafeRedirect } from '@/lib/auth/safe-redirect';
 
 export default function LoginPage() {
   const locale = useLocale();
   const searchParams = useSearchParams();
 
-  const returnTo = getSafeRedirect(
-    searchParams.get("returnTo")
-  );
+  const returnTo = getSafeRedirect(searchParams.get('returnTo'));
 
-  return (
-    <LoginForm
-      locale={locale}
-      returnTo={returnTo}
-    />
-  );
-}
\ No newline at end of file
+  return <LoginForm locale={locale} returnTo={returnTo} />;
+}
diff --git a/frontend/app/[locale]/page.tsx b/frontend/app/[locale]/page.tsx
index 072e55c3..06fa98a6 100644
--- a/frontend/app/[locale]/page.tsx
+++ b/frontend/app/[locale]/page.tsx
@@ -1,4 +1,5 @@
 import { getTranslations } from 'next-intl/server';
+
 import HeroSection from '@/components/home/HeroSection';
 
 export async function generateMetadata({
diff --git a/frontend/app/[locale]/privacy-policy/page.tsx b/frontend/app/[locale]/privacy-policy/page.tsx
index c717baf8..05f74f57 100644
--- a/frontend/app/[locale]/privacy-policy/page.tsx
+++ b/frontend/app/[locale]/privacy-policy/page.tsx
@@ -1,4 +1,5 @@
 import { getTranslations } from 'next-intl/server';
+
 import LegalPageShell from '@/components/legal/LegalPageShell';
 import PrivacyPolicyContent, {
   PRIVACY_LAST_UPDATED,
diff --git a/frontend/app/[locale]/q&a/page.tsx b/frontend/app/[locale]/q&a/page.tsx
index 935361cb..13f52f2c 100644
--- a/frontend/app/[locale]/q&a/page.tsx
+++ b/frontend/app/[locale]/q&a/page.tsx
@@ -1,5 +1,6 @@
-import { Suspense } from 'react';
 import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
+
 import QaSection from '@/components/q&a/QaSection';
 import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
 
@@ -26,16 +27,14 @@ export default async function QAPage({
   const t = await getTranslations({ locale, namespace: 'qa' });
 
   return (
-    <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
+    <DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
       <main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="mb-8">
-          <p className="text-sm text-[var(--accent-primary)] font-semibold">
+          <p className="text-sm font-semibold text-[var(--accent-primary)]">
             {t('pretitle')}
           </p>
           <h1 className="text-3xl font-bold">{t('title')}</h1>
-          <p className="text-gray-600 dark:text-gray-400">
-            {t('subtitle')}
-          </p>
+          <p className="text-gray-600 dark:text-gray-400">{t('subtitle')}</p>
         </div>
         <Suspense fallback={<>...</>}>
           <QaSection />
diff --git a/frontend/app/[locale]/quiz/[slug]/page.tsx b/frontend/app/[locale]/quiz/[slug]/page.tsx
index 87f32baf..9a782034 100644
--- a/frontend/app/[locale]/quiz/[slug]/page.tsx
+++ b/frontend/app/[locale]/quiz/[slug]/page.tsx
@@ -1,19 +1,22 @@
-import { createEncryptedAnswersBlob } from '@/lib/quiz/quiz-crypto';
-import { stripCorrectAnswers } from '@/db/queries/quiz';
-import { getQuizBySlug, getQuizQuestionsRandomized } from '@/db/queries/quiz';
 import { notFound } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
-import { QuizContainer } from '@/components/quiz/QuizContainer';
-import { PendingResultHandler } from '@/components/quiz/PendingResultHandler';
 
+import { PendingResultHandler } from '@/components/quiz/PendingResultHandler';
+import { QuizContainer } from '@/components/quiz/QuizContainer';
+import { stripCorrectAnswers } from '@/db/queries/quiz';
+import { getQuizBySlug, getQuizQuestionsRandomized } from '@/db/queries/quiz';
 import { getCurrentUser } from '@/lib/auth';
+import { createEncryptedAnswersBlob } from '@/lib/quiz/quiz-crypto';
 
 interface QuizPageProps {
   params: Promise<{ locale: string; slug: string }>;
-  searchParams: Promise<{seed?: string}>;
+  searchParams: Promise<{ seed?: string }>;
 }
 
-export default async function QuizPage({ params, searchParams }: QuizPageProps) {
+export default async function QuizPage({
+  params,
+  searchParams,
+}: QuizPageProps) {
   const { locale, slug } = await params;
   const t = await getTranslations({ locale, namespace: 'quiz.page' });
   const { seed: seedParam } = await searchParams;
@@ -34,7 +37,7 @@ export default async function QuizPage({ params, searchParams }: QuizPageProps)
 
   if (!questions.length) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
+      <div className="flex min-h-screen items-center justify-center">
         <p className="text-gray-600">{t('noQuestions')}</p>
       </div>
     );
@@ -42,9 +45,9 @@ export default async function QuizPage({ params, searchParams }: QuizPageProps)
 
   return (
     <div className="min-h-screen bg-white dark:bg-black">
-      <div className="max-w-3xl mx-auto px-4 py-8">
+      <div className="mx-auto max-w-3xl px-4 py-8">
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+          <h1 className="mb-2 text-3xl font-bold text-gray-900 dark:text-gray-100">
             {quiz.title}
           </h1>
           {quiz.description && (
@@ -53,9 +56,15 @@ export default async function QuizPage({ params, searchParams }: QuizPageProps)
             </p>
           )}
           <div className="mt-4 flex gap-4 text-sm text-gray-500">
-            <span>{t('questionsLabel')}: {quiz.questionsCount}</span>
             <span>
-              {t('timeLabel')}: {Math.floor((quiz.timeLimitSeconds ?? questions.length * 30) / 60)} {t('minutes')}
+              {t('questionsLabel')}: {quiz.questionsCount}
+            </span>
+            <span>
+              {t('timeLabel')}:{' '}
+              {Math.floor(
+                (quiz.timeLimitSeconds ?? questions.length * 30) / 60
+              )}{' '}
+              {t('minutes')}
             </span>
           </div>
         </div>
@@ -68,7 +77,7 @@ export default async function QuizPage({ params, searchParams }: QuizPageProps)
           userId={user?.id ?? null}
           timeLimitSeconds={quiz.timeLimitSeconds ?? questions.length * 30}
           seed={seed}
-          categorySlug={quiz.categorySlug} 
+          categorySlug={quiz.categorySlug}
         />
         {user && <PendingResultHandler userId={user.id} />}
       </div>
diff --git a/frontend/app/[locale]/quizzes/page.tsx b/frontend/app/[locale]/quizzes/page.tsx
index a060320b..e3ae9850 100644
--- a/frontend/app/[locale]/quizzes/page.tsx
+++ b/frontend/app/[locale]/quizzes/page.tsx
@@ -1,8 +1,9 @@
-import { getActiveQuizzes, getUserQuizzesProgress } from '@/db/queries/quiz';
-import { getCurrentUser } from '@/lib/auth';
 import { getTranslations } from 'next-intl/server';
+
 import QuizzesSection from '@/components/quiz/QuizzesSection';
 import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
+import { getActiveQuizzes, getUserQuizzesProgress } from '@/db/queries/quiz';
+import { getCurrentUser } from '@/lib/auth';
 
 type PageProps = { params: Promise<{ locale: string }> };
 
@@ -24,30 +25,26 @@ export default async function QuizzesPage({ params }: PageProps) {
 
   if (!quizzes.length) {
     return (
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:px-8">
-        <h1 className="text-3xl font-bold mb-4">{t('title')}</h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          {t('noQuizzes')}
-        </p>
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+        <h1 className="mb-4 text-3xl font-bold">{t('title')}</h1>
+        <p className="text-gray-600 dark:text-gray-400">{t('noQuizzes')}</p>
       </div>
     );
   }
 
   return (
-    <DynamicGridBackground className="min-h-screen bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
-  <main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-      <div className="mb-8">
-        <p className="text-sm text-[var(--accent-primary)] font-semibold">
-          {t('practice')}
-        </p>
-        <h1 className="text-3xl font-bold">{t('title')}</h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          {t('subtitle')}
-        </p>
-      </div>
-
-      <QuizzesSection quizzes={quizzes} userProgressMap={userProgressMap} />
-    </main>
-</DynamicGridBackground>
+    <DynamicGridBackground className="min-h-screen bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
+      <main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-8">
+          <p className="text-sm font-semibold text-[var(--accent-primary)]">
+            {t('practice')}
+          </p>
+          <h1 className="text-3xl font-bold">{t('title')}</h1>
+          <p className="text-gray-600 dark:text-gray-400">{t('subtitle')}</p>
+        </div>
+
+        <QuizzesSection quizzes={quizzes} userProgressMap={userProgressMap} />
+      </main>
+    </DynamicGridBackground>
   );
 }
diff --git a/frontend/app/[locale]/reset-password/page.tsx b/frontend/app/[locale]/reset-password/page.tsx
index a9cfbb79..068942ed 100644
--- a/frontend/app/[locale]/reset-password/page.tsx
+++ b/frontend/app/[locale]/reset-password/page.tsx
@@ -1,11 +1,12 @@
-"use client";
+'use client';
 
-import { useSearchParams } from "next/navigation";
-import { ResetPasswordForm } from "@/components/auth/ResetPasswordForm";
+import { useSearchParams } from 'next/navigation';
+
+import { ResetPasswordForm } from '@/components/auth/ResetPasswordForm';
 
 export default function ResetPasswordPage() {
-    const searchParams = useSearchParams();
-    const token = searchParams.get("token") ?? "";
+  const searchParams = useSearchParams();
+  const token = searchParams.get('token') ?? '';
 
-    return <ResetPasswordForm token={token} />;
-}
\ No newline at end of file
+  return <ResetPasswordForm token={token} />;
+}
diff --git a/frontend/app/[locale]/shop/admin/orders/[id]/RefundButton.tsx b/frontend/app/[locale]/shop/admin/orders/[id]/RefundButton.tsx
index 1f00101b..52cfe22a 100644
--- a/frontend/app/[locale]/shop/admin/orders/[id]/RefundButton.tsx
+++ b/frontend/app/[locale]/shop/admin/orders/[id]/RefundButton.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { useId, useState, useTransition } from 'react';
 import { useTranslations } from 'next-intl';
+import { useId, useState, useTransition } from 'react';
 
 type Props = {
   orderId: string;
@@ -60,14 +60,14 @@ export function RefundButton({ orderId, disabled }: Props) {
         disabled={isDisabled}
         aria-busy={isPending}
         aria-describedby={error ? errorId : undefined}
-        className="rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50"
+        className="border-border text-foreground hover:bg-secondary rounded-md border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
         title={disabled ? t('onlyForPaid') : undefined}
       >
         {isPending ? t('refunding') : t('refund')}
       </button>
 
       {error ? (
-        <span id={errorId} role="alert" className="text-xs text-destructive">
+        <span id={errorId} role="alert" className="text-destructive text-xs">
           {error}
         </span>
       ) : null}
diff --git a/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx b/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx
index 1ff25652..c64f58d5 100644
--- a/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx
+++ b/frontend/app/[locale]/shop/admin/orders/[id]/page.tsx
@@ -1,18 +1,18 @@
+import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
-import { Link } from '@/i18n/routing';
-import { RefundButton } from './RefundButton';
-
+import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
 import { getAdminOrderDetail } from '@/db/queries/shop/admin-orders';
+import { Link } from '@/i18n/routing';
+import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
 import {
+  type CurrencyCode,
   formatMoney,
   resolveCurrencyFromLocale,
-  type CurrencyCode,
 } from '@/lib/shop/currency';
 import { fromDbMoney } from '@/lib/shop/money';
-import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
-import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
-import { Metadata } from 'next';
+
+import { RefundButton } from './RefundButton';
 
 export const metadata: Metadata = {
   title: 'Admin Order | DevLovers',
@@ -76,10 +76,10 @@ export default async function AdminOrderDetailPage({
       >
         <header className="flex items-start justify-between gap-4">
           <div className="min-w-0">
-            <h1 id="order-title" className="text-2xl font-bold text-foreground">
+            <h1 id="order-title" className="text-foreground text-2xl font-bold">
               Order
             </h1>
-            <p className="mt-1 font-mono text-xs text-muted-foreground break-all">
+            <p className="text-muted-foreground mt-1 font-mono text-xs break-all">
               {order.id}
             </p>
           </div>
@@ -87,7 +87,7 @@ export default async function AdminOrderDetailPage({
           <div className="flex shrink-0 flex-wrap items-center gap-2">
             <Link
               href="/shop/admin/orders"
-              className="rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
+              className="border-border text-foreground hover:bg-secondary rounded-md border px-3 py-1.5 text-sm font-medium transition-colors"
             >
               Back
             </Link>
@@ -101,12 +101,12 @@ export default async function AdminOrderDetailPage({
           aria-label="Order details"
         >
           <article
-            className="rounded-lg border border-border p-4"
+            className="border-border rounded-lg border p-4"
             aria-labelledby="summary-title"
           >
             <h2
               id="summary-title"
-              className="text-sm font-semibold text-foreground"
+              className="text-foreground text-sm font-semibold"
             >
               Summary
             </h2>
@@ -129,14 +129,14 @@ export default async function AdminOrderDetailPage({
 
               <div className="flex justify-between gap-4">
                 <dt className="text-muted-foreground">Payment intent</dt>
-                <dd className="font-mono text-xs text-muted-foreground break-all">
+                <dd className="text-muted-foreground font-mono text-xs break-all">
                   {order.paymentIntentId ?? '-'}
                 </dd>
               </div>
 
               <div className="flex justify-between gap-4">
                 <dt className="text-muted-foreground">Idempotency key</dt>
-                <dd className="font-mono text-xs text-muted-foreground break-all">
+                <dd className="text-muted-foreground font-mono text-xs break-all">
                   {order.idempotencyKey}
                 </dd>
               </div>
@@ -144,12 +144,12 @@ export default async function AdminOrderDetailPage({
           </article>
 
           <article
-            className="rounded-lg border border-border p-4"
+            className="border-border rounded-lg border p-4"
             aria-labelledby="stock-title"
           >
             <h2
               id="stock-title"
-              className="text-sm font-semibold text-foreground"
+              className="text-foreground text-sm font-semibold"
             >
               Stock / timestamps
             </h2>
@@ -191,40 +191,40 @@ export default async function AdminOrderDetailPage({
             Order items
           </h2>
 
-          <div className="overflow-x-auto rounded-lg border border-border">
-            <table className="min-w-full divide-y divide-border text-sm">
+          <div className="border-border overflow-x-auto rounded-lg border">
+            <table className="divide-border min-w-full divide-y text-sm">
               <caption className="sr-only">Line items for this order</caption>
 
               <thead className="bg-muted/50">
                 <tr>
                   <th
                     scope="col"
-                    className="px-3 py-2 text-left font-semibold text-foreground"
+                    className="text-foreground px-3 py-2 text-left font-semibold"
                   >
                     Product
                   </th>
                   <th
                     scope="col"
-                    className="px-3 py-2 text-left font-semibold text-foreground"
+                    className="text-foreground px-3 py-2 text-left font-semibold"
                   >
                     Qty
                   </th>
                   <th
                     scope="col"
-                    className="px-3 py-2 text-left font-semibold text-foreground"
+                    className="text-foreground px-3 py-2 text-left font-semibold"
                   >
                     Unit
                   </th>
                   <th
                     scope="col"
-                    className="px-3 py-2 text-left font-semibold text-foreground"
+                    className="text-foreground px-3 py-2 text-left font-semibold"
                   >
                     Line total
                   </th>
                 </tr>
               </thead>
 
-              <tbody className="divide-y divide-border">
+              <tbody className="divide-border divide-y">
                 {order.items.map(item => {
                   const unitMinor = pickMinor(
                     item.unitPriceMinor,
@@ -248,10 +248,10 @@ export default async function AdminOrderDetailPage({
                   return (
                     <tr key={item.id} className="hover:bg-muted/50">
                       <td className="px-3 py-2">
-                        <div className="font-medium text-foreground">
+                        <div className="text-foreground font-medium">
                           {item.productTitle ?? '-'}
                         </div>
-                        <div className="text-xs text-muted-foreground">
+                        <div className="text-muted-foreground text-xs">
                           <span className="font-mono">
                             {item.productSlug ?? '-'}
                           </span>
@@ -261,15 +261,15 @@ export default async function AdminOrderDetailPage({
                         </div>
                       </td>
 
-                      <td className="px-3 py-2 text-muted-foreground">
+                      <td className="text-muted-foreground px-3 py-2">
                         {item.quantity}
                       </td>
 
-                      <td className="px-3 py-2 text-foreground">
+                      <td className="text-foreground px-3 py-2">
                         {unitFormatted}
                       </td>
 
-                      <td className="px-3 py-2 text-foreground">
+                      <td className="text-foreground px-3 py-2">
                         {lineFormatted}
                       </td>
                     </tr>
@@ -278,7 +278,7 @@ export default async function AdminOrderDetailPage({
 
                 {order.items.length === 0 ? (
                   <tr>
-                    <td className="px-3 py-6 text-muted-foreground" colSpan={4}>
+                    <td className="text-muted-foreground px-3 py-6" colSpan={4}>
                       No items found for this order.
                     </td>
                   </tr>
diff --git a/frontend/app/[locale]/shop/admin/orders/page.tsx b/frontend/app/[locale]/shop/admin/orders/page.tsx
index 8d6f4e9c..2ba4a570 100644
--- a/frontend/app/[locale]/shop/admin/orders/page.tsx
+++ b/frontend/app/[locale]/shop/admin/orders/page.tsx
@@ -1,19 +1,19 @@
-import { Link } from '@/i18n/routing';
+import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
 
+import { AdminPagination } from '@/components/shop/admin/AdminPagination';
+import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
 import { getAdminOrdersPage } from '@/db/queries/shop/admin-orders';
+import { Link } from '@/i18n/routing';
+import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
+import { parsePage } from '@/lib/pagination';
+import { CSRF_FORM_FIELD, issueCsrfToken } from '@/lib/security/csrf';
 import {
+  type CurrencyCode,
   formatMoney,
   resolveCurrencyFromLocale,
-  type CurrencyCode,
 } from '@/lib/shop/currency';
 import { fromDbMoney } from '@/lib/shop/money';
-import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
-import { AdminPagination } from '@/components/shop/admin/AdminPagination';
-import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
-import { CSRF_FORM_FIELD, issueCsrfToken } from '@/lib/security/csrf';
-import { parsePage } from '@/lib/pagination';
-import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Admin Orders | DevLovers',
@@ -96,7 +96,7 @@ export default async function AdminOrdersPage({
         <header className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
           <h1
             id="admin-orders-title"
-            className="text-2xl font-bold text-foreground"
+            className="text-foreground text-2xl font-bold"
           >
             {t('title')}
           </h1>
@@ -105,7 +105,7 @@ export default async function AdminOrdersPage({
             <input type="hidden" name={CSRF_FORM_FIELD} value={csrfToken} />
             <button
               type="submit"
-              className="inline-flex w-full items-center justify-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary sm:w-auto"
+              className="border-border text-foreground hover:bg-secondary inline-flex w-full items-center justify-center rounded-md border px-3 py-1.5 text-sm font-medium transition-colors sm:w-auto"
             >
               {t('reconcileStale')}
             </button>
@@ -116,7 +116,7 @@ export default async function AdminOrdersPage({
           {/* Mobile cards */}
           <div className="md:hidden">
             {viewModels.length === 0 ? (
-              <div className="rounded-md border border-border p-4 text-sm text-muted-foreground">
+              <div className="border-border text-muted-foreground rounded-md border p-4 text-sm">
                 {t('empty')}
               </div>
             ) : (
@@ -124,21 +124,21 @@ export default async function AdminOrdersPage({
                 {viewModels.map(vm => (
                   <li
                     key={vm.id}
-                    className="rounded-lg border border-border bg-background p-4"
+                    className="border-border bg-background rounded-lg border p-4"
                   >
                     <div className="flex items-start justify-between gap-3">
                       <div className="min-w-0">
-                        <div className="text-xs text-muted-foreground">
+                        <div className="text-muted-foreground text-xs">
                           {vm.createdAt}
                         </div>
                         <div className="mt-1">
-                          <span className="inline-flex rounded-full bg-muted px-2 py-1 text-xs font-medium text-foreground">
+                          <span className="bg-muted text-foreground inline-flex rounded-full px-2 py-1 text-xs font-medium">
                             {vm.paymentStatus}
                           </span>
                         </div>
                       </div>
 
-                      <div className="shrink-0 whitespace-nowrap text-right text-sm font-medium text-foreground">
+                      <div className="text-foreground shrink-0 text-right text-sm font-medium whitespace-nowrap">
                         {vm.totalFormatted}
                       </div>
                     </div>
@@ -156,7 +156,7 @@ export default async function AdminOrdersPage({
                           {t('table.provider')}
                         </dt>
                         <dd
-                          className="truncate text-foreground"
+                          className="text-foreground truncate"
                           title={vm.paymentProvider}
                         >
                           {vm.paymentProvider}
@@ -168,7 +168,7 @@ export default async function AdminOrdersPage({
                           {t('table.orderId')}
                         </dt>
                         <dd
-                          className="break-all font-mono text-[11px] text-muted-foreground"
+                          className="text-muted-foreground font-mono text-[11px] break-all"
                           title={vm.id}
                         >
                           {vm.id}
@@ -179,7 +179,7 @@ export default async function AdminOrdersPage({
                     <div className="mt-3">
                       <Link
                         href={vm.viewHref}
-                        className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+                        className="border-border text-foreground hover:bg-secondary inline-flex items-center justify-center rounded-md border px-2 py-1 text-xs font-medium transition-colors"
                         aria-label={vm.viewAriaLabel}
                       >
                         {t('actions.view')}
@@ -194,61 +194,61 @@ export default async function AdminOrdersPage({
           {/* Desktop table */}
           <div className="hidden md:block">
             <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-border text-sm">
+              <table className="divide-border min-w-full divide-y text-sm">
                 <caption className="sr-only">{t('listCaption')}</caption>
 
                 <thead className="bg-muted/50">
                   <tr>
                     <th
                       scope="col"
-                      className="px-3 py-2 text-left font-semibold text-foreground"
+                      className="text-foreground px-3 py-2 text-left font-semibold"
                     >
                       {t('table.created')}
                     </th>
                     <th
                       scope="col"
-                      className="px-3 py-2 text-left font-semibold text-foreground"
+                      className="text-foreground px-3 py-2 text-left font-semibold"
                     >
                       {t('table.status')}
                     </th>
                     <th
                       scope="col"
-                      className="px-3 py-2 text-left font-semibold text-foreground"
+                      className="text-foreground px-3 py-2 text-left font-semibold"
                     >
                       {t('table.total')}
                     </th>
                     <th
                       scope="col"
-                      className="px-3 py-2 text-left font-semibold text-foreground"
+                      className="text-foreground px-3 py-2 text-left font-semibold"
                     >
                       {t('table.items')}
                     </th>
                     <th
                       scope="col"
-                      className="px-3 py-2 text-left font-semibold text-foreground"
+                      className="text-foreground px-3 py-2 text-left font-semibold"
                     >
                       {t('table.provider')}
                     </th>
                     <th
                       scope="col"
-                      className="px-3 py-2 text-left font-semibold text-foreground"
+                      className="text-foreground px-3 py-2 text-left font-semibold"
                     >
                       {t('table.orderId')}
                     </th>
                     <th
                       scope="col"
-                      className="px-3 py-2 text-left font-semibold text-foreground"
+                      className="text-foreground px-3 py-2 text-left font-semibold"
                     >
                       {t('table.actions')}
                     </th>
                   </tr>
                 </thead>
 
-                <tbody className="divide-y divide-border">
+                <tbody className="divide-border divide-y">
                   {viewModels.length === 0 ? (
                     <tr>
                       <td
-                        className="px-3 py-6 text-muted-foreground"
+                        className="text-muted-foreground px-3 py-6"
                         colSpan={7}
                       >
                         {t('empty')}
@@ -257,36 +257,36 @@ export default async function AdminOrdersPage({
                   ) : (
                     viewModels.map(vm => (
                       <tr key={vm.id} className="hover:bg-muted/50">
-                        <td className="px-3 py-2 text-muted-foreground whitespace-nowrap">
+                        <td className="text-muted-foreground px-3 py-2 whitespace-nowrap">
                           {vm.createdAt}
                         </td>
 
                         <td className="px-3 py-2 whitespace-nowrap">
-                          <span className="inline-flex rounded-full bg-muted px-2 py-1 text-xs font-medium text-foreground">
+                          <span className="bg-muted text-foreground inline-flex rounded-full px-2 py-1 text-xs font-medium">
                             {vm.paymentStatus}
                           </span>
                         </td>
 
-                        <td className="px-3 py-2 text-foreground whitespace-nowrap">
+                        <td className="text-foreground px-3 py-2 whitespace-nowrap">
                           {vm.totalFormatted}
                         </td>
 
-                        <td className="px-3 py-2 text-muted-foreground whitespace-nowrap">
+                        <td className="text-muted-foreground px-3 py-2 whitespace-nowrap">
                           {vm.itemCount}
                         </td>
 
-                        <td className="px-3 py-2 text-muted-foreground whitespace-nowrap">
+                        <td className="text-muted-foreground px-3 py-2 whitespace-nowrap">
                           {vm.paymentProvider}
                         </td>
 
-                        <td className="px-3 py-2 font-mono text-xs text-muted-foreground break-all">
+                        <td className="text-muted-foreground px-3 py-2 font-mono text-xs break-all">
                           {vm.id}
                         </td>
 
                         <td className="px-3 py-2 whitespace-nowrap">
                           <Link
                             href={vm.viewHref}
-                            className="rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+                            className="border-border text-foreground hover:bg-secondary rounded-md border px-2 py-1 text-xs font-medium transition-colors"
                             aria-label={vm.viewAriaLabel}
                           >
                             {t('actions.view')}
diff --git a/frontend/app/[locale]/shop/admin/page.tsx b/frontend/app/[locale]/shop/admin/page.tsx
index 31f1320c..4b02af21 100644
--- a/frontend/app/[locale]/shop/admin/page.tsx
+++ b/frontend/app/[locale]/shop/admin/page.tsx
@@ -1,9 +1,9 @@
-import { Link } from '@/i18n/routing';
+import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
 
 import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
+import { Link } from '@/i18n/routing';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
-import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Shop Admin | DevLovers',
@@ -27,11 +27,11 @@ export default async function ShopAdminHomePage() {
         <header>
           <h1
             id="shop-admin-title"
-            className="text-2xl font-bold text-foreground"
+            className="text-foreground text-2xl font-bold"
           >
             {t('title')}
           </h1>
-          <p className="mt-2 text-sm text-muted-foreground">
+          <p className="text-muted-foreground mt-2 text-sm">
             {t('description')}
           </p>
         </header>
@@ -41,12 +41,12 @@ export default async function ShopAdminHomePage() {
             <li>
               <Link
                 href="/shop/admin/products"
-                className="block rounded-lg border border-border p-4 transition-colors hover:bg-muted/50"
+                className="border-border hover:bg-muted/50 block rounded-lg border p-4 transition-colors"
               >
-                <div className="text-base font-semibold text-foreground">
+                <div className="text-foreground text-base font-semibold">
                   {t('productsSection.title')}
                 </div>
-                <div className="mt-1 text-sm text-muted-foreground">
+                <div className="text-muted-foreground mt-1 text-sm">
                   {t('productsSection.description')}
                 </div>
               </Link>
@@ -55,12 +55,12 @@ export default async function ShopAdminHomePage() {
             <li>
               <Link
                 href="/shop/admin/orders"
-                className="block rounded-lg border border-border p-4 transition-colors hover:bg-muted/50"
+                className="border-border hover:bg-muted/50 block rounded-lg border p-4 transition-colors"
               >
-                <div className="text-base font-semibold text-foreground">
+                <div className="text-foreground text-base font-semibold">
                   {t('ordersSection.title')}
                 </div>
-                <div className="mt-1 text-sm text-muted-foreground">
+                <div className="text-muted-foreground mt-1 text-sm">
                   {t('ordersSection.description')}
                 </div>
               </Link>
diff --git a/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx b/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
index 12994503..4ee06864 100644
--- a/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
@@ -1,24 +1,23 @@
-import { notFound } from 'next/navigation';
 import { eq } from 'drizzle-orm';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
 import { z } from 'zod';
 
-import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
 import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
-
-import { ProductForm } from '../../_components/ProductForm';
 import { db } from '@/db';
-import { products, productPrices } from '@/db/schema';
+import { productPrices,products } from '@/db/schema';
+import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
+import { issueCsrfToken } from '@/lib/security/csrf';
 import type { CurrencyCode } from '@/lib/shop/currency';
 import { currencyValues } from '@/lib/shop/currency';
-import { issueCsrfToken } from '@/lib/security/csrf';
-import { Metadata } from 'next';
+
+import { ProductForm } from '../../_components/ProductForm';
 
 export const metadata: Metadata = {
   title: 'Edit Product | DevLovers',
   description: 'Edit an existing product in the DevLovers shop catalog.',
 };
 
-
 export const dynamic = 'force-dynamic';
 
 const paramsSchema = z.object({ id: z.string().uuid() });
diff --git a/frontend/app/[locale]/shop/admin/products/_components/ProductForm.tsx b/frontend/app/[locale]/shop/admin/products/_components/ProductForm.tsx
index 050dcdc1..6f413ac4 100644
--- a/frontend/app/[locale]/shop/admin/products/_components/ProductForm.tsx
+++ b/frontend/app/[locale]/shop/admin/products/_components/ProductForm.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { CATEGORIES, COLORS, PRODUCT_TYPES, SIZES } from '@/lib/config/catalog';
-import type { ProductAdminInput } from '@/lib/validation/shop';
 import { logError } from '@/lib/logging';
+import type { ProductAdminInput } from '@/lib/validation/shop';
 
 const localSlugify = (input: string): string => {
   return input
@@ -460,7 +460,7 @@ export function ProductForm({
       aria-labelledby={headingId}
     >
       <header>
-        <h1 id={headingId} className="text-2xl font-bold text-foreground">
+        <h1 id={headingId} className="text-foreground text-2xl font-bold">
           {mode === 'create' ? 'Create new product' : 'Edit product'}
         </h1>
       </header>
@@ -485,7 +485,7 @@ export function ProductForm({
         <section className="grid gap-4 sm:grid-cols-2" aria-label="Basic info">
           <div>
             <label
-              className="block text-sm font-medium text-foreground"
+              className="text-foreground block text-sm font-medium"
               htmlFor="title"
             >
               Title
@@ -493,7 +493,7 @@ export function ProductForm({
             <input
               id="title"
               name="title"
-              className="w-full rounded-md border border-border px-3 py-2 text-sm"
+              className="border-border w-full rounded-md border px-3 py-2 text-sm"
               type="text"
               value={title}
               onChange={event => setTitle(event.target.value)}
@@ -504,19 +504,19 @@ export function ProductForm({
           <div>
             <div className="flex items-center justify-between">
               <label
-                className="block text-sm font-medium text-foreground"
+                className="text-foreground block text-sm font-medium"
                 htmlFor="slug"
               >
                 Slug
               </label>
-              <span id={slugHelpId} className="text-xs text-muted-foreground">
+              <span id={slugHelpId} className="text-muted-foreground text-xs">
                 Auto-generated from title
               </span>
             </div>
             <input
               id="slug"
               name="slug"
-              className="w-full rounded-md border border-border bg-muted px-3 py-2 text-sm"
+              className="border-border bg-muted w-full rounded-md border px-3 py-2 text-sm"
               type="text"
               value={slugValue}
               readOnly
@@ -536,20 +536,20 @@ export function ProductForm({
           </div>
         </section>
 
-        <fieldset className="rounded-md border border-border p-3">
-          <legend className="px-1 text-sm font-semibold text-foreground">
+        <fieldset className="border-border rounded-md border p-3">
+          <legend className="text-foreground px-1 text-sm font-semibold">
             Prices
           </legend>
 
           <div className="mt-3 grid gap-4 sm:grid-cols-2">
             <fieldset className="space-y-2">
-              <legend className="text-xs font-medium text-muted-foreground">
+              <legend className="text-muted-foreground text-xs font-medium">
                 USD (required)
               </legend>
 
               <div>
                 <label
-                  className="block text-sm font-medium text-foreground"
+                  className="text-foreground block text-sm font-medium"
                   htmlFor="price-usd"
                 >
                   Price (USD)
@@ -557,7 +557,7 @@ export function ProductForm({
                 <input
                   id="price-usd"
                   name="price-usd"
-                  className="w-full rounded-md border border-border px-3 py-2 text-sm"
+                  className="border-border w-full rounded-md border px-3 py-2 text-sm"
                   type="text"
                   inputMode="decimal"
                   placeholder="59.00"
@@ -569,7 +569,7 @@ export function ProductForm({
 
               <div>
                 <label
-                  className="block text-sm font-medium text-foreground"
+                  className="text-foreground block text-sm font-medium"
                   htmlFor="original-usd"
                 >
                   Original price (USD)
@@ -605,13 +605,13 @@ export function ProductForm({
             </fieldset>
 
             <fieldset className="space-y-2">
-              <legend className="text-xs font-medium text-muted-foreground">
+              <legend className="text-muted-foreground text-xs font-medium">
                 UAH (optional)
               </legend>
 
               <div>
                 <label
-                  className="block text-sm font-medium text-foreground"
+                  className="text-foreground block text-sm font-medium"
                   htmlFor="price-uah"
                 >
                   Price (UAH)
@@ -619,7 +619,7 @@ export function ProductForm({
                 <input
                   id="price-uah"
                   name="price-uah"
-                  className="w-full rounded-md border border-border px-3 py-2 text-sm"
+                  className="border-border w-full rounded-md border px-3 py-2 text-sm"
                   type="text"
                   inputMode="decimal"
                   placeholder="1999.00"
@@ -630,7 +630,7 @@ export function ProductForm({
 
               <div>
                 <label
-                  className="block text-sm font-medium text-foreground"
+                  className="text-foreground block text-sm font-medium"
                   htmlFor="original-uah"
                 >
                   Original price (UAH)
@@ -666,7 +666,7 @@ export function ProductForm({
             </fieldset>
           </div>
 
-          <p className="mt-3 text-xs text-muted-foreground">
+          <p className="text-muted-foreground mt-3 text-xs">
             Checkout currency is server-selected by locale. Prices must exist in{' '}
             <span className="font-mono">product_prices</span> for that currency,
             or checkout fails.
@@ -679,7 +679,7 @@ export function ProductForm({
         >
           <div>
             <label
-              className="block text-sm font-medium text-foreground"
+              className="text-foreground block text-sm font-medium"
               htmlFor="stock"
             >
               Stock
@@ -687,7 +687,7 @@ export function ProductForm({
             <input
               id="stock"
               name="stock"
-              className="w-full rounded-md border border-border px-3 py-2 text-sm"
+              className="border-border w-full rounded-md border px-3 py-2 text-sm"
               type="number"
               value={stock}
               onChange={event => setStock(event.target.value)}
@@ -698,7 +698,7 @@ export function ProductForm({
 
           <div>
             <label
-              className="block text-sm font-medium text-foreground"
+              className="text-foreground block text-sm font-medium"
               htmlFor="sku"
             >
               SKU
@@ -706,7 +706,7 @@ export function ProductForm({
             <input
               id="sku"
               name="sku"
-              className="w-full rounded-md border border-border px-3 py-2 text-sm"
+              className="border-border w-full rounded-md border px-3 py-2 text-sm"
               type="text"
               value={sku}
               onChange={event => setSku(event.target.value)}
@@ -720,7 +720,7 @@ export function ProductForm({
         >
           <div>
             <label
-              className="block text-sm font-medium text-foreground"
+              className="text-foreground block text-sm font-medium"
               htmlFor="category"
             >
               Category
@@ -728,7 +728,7 @@ export function ProductForm({
             <select
               id="category"
               name="category"
-              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
+              className="border-border bg-background text-foreground focus:ring-accent w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
               value={category}
               onChange={event => setCategory(event.target.value)}
             >
@@ -745,7 +745,7 @@ export function ProductForm({
 
           <div>
             <label
-              className="block text-sm font-medium text-foreground"
+              className="text-foreground block text-sm font-medium"
               htmlFor="type"
             >
               Type
@@ -753,7 +753,7 @@ export function ProductForm({
             <select
               id="type"
               name="type"
-              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
+              className="border-border bg-background text-foreground focus:ring-accent w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
               value={type}
               onChange={event => setType(event.target.value)}
             >
@@ -769,14 +769,14 @@ export function ProductForm({
 
         <section className="grid gap-4 sm:grid-cols-2" aria-label="Variants">
           <fieldset>
-            <legend className="block text-sm font-medium text-foreground">
+            <legend className="text-foreground block text-sm font-medium">
               Colors
             </legend>
-            <div className="mt-2 flex flex-col gap-2 rounded-md border border-border px-3 py-2">
+            <div className="border-border mt-2 flex flex-col gap-2 rounded-md border px-3 py-2">
               {COLORS.map(color => (
                 <label
                   key={color.slug}
-                  className="flex items-center gap-2 text-sm text-foreground"
+                  className="text-foreground flex items-center gap-2 text-sm"
                 >
                   <input
                     type="checkbox"
@@ -801,14 +801,14 @@ export function ProductForm({
           </fieldset>
 
           <fieldset>
-            <legend className="block text-sm font-medium text-foreground">
+            <legend className="text-foreground block text-sm font-medium">
               Sizes
             </legend>
-            <div className="mt-2 flex flex-col gap-2 rounded-md border border-border px-3 py-2">
+            <div className="border-border mt-2 flex flex-col gap-2 rounded-md border px-3 py-2">
               {SIZES.map(size => (
                 <label
                   key={size}
-                  className="flex items-center gap-2 text-sm text-foreground"
+                  className="text-foreground flex items-center gap-2 text-sm"
                 >
                   <input
                     type="checkbox"
@@ -837,7 +837,7 @@ export function ProductForm({
         >
           <div>
             <label
-              className="block text-sm font-medium text-foreground"
+              className="text-foreground block text-sm font-medium"
               htmlFor="badge"
             >
               Badge
@@ -845,7 +845,7 @@ export function ProductForm({
             <select
               id="badge"
               name="badge"
-              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
+              className="border-border bg-background text-foreground focus:ring-accent w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
               value={badge}
               onChange={event => {
                 const next = event.target.value as ProductAdminInput['badge'];
@@ -870,10 +870,10 @@ export function ProductForm({
                 type="checkbox"
                 checked={isActive}
                 onChange={event => setIsActive(event.target.checked)}
-                className="h-4 w-4 rounded border-border text-accent focus:ring-accent"
+                className="border-border text-accent focus:ring-accent h-4 w-4 rounded"
               />
               <label
-                className="text-sm font-medium text-foreground"
+                className="text-foreground text-sm font-medium"
                 htmlFor="isActive"
               >
                 Is Active
@@ -887,10 +887,10 @@ export function ProductForm({
                 type="checkbox"
                 checked={isFeatured}
                 onChange={event => setIsFeatured(event.target.checked)}
-                className="h-4 w-4 rounded border-border text-accent focus:ring-accent"
+                className="border-border text-accent focus:ring-accent h-4 w-4 rounded"
               />
               <label
-                className="text-sm font-medium text-foreground"
+                className="text-foreground text-sm font-medium"
                 htmlFor="isFeatured"
               >
                 Is Featured
@@ -901,7 +901,7 @@ export function ProductForm({
 
         <section aria-label="Description">
           <label
-            className="block text-sm font-medium text-foreground"
+            className="text-foreground block text-sm font-medium"
             htmlFor="description"
           >
             Description
@@ -909,7 +909,7 @@ export function ProductForm({
           <textarea
             id="description"
             name="description"
-            className="w-full rounded-md border border-border px-3 py-2 text-sm"
+            className="border-border w-full rounded-md border px-3 py-2 text-sm"
             rows={4}
             value={description}
             onChange={event => setDescription(event.target.value)}
@@ -918,7 +918,7 @@ export function ProductForm({
 
         <section aria-label="Image upload">
           <label
-            className="block text-sm font-medium text-foreground"
+            className="text-foreground block text-sm font-medium"
             htmlFor="image"
           >
             Image
@@ -926,7 +926,7 @@ export function ProductForm({
           <input
             id="image"
             name="image"
-            className="w-full rounded-md border border-border px-3 py-2 text-sm"
+            className="border-border w-full rounded-md border px-3 py-2 text-sm"
             type="file"
             accept="image/*"
             onChange={handleImageChange}
@@ -935,7 +935,7 @@ export function ProductForm({
             aria-describedby={imageError ? imageErrorId : undefined}
           />
           {existingImageUrl && !imageFile ? (
-            <p className="mt-2 text-sm text-muted-foreground">
+            <p className="text-muted-foreground mt-2 text-sm">
               Current image will be kept unless you upload a new one.
             </p>
           ) : null}
@@ -952,7 +952,7 @@ export function ProductForm({
 
         <button
           type="submit"
-          className="mt-6 w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-foreground transition-colors hover:bg-accent/90 disabled:opacity-60"
+          className="bg-accent text-accent-foreground hover:bg-accent/90 mt-6 w-full rounded-md px-4 py-2 text-sm font-semibold transition-colors disabled:opacity-60"
           disabled={isSubmitting}
           aria-disabled={isSubmitting}
           aria-busy={isSubmitting}
diff --git a/frontend/app/[locale]/shop/admin/products/new/page.tsx b/frontend/app/[locale]/shop/admin/products/new/page.tsx
index c3be929f..82046807 100644
--- a/frontend/app/[locale]/shop/admin/products/new/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/new/page.tsx
@@ -1,9 +1,10 @@
+import { Metadata } from 'next';
+
 import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
 import { issueCsrfToken } from '@/lib/security/csrf';
 
 import { ProductForm } from '../_components/ProductForm';
-import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'New Product | DevLovers',
diff --git a/frontend/app/[locale]/shop/admin/products/page.tsx b/frontend/app/[locale]/shop/admin/products/page.tsx
index a9992cfe..d74cb869 100644
--- a/frontend/app/[locale]/shop/admin/products/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/page.tsx
@@ -1,22 +1,23 @@
-import { Link } from '@/i18n/routing';
 import { and, desc, eq, sql } from 'drizzle-orm';
-import { issueCsrfToken } from '@/lib/security/csrf';
-import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
-import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
+import { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+
+import { AdminPagination } from '@/components/shop/admin/AdminPagination';
 import { AdminProductDeleteButton } from '@/components/shop/admin/AdminProductDeleteButton';
 import { AdminProductStatusToggle } from '@/components/shop/admin/AdminProductStatusToggle';
-import { AdminPagination } from '@/components/shop/admin/AdminPagination';
+import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
 import { db } from '@/db';
 import {
   inventoryMoves,
   orderItems,
-  products,
   productPrices,
+  products,
 } from '@/db/schema';
-import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
+import { Link } from '@/i18n/routing';
+import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
 import { parsePage } from '@/lib/pagination';
-import { getTranslations } from 'next-intl/server';
-import { Metadata } from 'next';
+import { issueCsrfToken } from '@/lib/security/csrf';
+import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 
 export const metadata: Metadata = {
   title: 'Admin Products | DevLovers',
@@ -108,14 +109,14 @@ export default async function AdminProductsPage({
         <header className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
           <h1
             id="admin-products-title"
-            className="text-2xl font-bold text-foreground"
+            className="text-foreground text-2xl font-bold"
           >
             {t('title')}
           </h1>
 
           <Link
             href="/shop/admin/products/new"
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
+            className="border-border text-foreground hover:bg-secondary inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors"
           >
             {t('newProduct')}
           </Link>
@@ -125,7 +126,7 @@ export default async function AdminProductsPage({
           {/* Mobile cards */}
           <div className="md:hidden">
             {rows.length === 0 ? (
-              <div className="rounded-md border border-border p-4 text-sm text-muted-foreground">
+              <div className="border-border text-muted-foreground rounded-md border p-4 text-sm">
                 {t('empty')}
               </div>
             ) : (
@@ -138,25 +139,25 @@ export default async function AdminProductsPage({
                   return (
                     <li
                       key={row.id}
-                      className="rounded-lg border border-border bg-background p-4"
+                      className="border-border bg-background rounded-lg border p-4"
                     >
                       <div className="flex items-start justify-between gap-3">
                         <div className="min-w-0">
                           <div
-                            className="truncate text-sm font-semibold text-foreground"
+                            className="text-foreground truncate text-sm font-semibold"
                             title={row.title}
                           >
                             {row.title}
                           </div>
                           <div
-                            className="mt-0.5 truncate text-xs text-muted-foreground"
+                            className="text-muted-foreground mt-0.5 truncate text-xs"
                             title={row.slug}
                           >
                             {row.slug}
                           </div>
                         </div>
 
-                        <div className="shrink-0 whitespace-nowrap text-right text-sm text-foreground">
+                        <div className="text-foreground shrink-0 text-right text-sm whitespace-nowrap">
                           {priceMinor == null
                             ? '-'
                             : formatMoney(priceMinor, displayCurrency, locale)}
@@ -169,7 +170,7 @@ export default async function AdminProductsPage({
                             {t('table.category')}
                           </dt>
                           <dd
-                            className="truncate text-foreground"
+                            className="text-foreground truncate"
                             title={row.category ?? '-'}
                           >
                             {row.category ?? '-'}
@@ -181,7 +182,7 @@ export default async function AdminProductsPage({
                             {t('table.type')}
                           </dt>
                           <dd
-                            className="truncate text-foreground"
+                            className="text-foreground truncate"
                             title={row.type ?? '-'}
                           >
                             {row.type ?? '-'}
@@ -235,7 +236,7 @@ export default async function AdminProductsPage({
                       <div className="mt-3 flex flex-wrap items-center gap-2">
                         <Link
                           href={`/shop/products/${row.slug}`}
-                          className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+                          className="border-border text-foreground hover:bg-secondary inline-flex items-center justify-center rounded-md border px-2 py-1 text-xs font-medium transition-colors"
                           aria-label={t('actions.viewProduct', {
                             title: row.title,
                           })}
@@ -245,7 +246,7 @@ export default async function AdminProductsPage({
 
                         <Link
                           href={`/shop/admin/products/${row.id}/edit`}
-                          className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+                          className="border-border text-foreground hover:bg-secondary inline-flex items-center justify-center rounded-md border px-2 py-1 text-xs font-medium transition-colors"
                           aria-label={t('actions.editProduct', {
                             title: row.title,
                           })}
@@ -277,7 +278,7 @@ export default async function AdminProductsPage({
           {/* Desktop table */}
           <div className="hidden md:block">
             <div className="overflow-x-auto">
-              <table className="w-full table-fixed divide-y divide-border text-sm">
+              <table className="divide-border w-full table-fixed divide-y text-sm">
                 <caption className="sr-only">{t('listCaption')}</caption>
                 <colgroup>
                   <col className="w-[9.5rem]" />
@@ -330,67 +331,67 @@ export default async function AdminProductsPage({
                   </tr>
                 </thead>
 
-                <tbody className="divide-y divide-border">
+                <tbody className="divide-border divide-y">
                   {rows.map(row => {
                     const priceMinor = row.priceMinor;
 
                     return (
                       <tr key={row.id} className="hover:bg-muted/50">
-                        <td className="max-w-0 px-3 py-2 font-medium text-foreground">
+                        <td className="text-foreground max-w-0 px-3 py-2 font-medium">
                           <div className="truncate" title={row.title}>
                             {row.title}
                           </div>
                         </td>
 
-                        <td className="max-w-0 px-3 py-2 text-muted-foreground">
+                        <td className="text-muted-foreground max-w-0 px-3 py-2">
                           <div className="truncate" title={row.slug}>
                             {row.slug}
                           </div>
                         </td>
 
-                        <td className="whitespace-nowrap px-3 py-2 text-foreground">
+                        <td className="text-foreground px-3 py-2 whitespace-nowrap">
                           {priceMinor == null
                             ? '-'
                             : formatMoney(priceMinor, displayCurrency, locale)}
                         </td>
 
-                        <td className="max-w-0 px-3 py-2 text-muted-foreground">
+                        <td className="text-muted-foreground max-w-0 px-3 py-2">
                           <div className="truncate" title={row.category ?? '-'}>
                             {row.category ?? '-'}
                           </div>
                         </td>
 
-                        <td className="max-w-0 px-3 py-2 text-muted-foreground">
+                        <td className="text-muted-foreground max-w-0 px-3 py-2">
                           <div className="truncate" title={row.type ?? '-'}>
                             {row.type ?? '-'}
                           </div>
                         </td>
 
-                        <td className="whitespace-nowrap px-3 py-2 text-muted-foreground">
+                        <td className="text-muted-foreground px-3 py-2 whitespace-nowrap">
                           {row.stock}
                         </td>
 
-                        <td className="whitespace-nowrap px-3 py-2 text-muted-foreground">
+                        <td className="text-muted-foreground px-3 py-2 whitespace-nowrap">
                           {row.badge == null || row.badge === 'NONE'
                             ? '-'
                             : row.badge}
                         </td>
 
-                        <td className="whitespace-nowrap px-3 py-2">
-                          <span className="inline-flex rounded-full bg-muted px-2 py-1 text-xs font-medium text-foreground">
+                        <td className="px-3 py-2 whitespace-nowrap">
+                          <span className="bg-muted text-foreground inline-flex rounded-full px-2 py-1 text-xs font-medium">
                             {row.isActive ? t('actions.yes') : t('actions.no')}
                           </span>
                         </td>
 
-                        <td className="whitespace-nowrap px-3 py-2">
-                          <span className="inline-flex rounded-full bg-muted px-2 py-1 text-xs font-medium text-foreground">
+                        <td className="px-3 py-2 whitespace-nowrap">
+                          <span className="bg-muted text-foreground inline-flex rounded-full px-2 py-1 text-xs font-medium">
                             {row.isFeatured
                               ? t('actions.yes')
                               : t('actions.no')}
                           </span>
                         </td>
 
-                        <td className="whitespace-nowrap px-3 py-2 text-muted-foreground">
+                        <td className="text-muted-foreground px-3 py-2 whitespace-nowrap">
                           {formatDate(row.createdAt, locale)}
                         </td>
 
@@ -398,7 +399,7 @@ export default async function AdminProductsPage({
                           <div className="grid grid-cols-2 gap-2">
                             <Link
                               href={`/shop/products/${row.slug}`}
-                              className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary whitespace-normal break-words leading-tight text-center"
+                              className="border-border text-foreground hover:bg-secondary inline-flex items-center justify-center rounded-md border px-2 py-1 text-center text-xs leading-tight font-medium break-words whitespace-normal transition-colors"
                               aria-label={t('actions.viewProduct', {
                                 title: row.title,
                               })}
@@ -408,7 +409,7 @@ export default async function AdminProductsPage({
 
                             <Link
                               href={`/shop/admin/products/${row.id}/edit`}
-                              className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary whitespace-normal break-words leading-tight text-center"
+                              className="border-border text-foreground hover:bg-secondary inline-flex items-center justify-center rounded-md border px-2 py-1 text-center text-xs leading-tight font-medium break-words whitespace-normal transition-colors"
                               aria-label={t('actions.editProduct', {
                                 title: row.title,
                               })}
@@ -438,7 +439,7 @@ export default async function AdminProductsPage({
                   {rows.length === 0 ? (
                     <tr>
                       <td
-                        className="px-3 py-6 text-muted-foreground"
+                        className="text-muted-foreground px-3 py-6"
                         colSpan={11}
                       >
                         {t('empty')}
diff --git a/frontend/app/[locale]/shop/cart/CartPageClient.tsx b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
index 7c9f231c..99d30d28 100644
--- a/frontend/app/[locale]/shop/cart/CartPageClient.tsx
+++ b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
@@ -1,32 +1,32 @@
 'use client';
 
-import { useState } from 'react';
+import { Minus, Plus, ShoppingBag,Trash2 } from 'lucide-react';
 import Image from 'next/image';
 import { useParams } from 'next/navigation';
-import { useRouter, Link } from '@/i18n/routing';
 import { useTranslations } from 'next-intl';
-import { cn } from '@/lib/utils';
-import { Minus, Plus, Trash2, ShoppingBag } from 'lucide-react';
+import { useState } from 'react';
 
 import { useCart } from '@/components/shop/CartProvider';
-import { generateIdempotencyKey } from '@/lib/shop/idempotency';
+import { Link,useRouter } from '@/i18n/routing';
 import { formatMoney } from '@/lib/shop/currency';
+import { generateIdempotencyKey } from '@/lib/shop/idempotency';
 import {
-  SHOP_FOCUS,
-  SHOP_LINK_BASE,
-  SHOP_LINK_MD,
-  SHOP_LINK_XS,
-  SHOP_DISABLED,
+  SHOP_CHIP_BORDER_HOVER,
   SHOP_CHIP_INTERACTIVE,
   SHOP_CHIP_SHADOW_HOVER,
-  SHOP_CHIP_BORDER_HOVER,
-  SHOP_STEPPER_BUTTON_BASE,
   SHOP_CTA_BASE,
-  SHOP_CTA_INTERACTIVE,
   SHOP_CTA_INSET,
+  SHOP_CTA_INTERACTIVE,
   SHOP_CTA_WAVE,
+  SHOP_DISABLED,
+  SHOP_FOCUS,
+  SHOP_LINK_BASE,
+  SHOP_LINK_MD,
+  SHOP_LINK_XS,
+  SHOP_STEPPER_BUTTON_BASE,
   shopCtaGradient,
 } from '@/lib/shop/ui-classes';
+import { cn } from '@/lib/utils';
 
 const SHOP_PRODUCT_LINK = cn(
   'block truncate',
@@ -160,15 +160,15 @@ export default function CartPage() {
       <main className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
         <div className="flex flex-col items-center justify-center text-center">
           <ShoppingBag
-            className="h-16 w-16 text-muted-foreground"
+            className="text-muted-foreground h-16 w-16"
             aria-hidden="true"
           />
-          <h1 className="mt-6 text-3xl font-bold tracking-tight text-foreground">
+          <h1 className="text-foreground mt-6 text-3xl font-bold tracking-tight">
             {t('empty')}
           </h1>
-          <p className="mt-4 text-muted-foreground">{t('emptyDescription')}</p>
+          <p className="text-muted-foreground mt-4">{t('emptyDescription')}</p>
 
-          <div className="mt-8 w-full max-w-md mx-auto">
+          <div className="mx-auto mt-8 w-full max-w-md">
             <Link href="/shop/products" className={SHOP_HERO_CTA}>
               <span
                 className="absolute inset-0"
@@ -197,7 +197,7 @@ export default function CartPage() {
 
   return (
     <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <h1 className="text-3xl font-bold tracking-tight text-foreground">
+      <h1 className="text-foreground text-3xl font-bold tracking-tight">
         {t('title')}
       </h1>
 
@@ -217,10 +217,10 @@ export default function CartPage() {
             {cart.items.map(item => (
               <li
                 key={`${item.productId}-${item.selectedSize ?? 'na'}-${item.selectedColor ?? 'na'}`}
-                className="rounded-lg border border-border p-4"
+                className="border-border rounded-lg border p-4"
               >
                 <article className="flex gap-4">
-                  <div className="relative h-24 w-24 flex-shrink-0 overflow-hidden rounded-md bg-muted">
+                  <div className="bg-muted relative h-24 w-24 flex-shrink-0 overflow-hidden rounded-md">
                     <Image
                       src={item.imageUrl || '/placeholder.svg'}
                       alt={item.title}
@@ -241,7 +241,7 @@ export default function CartPage() {
                         </Link>
 
                         {(item.selectedSize || item.selectedColor) && (
-                          <p className="mt-1 text-xs text-muted-foreground">
+                          <p className="text-muted-foreground mt-1 text-xs">
                             {[
                               translateColor(item.selectedColor),
                               item.selectedSize,
@@ -261,7 +261,7 @@ export default function CartPage() {
                             item.selectedColor
                           )
                         }
-                        className="text-muted-foreground transition-colors hover:text-foreground"
+                        className="text-muted-foreground hover:text-foreground transition-colors"
                         aria-label={t('actions.removeItem', {
                           title: item.title,
                         })}
@@ -312,7 +312,7 @@ export default function CartPage() {
 
                         {item.quantity >= item.stock && (
                           <span
-                            className="ml-3 text-xs text-muted-foreground"
+                            className="text-muted-foreground ml-3 text-xs"
                             role="status"
                           >
                             {t('actions.maxStock', { stock: item.stock })}
@@ -320,7 +320,7 @@ export default function CartPage() {
                         )}
                       </div>
 
-                      <span className="text-sm font-semibold text-foreground">
+                      <span className="text-foreground text-sm font-semibold">
                         {formatMoney(
                           item.lineTotalMinor,
                           item.currency,
@@ -336,12 +336,12 @@ export default function CartPage() {
         </section>
 
         <aside
-          className="h-fit rounded-lg border border-border p-6"
+          className="border-border h-fit rounded-lg border p-6"
           aria-labelledby="order-summary"
         >
           <h2
             id="order-summary"
-            className="text-lg font-semibold text-foreground"
+            className="text-foreground text-lg font-semibold"
           >
             {t('summary.heading')}
           </h2>
@@ -351,7 +351,7 @@ export default function CartPage() {
               <span className="text-muted-foreground">
                 {t('summary.subtotal')}
               </span>
-              <span className="font-medium text-foreground">
+              <span className="text-foreground font-medium">
                 {formatMoney(
                   cart.summary.totalAmountMinor,
                   cart.summary.currency,
@@ -369,12 +369,12 @@ export default function CartPage() {
               </span>
             </div>
 
-            <div className="border-t border-border pt-4">
+            <div className="border-border border-t pt-4">
               <div className="flex items-center justify-between">
-                <span className="text-base font-semibold text-foreground">
+                <span className="text-foreground text-base font-semibold">
                   {t('summary.total')}
                 </span>
-                <span className="text-lg font-bold text-foreground">
+                <span className="text-foreground text-lg font-bold">
                   {formatMoney(
                     cart.summary.totalAmountMinor,
                     cart.summary.currency,
@@ -418,7 +418,7 @@ export default function CartPage() {
               </span>
             </button>
 
-            <p className="text-center text-xs text-muted-foreground">
+            <p className="text-muted-foreground text-center text-xs">
               {t('checkout.message')}
             </p>
 
@@ -436,7 +436,7 @@ export default function CartPage() {
             {checkoutError ? (
               <div className="space-y-2">
                 <p
-                  className="text-center text-xs text-destructive"
+                  className="text-destructive text-center text-xs"
                   role="alert"
                 >
                   {checkoutError}
diff --git a/frontend/app/[locale]/shop/cart/page.tsx b/frontend/app/[locale]/shop/cart/page.tsx
index dd15d65e..14207f53 100644
--- a/frontend/app/[locale]/shop/cart/page.tsx
+++ b/frontend/app/[locale]/shop/cart/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+
 import CartPageClient from './CartPageClient';
 
 export const metadata: Metadata = {
diff --git a/frontend/app/[locale]/shop/checkout/error/page.tsx b/frontend/app/[locale]/shop/checkout/error/page.tsx
index 86a4d5a0..3174bc2e 100644
--- a/frontend/app/[locale]/shop/checkout/error/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/error/page.tsx
@@ -1,24 +1,23 @@
-import { Link } from '@/i18n/routing';
+import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
 
-import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
+import { Link } from '@/i18n/routing';
 import { OrderNotFoundError } from '@/lib/services/errors';
 import { getOrderSummary } from '@/lib/services/orders';
-import { orderIdParamSchema } from '@/lib/validation/shop';
-import { cn } from '@/lib/utils';
-
+import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import {
-  SHOP_FOCUS,
-  SHOP_DISABLED,
   SHOP_CTA_BASE,
-  SHOP_CTA_INTERACTIVE,
   SHOP_CTA_INSET,
+  SHOP_CTA_INTERACTIVE,
   SHOP_CTA_WAVE,
-  shopCtaGradient,
+  SHOP_DISABLED,
+  SHOP_FOCUS,
   SHOP_OUTLINE_BTN_BASE,
   SHOP_OUTLINE_BTN_INTERACTIVE,
+  shopCtaGradient,
 } from '@/lib/shop/ui-classes';
-import { Metadata } from 'next';
+import { cn } from '@/lib/utils';
+import { orderIdParamSchema } from '@/lib/validation/shop';
 
 export const metadata: Metadata = {
   title: 'Checkout Error | DevLovers',
@@ -84,14 +83,14 @@ export default async function CheckoutErrorPage({
         className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8"
         aria-labelledby="checkout-error-title"
       >
-        <section className="rounded-lg border border-border bg-card p-8 text-center">
+        <section className="border-border bg-card rounded-lg border p-8 text-center">
           <h1
             id="checkout-error-title"
-            className="text-2xl font-bold text-foreground"
+            className="text-foreground text-2xl font-bold"
           >
             {t('errors.missingOrderId')}
           </h1>
-          <p className="mt-2 text-sm text-muted-foreground">
+          <p className="text-muted-foreground mt-2 text-sm">
             {t('errors.missingOrderIdDescription')}
           </p>
 
@@ -143,14 +142,14 @@ export default async function CheckoutErrorPage({
           className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8"
           aria-labelledby="checkout-error-title"
         >
-          <section className="rounded-lg border border-border bg-card p-8 text-center">
+          <section className="border-border bg-card rounded-lg border p-8 text-center">
             <h1
               id="checkout-error-title"
-              className="text-2xl font-bold text-foreground"
+              className="text-foreground text-2xl font-bold"
             >
               {t('errors.orderNotFound')}
             </h1>
-            <p className="mt-2 text-sm text-muted-foreground">
+            <p className="text-muted-foreground mt-2 text-sm">
               {t('errors.orderNotFoundDescription')}
             </p>
 
@@ -196,14 +195,14 @@ export default async function CheckoutErrorPage({
         className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8"
         aria-labelledby="checkout-error-title"
       >
-        <section className="rounded-lg border border-border bg-card p-8 text-center">
+        <section className="border-border bg-card rounded-lg border p-8 text-center">
           <h1
             id="checkout-error-title"
-            className="text-2xl font-bold text-foreground"
+            className="text-foreground text-2xl font-bold"
           >
             {t('errors.unableToLoad')}
           </h1>
-          <p className="mt-2 text-sm text-muted-foreground">
+          <p className="text-muted-foreground mt-2 text-sm">
             {t('errors.tryAgainLater')}
           </p>
         </section>
@@ -225,15 +224,15 @@ export default async function CheckoutErrorPage({
       className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8"
       aria-labelledby="checkout-error-title"
     >
-      <section className="rounded-lg border border-border bg-card p-8 shadow-sm">
+      <section className="border-border bg-card rounded-lg border p-8 shadow-sm">
         <header>
           <h1
             id="checkout-error-title"
-            className="text-3xl font-bold text-foreground"
+            className="text-foreground text-3xl font-bold"
           >
             {isFailed ? t('error.paymentFailed') : t('error.paymentUnclear')}
           </h1>
-          <p className="mt-2 text-sm text-muted-foreground">
+          <p className="text-muted-foreground mt-2 text-sm">
             {isFailed
               ? t('error.paymentFailedDescription')
               : t('error.paymentUnclearDescription')}
@@ -241,20 +240,20 @@ export default async function CheckoutErrorPage({
         </header>
 
         <section
-          className="mt-6 rounded-md border border-border bg-muted/30 p-4 text-sm text-foreground"
+          className="border-border bg-muted/30 text-foreground mt-6 rounded-md border p-4 text-sm"
           aria-label="Order details"
         >
           <dl className="space-y-2">
             <div className="flex items-center justify-between gap-4">
               <dt className="text-muted-foreground">{t('error.orderLabel')}</dt>
-              <dd className="font-mono text-xs text-muted-foreground">
+              <dd className="text-muted-foreground font-mono text-xs">
                 {order.id}
               </dd>
             </div>
 
             <div className="flex items-center justify-between gap-4">
               <dt className="text-muted-foreground">{t('error.totalLabel')}</dt>
-              <dd className="font-semibold text-foreground">
+              <dd className="text-foreground font-semibold">
                 {totalMinor == null
                   ? '-'
                   : formatMoney(totalMinor, currency, locale)}
@@ -265,7 +264,7 @@ export default async function CheckoutErrorPage({
               <dt className="text-muted-foreground">
                 {t('error.statusLabel')}
               </dt>
-              <dd className="font-semibold capitalize text-foreground">
+              <dd className="text-foreground font-semibold capitalize">
                 {order.paymentStatus}
               </dd>
             </div>
diff --git a/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx b/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
index 075ed56f..f9cbca50 100644
--- a/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
+++ b/frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx
@@ -1,8 +1,5 @@
 'use client';
 
-import { useMemo, useState } from 'react';
-import { Link, useRouter } from '@/i18n/routing';
-
 import {
   Elements,
   PaymentElement,
@@ -11,30 +8,31 @@ import {
 } from '@stripe/react-stripe-js';
 import {
   loadStripe,
-  type StripeElementsOptions,
   type Stripe,
+  type StripeElementsOptions,
 } from '@stripe/stripe-js';
+import { useMemo, useState } from 'react';
 
+import { Link, useRouter } from '@/i18n/routing';
+import { logError } from '@/lib/logging';
 import {
+  type CurrencyCode,
   currencyValues,
   formatMoney,
   resolveCurrencyFromLocale,
-  type CurrencyCode,
 } from '@/lib/shop/currency';
-import { logError } from '@/lib/logging';
-import { cn } from '@/lib/utils';
-
 import {
-  SHOP_FOCUS,
-  SHOP_DISABLED,
   SHOP_CTA_BASE,
-  SHOP_CTA_INTERACTIVE,
   SHOP_CTA_INSET,
+  SHOP_CTA_INTERACTIVE,
   SHOP_CTA_WAVE,
-  shopCtaGradient,
+  SHOP_DISABLED,
+  SHOP_FOCUS,
   SHOP_OUTLINE_BTN_BASE,
   SHOP_OUTLINE_BTN_INTERACTIVE,
+  shopCtaGradient,
 } from '@/lib/shop/ui-classes';
+import { cn } from '@/lib/utils';
 
 type PaymentFormProps = {
   orderId: string;
@@ -232,7 +230,7 @@ function StripePaymentForm({ orderId, locale }: PaymentFormProps) {
       </button>
 
       {errorMessage ? (
-        <p className="text-sm text-destructive" role="alert">
+        <p className="text-destructive text-sm" role="alert">
           {errorMessage}
         </p>
       ) : null}
@@ -270,7 +268,7 @@ export default function StripePaymentClient({
   if (!paymentsEnabled) {
     return (
       <section
-        className="space-y-3 text-sm text-muted-foreground"
+        className="text-muted-foreground space-y-3 text-sm"
         aria-label="Payments disabled"
       >
         <p>Payments are disabled in this environment.</p>
@@ -302,7 +300,7 @@ export default function StripePaymentClient({
   if (!clientSecret || !clientSecret.trim()) {
     return (
       <section
-        className="space-y-3 text-sm text-muted-foreground"
+        className="text-muted-foreground space-y-3 text-sm"
         aria-label="Payment initialization failed"
       >
         <p>Payment cannot be initialized. Please try again later.</p>
@@ -319,7 +317,7 @@ export default function StripePaymentClient({
 
   if (!stripePromise || !options) {
     return (
-      <p className="text-sm text-muted-foreground" aria-live="polite">
+      <p className="text-muted-foreground text-sm" aria-live="polite">
         Preparing secure payment…
       </p>
     );
@@ -329,7 +327,7 @@ export default function StripePaymentClient({
     <section aria-label="Secure payment">
       <Elements stripe={stripePromise as Promise<Stripe>} options={options}>
         <div className="space-y-4">
-          <div className="rounded-md border border-border bg-muted/40 p-3 text-sm text-foreground">
+          <div className="border-border bg-muted/40 text-foreground rounded-md border p-3 text-sm">
             <div className="flex items-center justify-between">
               <span className="text-muted-foreground">Pay</span>
               <span className="text-base font-semibold">
@@ -337,7 +335,7 @@ export default function StripePaymentClient({
               </span>
             </div>
 
-            <p className="text-xs uppercase tracking-wide text-muted-foreground">
+            <p className="text-muted-foreground text-xs tracking-wide uppercase">
               {uiCurrency}
             </p>
           </div>
diff --git a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
index 57883f91..7f068e85 100644
--- a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
@@ -1,29 +1,29 @@
-import { Link } from '@/i18n/routing';
-import { ClearCartOnMount } from '@/components/shop/ClearCartOnMount';
-import StripePaymentClient from '../StripePaymentClient';
+import { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
 
-import { formatMoney } from '@/lib/shop/currency';
-import { getOrderSummary } from '@/lib/services/orders';
-import { OrderNotFoundError } from '@/lib/services/errors';
-import { orderIdParamSchema } from '@/lib/validation/shop';
+import { ClearCartOnMount } from '@/components/shop/ClearCartOnMount';
+import { Link } from '@/i18n/routing';
 import { getStripeEnv } from '@/lib/env/stripe';
 import { logError } from '@/lib/logging';
+import { OrderNotFoundError } from '@/lib/services/errors';
+import { getOrderSummary } from '@/lib/services/orders';
 import { ensureStripePaymentIntentForOrder } from '@/lib/services/orders/payment-attempts';
-import { getTranslations } from 'next-intl/server';
-import { cn } from '@/lib/utils';
-
+import { formatMoney } from '@/lib/shop/currency';
 import {
-  SHOP_FOCUS,
-  SHOP_DISABLED,
   SHOP_CTA_BASE,
-  SHOP_CTA_INTERACTIVE,
   SHOP_CTA_INSET,
+  SHOP_CTA_INTERACTIVE,
   SHOP_CTA_WAVE,
-  shopCtaGradient,
+  SHOP_DISABLED,
+  SHOP_FOCUS,
   SHOP_OUTLINE_BTN_BASE,
   SHOP_OUTLINE_BTN_INTERACTIVE,
+  shopCtaGradient,
 } from '@/lib/shop/ui-classes';
-import { Metadata } from 'next';
+import { cn } from '@/lib/utils';
+import { orderIdParamSchema } from '@/lib/validation/shop';
+
+import StripePaymentClient from '../StripePaymentClient';
 
 export const metadata: Metadata = {
   title: 'Checkout | DevLovers',
@@ -75,7 +75,7 @@ const SHOP_HERO_CTA_SM = cn(
   SHOP_FOCUS,
   SHOP_DISABLED,
   'items-center justify-center gap-2',
-  'px-5 py-2.5 text-xs sm:text-sm text-white',
+  'px-5 py-2.5 text-xs text-white sm:text-sm',
   'shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]'
 );
 
@@ -135,13 +135,13 @@ function PageShell({
       className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8"
       aria-labelledby="payment-title"
     >
-      <section className="rounded-lg border border-border bg-card p-8 text-center">
-        <h1 id="payment-title" className="text-2xl font-bold text-foreground">
+      <section className="border-border bg-card rounded-lg border p-8 text-center">
+        <h1 id="payment-title" className="text-foreground text-2xl font-bold">
           {title}
         </h1>
 
         {description ? (
-          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
+          <p className="text-muted-foreground mt-2 text-sm">{description}</p>
         ) : null}
 
         {children}
@@ -289,15 +289,15 @@ export default async function PaymentPage(props: PaymentPageProps) {
       <ClearCartOnMount enabled={clearCart} />
 
       <header className="mb-6">
-        <p className="text-sm font-semibold uppercase tracking-wide text-accent">
+        <p className="text-accent text-sm font-semibold tracking-wide uppercase">
           {t('payment.title')}
         </p>
 
-        <h1 id="pay-order-title" className="text-3xl font-bold text-foreground">
+        <h1 id="pay-order-title" className="text-foreground text-3xl font-bold">
           {t('payment.payForOrder', { orderId: order.id.slice(0, 8) })}
         </h1>
 
-        <p className="mt-2 text-sm text-muted-foreground">
+        <p className="text-muted-foreground mt-2 text-sm">
           {await buildStatusMessage(order.paymentStatus)}
         </p>
       </header>
@@ -307,29 +307,29 @@ export default async function PaymentPage(props: PaymentPageProps) {
         aria-label="Payment and order summary"
       >
         <section
-          className="rounded-lg border border-border bg-card p-6"
+          className="border-border bg-card rounded-lg border p-6"
           aria-label="Payment details"
         >
-          <h2 className="text-lg font-semibold text-foreground">
+          <h2 className="text-foreground text-lg font-semibold">
             {t('payment.paymentDetails')}
           </h2>
 
-          <p className="mt-2 text-sm text-muted-foreground">
+          <p className="text-muted-foreground mt-2 text-sm">
             {t('payment.completePayment')}
           </p>
 
-          <div className="mt-6 rounded-md border border-border bg-muted/30 p-4">
+          <div className="border-border bg-muted/30 mt-6 rounded-md border p-4">
             <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">
+              <span className="text-muted-foreground text-sm">
                 {t('payment.amountDue')}
               </span>
 
-              <span className="text-xl font-bold text-foreground">
+              <span className="text-foreground text-xl font-bold">
                 {formatMoney(order.totalAmountMinor, order.currency, locale)}
               </span>
             </div>
 
-            <p className="mt-1 text-xs text-muted-foreground uppercase tracking-wide">
+            <p className="text-muted-foreground mt-1 text-xs tracking-wide uppercase">
               {order.currency}
             </p>
           </div>
@@ -348,29 +348,29 @@ export default async function PaymentPage(props: PaymentPageProps) {
         </section>
 
         <aside
-          className="rounded-lg border border-border bg-card p-6"
+          className="border-border bg-card rounded-lg border p-6"
           aria-label="Order summary"
         >
-          <h2 className="text-lg font-semibold text-foreground">
+          <h2 className="text-foreground text-lg font-semibold">
             {t('payment.orderSummary')}
           </h2>
 
-          <dl className="mt-4 space-y-3 text-sm text-muted-foreground">
+          <dl className="text-muted-foreground mt-4 space-y-3 text-sm">
             <div className="flex items-center justify-between">
               <dt>{t('payment.items')}</dt>
-              <dd className="font-medium text-foreground">{itemsCount}</dd>
+              <dd className="text-foreground font-medium">{itemsCount}</dd>
             </div>
 
             <div className="flex items-center justify-between">
               <dt>{t('payment.totalAmount')}</dt>
-              <dd className="font-semibold text-foreground">
+              <dd className="text-foreground font-semibold">
                 {formatMoney(order.totalAmountMinor, order.currency, locale)}
               </dd>
             </div>
 
             <div className="flex items-center justify-between">
               <dt>{t('payment.status')}</dt>
-              <dd className="font-semibold capitalize text-foreground">
+              <dd className="text-foreground font-semibold capitalize">
                 {order.paymentStatus}
               </dd>
             </div>
diff --git a/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx b/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx
index 10c22774..70d4c806 100644
--- a/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx
+++ b/frontend/app/[locale]/shop/checkout/success/OrderStatusAutoRefresh.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
 import { useRouter } from 'next/navigation';
+import { useEffect, useRef } from 'react';
 
 type Props = {
   paymentStatus: string;
diff --git a/frontend/app/[locale]/shop/checkout/success/page.tsx b/frontend/app/[locale]/shop/checkout/success/page.tsx
index 98ac6293..cedff489 100644
--- a/frontend/app/[locale]/shop/checkout/success/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/success/page.tsx
@@ -1,25 +1,25 @@
-import { Link } from '@/i18n/routing';
+import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
 
-import OrderStatusAutoRefresh from './OrderStatusAutoRefresh';
 import { ClearCartOnMount } from '@/components/shop/ClearCartOnMount';
-import { formatMoney } from '@/lib/shop/currency';
-import { getOrderSummary } from '@/lib/services/orders';
+import { Link } from '@/i18n/routing';
 import { OrderNotFoundError } from '@/lib/services/errors';
-import { orderIdParamSchema } from '@/lib/validation/shop';
-import { cn } from '@/lib/utils';
-
+import { getOrderSummary } from '@/lib/services/orders';
+import { formatMoney } from '@/lib/shop/currency';
 import {
-  SHOP_FOCUS,
   SHOP_CTA_BASE,
-  SHOP_CTA_INTERACTIVE,
   SHOP_CTA_INSET,
+  SHOP_CTA_INTERACTIVE,
   SHOP_CTA_WAVE,
+  SHOP_FOCUS,
   SHOP_OUTLINE_BTN_BASE,
   SHOP_OUTLINE_BTN_INTERACTIVE,
   shopCtaGradient,
 } from '@/lib/shop/ui-classes';
-import { Metadata } from 'next';
+import { cn } from '@/lib/utils';
+import { orderIdParamSchema } from '@/lib/validation/shop';
+
+import OrderStatusAutoRefresh from './OrderStatusAutoRefresh';
 
 export const metadata: Metadata = {
   title: 'Order Confirmed| DevLovers',
@@ -112,13 +112,13 @@ function CheckoutShell({
       className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8"
       aria-labelledby="checkout-title"
     >
-      <section className="rounded-lg border border-border bg-card p-8 text-center">
-        <h1 id="checkout-title" className="text-2xl font-bold text-foreground">
+      <section className="border-border bg-card rounded-lg border p-8 text-center">
+        <h1 id="checkout-title" className="text-foreground text-2xl font-bold">
           {title}
         </h1>
 
         {description ? (
-          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
+          <p className="text-muted-foreground mt-2 text-sm">{description}</p>
         ) : null}
 
         {children}
@@ -207,19 +207,19 @@ export default async function CheckoutSuccessPage({
 
       <OrderStatusAutoRefresh paymentStatus={order.paymentStatus} />
 
-      <section className="rounded-lg border border-border bg-card p-8">
-        <p className="text-sm font-semibold uppercase tracking-wide text-accent">
+      <section className="border-border bg-card rounded-lg border p-8">
+        <p className="text-accent text-sm font-semibold tracking-wide uppercase">
           {t('success.title')}
         </p>
 
         <h1
           id="order-title"
-          className="mt-2 text-3xl font-bold text-foreground"
+          className="text-foreground mt-2 text-3xl font-bold"
         >
           {t('success.orderLabel')} #{order.id.slice(0, 8)}
         </h1>
 
-        <p className="mt-2 text-sm text-muted-foreground">
+        <p className="text-muted-foreground mt-2 text-sm">
           {t('success.received')}
           {order.paymentStatus === 'paid'
             ? ` ${t('success.paymentConfirmed')}`
@@ -236,8 +236,8 @@ export default async function CheckoutSuccessPage({
           className="mt-6 grid gap-6 md:grid-cols-2"
           aria-label="Order summary"
         >
-          <div className="rounded-md border border-border bg-muted/40 p-4">
-            <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+          <div className="border-border bg-muted/40 rounded-md border p-4">
+            <h2 className="text-muted-foreground text-sm font-semibold tracking-wide uppercase">
               {t('success.orderSummary')}
             </h2>
 
@@ -246,19 +246,19 @@ export default async function CheckoutSuccessPage({
                 <dt className="text-muted-foreground">
                   {t('success.totalAmount')}
                 </dt>
-                <dd className="font-semibold text-foreground">
+                <dd className="text-foreground font-semibold">
                   {formatMoney(totalMinor, order.currency, locale)}
                 </dd>
               </div>
 
               <div className="flex items-center justify-between">
                 <dt className="text-muted-foreground">{t('success.items')}</dt>
-                <dd className="font-medium text-foreground">{itemsCount}</dd>
+                <dd className="text-foreground font-medium">{itemsCount}</dd>
               </div>
 
               <div className="flex items-center justify-between">
                 <dt className="text-muted-foreground">{t('success.status')}</dt>
-                <dd className="font-semibold capitalize text-foreground">
+                <dd className="text-foreground font-semibold capitalize">
                   {order.paymentStatus}
                 </dd>
               </div>
diff --git a/frontend/app/[locale]/shop/orders/[id]/page.tsx b/frontend/app/[locale]/shop/orders/[id]/page.tsx
index 97dcedad..31a744df 100644
--- a/frontend/app/[locale]/shop/orders/[id]/page.tsx
+++ b/frontend/app/[locale]/shop/orders/[id]/page.tsx
@@ -1,17 +1,17 @@
 import 'server-only';
-import { cn } from '@/lib/utils';
-import { Link } from '@/i18n/routing';
-import { notFound, redirect } from 'next/navigation';
-import { unstable_noStore as noStore } from 'next/cache';
+
 import { and, eq } from 'drizzle-orm';
+import { Metadata } from 'next';
+import { unstable_noStore as noStore } from 'next/cache';
+import { notFound, redirect } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 
 import { db } from '@/db';
 import { orderItems, orders } from '@/db/schema';
+import { Link } from '@/i18n/routing';
 import { getCurrentUser } from '@/lib/auth';
-import { orderIdParamSchema } from '@/lib/validation/shop';
 import { logError } from '@/lib/logging';
-import { formatMoney, type CurrencyCode } from '@/lib/shop/currency';
+import { type CurrencyCode,formatMoney } from '@/lib/shop/currency';
 import { fromDbMoney } from '@/lib/shop/money';
 import {
   SHOP_FOCUS,
@@ -19,7 +19,8 @@ import {
   SHOP_LINK_MD,
   SHOP_NAV_LINK_BASE,
 } from '@/lib/shop/ui-classes';
-import { Metadata } from 'next';
+import { cn } from '@/lib/utils';
+import { orderIdParamSchema } from '@/lib/validation/shop';
 
 export const metadata: Metadata = {
   title: 'Order Details | DevLovers',
@@ -230,7 +231,7 @@ export default async function OrderDetailPage({
           <h1 id="order-heading" className="truncate text-2xl font-semibold">
             {t('title')}
           </h1>
-          <div className="mt-1 truncate text-xs text-muted-foreground">
+          <div className="text-muted-foreground mt-1 truncate text-xs">
             {order.id}
           </div>
         </div>
@@ -249,7 +250,7 @@ export default async function OrderDetailPage({
       </header>
 
       <section
-        className="mb-6 rounded-md border border-border p-4"
+        className="border-border mb-6 rounded-md border p-4"
         aria-labelledby="order-summary-heading"
       >
         <h2 id="order-summary-heading" className="sr-only">
@@ -258,12 +259,12 @@ export default async function OrderDetailPage({
 
         <dl className="grid grid-cols-1 gap-3 sm:grid-cols-2">
           <div>
-            <dt className="text-xs text-muted-foreground">{t('total')}</dt>
+            <dt className="text-muted-foreground text-xs">{t('total')}</dt>
             <dd className="text-sm font-medium">{totalFormatted}</dd>
           </div>
 
           <div>
-            <dt className="text-xs text-muted-foreground">
+            <dt className="text-muted-foreground text-xs">
               {t('paymentStatus')}
             </dt>
             <dd className="text-sm font-medium">
@@ -272,13 +273,13 @@ export default async function OrderDetailPage({
           </div>
 
           <div>
-            <dt className="text-xs text-muted-foreground">{t('created')}</dt>
+            <dt className="text-muted-foreground text-xs">{t('created')}</dt>
             <dd className="text-sm">{createdFormatted}</dd>
           </div>
 
           {isAdmin && (
             <div>
-              <dt className="text-xs text-muted-foreground">{t('provider')}</dt>
+              <dt className="text-muted-foreground text-xs">{t('provider')}</dt>
               <dd className="text-sm">{String(order.paymentProvider)}</dd>
             </div>
           )}
@@ -287,7 +288,7 @@ export default async function OrderDetailPage({
         {isAdmin && (
           <dl className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
             <div>
-              <dt className="text-xs text-muted-foreground">
+              <dt className="text-muted-foreground text-xs">
                 {t('paymentReference')}
               </dt>
               <dd className="text-sm break-all">
@@ -295,7 +296,7 @@ export default async function OrderDetailPage({
               </dd>
             </div>
             <div>
-              <dt className="text-xs text-muted-foreground">
+              <dt className="text-muted-foreground text-xs">
                 {t('idempotencyKey')}
               </dt>
               <dd className="text-sm break-all">{order.idempotencyKey}</dd>
@@ -306,7 +307,7 @@ export default async function OrderDetailPage({
         {isAdmin && (
           <dl className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
             <div>
-              <dt className="text-xs text-muted-foreground">
+              <dt className="text-muted-foreground text-xs">
                 {t('stockRestored')}
               </dt>
               <dd className="text-sm">
@@ -314,7 +315,7 @@ export default async function OrderDetailPage({
               </dd>
             </div>
             <div>
-              <dt className="text-xs text-muted-foreground">
+              <dt className="text-muted-foreground text-xs">
                 {t('restockedAt')}
               </dt>
               <dd className="text-sm">{restockedFormatted}</dd>
@@ -324,16 +325,16 @@ export default async function OrderDetailPage({
       </section>
 
       <section
-        className="rounded-md border border-border"
+        className="border-border rounded-md border"
         aria-labelledby="order-items-heading"
       >
-        <div className="border-b border-border p-4">
+        <div className="border-border border-b p-4">
           <h2 id="order-items-heading" className="text-lg font-semibold">
             {t('items')}
           </h2>
         </div>
 
-        <ul className="divide-y divide-border" aria-label={t('items')}>
+        <ul className="divide-border divide-y" aria-label={t('items')}>
           {order.items.map(it => (
             <li key={it.id} className="p-4">
               <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
@@ -354,7 +355,7 @@ export default async function OrderDetailPage({
                     </div>
                   )}
 
-                  <div className="mt-1 break-all text-xs text-muted-foreground">
+                  <div className="text-muted-foreground mt-1 text-xs break-all">
                     {it.productSku
                       ? t('sku', { sku: it.productSku })
                       : t('product', { productId: it.productId })}
@@ -368,7 +369,7 @@ export default async function OrderDetailPage({
                   </div>
                   <div>
                     <dt className="sr-only">{t('unitPrice')}</dt>
-                    <dd className="text-sm text-muted-foreground">
+                    <dd className="text-muted-foreground text-sm">
                       Unit:{' '}
                       {safeFormatMoneyMajor(it.unitPrice, currency, locale)}
                     </dd>
diff --git a/frontend/app/[locale]/shop/orders/error.tsx b/frontend/app/[locale]/shop/orders/error.tsx
index 3b084a1a..51a676ab 100644
--- a/frontend/app/[locale]/shop/orders/error.tsx
+++ b/frontend/app/[locale]/shop/orders/error.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { cn } from '@/lib/utils';
 import {
   SHOP_FOCUS,
   SHOP_OUTLINE_BTN_BASE,
   SHOP_OUTLINE_BTN_INTERACTIVE,
 } from '@/lib/shop/ui-classes';
+import { cn } from '@/lib/utils';
 
 type ErrorPageProps = {
   error: Error & { digest?: string };
@@ -25,8 +25,8 @@ export default function OrdersError({ reset }: ErrorPageProps) {
         <h1 className="text-2xl font-semibold">Orders</h1>
       </header>
 
-      <section className="mt-6 rounded-lg border border-border bg-card p-5">
-        <p className="text-sm text-muted-foreground">Failed to load orders.</p>
+      <section className="border-border bg-card mt-6 rounded-lg border p-5">
+        <p className="text-muted-foreground text-sm">Failed to load orders.</p>
 
         <div className="mt-4 flex flex-wrap items-center gap-3">
           <button type="button" className={SHOP_OUTLINE_BTN} onClick={reset}>
diff --git a/frontend/app/[locale]/shop/orders/page.tsx b/frontend/app/[locale]/shop/orders/page.tsx
index 6be669a3..0330386d 100644
--- a/frontend/app/[locale]/shop/orders/page.tsx
+++ b/frontend/app/[locale]/shop/orders/page.tsx
@@ -1,13 +1,14 @@
 import 'server-only';
-import { cn } from '@/lib/utils';
-import { Link } from '@/i18n/routing';
-import { redirect } from 'next/navigation';
-import { unstable_noStore as noStore } from 'next/cache';
+
 import { desc, eq, sql } from 'drizzle-orm';
+import { Metadata } from 'next';
+import { unstable_noStore as noStore } from 'next/cache';
+import { redirect } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 
 import { db } from '@/db';
 import { orderItems, orders } from '@/db/schema';
+import { Link } from '@/i18n/routing';
 import { getCurrentUser } from '@/lib/auth';
 import { logError } from '@/lib/logging';
 import {
@@ -16,7 +17,7 @@ import {
   SHOP_LINK_MD,
   SHOP_NAV_LINK_BASE,
 } from '@/lib/shop/ui-classes';
-import { Metadata } from 'next';
+import { cn } from '@/lib/utils';
 
 export const metadata: Metadata = {
   title: 'My Orders | DevLovers',
@@ -205,7 +206,7 @@ export default async function MyOrdersPage({
           <h1 id="my-orders-heading" className="text-2xl font-semibold">
             {t('title')}
           </h1>
-          <p className="mt-1 text-sm text-muted-foreground">{t('subtitle')}</p>
+          <p className="text-muted-foreground mt-1 text-sm">{t('subtitle')}</p>
         </div>
 
         <nav aria-label="Orders navigation" className="flex items-center gap-3">
@@ -217,7 +218,7 @@ export default async function MyOrdersPage({
 
       {rows.length === 0 ? (
         <section className="rounded-md border p-4" aria-label="No orders">
-          <p className="text-sm text-muted-foreground">{t('empty.message')}</p>
+          <p className="text-muted-foreground text-sm">{t('empty.message')}</p>
           <div className="mt-3">
             <Link className={NAV_LINK} href="/shop/products">
               {t('empty.browseProducts')}
@@ -230,29 +231,29 @@ export default async function MyOrdersPage({
             <table className="w-full border-collapse">
               <caption className="sr-only">{t('table.caption')}</caption>
 
-              <thead className="border-b border-border">
+              <thead className="border-border border-b">
                 <tr>
                   <th
                     scope="col"
-                    className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground"
+                    className="text-muted-foreground px-4 py-3 text-left text-xs font-semibold"
                   >
                     {t('table.items')}
                   </th>
                   <th
                     scope="col"
-                    className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground"
+                    className="text-muted-foreground px-4 py-3 text-left text-xs font-semibold"
                   >
                     {t('table.date')}
                   </th>
                   <th
                     scope="col"
-                    className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground"
+                    className="text-muted-foreground px-4 py-3 text-left text-xs font-semibold"
                   >
                     {t('table.status')}
                   </th>
                   <th
                     scope="col"
-                    className="px-4 py-3 text-right text-xs font-semibold text-muted-foreground"
+                    className="text-muted-foreground px-4 py-3 text-right text-xs font-semibold"
                   >
                     {t('table.total')}
                   </th>
@@ -277,9 +278,9 @@ export default async function MyOrdersPage({
                   return (
                     <tr
                       key={o.id}
-                      className="border-b border-border last:border-b-0 hover:bg-muted/20"
+                      className="border-border hover:bg-muted/20 border-b last:border-b-0"
                     >
-                      <th scope="row" className="px-4 py-3 align-top text-left">
+                      <th scope="row" className="px-4 py-3 text-left align-top">
                         <Link
                           href={href}
                           className={ORDER_HEADLINE_LINK}
@@ -289,7 +290,7 @@ export default async function MyOrdersPage({
                           {headline}
                         </Link>
 
-                        <div className="mt-1 text-xs text-muted-foreground">
+                        <div className="text-muted-foreground mt-1 text-xs">
                           <span className="sr-only">
                             {t('table.orderId')}:{' '}
                           </span>
@@ -315,7 +316,7 @@ export default async function MyOrdersPage({
                         </span>
                       </td>
 
-                      <td className="px-4 py-3 align-top text-right text-sm font-medium">
+                      <td className="px-4 py-3 text-right align-top text-sm font-medium">
                         {String(o.totalAmount)} {String(o.currency)}
                       </td>
                     </tr>
diff --git a/frontend/app/[locale]/shop/page.tsx b/frontend/app/[locale]/shop/page.tsx
index a8a78b66..fa71a45c 100644
--- a/frontend/app/[locale]/shop/page.tsx
+++ b/frontend/app/[locale]/shop/page.tsx
@@ -1,9 +1,11 @@
-import { Link } from '@/i18n/routing';
+import { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+
+import { CategoryTile } from '@/components/shop/CategoryTile';
 import { ProductCard } from '@/components/shop/ProductCard';
 import { Hero } from '@/components/shop/ShopHero';
-import { CategoryTile } from '@/components/shop/CategoryTile';
+import { Link } from '@/i18n/routing';
 import { getHomepageContent } from '@/lib/shop/data';
-import { getTranslations } from 'next-intl/server';
 import {
   SHOP_CTA_BASE,
   SHOP_CTA_INSET,
@@ -11,7 +13,6 @@ import {
   SHOP_FOCUS,
   shopCtaGradient,
 } from '@/lib/shop/ui-classes';
-import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Shop | DevLovers',
@@ -38,32 +39,21 @@ export default async function HomePage({
       />
 
       <section
-        className="border-t border-border bg-background py-16"
+        className="border-border bg-background border-t py-16"
         aria-labelledby="new-arrivals-heading"
       >
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <h2
               id="new-arrivals-heading"
-              className="text-2xl font-bold tracking-tight text-foreground"
+              className="text-foreground text-2xl font-bold tracking-tight"
             >
               {t('newArrivals')}
             </h2>
 
             <Link
               href="/shop/products?filter=new"
-              className="
-              group inline-flex items-center gap-2 rounded-md border border-border
-              px-4 py-2
-              text-xs sm:text-sm font-semibold tracking-[0.25em] uppercase
-              text-muted-foreground hover:text-foreground
-              bg-transparent
-              shadow-none hover:shadow-[var(--shop-card-shadow-hover)]
-              transition-[transform,box-shadow,color,filter] duration-500 ease-out
-              hover:-translate-y-0.5 hover:brightness-110
-              focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)]
-              focus-visible:ring-offset-2 focus-visible:ring-offset-background
-            "
+              className="group border-border text-muted-foreground hover:text-foreground focus-visible:ring-offset-background inline-flex items-center gap-2 rounded-md border bg-transparent px-4 py-2 text-xs font-semibold tracking-[0.25em] uppercase shadow-none transition-[transform,box-shadow,color,filter] duration-500 ease-out hover:-translate-y-0.5 hover:shadow-[var(--shop-card-shadow-hover)] hover:brightness-110 focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)] focus-visible:ring-offset-2 focus-visible:outline-none sm:text-sm"
               aria-label={t('viewAll')}
             >
               <span>{t('viewAll')}</span>
@@ -87,14 +77,14 @@ export default async function HomePage({
       </section>
 
       <section
-        className="border-t border-border bg-background py-16"
+        className="border-border bg-background border-t py-16"
         aria-labelledby="shop-by-category-heading"
       >
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <header className="flex items-center justify-between">
             <h2
               id="shop-by-category-heading"
-              className="text-2xl font-bold tracking-tight text-foreground"
+              className="text-foreground text-2xl font-bold tracking-tight"
             >
               {t('shopByCategory')}
             </h2>
@@ -111,7 +101,7 @@ export default async function HomePage({
       </section>
 
       <section
-        className="bg-foreground py-16 text-background"
+        className="bg-foreground text-background py-16"
         aria-labelledby="shop-cta-heading"
       >
         <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
@@ -122,19 +112,14 @@ export default async function HomePage({
             {t('hero.headline')}
           </h2>
 
-          <p className="mx-auto mt-4 max-w-xl text-background/80">
+          <p className="text-background/80 mx-auto mt-4 max-w-xl">
             {t('hero.subheadline')}
           </p>
 
           <div className="mt-8">
             <Link
               href="/shop/products"
-              className={`
-    ${SHOP_CTA_BASE} ${SHOP_FOCUS}
-    px-8 sm:px-10 md:px-12 py-3 md:py-3.5
-    text-[color:var(--shop-cta-fg)]
-    shadow-[var(--shop-cta-shadow)] hover:shadow-[var(--shop-cta-shadow-hover)]
-  `}
+              className={` ${SHOP_CTA_BASE} ${SHOP_FOCUS} px-8 py-3 text-[color:var(--shop-cta-fg)] shadow-[var(--shop-cta-shadow)] hover:shadow-[var(--shop-cta-shadow-hover)] sm:px-10 md:px-12 md:py-3.5`}
               aria-label={t('hero.cta')}
             >
               <span
diff --git a/frontend/app/[locale]/shop/products/[slug]/page.tsx b/frontend/app/[locale]/shop/products/[slug]/page.tsx
index edb2eeff..8f9c57c2 100644
--- a/frontend/app/[locale]/shop/products/[slug]/page.tsx
+++ b/frontend/app/[locale]/shop/products/[slug]/page.tsx
@@ -1,15 +1,16 @@
+import { ArrowLeft } from 'lucide-react';
+import { Metadata } from 'next';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
-import { ArrowLeft } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
-import { cn } from '@/lib/utils';
+
 import { AddToCartButton } from '@/components/shop/AddToCartButton';
-import { getProductPageData } from '@/lib/shop/data';
-import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import { getPublicProductBySlug } from '@/db/queries/shop/products';
 import { Link } from '@/i18n/routing';
+import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
+import { getProductPageData } from '@/lib/shop/data';
 import { SHOP_FOCUS, SHOP_NAV_LINK_BASE } from '@/lib/shop/ui-classes';
-import { Metadata } from 'next';
+import { cn } from '@/lib/utils';
 
 export const metadata: Metadata = {
   title: 'Product name | DevLovers',
@@ -66,10 +67,10 @@ export default async function ProductPage({
       </nav>
 
       <div className="mt-8 grid gap-8 lg:grid-cols-2 lg:gap-16">
-        <div className="relative aspect-square overflow-hidden rounded-lg bg-muted">
+        <div className="bg-muted relative aspect-square overflow-hidden rounded-lg">
           {product.badge && (
             <span
-              className={`absolute left-4 top-4 z-10 rounded px-2 py-1 text-xs font-semibold uppercase ${
+              className={`absolute top-4 left-4 z-10 rounded px-2 py-1 text-xs font-semibold uppercase ${
                 badge === 'SALE'
                   ? 'bg-accent text-accent-foreground'
                   : 'bg-foreground text-background'
@@ -90,13 +91,13 @@ export default async function ProductPage({
         </div>
 
         <div className="flex flex-col">
-          <h1 className="text-3xl font-bold tracking-tight text-foreground">
+          <h1 className="text-foreground text-3xl font-bold tracking-tight">
             {product.name}
           </h1>
 
           {isUnavailable ? (
             <div
-              className="mt-4 rounded-md border border-border bg-muted/30 p-4 text-sm text-muted-foreground"
+              className="border-border bg-muted/30 text-muted-foreground mt-4 rounded-md border p-4 text-sm"
               role="status"
               aria-live="polite"
             >
@@ -116,7 +117,7 @@ export default async function ProductPage({
               </span>
 
               {product.originalPrice && (
-                <span className="text-lg text-muted-foreground line-through">
+                <span className="text-muted-foreground text-lg line-through">
                   {formatMoney(product.originalPrice, product.currency, locale)}
                 </span>
               )}
@@ -124,7 +125,7 @@ export default async function ProductPage({
           )}
 
           {product.description && (
-            <p className="mt-6 text-muted-foreground">{product.description}</p>
+            <p className="text-muted-foreground mt-6">{product.description}</p>
           )}
 
           {!isUnavailable && (
diff --git a/frontend/app/[locale]/shop/products/page.tsx b/frontend/app/[locale]/shop/products/page.tsx
index 8d57d782..f4c369da 100644
--- a/frontend/app/[locale]/shop/products/page.tsx
+++ b/frontend/app/[locale]/shop/products/page.tsx
@@ -1,14 +1,14 @@
-import { Suspense } from 'react';
+import { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
 
-import { ProductFilters } from '@/components/shop/ProductFilters';
 import { CatalogProductsClient } from '@/components/shop/CatalogProductsClient';
+import { ProductFilters } from '@/components/shop/ProductFilters';
 import { ProductsToolbar } from '@/components/shop/ProductsToolbar';
+import { CATALOG_PAGE_SIZE } from '@/lib/config/catalog';
 import { getCatalogProducts } from '@/lib/shop/data';
 import { catalogQuerySchema } from '@/lib/validation/shop';
-import { CATALOG_PAGE_SIZE } from '@/lib/config/catalog';
-import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Products | DevLovers',
@@ -74,8 +74,8 @@ export default async function ProductsPage({
 
   return (
     <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <header className="flex flex-col gap-4 border-b border-border pb-6 sm:flex-row sm:items-center sm:justify-between">
-        <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
+      <header className="border-border flex flex-col gap-4 border-b pb-6 sm:flex-row sm:items-center sm:justify-between">
+        <h1 className="text-foreground text-2xl font-bold tracking-tight sm:text-3xl">
           {t('title')}
         </h1>
 
@@ -101,10 +101,10 @@ export default async function ProductsPage({
               className="flex flex-col items-center justify-center py-16 text-center"
               role="status"
             >
-              <p className="text-lg font-medium text-foreground">
+              <p className="text-foreground text-lg font-medium">
                 {t('noProductsFound')}
               </p>
-              <p className="mt-2 text-sm text-muted-foreground">
+              <p className="text-muted-foreground mt-2 text-sm">
                 {t('adjustFilters')}
               </p>
             </div>
diff --git a/frontend/app/[locale]/signup/page.tsx b/frontend/app/[locale]/signup/page.tsx
index e89d9294..904648d4 100644
--- a/frontend/app/[locale]/signup/page.tsx
+++ b/frontend/app/[locale]/signup/page.tsx
@@ -1,22 +1,16 @@
-"use client";
+'use client';
 
-import { useLocale } from "next-intl";
-import { useSearchParams } from "next/navigation";
-import { SignupForm } from "@/components/auth/SignupForm";
-import { getSafeRedirect } from "@/lib/auth/safe-redirect";
+import { useSearchParams } from 'next/navigation';
+import { useLocale } from 'next-intl';
+
+import { SignupForm } from '@/components/auth/SignupForm';
+import { getSafeRedirect } from '@/lib/auth/safe-redirect';
 
 export default function SignupPage() {
   const locale = useLocale();
   const searchParams = useSearchParams();
 
-  const returnTo = getSafeRedirect(
-    searchParams.get("returnTo")
-  );
+  const returnTo = getSafeRedirect(searchParams.get('returnTo'));
 
-  return (
-    <SignupForm
-      locale={locale}
-      returnTo={returnTo}
-    />
-  );
-}
\ No newline at end of file
+  return <SignupForm locale={locale} returnTo={returnTo} />;
+}
diff --git a/frontend/app/[locale]/terms-of-service/page.tsx b/frontend/app/[locale]/terms-of-service/page.tsx
index e084eeec..f296fde7 100644
--- a/frontend/app/[locale]/terms-of-service/page.tsx
+++ b/frontend/app/[locale]/terms-of-service/page.tsx
@@ -1,4 +1,5 @@
 import { getTranslations } from 'next-intl/server';
+
 import LegalPageShell from '@/components/legal/LegalPageShell';
 import TermsOfServiceContent, {
   TERMS_LAST_UPDATED,
diff --git a/frontend/app/api/ai/explain/route.ts b/frontend/app/api/ai/explain/route.ts
index e12c8e1e..8c12c9ea 100644
--- a/frontend/app/api/ai/explain/route.ts
+++ b/frontend/app/api/ai/explain/route.ts
@@ -1,8 +1,9 @@
 export const runtime = 'nodejs';
 
+import Groq from 'groq-sdk';
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
-import Groq from 'groq-sdk';
+
 import {
   createExplainPrompt,
   type ExplanationResponse,
diff --git a/frontend/app/api/auth/github/callback/route.ts b/frontend/app/api/auth/github/callback/route.ts
index 7062d665..dc4ab439 100644
--- a/frontend/app/api/auth/github/callback/route.ts
+++ b/frontend/app/api/auth/github/callback/route.ts
@@ -1,176 +1,168 @@
-import { NextRequest, NextResponse } from "next/server";
-import { and, eq } from "drizzle-orm";
+import { and, eq } from 'drizzle-orm';
+import { NextRequest, NextResponse } from 'next/server';
 
-import { db } from "@/db";
-import { users } from "@/db/schema/users";
-import { signAuthToken, setAuthCookie } from "@/lib/auth";
-import { authEnv } from "@/lib/env/auth";
-import { consumeOAuthState } from "@/lib/auth/oauth-state";
+import { db } from '@/db';
+import { users } from '@/db/schema/users';
+import { setAuthCookie,signAuthToken } from '@/lib/auth';
+import { consumeOAuthState } from '@/lib/auth/oauth-state';
+import { authEnv } from '@/lib/env/auth';
 
 type GithubTokenResponse = {
-    access_token: string;
-    token_type: string;
-    scope: string;
+  access_token: string;
+  token_type: string;
+  scope: string;
 };
 
 type GithubUser = {
-    id: number;
-    login: string;
-    name: string | null;
-    avatar_url: string;
+  id: number;
+  login: string;
+  name: string | null;
+  avatar_url: string;
 };
 
 type GithubEmail = {
-    email: string;
-    primary: boolean;
-    verified: boolean;
+  email: string;
+  primary: boolean;
+  verified: boolean;
 };
 
 const GITHUB_HEADERS = {
-    "User-Agent": "devlovers-app",
+  'User-Agent': 'devlovers-app',
 };
 
 export async function GET(req: NextRequest) {
-    const code = req.nextUrl.searchParams.get("code");
-    const state = req.nextUrl.searchParams.get("state");
-
-    if (!(await consumeOAuthState(state))) {
-        return NextResponse.redirect(new URL("/login", req.url));
-    }
-
-    if (!code) {
-        return NextResponse.redirect(new URL("/login", req.url));
-    }
-
-    const tokenRes = await fetch(
-        "https://github.com/login/oauth/access_token",
-        {
-            method: "POST",
-            headers: {
-                Accept: "application/json",
-            },
-            body: new URLSearchParams({
-                client_id: authEnv.github.clientId,
-                client_secret: authEnv.github.clientSecret,
-                code,
-                redirect_uri: authEnv.github.redirectUri,
-            }),
-        }
-    );
-
-    if (!tokenRes.ok) {
-        console.error(
-            "GitHub token exchange failed",
-            await tokenRes.text()
-        );
-        return NextResponse.redirect(new URL("/login", req.url));
-    }
-
-    const tokenData = (await tokenRes.json()) as GithubTokenResponse;
-
-    const userRes = await fetch("https://api.github.com/user", {
-        headers: {
-            ...GITHUB_HEADERS,
-            Authorization: `Bearer ${tokenData.access_token}`,
-        },
-    });
-
-    if (!userRes.ok) {
-        return NextResponse.redirect(new URL("/login", req.url));
-    }
-
-    const ghUser = (await userRes.json()) as GithubUser;
-
-    const emailsRes = await fetch("https://api.github.com/user/emails", {
-        headers: {
-            ...GITHUB_HEADERS,
-            Authorization: `Bearer ${tokenData.access_token}`,
-        },
-    });
-
-    if (!emailsRes.ok) {
-        return NextResponse.redirect(new URL("/login", req.url));
-    }
-
-    const emails = (await emailsRes.json()) as GithubEmail[];
-
-    const primaryEmail = emails.find(
-        (e) => e.primary && e.verified
-    )?.email;
-
-    if (!primaryEmail) {
-        return NextResponse.redirect(new URL("/login", req.url));
-    }
-
-    const githubId = String(ghUser.id);
-    let user = null;
-
-    const [githubUser] = await db
-        .select({
-            id: users.id,
-            email: users.email,
-            role: users.role,
+  const code = req.nextUrl.searchParams.get('code');
+  const state = req.nextUrl.searchParams.get('state');
+
+  if (!(await consumeOAuthState(state))) {
+    return NextResponse.redirect(new URL('/login', req.url));
+  }
+
+  if (!code) {
+    return NextResponse.redirect(new URL('/login', req.url));
+  }
+
+  const tokenRes = await fetch('https://github.com/login/oauth/access_token', {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+    },
+    body: new URLSearchParams({
+      client_id: authEnv.github.clientId,
+      client_secret: authEnv.github.clientSecret,
+      code,
+      redirect_uri: authEnv.github.redirectUri,
+    }),
+  });
+
+  if (!tokenRes.ok) {
+    console.error('GitHub token exchange failed', await tokenRes.text());
+    return NextResponse.redirect(new URL('/login', req.url));
+  }
+
+  const tokenData = (await tokenRes.json()) as GithubTokenResponse;
+
+  const userRes = await fetch('https://api.github.com/user', {
+    headers: {
+      ...GITHUB_HEADERS,
+      Authorization: `Bearer ${tokenData.access_token}`,
+    },
+  });
+
+  if (!userRes.ok) {
+    return NextResponse.redirect(new URL('/login', req.url));
+  }
+
+  const ghUser = (await userRes.json()) as GithubUser;
+
+  const emailsRes = await fetch('https://api.github.com/user/emails', {
+    headers: {
+      ...GITHUB_HEADERS,
+      Authorization: `Bearer ${tokenData.access_token}`,
+    },
+  });
+
+  if (!emailsRes.ok) {
+    return NextResponse.redirect(new URL('/login', req.url));
+  }
+
+  const emails = (await emailsRes.json()) as GithubEmail[];
+
+  const primaryEmail = emails.find(e => e.primary && e.verified)?.email;
+
+  if (!primaryEmail) {
+    return NextResponse.redirect(new URL('/login', req.url));
+  }
+
+  const githubId = String(ghUser.id);
+  let user = null;
+
+  const [githubUser] = await db
+    .select({
+      id: users.id,
+      email: users.email,
+      role: users.role,
+    })
+    .from(users)
+    .where(and(eq(users.providerId, githubId), eq(users.provider, 'github')))
+    .limit(1);
+
+  if (githubUser) {
+    user = githubUser;
+  } else {
+    const [emailUser] = await db
+      .select({
+        id: users.id,
+        emailVerified: users.emailVerified,
+        image: users.image,
+        name: users.name,
+      })
+      .from(users)
+      .where(eq(users.email, primaryEmail))
+      .limit(1);
+
+    if (emailUser) {
+      const image =
+        emailUser.image && emailUser.image !== 'null'
+          ? emailUser.image
+          : ghUser.avatar_url;
+      const [updatedUser] = await db
+        .update(users)
+        .set({
+          provider: 'github',
+          providerId: githubId,
+          emailVerified: emailUser.emailVerified ?? new Date(),
+          image,
+          name: emailUser.name ?? ghUser.name ?? ghUser.login,
         })
-        .from(users)
-        .where(and(eq(users.providerId, githubId), eq(users.provider, "github")))
-        .limit(1);
+        .where(eq(users.id, emailUser.id))
+        .returning();
 
-    if (githubUser) {
-        user = githubUser;
+      user = updatedUser;
     } else {
-        const [emailUser] = await db
-            .select({
-                id: users.id,
-                emailVerified: users.emailVerified,
-                image: users.image,
-                name: users.name,
-            })
-            .from(users)
-            .where(eq(users.email, primaryEmail))
-            .limit(1);
-
-        if (emailUser) {
-            const image =
-                emailUser.image && emailUser.image !== "null"
-                    ? emailUser.image
-                    : ghUser.avatar_url;
-            const [updatedUser] = await db
-                .update(users)
-                .set({
-                    provider: "github",
-                    providerId: githubId,
-                    emailVerified: emailUser.emailVerified ?? new Date(),
-                    image,
-                    name: emailUser.name ?? ghUser.name ?? ghUser.login,
-                })
-                .where(eq(users.id, emailUser.id))
-                .returning();
-
-            user = updatedUser;
-        } else {
-            const [created] = await db
-                .insert(users)
-                .values({
-                    email: primaryEmail,
-                    name: ghUser.name ?? ghUser.login,
-                    image: ghUser.avatar_url,
-                    provider: "github",
-                    providerId: githubId,
-                    emailVerified: new Date(),
-                })
-                .returning();
-
-            user = created;
-        }
+      const [created] = await db
+        .insert(users)
+        .values({
+          email: primaryEmail,
+          name: ghUser.name ?? ghUser.login,
+          image: ghUser.avatar_url,
+          provider: 'github',
+          providerId: githubId,
+          emailVerified: new Date(),
+        })
+        .returning();
+
+      user = created;
     }
+  }
 
-    const token = signAuthToken({
-        userId: user.id,
-        email: user.email,
-        role: user.role === "admin" ? "admin" : "user",
-    });
+  const token = signAuthToken({
+    userId: user.id,
+    email: user.email,
+    role: user.role === 'admin' ? 'admin' : 'user',
+  });
 
-    await setAuthCookie(token);
+  await setAuthCookie(token);
 
-    return NextResponse.redirect(new URL("/dashboard", req.url));
+  return NextResponse.redirect(new URL('/dashboard', req.url));
 }
diff --git a/frontend/app/api/auth/github/route.ts b/frontend/app/api/auth/github/route.ts
index 17bb6e75..f26b5097 100644
--- a/frontend/app/api/auth/github/route.ts
+++ b/frontend/app/api/auth/github/route.ts
@@ -1,18 +1,22 @@
-import { authEnv } from "@/lib/env/auth";
-import { NextResponse } from "next/server";
-import { generateOAuthState, setOAuthStateCookie } from "@/lib/auth/oauth-state";
+import { NextResponse } from 'next/server';
+
+import {
+  generateOAuthState,
+  setOAuthStateCookie,
+} from '@/lib/auth/oauth-state';
+import { authEnv } from '@/lib/env/auth';
 
 export async function GET() {
-    const state = generateOAuthState();
-    await setOAuthStateCookie(state);
-    const params = new URLSearchParams({
-        client_id: authEnv.github.clientId,
-        redirect_uri: authEnv.github.redirectUri,
-        scope: "user:email",
-        state,
-    });
+  const state = generateOAuthState();
+  await setOAuthStateCookie(state);
+  const params = new URLSearchParams({
+    client_id: authEnv.github.clientId,
+    redirect_uri: authEnv.github.redirectUri,
+    scope: 'user:email',
+    state,
+  });
 
-    return NextResponse.redirect(
-        `https://github.com/login/oauth/authorize?${params.toString()}`
-    );
-}
\ No newline at end of file
+  return NextResponse.redirect(
+    `https://github.com/login/oauth/authorize?${params.toString()}`
+  );
+}
diff --git a/frontend/app/api/auth/google/callback/route.ts b/frontend/app/api/auth/google/callback/route.ts
index 2430415a..c5fffe27 100644
--- a/frontend/app/api/auth/google/callback/route.ts
+++ b/frontend/app/api/auth/google/callback/route.ts
@@ -1,11 +1,11 @@
-import { NextRequest, NextResponse } from "next/server";
-import { and, eq } from "drizzle-orm";
+import { and, eq } from 'drizzle-orm';
+import { NextRequest, NextResponse } from 'next/server';
 
-import { db } from "@/db";
-import { users } from "@/db/schema/users";
-import { signAuthToken, setAuthCookie } from "@/lib/auth";
-import { authEnv } from "@/lib/env/auth";
-import { consumeOAuthState } from "@/lib/auth/oauth-state";
+import { db } from '@/db';
+import { users } from '@/db/schema/users';
+import { setAuthCookie,signAuthToken } from '@/lib/auth';
+import { consumeOAuthState } from '@/lib/auth/oauth-state';
+import { authEnv } from '@/lib/env/auth';
 
 type GoogleTokenResponse = {
   access_token: string;
@@ -23,42 +23,41 @@ type GoogleProfile = {
 };
 
 export async function GET(req: NextRequest) {
-  const code = req.nextUrl.searchParams.get("code");
+  const code = req.nextUrl.searchParams.get('code');
 
   if (!code) {
-    return NextResponse.redirect(new URL("/login", req.url));
+    return NextResponse.redirect(new URL('/login', req.url));
   }
 
-  const state = req.nextUrl.searchParams.get("state");
+  const state = req.nextUrl.searchParams.get('state');
 
   if (!(await consumeOAuthState(state))) {
-    return NextResponse.redirect(new URL("/login", req.url));
+    return NextResponse.redirect(new URL('/login', req.url));
   }
 
-  const tokenRes = await fetch("https://oauth2.googleapis.com/token", {
-    method: "POST",
+  const tokenRes = await fetch('https://oauth2.googleapis.com/token', {
+    method: 'POST',
     headers: {
-      "Content-Type": "application/x-www-form-urlencoded",
+      'Content-Type': 'application/x-www-form-urlencoded',
     },
     body: new URLSearchParams({
       code,
       client_id: authEnv.google.clientId,
       client_secret: authEnv.google.clientSecret,
       redirect_uri: authEnv.google.redirectUri,
-      grant_type: "authorization_code",
+      grant_type: 'authorization_code',
     }),
   });
 
   if (!tokenRes.ok) {
-    console.error(
-      "Google token exchange failed", await tokenRes.text())
-    return NextResponse.redirect(new URL("/login", req.url));
+    console.error('Google token exchange failed', await tokenRes.text());
+    return NextResponse.redirect(new URL('/login', req.url));
   }
 
   const tokenData = (await tokenRes.json()) as GoogleTokenResponse;
 
   const profileRes = await fetch(
-    "https://www.googleapis.com/oauth2/v2/userinfo",
+    'https://www.googleapis.com/oauth2/v2/userinfo',
     {
       headers: {
         Authorization: `Bearer ${tokenData.access_token}`,
@@ -67,14 +66,16 @@ export async function GET(req: NextRequest) {
   );
 
   if (!profileRes.ok) {
-    return NextResponse.redirect(new URL("/login", req.url));
+    return NextResponse.redirect(new URL('/login', req.url));
   }
 
   const profile = (await profileRes.json()) as GoogleProfile;
 
   if (!profile.verified_email) {
-    console.warn("Google email not verified", profile);
-    return NextResponse.redirect(new URL("/login?error=unverified_email", req.url));
+    console.warn('Google email not verified', profile);
+    return NextResponse.redirect(
+      new URL('/login?error=unverified_email', req.url)
+    );
   }
 
   const email = profile.email;
@@ -89,13 +90,12 @@ export async function GET(req: NextRequest) {
       role: users.role,
     })
     .from(users)
-    .where(and(eq(users.providerId, googleId), eq(users.provider, "google")))
+    .where(and(eq(users.providerId, googleId), eq(users.provider, 'google')))
     .limit(1);
 
   if (googleUser) {
     user = googleUser;
   } else {
-
     const [emailUser] = await db
       .select({
         id: users.id,
@@ -109,13 +109,13 @@ export async function GET(req: NextRequest) {
 
     if (emailUser) {
       const image =
-        emailUser.image && emailUser.image !== "null"
+        emailUser.image && emailUser.image !== 'null'
           ? emailUser.image
           : profile.picture;
       const [updatedUser] = await db
         .update(users)
         .set({
-          provider: "google",
+          provider: 'google',
           providerId: googleId,
           emailVerified: emailUser.emailVerified ?? new Date(),
           image,
@@ -126,14 +126,13 @@ export async function GET(req: NextRequest) {
 
       user = updatedUser;
     } else {
-
       const [created] = await db
         .insert(users)
         .values({
           email,
           name: profile.name,
           image: profile.picture,
-          provider: "google",
+          provider: 'google',
           providerId: googleId,
           emailVerified: new Date(),
         })
@@ -143,14 +142,13 @@ export async function GET(req: NextRequest) {
     }
   }
 
-
   const token = signAuthToken({
     userId: user.id,
     email: user.email,
-    role: user.role === "admin" ? "admin" : "user",
+    role: user.role === 'admin' ? 'admin' : 'user',
   });
 
   await setAuthCookie(token);
 
-  return NextResponse.redirect(new URL("/dashboard", req.url));
-}   
+  return NextResponse.redirect(new URL('/dashboard', req.url));
+}
diff --git a/frontend/app/api/auth/google/route.ts b/frontend/app/api/auth/google/route.ts
index ba06b8b8..85d6aec9 100644
--- a/frontend/app/api/auth/google/route.ts
+++ b/frontend/app/api/auth/google/route.ts
@@ -1,16 +1,16 @@
-import { authEnv } from "@/lib/env/auth";
-import { NextResponse } from "next/server";
+import { NextResponse } from 'next/server';
+
 import {
   generateOAuthState,
   setOAuthStateCookie,
-} from "@/lib/auth/oauth-state";
-
+} from '@/lib/auth/oauth-state';
+import { authEnv } from '@/lib/env/auth';
 
 export async function GET() {
-  const { clientId, redirectUri } = authEnv.google
+  const { clientId, redirectUri } = authEnv.google;
 
   if (!clientId || !redirectUri) {
-    throw new Error("Google OAuth is not properly configured");
+    throw new Error('Google OAuth is not properly configured');
   }
 
   const state = generateOAuthState();
@@ -19,13 +19,13 @@ export async function GET() {
   const params = new URLSearchParams({
     client_id: clientId,
     redirect_uri: redirectUri,
-    response_type: "code",
-    scope: "openid email profile",
-    prompt: "select_account",
+    response_type: 'code',
+    scope: 'openid email profile',
+    prompt: 'select_account',
     state,
   });
 
   return NextResponse.redirect(
     `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/api/auth/login/route.ts b/frontend/app/api/auth/login/route.ts
index 309b8c08..dfa987d2 100644
--- a/frontend/app/api/auth/login/route.ts
+++ b/frontend/app/api/auth/login/route.ts
@@ -1,19 +1,18 @@
-import { NextResponse } from "next/server";
+import bcrypt from 'bcryptjs';
+import { eq } from 'drizzle-orm';
 import { revalidatePath } from 'next/cache';
-import bcrypt from "bcryptjs";
-import { z } from "zod";
-import { eq } from "drizzle-orm";
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
 
-import { db } from "@/db";
-import { users } from "@/db/schema/users";
-import { signAuthToken, setAuthCookie } from "@/lib/auth";
-
-export const runtime = "nodejs";
+import { db } from '@/db';
+import { users } from '@/db/schema/users';
+import { setAuthCookie,signAuthToken } from '@/lib/auth';
 
+export const runtime = 'nodejs';
 
 const loginSchema = z.object({
-  email: z.string().email("Invalid email"),
-  password: z.string().min(1, "Password is required"),
+  email: z.string().email('Invalid email'),
+  password: z.string().min(1, 'Password is required'),
 });
 
 export async function POST(req: Request) {
@@ -21,10 +20,7 @@ export async function POST(req: Request) {
   const parsed = loginSchema.safeParse(body);
 
   if (!parsed.success) {
-    return NextResponse.json(
-      { error: "Invalid credentials" },
-      { status: 401 }
-    );
+    return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 });
   }
 
   const { email, password } = parsed.data;
@@ -44,22 +40,25 @@ export async function POST(req: Request) {
 
   if (result.length === 0) {
     return NextResponse.json(
-      { error: "Invalid email or password" },
+      { error: 'Invalid email or password' },
       { status: 401 }
     );
   }
 
-  const user = result[0]
+  const user = result[0];
 
   if (!user.provider) {
-    throw new Error("User record missing provider");
+    throw new Error('User record missing provider');
   }
 
-  if (user.provider === "credentials" && user.emailVerified === null) {
-    return NextResponse.json({
-      error: "Email is not verified",
-      code: "EMAIL_NOT_VERIFIED",
-    }, { status: 403 })
+  if (user.provider === 'credentials' && user.emailVerified === null) {
+    return NextResponse.json(
+      {
+        error: 'Email is not verified',
+        code: 'EMAIL_NOT_VERIFIED',
+      },
+      { status: 403 }
+    );
   }
 
   if (
@@ -67,18 +66,18 @@ export async function POST(req: Request) {
     !(await bcrypt.compare(password, user.passwordHash))
   ) {
     return NextResponse.json(
-      { error: "Invalid email or password" },
+      { error: 'Invalid email or password' },
       { status: 401 }
     );
   }
 
   const token = signAuthToken({
     userId: result[0].id,
-    role: result[0].role as "user" | "admin",
+    role: result[0].role as 'user' | 'admin',
     email: normalizedEmail,
   });
 
   await setAuthCookie(token);
   revalidatePath('/[locale]', 'layout');
   return NextResponse.json({ success: true, userId: result[0].id });
-}
\ No newline at end of file
+}
diff --git a/frontend/app/api/auth/logout/route.ts b/frontend/app/api/auth/logout/route.ts
index 848ad663..57de0cf0 100644
--- a/frontend/app/api/auth/logout/route.ts
+++ b/frontend/app/api/auth/logout/route.ts
@@ -1,9 +1,10 @@
-import { NextResponse } from "next/server";
-import { revalidatePath } from 'next/cache'; 
-import { clearAuthCookie } from "@/lib/auth";
+import { revalidatePath } from 'next/cache';
+import { NextResponse } from 'next/server';
+
+import { clearAuthCookie } from '@/lib/auth';
 
 export async function POST() {
   await clearAuthCookie();
   revalidatePath('/[locale]', 'layout');
   return NextResponse.json({ success: true });
-}
\ No newline at end of file
+}
diff --git a/frontend/app/api/auth/me/route.ts b/frontend/app/api/auth/me/route.ts
index 7c2f8da8..5b755c69 100644
--- a/frontend/app/api/auth/me/route.ts
+++ b/frontend/app/api/auth/me/route.ts
@@ -1,9 +1,10 @@
-import "server-only"
+import 'server-only';
 
-import { NextResponse } from "next/server"
-import { getCurrentUser } from "@/lib/auth"
+import { NextResponse } from 'next/server';
+
+import { getCurrentUser } from '@/lib/auth';
 
 export async function GET() {
-  const user = await getCurrentUser()
-  return NextResponse.json({ user }, { status: 200 })
+  const user = await getCurrentUser();
+  return NextResponse.json({ user }, { status: 200 });
 }
diff --git a/frontend/app/api/auth/password-reset/confirm/route.ts b/frontend/app/api/auth/password-reset/confirm/route.ts
index 2f1f5ec2..11b5a872 100644
--- a/frontend/app/api/auth/password-reset/confirm/route.ts
+++ b/frontend/app/api/auth/password-reset/confirm/route.ts
@@ -1,71 +1,63 @@
-import { NextResponse } from "next/server";
-import { z } from "zod";
-import { eq } from "drizzle-orm";
-import bcrypt from "bcryptjs";
-
-import { db } from "@/db";
-import { users } from "@/db/schema/users";
-import { passwordResetTokens } from "@/db/schema/passwordResetTokens";
+import bcrypt from 'bcryptjs';
+import { eq } from 'drizzle-orm';
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
 
+import { db } from '@/db';
+import { passwordResetTokens } from '@/db/schema/passwordResetTokens';
+import { users } from '@/db/schema/users';
 
 const schema = z.object({
-    token: z.string().uuid(),
-    password: z.string().min(8),
+  token: z.string().uuid(),
+  password: z.string().min(8),
 });
 
 export async function POST(req: Request) {
-    const body = await req.json().catch(() => null);
-    const parsed = schema.safeParse(body);
-
-    if (!parsed.success) {
-        return NextResponse.json(
-            { error: "Invalid request" },
-            { status: 400 }
-        );
-    }
-
-    const { token, password } = parsed.data;
-
-    const rows = await db
-        .select({
-            userId: passwordResetTokens.userId,
-            expiresAt: passwordResetTokens.expiresAt,
-        })
-        .from(passwordResetTokens)
-        .where(eq(passwordResetTokens.token, token))
-        .limit(1);
-
-    if (rows.length === 0) {
-        return NextResponse.json(
-            { error: "Invalid or expired token" },
-            { status: 400 }
-        );
-    }
-
-    const { userId, expiresAt } = rows[0];
-
-    if (expiresAt < new Date()) {
-        await db
-            .delete(passwordResetTokens)
-            .where(eq(passwordResetTokens.token, token));
+  const body = await req.json().catch(() => null);
+  const parsed = schema.safeParse(body);
+
+  if (!parsed.success) {
+    return NextResponse.json({ error: 'Invalid request' }, { status: 400 });
+  }
+
+  const { token, password } = parsed.data;
+
+  const rows = await db
+    .select({
+      userId: passwordResetTokens.userId,
+      expiresAt: passwordResetTokens.expiresAt,
+    })
+    .from(passwordResetTokens)
+    .where(eq(passwordResetTokens.token, token))
+    .limit(1);
+
+  if (rows.length === 0) {
+    return NextResponse.json(
+      { error: 'Invalid or expired token' },
+      { status: 400 }
+    );
+  }
+
+  const { userId, expiresAt } = rows[0];
+
+  if (expiresAt < new Date()) {
+    await db
+      .delete(passwordResetTokens)
+      .where(eq(passwordResetTokens.token, token));
 
-        return NextResponse.json(
-            { error: "Invalid or expired token" },
-            { status: 400 }
-        );
-    }
+    return NextResponse.json(
+      { error: 'Invalid or expired token' },
+      { status: 400 }
+    );
+  }
 
-    const passwordHash = await bcrypt.hash(password, 10);
+  const passwordHash = await bcrypt.hash(password, 10);
 
+  await db
+    .delete(passwordResetTokens)
+    .where(eq(passwordResetTokens.token, token));
 
-    await db
-        .delete(passwordResetTokens)
-        .where(eq(passwordResetTokens.token, token));
-
-    await db
-        .update(users)
-        .set({ passwordHash })
-        .where(eq(users.id, userId));
+  await db.update(users).set({ passwordHash }).where(eq(users.id, userId));
 
-    return NextResponse.json({ success: true });
-}
\ No newline at end of file
+  return NextResponse.json({ success: true });
+}
diff --git a/frontend/app/api/auth/password-reset/route.ts b/frontend/app/api/auth/password-reset/route.ts
index 4983db81..1055aa70 100644
--- a/frontend/app/api/auth/password-reset/route.ts
+++ b/frontend/app/api/auth/password-reset/route.ts
@@ -1,63 +1,63 @@
-import { NextResponse } from "next/server";
-import { z } from "zod";
-import { eq } from "drizzle-orm";
-
-import { db } from "@/db";
-import { users } from "@/db/schema/users";
-import { passwordResetTokens } from "@/db/schema/passwordResetTokens";
-import { createPasswordResetToken } from "@/lib/auth/password-reset";
-import { sendPasswordResetEmail } from "@/lib/email/sendPasswordResetEmail";
-import { headers } from "next/headers";
-import { resolveBaseUrl } from "@/lib/http/getBaseUrl";
+import { eq } from 'drizzle-orm';
+import { headers } from 'next/headers';
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+
+import { db } from '@/db';
+import { passwordResetTokens } from '@/db/schema/passwordResetTokens';
+import { users } from '@/db/schema/users';
+import { createPasswordResetToken } from '@/lib/auth/password-reset';
+import { sendPasswordResetEmail } from '@/lib/email/sendPasswordResetEmail';
+import { resolveBaseUrl } from '@/lib/http/getBaseUrl';
 
 const schema = z.object({
-    email: z.string().email(),
+  email: z.string().email(),
 });
 
 export async function POST(req: Request) {
-    const body = await req.json().catch(() => null);
-    const parsed = schema.safeParse(body);
+  const body = await req.json().catch(() => null);
+  const parsed = schema.safeParse(body);
 
-    if (!parsed.success) {
-        return NextResponse.json({ success: true });
-    }
-
-    const email = parsed.data.email.toLowerCase();
-
-    const rows = await db
-        .select({
-            id: users.id,
-            provider: users.provider,
-        })
-        .from(users)
-        .where(eq(users.email, email))
-        .limit(1);
-
-    if (rows.length === 0) {
-        return NextResponse.json({ success: true });
-    }
-
-    const user = rows[0];
+  if (!parsed.success) {
+    return NextResponse.json({ success: true });
+  }
 
-    if (user.provider !== "credentials") {
-        return NextResponse.json({ success: true });
-    }
+  const email = parsed.data.email.toLowerCase();
 
-    await db
-        .delete(passwordResetTokens)
-        .where(eq(passwordResetTokens.userId, user.id));
+  const rows = await db
+    .select({
+      id: users.id,
+      provider: users.provider,
+    })
+    .from(users)
+    .where(eq(users.email, email))
+    .limit(1);
 
-    const token = await createPasswordResetToken(user.id);
+  if (rows.length === 0) {
+    return NextResponse.json({ success: true });
+  }
 
-    const h = await headers()
-    const baseUrl = resolveBaseUrl({
-        origin: h.get("origin"),
-        host: h.get("host"),
-    })
+  const user = rows[0];
 
-    await sendPasswordResetEmail({
-        to: email,
-        resetUrl: `${baseUrl}/reset-password?token=${token}`,
-    });
+  if (user.provider !== 'credentials') {
     return NextResponse.json({ success: true });
-}
\ No newline at end of file
+  }
+
+  await db
+    .delete(passwordResetTokens)
+    .where(eq(passwordResetTokens.userId, user.id));
+
+  const token = await createPasswordResetToken(user.id);
+
+  const h = await headers();
+  const baseUrl = resolveBaseUrl({
+    origin: h.get('origin'),
+    host: h.get('host'),
+  });
+
+  await sendPasswordResetEmail({
+    to: email,
+    resetUrl: `${baseUrl}/reset-password?token=${token}`,
+  });
+  return NextResponse.json({ success: true });
+}
diff --git a/frontend/app/api/auth/resend-verification/route.ts b/frontend/app/api/auth/resend-verification/route.ts
index 523af8bc..e548d720 100644
--- a/frontend/app/api/auth/resend-verification/route.ts
+++ b/frontend/app/api/auth/resend-verification/route.ts
@@ -1,71 +1,69 @@
-import { NextResponse } from "next/server";
-import { z } from "zod";
-import { eq } from "drizzle-orm";
-
-import { db } from "@/db";
-import { users } from "@/db/schema/users";
-import { emailVerificationTokens } from "@/db/schema/emailVerificationTokens";
-import { createEmailVerificationToken } from "@/lib/auth/email-verification";
-import { sendVerificationEmail } from "@/lib/email/sendVerificationEmail";
-import { headers } from "next/headers";
-import { resolveBaseUrl } from "@/lib/http/getBaseUrl";
+import { eq } from 'drizzle-orm';
+import { headers } from 'next/headers';
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+
+import { db } from '@/db';
+import { emailVerificationTokens } from '@/db/schema/emailVerificationTokens';
+import { users } from '@/db/schema/users';
+import { createEmailVerificationToken } from '@/lib/auth/email-verification';
+import { sendVerificationEmail } from '@/lib/email/sendVerificationEmail';
+import { resolveBaseUrl } from '@/lib/http/getBaseUrl';
 
 const schema = z.object({
-    email: z.string().email(),
+  email: z.string().email(),
 });
 
-
-
 export async function POST(req: Request) {
-    const body = await req.json().catch(() => null);
-    const parsed = schema.safeParse(body);
+  const body = await req.json().catch(() => null);
+  const parsed = schema.safeParse(body);
 
-    if (!parsed.success) {
-        return NextResponse.json({ success: true });
-    }
+  if (!parsed.success) {
+    return NextResponse.json({ success: true });
+  }
 
-    const email = parsed.data.email.toLowerCase();
+  const email = parsed.data.email.toLowerCase();
 
-    const rows = await db
-        .select({
-            id: users.id,
-            provider: users.provider,
-            emailVerified: users.emailVerified,
-        })
-        .from(users)
-        .where(eq(users.email, email))
-        .limit(1);
+  const rows = await db
+    .select({
+      id: users.id,
+      provider: users.provider,
+      emailVerified: users.emailVerified,
+    })
+    .from(users)
+    .where(eq(users.email, email))
+    .limit(1);
 
-    if (rows.length === 0) {
-        return NextResponse.json({ success: true });
-    }
+  if (rows.length === 0) {
+    return NextResponse.json({ success: true });
+  }
 
-    const user = rows[0];
+  const user = rows[0];
 
-    if (user.provider !== "credentials") {
-        return NextResponse.json({ success: true });
-    }
+  if (user.provider !== 'credentials') {
+    return NextResponse.json({ success: true });
+  }
 
-    if (user.emailVerified) {
-        return NextResponse.json({ success: true });
-    }
+  if (user.emailVerified) {
+    return NextResponse.json({ success: true });
+  }
 
-    await db
-        .delete(emailVerificationTokens)
-        .where(eq(emailVerificationTokens.userId, user.id));
+  await db
+    .delete(emailVerificationTokens)
+    .where(eq(emailVerificationTokens.userId, user.id));
 
-    const token = await createEmailVerificationToken(user.id);
+  const token = await createEmailVerificationToken(user.id);
 
-    const h = await headers();
-    const baseUrl = resolveBaseUrl({
-        origin: h.get("origin"),
-        host: h.get("host"),
-    });
+  const h = await headers();
+  const baseUrl = resolveBaseUrl({
+    origin: h.get('origin'),
+    host: h.get('host'),
+  });
 
-    await sendVerificationEmail({
-        to: email,
-        verifyUrl: `${baseUrl}/api/auth/verify-email?token=${token}`,
-    });
+  await sendVerificationEmail({
+    to: email,
+    verifyUrl: `${baseUrl}/api/auth/verify-email?token=${token}`,
+  });
 
-    return NextResponse.json({ success: true });
-}
\ No newline at end of file
+  return NextResponse.json({ success: true });
+}
diff --git a/frontend/app/api/auth/signup/route.ts b/frontend/app/api/auth/signup/route.ts
index 1b43ca7a..95ef342d 100644
--- a/frontend/app/api/auth/signup/route.ts
+++ b/frontend/app/api/auth/signup/route.ts
@@ -1,23 +1,21 @@
-import { NextResponse } from "next/server";
-import bcrypt from "bcryptjs";
-import { z } from "zod";
-import { eq } from "drizzle-orm";
+import bcrypt from 'bcryptjs';
+import { eq } from 'drizzle-orm';
+import { headers } from 'next/headers';
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
 
-import { db } from "@/db";
-import { users } from "@/db/schema/users";
-import { createEmailVerificationToken } from "@/lib/auth/email-verification";
-import { sendVerificationEmail } from "@/lib/email/sendVerificationEmail";
-import { headers } from "next/headers";
-import { resolveBaseUrl } from "@/lib/http/getBaseUrl";
-
-
-export const runtime = "nodejs";
+import { db } from '@/db';
+import { users } from '@/db/schema/users';
+import { createEmailVerificationToken } from '@/lib/auth/email-verification';
+import { sendVerificationEmail } from '@/lib/email/sendVerificationEmail';
+import { resolveBaseUrl } from '@/lib/http/getBaseUrl';
 
+export const runtime = 'nodejs';
 
 const signupSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  email: z.string().email("Invalid email"),
-  password: z.string().min(8, "Password must be at least 8 characters"),
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().email('Invalid email'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
 });
 
 export async function POST(req: Request) {
@@ -43,7 +41,7 @@ export async function POST(req: Request) {
 
     if (existingUser.length > 0) {
       return NextResponse.json(
-        { error: "Email already in use" },
+        { error: 'Email already in use' },
         { status: 409 }
       );
     }
@@ -56,37 +54,38 @@ export async function POST(req: Request) {
         name,
         email: normalizedEmail,
         passwordHash,
-        provider: "credentials",
+        provider: 'credentials',
         emailVerified: null,
-        role: "user",
+        role: 'user',
       })
       .returning();
 
-    const token = await createEmailVerificationToken(user.id)
+    const token = await createEmailVerificationToken(user.id);
 
     const h = await headers();
     const baseUrl = resolveBaseUrl({
-      origin: h.get("origin"),
-      host: h.get("host"),
+      origin: h.get('origin'),
+      host: h.get('host'),
     });
 
     await sendVerificationEmail({
       to: normalizedEmail,
-      verifyUrl: `${baseUrl}/api/auth/verify-email?token=${token}`
-    })
-
-    return NextResponse.json({
-      success: true,
-      verificationRequired: true
-    }, { status: 201 })
+      verifyUrl: `${baseUrl}/api/auth/verify-email?token=${token}`,
+    });
 
+    return NextResponse.json(
+      {
+        success: true,
+        verificationRequired: true,
+      },
+      { status: 201 }
+    );
   } catch (error) {
-    console.error("Signup failed:", error);
-    const message =
-      error instanceof Error ? error.message : "Unknown error";
+    console.error('Signup failed:', error);
+    const message = error instanceof Error ? error.message : 'Unknown error';
     return NextResponse.json(
-      { error: "Signup failed", details: message },
+      { error: 'Signup failed', details: message },
       { status: 500 }
     );
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/api/auth/verify-email/route.ts b/frontend/app/api/auth/verify-email/route.ts
index b03b69ae..d7da3813 100644
--- a/frontend/app/api/auth/verify-email/route.ts
+++ b/frontend/app/api/auth/verify-email/route.ts
@@ -1,58 +1,56 @@
-import { NextRequest, NextResponse } from "next/server";
-import { eq } from "drizzle-orm";
+import { eq } from 'drizzle-orm';
+import { NextRequest, NextResponse } from 'next/server';
 
-import { db } from "@/db";
-import { users } from "@/db/schema/users";
-import { emailVerificationTokens } from "@/db/schema/emailVerificationTokens";
+import { db } from '@/db';
+import { emailVerificationTokens } from '@/db/schema/emailVerificationTokens';
+import { users } from '@/db/schema/users';
 
 export async function GET(req: NextRequest) {
-    const token = req.nextUrl.searchParams.get("token");
-
-    if (!token) {
-        return NextResponse.redirect(
-            new URL("/login?error=invalid_token", req.url)
-        );
-    }
-
-    const now = new Date();
-
-    const rows = await db
-        .select({
-            userId: emailVerificationTokens.userId,
-            expiresAt: emailVerificationTokens.expiresAt,
-        })
-        .from(emailVerificationTokens)
-        .where(eq(emailVerificationTokens.token, token))
-        .limit(1);
-
-    if (rows.length === 0) {
-        return NextResponse.redirect(
-            new URL("/login?error=invalid_token", req.url)
-        );
-    }
-
-    const { userId, expiresAt } = rows[0];
-
-    if (expiresAt < now) {
-        await db
-            .delete(emailVerificationTokens)
-            .where(eq(emailVerificationTokens.token, token));
-
-        return NextResponse.redirect(
-            new URL("/login?error=token_expired", req.url)
-        );
-    }
+  const token = req.nextUrl.searchParams.get('token');
 
-    await db
-        .update(users)
-        .set({ emailVerified: now })
-        .where(eq(users.id, userId));
+  if (!token) {
+    return NextResponse.redirect(
+      new URL('/login?error=invalid_token', req.url)
+    );
+  }
+
+  const now = new Date();
+
+  const rows = await db
+    .select({
+      userId: emailVerificationTokens.userId,
+      expiresAt: emailVerificationTokens.expiresAt,
+    })
+    .from(emailVerificationTokens)
+    .where(eq(emailVerificationTokens.token, token))
+    .limit(1);
+
+  if (rows.length === 0) {
+    return NextResponse.redirect(
+      new URL('/login?error=invalid_token', req.url)
+    );
+  }
+
+  const { userId, expiresAt } = rows[0];
 
+  if (expiresAt < now) {
     await db
-        .delete(emailVerificationTokens)
-        .where(eq(emailVerificationTokens.token, token));
+      .delete(emailVerificationTokens)
+      .where(eq(emailVerificationTokens.token, token));
 
     return NextResponse.redirect(
-        new URL("/login?verified=1", req.url)
+      new URL('/login?error=token_expired', req.url)
     );
-}
\ No newline at end of file
+  }
+
+  await db
+    .update(users)
+    .set({ emailVerified: now })
+    .where(eq(users.id, userId));
+
+  await db
+    .delete(emailVerificationTokens)
+    .where(eq(emailVerificationTokens.token, token));
+
+  return NextResponse.redirect(new URL('/login?verified=1', req.url));
+}
diff --git a/frontend/app/api/blog-author/route.ts b/frontend/app/api/blog-author/route.ts
index 4df84c69..c59cb47b 100644
--- a/frontend/app/api/blog-author/route.ts
+++ b/frontend/app/api/blog-author/route.ts
@@ -1,5 +1,6 @@
 import groq from 'groq';
 import { NextResponse } from 'next/server';
+
 import { client } from '@/client';
 
 export const revalidate = 0;
diff --git a/frontend/app/api/blog-search/route.ts b/frontend/app/api/blog-search/route.ts
index 14eab6bc..bc35755b 100644
--- a/frontend/app/api/blog-search/route.ts
+++ b/frontend/app/api/blog-search/route.ts
@@ -1,5 +1,6 @@
 import groq from 'groq';
 import { NextResponse } from 'next/server';
+
 import { client } from '@/client';
 
 const searchQuery = groq`
diff --git a/frontend/app/api/questions/[category]/route.ts b/frontend/app/api/questions/[category]/route.ts
index 4817794b..193e749b 100644
--- a/frontend/app/api/questions/[category]/route.ts
+++ b/frontend/app/api/questions/[category]/route.ts
@@ -1,7 +1,8 @@
+import { and, eq, ilike,sql } from 'drizzle-orm';
 import { NextResponse } from 'next/server';
+
 import { db } from '@/db';
 import { categories, questions, questionTranslations } from '@/db/schema';
-import { eq, sql, and, ilike } from 'drizzle-orm';
 import { buildQaCacheKey, getQaCache, setQaCache } from '@/lib/cache/qa';
 
 export const dynamic = 'force-dynamic';
diff --git a/frontend/app/api/quiz/[slug]/route.ts b/frontend/app/api/quiz/[slug]/route.ts
index 0ee7eed1..fdc4fa81 100644
--- a/frontend/app/api/quiz/[slug]/route.ts
+++ b/frontend/app/api/quiz/[slug]/route.ts
@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
+
 import { getQuizBySlug, getQuizQuestionsRandomized } from '@/db/queries/quiz';
 
 export async function GET(
diff --git a/frontend/app/api/quiz/guest-result/route.ts b/frontend/app/api/quiz/guest-result/route.ts
index eb63df90..15701095 100644
--- a/frontend/app/api/quiz/guest-result/route.ts
+++ b/frontend/app/api/quiz/guest-result/route.ts
@@ -1,23 +1,24 @@
-import { NextResponse } from "next/server";
-import { getCurrentUser } from "@/lib/auth";
-import { db } from "@/db";
+import { eq, inArray } from 'drizzle-orm';
+import { NextResponse } from 'next/server';
+
+import { db } from '@/db';
+import { awardQuizPoints, calculateQuizPoints } from '@/db/queries/points';
 import {
-  quizAttempts,
+  quizAnswers,
   quizAttemptAnswers,
+  quizAttempts,
   quizQuestions,
-  quizAnswers,
-} from "@/db/schema/quiz";
-import { awardQuizPoints, calculateQuizPoints } from "@/db/queries/points";
-import { eq, inArray } from "drizzle-orm";
+} from '@/db/schema/quiz';
+import { getCurrentUser } from '@/lib/auth';
 
-export const runtime = "nodejs";
+export const runtime = 'nodejs';
 
 export async function POST(req: Request) {
   const body = await req.json().catch(() => null);
 
   if (!body) {
     return NextResponse.json(
-      { success: false, error: "Invalid input" },
+      { success: false, error: 'Invalid input' },
       { status: 400 }
     );
   }
@@ -26,7 +27,7 @@ export async function POST(req: Request) {
 
   if (!quizId || !Array.isArray(answers) || answers.length === 0) {
     return NextResponse.json(
-      { success: false, error: "Invalid input" },
+      { success: false, error: 'Invalid input' },
       { status: 400 }
     );
   }
@@ -34,7 +35,7 @@ export async function POST(req: Request) {
   const session = await getCurrentUser();
   if (!session) {
     return NextResponse.json(
-      { success: false, error: "Unauthorized" },
+      { success: false, error: 'Unauthorized' },
       { status: 401 }
     );
   }
@@ -48,14 +49,14 @@ export async function POST(req: Request) {
 
   if (questionRows.length === 0) {
     return NextResponse.json(
-      { success: false, error: "Quiz not found" },
+      { success: false, error: 'Quiz not found' },
       { status: 404 }
     );
   }
 
   if (answers.length !== questionRows.length) {
     return NextResponse.json(
-      { success: false, error: "Invalid input: answers count mismatch" },
+      { success: false, error: 'Invalid input: answers count mismatch' },
       { status: 400 }
     );
   }
@@ -67,21 +68,21 @@ export async function POST(req: Request) {
   for (const answer of answers) {
     if (!answer?.questionId || !answer?.selectedAnswerId) {
       return NextResponse.json(
-        { success: false, error: "Invalid answer payload" },
+        { success: false, error: 'Invalid answer payload' },
         { status: 400 }
       );
     }
 
     if (!questionIdSet.has(answer.questionId)) {
       return NextResponse.json(
-        { success: false, error: "Invalid question in answers" },
+        { success: false, error: 'Invalid question in answers' },
         { status: 400 }
       );
     }
 
     if (seenQuestionIds.has(answer.questionId)) {
       return NextResponse.json(
-        { success: false, error: "Duplicate answer for question" },
+        { success: false, error: 'Duplicate answer for question' },
         { status: 400 }
       );
     }
@@ -101,7 +102,7 @@ export async function POST(req: Request) {
 
   if (answerRows.length !== answerIds.length) {
     return NextResponse.json(
-      { success: false, error: "Invalid answer selection" },
+      { success: false, error: 'Invalid answer selection' },
       { status: 400 }
     );
   }
@@ -116,7 +117,7 @@ export async function POST(req: Request) {
     const record = answerById.get(answer.selectedAnswerId);
     if (!record || record.quizQuestionId !== answer.questionId) {
       return NextResponse.json(
-        { success: false, error: "Answer does not match question" },
+        { success: false, error: 'Answer does not match question' },
         { status: 400 }
       );
     }
@@ -124,7 +125,7 @@ export async function POST(req: Request) {
     if (record.isCorrect) correctAnswersCount++;
 
     attemptAnswers.push({
-      attemptId: "",
+      attemptId: '',
       quizQuestionId: answer.questionId,
       selectedAnswerId: answer.selectedAnswerId,
       isCorrect: record.isCorrect,
@@ -187,10 +188,10 @@ export async function POST(req: Request) {
       pointsAwarded,
     });
   } catch (error) {
-    console.error("Failed to save guest quiz result:", error);
+    console.error('Failed to save guest quiz result:', error);
     return NextResponse.json(
-      { success: false, error: "Failed to save result" },
+      { success: false, error: 'Failed to save result' },
       { status: 500 }
     );
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/api/quiz/verify-answer/route.ts b/frontend/app/api/quiz/verify-answer/route.ts
index 775a263e..bd00725d 100644
--- a/frontend/app/api/quiz/verify-answer/route.ts
+++ b/frontend/app/api/quiz/verify-answer/route.ts
@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
+
 import { decryptAnswers } from '@/lib/quiz/quiz-crypto';
 
 interface VerifyRequest {
diff --git a/frontend/app/api/sessions/activity/route.ts b/frontend/app/api/sessions/activity/route.ts
index cce640f9..ee42a81c 100644
--- a/frontend/app/api/sessions/activity/route.ts
+++ b/frontend/app/api/sessions/activity/route.ts
@@ -1,9 +1,10 @@
+import { randomUUID } from 'crypto';
+import { gte, lt,sql } from 'drizzle-orm';
+import { cookies } from 'next/headers';
 import { NextResponse } from 'next/server';
+
 import { db } from '@/db';
 import { activeSessions } from '@/db/schema/sessions';
-import { cookies } from 'next/headers';
-import { randomUUID } from 'crypto';
-import { sql, gte, lt } from 'drizzle-orm';
 
 const SESSION_TIMEOUT_MINUTES = 15;
 
diff --git a/frontend/app/api/shop/admin/orders/[id]/refund/route.ts b/frontend/app/api/shop/admin/orders/[id]/refund/route.ts
index 300372c1..223d114f 100644
--- a/frontend/app/api/shop/admin/orders/[id]/refund/route.ts
+++ b/frontend/app/api/shop/admin/orders/[id]/refund/route.ts
@@ -1,17 +1,19 @@
 import crypto from 'node:crypto';
+
 import { NextRequest, NextResponse } from 'next/server';
+
 import {
   AdminApiDisabledError,
   AdminForbiddenError,
   AdminUnauthorizedError,
   requireAdminApi,
 } from '@/lib/auth/admin';
-import { requireAdminCsrf } from '@/lib/security/admin-csrf';
 import { logError, logWarn } from '@/lib/logging';
-import { OrderNotFoundError, InvalidPayloadError } from '@/lib/services/errors';
+import { requireAdminCsrf } from '@/lib/security/admin-csrf';
+import { guardBrowserSameOrigin } from '@/lib/security/origin';
+import { InvalidPayloadError,OrderNotFoundError } from '@/lib/services/errors';
 import { refundOrder } from '@/lib/services/orders';
 import { orderIdParamSchema, orderSummarySchema } from '@/lib/validation/shop';
-import { guardBrowserSameOrigin } from '@/lib/security/origin';
 
 function noStoreJson(body: unknown, init?: { status?: number }) {
   const res = NextResponse.json(body, { status: init?.status ?? 200 });
diff --git a/frontend/app/api/shop/admin/orders/[id]/route.ts b/frontend/app/api/shop/admin/orders/[id]/route.ts
index 9c075567..9a67a973 100644
--- a/frontend/app/api/shop/admin/orders/[id]/route.ts
+++ b/frontend/app/api/shop/admin/orders/[id]/route.ts
@@ -1,17 +1,15 @@
 import crypto from 'node:crypto';
+
 import { NextRequest, NextResponse } from 'next/server';
 
+import { getAdminOrderDetail } from '@/db/queries/shop/admin-orders';
 import {
   AdminApiDisabledError,
   AdminForbiddenError,
   AdminUnauthorizedError,
   requireAdminApi,
 } from '@/lib/auth/admin';
-
-import { getAdminOrderDetail } from '@/db/queries/shop/admin-orders';
-
 import { logError, logWarn } from '@/lib/logging';
-
 import { orderIdParamSchema } from '@/lib/validation/shop';
 
 export const runtime = 'nodejs';
diff --git a/frontend/app/api/shop/admin/orders/reconcile-stale/route.ts b/frontend/app/api/shop/admin/orders/reconcile-stale/route.ts
index ca45e0db..bab91044 100644
--- a/frontend/app/api/shop/admin/orders/reconcile-stale/route.ts
+++ b/frontend/app/api/shop/admin/orders/reconcile-stale/route.ts
@@ -1,5 +1,7 @@
 import crypto from 'node:crypto';
+
 import { NextRequest, NextResponse } from 'next/server';
+
 import {
   AdminApiDisabledError,
   AdminForbiddenError,
@@ -7,13 +9,13 @@ import {
   requireAdminApi,
 } from '@/lib/auth/admin';
 import { logError, logInfo, logWarn } from '@/lib/logging';
-import { restockStalePendingOrders } from '@/lib/services/orders';
 import {
   CSRF_FORM_FIELD,
   isSameOrigin,
   verifyCsrfToken,
 } from '@/lib/security/csrf';
 import { guardBrowserSameOrigin } from '@/lib/security/origin';
+import { restockStalePendingOrders } from '@/lib/services/orders';
 export const runtime = 'nodejs';
 
 function noStoreJson(body: unknown, init?: { status?: number }) {
diff --git a/frontend/app/api/shop/admin/orders/route.ts b/frontend/app/api/shop/admin/orders/route.ts
index 9b3d79f8..155dbed1 100644
--- a/frontend/app/api/shop/admin/orders/route.ts
+++ b/frontend/app/api/shop/admin/orders/route.ts
@@ -1,21 +1,19 @@
 import crypto from 'node:crypto';
+
 import { NextRequest, NextResponse } from 'next/server';
 import { z } from 'zod';
 
+import { getAdminOrdersPage } from '@/db/queries/shop/admin-orders';
 import {
   AdminApiDisabledError,
   AdminForbiddenError,
   AdminUnauthorizedError,
   requireAdminApi,
 } from '@/lib/auth/admin';
-
+import { logError, logWarn } from '@/lib/logging';
 import { requireAdminCsrf } from '@/lib/security/admin-csrf';
 import { guardBrowserSameOrigin } from '@/lib/security/origin';
 
-import { getAdminOrdersPage } from '@/db/queries/shop/admin-orders';
-
-import { logError, logWarn } from '@/lib/logging';
-
 export const runtime = 'nodejs';
 
 function noStoreJson(body: unknown, init?: { status?: number }) {
diff --git a/frontend/app/api/shop/admin/products/[id]/route.ts b/frontend/app/api/shop/admin/products/[id]/route.ts
index e889d186..bbec7e03 100644
--- a/frontend/app/api/shop/admin/products/[id]/route.ts
+++ b/frontend/app/api/shop/admin/products/[id]/route.ts
@@ -1,26 +1,25 @@
 import crypto from 'node:crypto';
+
+import { sql } from 'drizzle-orm';
 import { NextRequest, NextResponse } from 'next/server';
 import { z } from 'zod';
-import { sql } from 'drizzle-orm';
+
+import { db } from '@/db';
+import { parseAdminProductForm } from '@/lib/admin/parseAdminProductForm';
 import {
   AdminApiDisabledError,
   AdminForbiddenError,
   AdminUnauthorizedError,
   requireAdminApi,
 } from '@/lib/auth/admin';
-
+import { logError, logWarn } from '@/lib/logging';
+import { requireAdminCsrf } from '@/lib/security/admin-csrf';
+import { guardBrowserSameOrigin } from '@/lib/security/origin';
 import {
   InvalidPayloadError,
-  SlugConflictError,
   PriceConfigError,
+  SlugConflictError,
 } from '@/lib/services/errors';
-
-import { requireAdminCsrf } from '@/lib/security/admin-csrf';
-import { guardBrowserSameOrigin } from '@/lib/security/origin';
-
-import { parseAdminProductForm } from '@/lib/admin/parseAdminProductForm';
-import { logError, logWarn } from '@/lib/logging';
-import { db } from '@/db';
 import {
   deleteProduct,
   getAdminProductByIdWithPrices,
diff --git a/frontend/app/api/shop/admin/products/[id]/status/route.ts b/frontend/app/api/shop/admin/products/[id]/status/route.ts
index 3120080a..a96ddd3d 100644
--- a/frontend/app/api/shop/admin/products/[id]/status/route.ts
+++ b/frontend/app/api/shop/admin/products/[id]/status/route.ts
@@ -1,4 +1,5 @@
 import crypto from 'node:crypto';
+
 import { NextRequest, NextResponse } from 'next/server';
 import { z } from 'zod';
 
@@ -8,11 +9,10 @@ import {
   AdminUnauthorizedError,
   requireAdminApi,
 } from '@/lib/auth/admin';
+import { ProductNotFoundError } from '@/lib/errors/products';
+import { logError, logWarn } from '@/lib/logging';
 import { requireAdminCsrf } from '@/lib/security/admin-csrf';
 import { guardBrowserSameOrigin } from '@/lib/security/origin';
-
-import { logError, logWarn } from '@/lib/logging';
-import { ProductNotFoundError } from '@/lib/errors/products';
 import { toggleProductStatus } from '@/lib/services/products';
 
 export const runtime = 'nodejs';
diff --git a/frontend/app/api/shop/admin/products/route.ts b/frontend/app/api/shop/admin/products/route.ts
index 5cd78a01..05c00f9b 100644
--- a/frontend/app/api/shop/admin/products/route.ts
+++ b/frontend/app/api/shop/admin/products/route.ts
@@ -1,17 +1,17 @@
 import crypto from 'node:crypto';
+
 import { NextRequest, NextResponse } from 'next/server';
 
+import { parseAdminProductForm } from '@/lib/admin/parseAdminProductForm';
 import {
   AdminApiDisabledError,
   AdminForbiddenError,
   AdminUnauthorizedError,
   requireAdminApi,
 } from '@/lib/auth/admin';
+import { logError, logWarn } from '@/lib/logging';
 import { requireAdminCsrf } from '@/lib/security/admin-csrf';
 import { guardBrowserSameOrigin } from '@/lib/security/origin';
-
-import { parseAdminProductForm } from '@/lib/admin/parseAdminProductForm';
-import { logError, logWarn } from '@/lib/logging';
 import { InvalidPayloadError, SlugConflictError } from '@/lib/services/errors';
 import { createProduct } from '@/lib/services/products';
 
@@ -298,13 +298,13 @@ export async function POST(request: NextRequest) {
 
       const errCode =
         error instanceof InvalidPayloadError
-          ? (error as any).code ?? 'INVALID_PAYLOAD'
+          ? ((error as any).code ?? 'INVALID_PAYLOAD')
           : error instanceof SlugConflictError
-          ? error.code
-          : error instanceof Error &&
-            error.message === 'Failed to upload image to Cloudinary'
-          ? 'IMAGE_UPLOAD_FAILED'
-          : 'ADMIN_PRODUCT_CREATE_FAILED';
+            ? error.code
+            : error instanceof Error &&
+                error.message === 'Failed to upload image to Cloudinary'
+              ? 'IMAGE_UPLOAD_FAILED'
+              : 'ADMIN_PRODUCT_CREATE_FAILED';
 
       const isExpected =
         error instanceof InvalidPayloadError ||
diff --git a/frontend/app/api/shop/cart/rehydrate/route.ts b/frontend/app/api/shop/cart/rehydrate/route.ts
index 41849b55..d6ce9478 100644
--- a/frontend/app/api/shop/cart/rehydrate/route.ts
+++ b/frontend/app/api/shop/cart/rehydrate/route.ts
@@ -1,11 +1,13 @@
 import crypto from 'node:crypto';
+
 import { NextRequest, NextResponse } from 'next/server';
+
 import { MoneyValueError } from '@/db/queries/shop/orders';
-import { resolveLocaleAndCurrency } from '@/lib/shop/request-locale';
+import { logError, logInfo, logWarn } from '@/lib/logging';
+import { InvalidPayloadError, PriceConfigError } from '@/lib/services/errors';
 import { rehydrateCartItems } from '@/lib/services/products';
+import { resolveLocaleAndCurrency } from '@/lib/shop/request-locale';
 import { cartRehydratePayloadSchema } from '@/lib/validation/shop';
-import { InvalidPayloadError, PriceConfigError } from '@/lib/services/errors';
-import { logError, logInfo, logWarn } from '@/lib/logging';
 
 function normalizeCartPayload(body: unknown) {
   if (!body || typeof body !== 'object') return body;
diff --git a/frontend/app/api/shop/catalog/route.ts b/frontend/app/api/shop/catalog/route.ts
index 17ef1cbb..1b0ad318 100644
--- a/frontend/app/api/shop/catalog/route.ts
+++ b/frontend/app/api/shop/catalog/route.ts
@@ -1,10 +1,11 @@
 import crypto from 'node:crypto';
+
 import { NextRequest, NextResponse } from 'next/server';
 
-import { getCatalogProducts } from '@/lib/shop/data';
-import { catalogQuerySchema } from '@/lib/validation/shop';
 import { CATALOG_PAGE_SIZE } from '@/lib/config/catalog';
 import { logError, logWarn } from '@/lib/logging';
+import { getCatalogProducts } from '@/lib/shop/data';
+import { catalogQuerySchema } from '@/lib/validation/shop';
 
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
diff --git a/frontend/app/api/shop/checkout/route.ts b/frontend/app/api/shop/checkout/route.ts
index 30c3e7e2..030979aa 100644
--- a/frontend/app/api/shop/checkout/route.ts
+++ b/frontend/app/api/shop/checkout/route.ts
@@ -1,35 +1,36 @@
-import { NextRequest, NextResponse } from 'next/server';
 import crypto from 'node:crypto';
+
+import { NextRequest, NextResponse } from 'next/server';
+
+import { MoneyValueError } from '@/db/queries/shop/orders';
+import { getCurrentUser } from '@/lib/auth';
+import { isPaymentsEnabled } from '@/lib/env/stripe';
+import { logError, logWarn } from '@/lib/logging';
+import { guardBrowserSameOrigin } from '@/lib/security/origin';
 import {
   enforceRateLimit,
   getRateLimitSubject,
   rateLimitResponse,
 } from '@/lib/security/rate-limit';
-import { getCurrentUser } from '@/lib/auth';
-import { isPaymentsEnabled } from '@/lib/env/stripe';
-import { logError, logWarn } from '@/lib/logging';
-import { resolveRequestLocale } from '@/lib/shop/request-locale';
 import { IdempotencyConflictError } from '@/lib/services/errors';
-import { MoneyValueError } from '@/db/queries/shop/orders';
-import { guardBrowserSameOrigin } from '@/lib/security/origin';
 import {
   InsufficientStockError,
   InvalidPayloadError,
   InvalidVariantError,
-  PriceConfigError,
   OrderStateInvalidError,
+  PriceConfigError,
 } from '@/lib/services/errors';
+import { createOrderWithItems, restockOrder } from '@/lib/services/orders';
+import {
+  ensureStripePaymentIntentForOrder,
+  PaymentAttemptsExhaustedError,
+} from '@/lib/services/orders/payment-attempts';
+import { type PaymentProvider, type PaymentStatus } from '@/lib/shop/payments';
+import { resolveRequestLocale } from '@/lib/shop/request-locale';
 import {
   checkoutPayloadSchema,
   idempotencyKeySchema,
 } from '@/lib/validation/shop';
-import { type PaymentProvider, type PaymentStatus } from '@/lib/shop/payments';
-import {
-  PaymentAttemptsExhaustedError,
-  ensureStripePaymentIntentForOrder,
-} from '@/lib/services/orders/payment-attempts';
-
-import { createOrderWithItems, restockOrder } from '@/lib/services/orders';
 
 const EXPECTED_BUSINESS_ERROR_CODES = new Set([
   'IDEMPOTENCY_CONFLICT',
diff --git a/frontend/app/api/shop/internal/orders/restock-stale/route.ts b/frontend/app/api/shop/internal/orders/restock-stale/route.ts
index 66fb43b8..256c6436 100644
--- a/frontend/app/api/shop/internal/orders/restock-stale/route.ts
+++ b/frontend/app/api/shop/internal/orders/restock-stale/route.ts
@@ -1,15 +1,17 @@
 import crypto from 'node:crypto';
-import { NextRequest, NextResponse } from 'next/server';
+
 import { sql } from 'drizzle-orm';
+import { NextRequest, NextResponse } from 'next/server';
+
 import { db } from '@/db';
+import { requireInternalJanitorAuth } from '@/lib/auth/internal-janitor';
+import { logError, logInfo, logWarn } from '@/lib/logging';
+import { guardNonBrowserOnly } from '@/lib/security/origin';
 import {
-  restockStalePendingOrders,
   restockStaleNoPaymentOrders,
+  restockStalePendingOrders,
   restockStuckReservingOrders,
 } from '@/lib/services/orders';
-import { requireInternalJanitorAuth } from '@/lib/auth/internal-janitor';
-import { logError, logInfo, logWarn } from '@/lib/logging';
-import { guardNonBrowserOnly } from '@/lib/security/origin';
 
 export const runtime = 'nodejs';
 
diff --git a/frontend/app/api/shop/orders/[id]/route.ts b/frontend/app/api/shop/orders/[id]/route.ts
index d86b6e1d..4708903d 100644
--- a/frontend/app/api/shop/orders/[id]/route.ts
+++ b/frontend/app/api/shop/orders/[id]/route.ts
@@ -1,12 +1,15 @@
 import 'server-only';
+
 import crypto from 'node:crypto';
-import { orderIdParamSchema } from '@/lib/validation/shop';
-import { logError, logWarn } from '@/lib/logging';
-import { NextRequest, NextResponse } from 'next/server';
+
 import { and, eq } from 'drizzle-orm';
+import { NextRequest, NextResponse } from 'next/server';
+
 import { db } from '@/db';
 import { orderItems, orders } from '@/db/schema';
 import { getCurrentUser } from '@/lib/auth';
+import { logError, logWarn } from '@/lib/logging';
+import { orderIdParamSchema } from '@/lib/validation/shop';
 
 export const dynamic = 'force-dynamic';
 
@@ -196,14 +199,13 @@ export async function GET(
 
     return noStoreJson({ success: true, order: response }, { status: 200 });
   } catch (error) {
-        logError('public_order_detail_failed', error, {
+    logError('public_order_detail_failed', error, {
       ...baseMeta,
       orderId: orderIdForLog,
       code: 'PUBLIC_ORDER_DETAIL_FAILED',
       durationMs: Date.now() - startedAtMs,
     });
 
-
     return noStoreJson(
       { code: 'INTERNAL_ERROR', error: 'internal_error' },
       { status: 500 }
diff --git a/frontend/app/api/shop/webhooks/stripe/route.ts b/frontend/app/api/shop/webhooks/stripe/route.ts
index f1ff4a6a..2a0c8ae2 100644
--- a/frontend/app/api/shop/webhooks/stripe/route.ts
+++ b/frontend/app/api/shop/webhooks/stripe/route.ts
@@ -1,25 +1,27 @@
-import Stripe from 'stripe';
 import crypto from 'node:crypto';
+
+import { and, eq, isNull, lt,ne, or } from 'drizzle-orm';
 import { NextRequest, NextResponse } from 'next/server';
-import { and, eq, ne, or, isNull, lt } from 'drizzle-orm';
+import Stripe from 'stripe';
+
 import { db } from '@/db';
-import { verifyWebhookSignature, retrieveCharge } from '@/lib/psp/stripe';
 import { orders, stripeEvents } from '@/db/schema';
-import { restockOrder } from '@/lib/services/orders';
-import { guardedPaymentStatusUpdate } from '@/lib/services/orders/payment-state';
 import { logError, logInfo, logWarn } from '@/lib/logging';
-import {
-  type RefundMetaRecord,
-  appendRefundToMeta,
-} from '@/lib/services/orders/psp-metadata/refunds';
-import { markStripeAttemptFinal } from '@/lib/services/orders/payment-attempts';
+import { retrieveCharge,verifyWebhookSignature } from '@/lib/psp/stripe';
+import { guardNonBrowserOnly } from '@/lib/security/origin';
 import {
   enforceRateLimit,
   getRateLimitSubject,
   rateLimitResponse,
 } from '@/lib/security/rate-limit';
 import { resolveStripeWebhookRateLimit } from '@/lib/security/stripe-webhook-rate-limit';
-import { guardNonBrowserOnly } from '@/lib/security/origin';
+import { restockOrder } from '@/lib/services/orders';
+import { markStripeAttemptFinal } from '@/lib/services/orders/payment-attempts';
+import { guardedPaymentStatusUpdate } from '@/lib/services/orders/payment-state';
+import {
+  appendRefundToMeta,
+  type RefundMetaRecord,
+} from '@/lib/services/orders/psp-metadata/refunds';
 
 const REFUND_FULLNESS_UNDETERMINED = 'REFUND_FULLNESS_UNDETERMINED' as const;
 
diff --git a/frontend/app/api/stats/route.ts b/frontend/app/api/stats/route.ts
index 15e7e636..71fe093c 100644
--- a/frontend/app/api/stats/route.ts
+++ b/frontend/app/api/stats/route.ts
@@ -1,4 +1,5 @@
 import { NextResponse } from 'next/server';
+
 import { getPlatformStats } from '@/lib/about/stats';
 
 export async function GET() {
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index e5ee2c7a..5f460c47 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,6 +1,7 @@
+import './globals.css';
+
 import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
-import './globals.css';
 
 export const metadata: Metadata = {
   icons: {
@@ -55,7 +56,7 @@ export default function RootLayout({
       </head>
       <body
         suppressHydrationWarning
-        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-gray-50 text-gray-900 dark:bg-neutral-950 dark:text-gray-100 transition-colors duration-300`}
+        className={`${geistSans.variable} ${geistMono.variable} bg-gray-50 text-gray-900 antialiased transition-colors duration-300 dark:bg-neutral-950 dark:text-gray-100`}
       >
         {children}
       </body>
diff --git a/frontend/app/not-found.tsx b/frontend/app/not-found.tsx
index e08cf31b..aa61e857 100644
--- a/frontend/app/not-found.tsx
+++ b/frontend/app/not-found.tsx
@@ -1,8 +1,8 @@
 import { cookies } from 'next/headers';
 
-import ukMessages from '@/messages/uk.json';
 import enMessages from '@/messages/en.json';
 import plMessages from '@/messages/pl.json';
+import ukMessages from '@/messages/uk.json';
 
 type Locale = 'uk' | 'en' | 'pl';
 
@@ -24,48 +24,50 @@ export default async function NotFound() {
   const t = messages[locale];
 
   return (
-    <main className="relative min-h-screen flex items-center justify-center overflow-hidden bg-background transition-colors duration-300">
+    <main className="bg-background relative flex min-h-screen items-center justify-center overflow-hidden transition-colors duration-300">
       <div className="pointer-events-none absolute inset-0 opacity-60">
         <div className="absolute -top-32 left-1/2 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-[var(--accent-primary)]/20 blur-3xl" />
         <div className="absolute bottom-[-12rem] left-1/4 h-[22rem] w-[22rem] rounded-full bg-[var(--accent-hover)]/15 blur-3xl" />
-        <div className="absolute bottom-[-10rem] right-0 h-[26rem] w-[26rem] rounded-full bg-[var(--accent-primary)]/25 blur-3xl" />
+        <div className="absolute right-0 bottom-[-10rem] h-[26rem] w-[26rem] rounded-full bg-[var(--accent-primary)]/25 blur-3xl" />
       </div>
 
       <div className="pointer-events-none absolute inset-0 opacity-40 dark:opacity-60">
-        <span className="absolute left-[10%] top-[18%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
-        <span className="absolute left-[35%] top-[8%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
-        <span className="absolute left-[70%] top-[16%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
-        <span className="absolute left-[80%] top-[40%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
-        <span className="absolute left-[18%] top-[60%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute top-[18%] left-[10%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute top-[8%] left-[35%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
+        <span className="absolute top-[16%] left-[70%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute top-[40%] left-[80%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
+        <span className="absolute top-[60%] left-[18%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
       </div>
 
-      <div className="relative z-10 text-center px-6 py-12">
-        <div className="relative inline-block mt-4">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight">
+      <div className="relative z-10 px-6 py-12 text-center">
+        <div className="relative mt-4 inline-block">
+          <h1 className="text-4xl font-black tracking-tight sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl">
             <span className="relative inline-block bg-gradient-to-r from-[var(--accent-primary)]/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-[var(--accent-hover)]/70 bg-clip-text text-transparent">
               DevL
             </span>
-            <span className="relative inline-block text-red-500 text-[1em] leading-none" style={{ verticalAlign: 'baseline' }}>
+            <span
+              className="relative inline-block text-[1em] leading-none text-red-500"
+              style={{ verticalAlign: 'baseline' }}
+            >
               Ø
             </span>
             <span className="relative inline-block bg-gradient-to-r from-[var(--accent-primary)]/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-[var(--accent-hover)]/70 bg-clip-text text-transparent">
               vers
             </span>
-
           </h1>
         </div>
 
-        <h2 className="mt-6 text-2xl md:text-3xl font-bold text-foreground">
+        <h2 className="text-foreground mt-6 text-2xl font-bold md:text-3xl">
           {t.title}
         </h2>
 
-        <p className="mt-4 max-w-md mx-auto text-muted-foreground">
+        <p className="text-muted-foreground mx-auto mt-4 max-w-md">
           {t.description}
         </p>
 
         <a
           href={`/${locale}`}
-          className="mt-8 inline-flex items-center justify-center rounded-full bg-[var(--accent-primary)] hover:bg-[var(--accent-hover)] px-6 py-3 text-sm font-medium text-white transition-colors"
+          className="mt-8 inline-flex items-center justify-center rounded-full bg-[var(--accent-primary)] px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-[var(--accent-hover)]"
         >
           {t.backHome}
         </a>
diff --git a/frontend/client.ts b/frontend/client.ts
index 45ad6da9..3085f871 100644
--- a/frontend/client.ts
+++ b/frontend/client.ts
@@ -1,8 +1,8 @@
-import { createClient } from "@sanity/client";
+import { createClient } from '@sanity/client';
 
 export const client = createClient({
-  projectId: "6y9ive6v",
-  dataset: "production",
+  projectId: '6y9ive6v',
+  dataset: 'production',
   useCdn: false,
-  apiVersion: "2025-11-29",
+  apiVersion: '2025-11-29',
 });
diff --git a/frontend/components/about/CommunitySection.tsx b/frontend/components/about/CommunitySection.tsx
index 91c38756..f86977e6 100644
--- a/frontend/components/about/CommunitySection.tsx
+++ b/frontend/components/about/CommunitySection.tsx
@@ -1,109 +1,101 @@
-"use client"
+'use client';
 
-import { Github, ArrowRight, ExternalLink, MessageCircle } from "lucide-react"
-import Link from "next/link"
-import { useTranslations } from "next-intl"
-import { TESTIMONIALS, type Testimonial } from "@/data/about"
-import { GradientBadge } from "@/components/ui/gradient-badge"
-import { SectionHeading } from "@/components/ui/section-heading"
+import { ArrowRight, ExternalLink, Github, MessageCircle } from 'lucide-react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+
+import { GradientBadge } from '@/components/ui/gradient-badge';
+import { SectionHeading } from '@/components/ui/section-heading';
+import { type Testimonial,TESTIMONIALS } from '@/data/about';
 
 export function CommunitySection() {
-  const t = useTranslations("about.community")
+  const t = useTranslations('about.community');
 
   return (
-    <section className="w-full py-20 lg:py-28 relative overflow-hidden bg-gray-50 dark:bg-transparent">
-
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-[#1e5eff]/5 dark:bg-[#ff2d55]/5 blur-[80px] rounded-full pointer-events-none" />
-
-        <div className="w-full relative z-10">
+    <section className="relative w-full overflow-hidden bg-gray-50 py-20 lg:py-28 dark:bg-transparent">
+      <div className="pointer-events-none absolute top-1/2 left-1/2 h-[300px] w-[300px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#1e5eff]/5 blur-[80px] dark:bg-[#ff2d55]/5" />
+
+      <div className="relative z-10 w-full">
+        <div className="container-main mb-12 text-center">
+          <GradientBadge
+            icon={MessageCircle}
+            text={t('badge')}
+            className="mb-4"
+          />
+
+          <SectionHeading
+            title={t('title')}
+            highlight={t('titleHighlight')}
+            subtitle={t('subtitle')}
+            className="mb-0"
+          />
+        </div>
 
-            <div className="container-main mb-12 text-center">
-                <GradientBadge icon={MessageCircle} text={t("badge")} className="mb-4" />
+        <div className="pause-on-hover relative mb-8 w-full md:mb-16">
+          <div className="dark:from-background pointer-events-none absolute top-0 left-0 z-10 h-full w-12 bg-gradient-to-r from-gray-50 to-transparent md:w-32" />
+          <div className="dark:from-background pointer-events-none absolute top-0 right-0 z-10 h-full w-12 bg-gradient-to-l from-gray-50 to-transparent md:w-32" />
 
-                <SectionHeading
-                    title={t("title")}
-                    highlight={t("titleHighlight")}
-                    subtitle={t("subtitle")}
-                    className="mb-0"
-                />
+          <div className="flex w-max min-w-full">
+            <div className="animate-scroll flex shrink-0 gap-4 px-2">
+              {TESTIMONIALS.map((testimonial, index) => (
+                <TestimonialCard key={`loop1-${index}`} {...testimonial} />
+              ))}
             </div>
-
-            <div className="relative w-full pause-on-hover mb-8 md:mb-16">
-
-                <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-12 md:w-32 bg-gradient-to-r from-gray-50 dark:from-background to-transparent" />
-                <div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-12 md:w-32 bg-gradient-to-l from-gray-50 dark:from-background to-transparent" />
-
-                <div className="flex w-max min-w-full">
-                    <div className="flex shrink-0 gap-4 px-2 animate-scroll">
-                        {TESTIMONIALS.map((testimonial, index) => (
-                            <TestimonialCard key={`loop1-${index}`} {...testimonial} />
-                        ))}
-                    </div>
-                    <div className="flex shrink-0 gap-4 px-2 animate-scroll" aria-hidden="true">
-                        {TESTIMONIALS.map((testimonial, index) => (
-                            <TestimonialCard key={`loop2-${index}`} {...testimonial} />
-                        ))}
-                    </div>
-                </div>
+            <div
+              className="animate-scroll flex shrink-0 gap-4 px-2"
+              aria-hidden="true"
+            >
+              {TESTIMONIALS.map((testimonial, index) => (
+                <TestimonialCard key={`loop2-${index}`} {...testimonial} />
+              ))}
             </div>
+          </div>
+        </div>
 
-            <div className="container-main text-center">
-                <div className="flex flex-col items-center gap-2 md:hidden">
-                    <Link
-                        href="https://github.com/DevLoversTeam/devlovers.net/discussions"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="group inline-flex items-center gap-1.5 px-4 py-2 rounded-full
-                            border border-gray-200 dark:border-white/10
-                            bg-white/50 dark:bg-white/5
-                            text-[10px] font-bold uppercase tracking-wider
-                            text-gray-700 dark:text-gray-300
-                            transition-all duration-300
-                            hover:border-[#1e5eff]/40 dark:hover:border-[#ff2d55]/40
-                            hover:text-[#1e5eff] dark:hover:text-[#ff2d55]"
-                    >
-                        <Github size={12} />
-                        {t("joinDiscussion")}
-                        <ArrowRight size={10} className="group-hover:translate-x-0.5 transition-transform" />
-                    </Link>
-                </div>
-
-                <Link
-                    href="https://github.com/DevLoversTeam/devlovers.net/discussions"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="group relative hidden md:inline-flex items-center justify-center gap-4 p-1.5 pl-6 pr-1.5 rounded-full
-                    bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10
-                    transition-all duration-300 ease-out
-                    hover:scale-[1.02]
-                    hover:border-[#1e5eff]/50 dark:hover:border-[#ff2d55]/50
-                    hover:shadow-[0_0_30px_-5px_rgba(30,94,255,0.15)] dark:hover:shadow-[0_0_30px_-5px_rgba(255,45,85,0.15)]"
-                >
-                    <span className="text-sm text-gray-700 dark:text-gray-200 font-medium">
-                        {t("successStory")}
-                    </span>
-
-                    <span className="flex items-center gap-2 px-5 py-2.5 rounded-full
-                        bg-gray-900 dark:bg-white text-white dark:text-black
-                        text-xs font-bold uppercase tracking-wider
-                        transition-all duration-300
-                        group-hover:bg-[#1e5eff] dark:group-hover:bg-[#ff2d55]
-                        group-hover:text-white dark:group-hover:text-white"
-                    >
-                        <Github size={14} />
-                        {t("joinDiscussion")}
-                        <ArrowRight size={12} className="group-hover:translate-x-1 transition-transform" />
-                    </span>
-                </Link>
-
-                <p className="mt-3 md:mt-6 text-[8px] md:text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-widest md:font-bold md:opacity-60 opacity-70">
-                    {t("readThreads")}
-                </p>
-            </div>
+        <div className="container-main text-center">
+          <div className="flex flex-col items-center gap-2 md:hidden">
+            <Link
+              href="https://github.com/DevLoversTeam/devlovers.net/discussions"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-white/50 px-4 py-2 text-[10px] font-bold tracking-wider text-gray-700 uppercase transition-all duration-300 hover:border-[#1e5eff]/40 hover:text-[#1e5eff] dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:hover:border-[#ff2d55]/40 dark:hover:text-[#ff2d55]"
+            >
+              <Github size={12} />
+              {t('joinDiscussion')}
+              <ArrowRight
+                size={10}
+                className="transition-transform group-hover:translate-x-0.5"
+              />
+            </Link>
+          </div>
 
+          <Link
+            href="https://github.com/DevLoversTeam/devlovers.net/discussions"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="group relative hidden items-center justify-center gap-4 rounded-full border border-gray-200 bg-white p-1.5 pr-1.5 pl-6 transition-all duration-300 ease-out hover:scale-[1.02] hover:border-[#1e5eff]/50 hover:shadow-[0_0_30px_-5px_rgba(30,94,255,0.15)] md:inline-flex dark:border-white/10 dark:bg-white/5 dark:hover:border-[#ff2d55]/50 dark:hover:shadow-[0_0_30px_-5px_rgba(255,45,85,0.15)]"
+          >
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
+              {t('successStory')}
+            </span>
+
+            <span className="flex items-center gap-2 rounded-full bg-gray-900 px-5 py-2.5 text-xs font-bold tracking-wider text-white uppercase transition-all duration-300 group-hover:bg-[#1e5eff] group-hover:text-white dark:bg-white dark:text-black dark:group-hover:bg-[#ff2d55] dark:group-hover:text-white">
+              <Github size={14} />
+              {t('joinDiscussion')}
+              <ArrowRight
+                size={12}
+                className="transition-transform group-hover:translate-x-1"
+              />
+            </span>
+          </Link>
+
+          <p className="mt-3 text-[8px] tracking-widest text-gray-400 uppercase opacity-70 md:mt-6 md:text-[10px] md:font-bold md:opacity-60 dark:text-gray-600">
+            {t('readThreads')}
+          </p>
+        </div>
       </div>
     </section>
-  )
+  );
 }
 
 function TestimonialCard({
@@ -113,33 +105,39 @@ function TestimonialCard({
   content,
   platform,
   icon: Icon,
-  color
+  color,
 }: Testimonial) {
   return (
-    <div className="w-[280px] md:w-[320px] shrink-0 rounded-xl border border-gray-200 dark:border-white/10 bg-white/10 dark:bg-neutral-900/10 backdrop-blur-md p-5 shadow-sm hover:shadow-md transition-all duration-300 hover:border-gray-300 dark:hover:border-white/20 hover:-translate-y-1">
+    <div className="w-[280px] shrink-0 rounded-xl border border-gray-200 bg-white/10 p-5 shadow-sm backdrop-blur-md transition-all duration-300 hover:-translate-y-1 hover:border-gray-300 hover:shadow-md md:w-[320px] dark:border-white/10 dark:bg-neutral-900/10 dark:hover:border-white/20">
       <div className="mb-3 flex items-start justify-between">
         <div className="flex items-center gap-3">
-          <div className="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 dark:bg-white/10 border border-gray-200 dark:border-white/5 text-xs font-bold text-gray-700 dark:text-gray-200">
+          <div className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-gray-100 text-xs font-bold text-gray-700 dark:border-white/5 dark:bg-white/10 dark:text-gray-200">
             {avatar}
           </div>
           <div>
-            <div className="font-bold text-gray-900 dark:text-white text-sm leading-none mb-1">{name}</div>
-            <div className="text-[10px] uppercase tracking-wide text-gray-500 font-medium">{role}</div>
+            <div className="mb-1 text-sm leading-none font-bold text-gray-900 dark:text-white">
+              {name}
+            </div>
+            <div className="text-[10px] font-medium tracking-wide text-gray-500 uppercase">
+              {role}
+            </div>
           </div>
         </div>
 
-        <div className={`flex h-7 w-7 items-center justify-center rounded-full ${color}`}>
+        <div
+          className={`flex h-7 w-7 items-center justify-center rounded-full ${color}`}
+        >
           <Icon size={12} />
         </div>
       </div>
 
-      <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-300 font-normal">
+      <p className="text-sm leading-relaxed font-normal text-gray-600 dark:text-gray-300">
         &quot;{content}&quot;
       </p>
 
-      <div className="mt-3 text-[10px] text-gray-400 dark:text-gray-600 font-mono flex items-center gap-1">
+      <div className="mt-3 flex items-center gap-1 font-mono text-[10px] text-gray-400 dark:text-gray-600">
         via {platform} <ExternalLink size={8} />
       </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/components/about/FeaturesSection.tsx b/frontend/components/about/FeaturesSection.tsx
index 093bd2c9..e048aac5 100644
--- a/frontend/components/about/FeaturesSection.tsx
+++ b/frontend/components/about/FeaturesSection.tsx
@@ -1,418 +1,683 @@
-"use client"
+'use client';
 
-import { useState, useEffect } from "react"
-import { motion, AnimatePresence, useReducedMotion } from "framer-motion"
-import { Link } from "@/i18n/routing"
-import { useTranslations } from "next-intl"
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
 import {
-    MessageCircle, Brain, Trophy, User, ShoppingBag, BookOpen,
-    Globe, Cpu, Shield, Languages, Clock, Lightbulb, Target,
-    Medal, Users, Flame, Zap, BarChart3, TrendingUp, Tag, History,
-    CreditCard, Package, Sparkles, PenTool, CalendarDays,
-    Search, Save, Activity, UserCircle, Bell,
-    LucideIcon
-} from "lucide-react"
-import { SectionHeading } from "@/components/ui/section-heading"
+  Activity,
+  BarChart3,
+  Bell,
+  BookOpen,
+  Brain,
+  CalendarDays,
+  Clock,
+  Cpu,
+  CreditCard,
+  Flame,
+  Globe,
+  History,
+  Languages,
+  Lightbulb,
+  LucideIcon,
+  Medal,
+  MessageCircle,
+  Package,
+  PenTool,
+  Save,
+  Search,
+  Shield,
+  ShoppingBag,
+  Sparkles,
+  Tag,
+  Target,
+  TrendingUp,
+  Trophy,
+  User,
+  UserCircle,
+  Users,
+  Zap,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect,useState } from 'react';
+
+import { SectionHeading } from '@/components/ui/section-heading';
+import { Link } from '@/i18n/routing';
 
 interface Feature {
-    icon: LucideIcon
-    labelKey: string
-    descKey: string
-    x: number
-    y: number
-    size: number
+  icon: LucideIcon;
+  labelKey: string;
+  descKey: string;
+  x: number;
+  y: number;
+  size: number;
 }
 
 interface Page {
-    id: string
-    icon: LucideIcon
-    href: string
-    features: Feature[]
+  id: string;
+  icon: LucideIcon;
+  href: string;
+  features: Feature[];
 }
 
 const decorativeDots = [
-    { x: '5%', y: '20%', size: 8 },
-    { x: '10%', y: '75%', size: 6 },
-    { x: '18%', y: '40%', size: 5 },
-    { x: '92%', y: '25%', size: 7 },
-    { x: '88%', y: '70%', size: 6 },
-    { x: '82%', y: '45%', size: 5 },
-    { x: '7%', y: '55%', size: 7 },
-    { x: '95%', y: '55%', size: 8 },
-    { x: '15%', y: '85%', size: 6 },
-    { x: '85%', y: '15%', size: 5 },
-    { x: '3%', y: '35%', size: 6 },
-    { x: '97%', y: '80%', size: 7 },
-]
+  { x: '5%', y: '20%', size: 8 },
+  { x: '10%', y: '75%', size: 6 },
+  { x: '18%', y: '40%', size: 5 },
+  { x: '92%', y: '25%', size: 7 },
+  { x: '88%', y: '70%', size: 6 },
+  { x: '82%', y: '45%', size: 5 },
+  { x: '7%', y: '55%', size: 7 },
+  { x: '95%', y: '55%', size: 8 },
+  { x: '15%', y: '85%', size: 6 },
+  { x: '85%', y: '15%', size: 5 },
+  { x: '3%', y: '35%', size: 6 },
+  { x: '97%', y: '80%', size: 7 },
+];
 
 const pages: Page[] = [
-    {
-        id: "qa",
-        icon: MessageCircle,
-        href: "/q&a",
-        features: [
-            { icon: Globe, labelKey: "bubbles.qa.languages.label", descKey: "bubbles.qa.languages.desc", x: -120, y: -120, size: 88 },
-            { icon: Cpu, labelKey: "bubbles.qa.aiHelper.label", descKey: "bubbles.qa.aiHelper.desc", x: 120, y: -120, size: 88 },
-            { icon: Lightbulb, labelKey: "bubbles.qa.smartCache.label", descKey: "bubbles.qa.smartCache.desc", x: -120, y: 120, size: 88 },
-            { icon: Search, labelKey: "bubbles.qa.techFilter.label", descKey: "bubbles.qa.techFilter.desc", x: 120, y: 120, size: 88 },
-        ]
-    },
-    {
-        id: "quiz",
-        icon: Brain,
-        href: "/quizzes",
-        features: [
-            { icon: Clock, labelKey: "bubbles.quiz.smartTimer.label", descKey: "bubbles.quiz.smartTimer.desc", x: -120, y: -120, size: 88 },
-            { icon: Shield, labelKey: "bubbles.quiz.antiCheat.label", descKey: "bubbles.quiz.antiCheat.desc", x: 120, y: -120, size: 88 },
-            { icon: Save, labelKey: "bubbles.quiz.autoSync.label", descKey: "bubbles.quiz.autoSync.desc", x: -120, y: 120, size: 88 },
-            { icon: BarChart3, labelKey: "bubbles.quiz.tracking.label", descKey: "bubbles.quiz.tracking.desc", x: 120, y: 120, size: 88 },
-        ]
-    },
-    {
-        id: "leaderboard",
-        icon: Trophy,
-        href: "/leaderboard",
-        features: [
-            { icon: Medal, labelKey: "bubbles.leaderboard.podium.label", descKey: "bubbles.leaderboard.podium.desc", x: -120, y: -120, size: 88 },
-            { icon: Globe, labelKey: "bubbles.leaderboard.globalRank.label", descKey: "bubbles.leaderboard.globalRank.desc", x: 120, y: -120, size: 88 },
-            { icon: Zap, labelKey: "bubbles.leaderboard.xpSystem.label", descKey: "bubbles.leaderboard.xpSystem.desc", x: -120, y: 120, size: 88 },
-            { icon: Activity, labelKey: "bubbles.leaderboard.liveFeed.label", descKey: "bubbles.leaderboard.liveFeed.desc", x: 120, y: 120, size: 88 },
-        ]
-    },
-    {
-        id: "profile",
-        icon: User,
-        href: "/dashboard",
-        features: [
-            { icon: BarChart3, labelKey: "bubbles.profile.statsHub.label", descKey: "bubbles.profile.statsHub.desc", x: -120, y: -120, size: 88 },
-            { icon: History, labelKey: "bubbles.profile.history.label", descKey: "bubbles.profile.history.desc", x: 120, y: -120, size: 88 },
-            { icon: UserCircle, labelKey: "bubbles.profile.identity.label", descKey: "bubbles.profile.identity.desc", x: -120, y: 120, size: 88 },
-            { icon: Bell, labelKey: "bubbles.profile.reminders.label", descKey: "bubbles.profile.reminders.desc", x: 120, y: 120, size: 88 },
-        ]
-    },
-    {
-        id: "blog",
+  {
+    id: 'qa',
+    icon: MessageCircle,
+    href: '/q&a',
+    features: [
+      {
+        icon: Globe,
+        labelKey: 'bubbles.qa.languages.label',
+        descKey: 'bubbles.qa.languages.desc',
+        x: -120,
+        y: -120,
+        size: 88,
+      },
+      {
+        icon: Cpu,
+        labelKey: 'bubbles.qa.aiHelper.label',
+        descKey: 'bubbles.qa.aiHelper.desc',
+        x: 120,
+        y: -120,
+        size: 88,
+      },
+      {
+        icon: Lightbulb,
+        labelKey: 'bubbles.qa.smartCache.label',
+        descKey: 'bubbles.qa.smartCache.desc',
+        x: -120,
+        y: 120,
+        size: 88,
+      },
+      {
+        icon: Search,
+        labelKey: 'bubbles.qa.techFilter.label',
+        descKey: 'bubbles.qa.techFilter.desc',
+        x: 120,
+        y: 120,
+        size: 88,
+      },
+    ],
+  },
+  {
+    id: 'quiz',
+    icon: Brain,
+    href: '/quizzes',
+    features: [
+      {
+        icon: Clock,
+        labelKey: 'bubbles.quiz.smartTimer.label',
+        descKey: 'bubbles.quiz.smartTimer.desc',
+        x: -120,
+        y: -120,
+        size: 88,
+      },
+      {
+        icon: Shield,
+        labelKey: 'bubbles.quiz.antiCheat.label',
+        descKey: 'bubbles.quiz.antiCheat.desc',
+        x: 120,
+        y: -120,
+        size: 88,
+      },
+      {
+        icon: Save,
+        labelKey: 'bubbles.quiz.autoSync.label',
+        descKey: 'bubbles.quiz.autoSync.desc',
+        x: -120,
+        y: 120,
+        size: 88,
+      },
+      {
+        icon: BarChart3,
+        labelKey: 'bubbles.quiz.tracking.label',
+        descKey: 'bubbles.quiz.tracking.desc',
+        x: 120,
+        y: 120,
+        size: 88,
+      },
+    ],
+  },
+  {
+    id: 'leaderboard',
+    icon: Trophy,
+    href: '/leaderboard',
+    features: [
+      {
+        icon: Medal,
+        labelKey: 'bubbles.leaderboard.podium.label',
+        descKey: 'bubbles.leaderboard.podium.desc',
+        x: -120,
+        y: -120,
+        size: 88,
+      },
+      {
+        icon: Globe,
+        labelKey: 'bubbles.leaderboard.globalRank.label',
+        descKey: 'bubbles.leaderboard.globalRank.desc',
+        x: 120,
+        y: -120,
+        size: 88,
+      },
+      {
+        icon: Zap,
+        labelKey: 'bubbles.leaderboard.xpSystem.label',
+        descKey: 'bubbles.leaderboard.xpSystem.desc',
+        x: -120,
+        y: 120,
+        size: 88,
+      },
+      {
+        icon: Activity,
+        labelKey: 'bubbles.leaderboard.liveFeed.label',
+        descKey: 'bubbles.leaderboard.liveFeed.desc',
+        x: 120,
+        y: 120,
+        size: 88,
+      },
+    ],
+  },
+  {
+    id: 'profile',
+    icon: User,
+    href: '/dashboard',
+    features: [
+      {
+        icon: BarChart3,
+        labelKey: 'bubbles.profile.statsHub.label',
+        descKey: 'bubbles.profile.statsHub.desc',
+        x: -120,
+        y: -120,
+        size: 88,
+      },
+      {
+        icon: History,
+        labelKey: 'bubbles.profile.history.label',
+        descKey: 'bubbles.profile.history.desc',
+        x: 120,
+        y: -120,
+        size: 88,
+      },
+      {
+        icon: UserCircle,
+        labelKey: 'bubbles.profile.identity.label',
+        descKey: 'bubbles.profile.identity.desc',
+        x: -120,
+        y: 120,
+        size: 88,
+      },
+      {
+        icon: Bell,
+        labelKey: 'bubbles.profile.reminders.label',
+        descKey: 'bubbles.profile.reminders.desc',
+        x: 120,
+        y: 120,
+        size: 88,
+      },
+    ],
+  },
+  {
+    id: 'blog',
+    icon: BookOpen,
+    href: '/blog',
+    features: [
+      {
+        icon: TrendingUp,
+        labelKey: 'bubbles.blog.techTrends.label',
+        descKey: 'bubbles.blog.techTrends.desc',
+        x: -120,
+        y: -120,
+        size: 88,
+      },
+      {
+        icon: PenTool,
+        labelKey: 'bubbles.blog.tutorials.label',
+        descKey: 'bubbles.blog.tutorials.desc',
+        x: 120,
+        y: -120,
+        size: 88,
+      },
+      {
         icon: BookOpen,
-        href: "/blog",
-        features: [
-            { icon: TrendingUp, labelKey: "bubbles.blog.techTrends.label", descKey: "bubbles.blog.techTrends.desc", x: -120, y: -120, size: 88 },
-            { icon: PenTool, labelKey: "bubbles.blog.tutorials.label", descKey: "bubbles.blog.tutorials.desc", x: 120, y: -120, size: 88 },
-            { icon: BookOpen, labelKey: "bubbles.blog.deepDives.label", descKey: "bubbles.blog.deepDives.desc", x: -120, y: 120, size: 88 },
-            { icon: Users, labelKey: "bubbles.blog.community.label", descKey: "bubbles.blog.community.desc", x: 120, y: 120, size: 88 },
-        ]
-    },
-    {
-        id: "shop",
-        icon: ShoppingBag,
-        href: "/shop",
-        features: [
-            { icon: Sparkles, labelKey: "bubbles.shop.newDrops.label", descKey: "bubbles.shop.newDrops.desc", x: -120, y: -120, size: 88 },
-            { icon: Tag, labelKey: "bubbles.shop.curated.label", descKey: "bubbles.shop.curated.desc", x: 120, y: -120, size: 88 },
-            { icon: CreditCard, labelKey: "bubbles.shop.checkout.label", descKey: "bubbles.shop.checkout.desc", x: -120, y: 120, size: 88 },
-            { icon: Package, labelKey: "bubbles.shop.premium.label", descKey: "bubbles.shop.premium.desc", x: 120, y: 120, size: 88 },
-        ]
-    },
-]
+        labelKey: 'bubbles.blog.deepDives.label',
+        descKey: 'bubbles.blog.deepDives.desc',
+        x: -120,
+        y: 120,
+        size: 88,
+      },
+      {
+        icon: Users,
+        labelKey: 'bubbles.blog.community.label',
+        descKey: 'bubbles.blog.community.desc',
+        x: 120,
+        y: 120,
+        size: 88,
+      },
+    ],
+  },
+  {
+    id: 'shop',
+    icon: ShoppingBag,
+    href: '/shop',
+    features: [
+      {
+        icon: Sparkles,
+        labelKey: 'bubbles.shop.newDrops.label',
+        descKey: 'bubbles.shop.newDrops.desc',
+        x: -120,
+        y: -120,
+        size: 88,
+      },
+      {
+        icon: Tag,
+        labelKey: 'bubbles.shop.curated.label',
+        descKey: 'bubbles.shop.curated.desc',
+        x: 120,
+        y: -120,
+        size: 88,
+      },
+      {
+        icon: CreditCard,
+        labelKey: 'bubbles.shop.checkout.label',
+        descKey: 'bubbles.shop.checkout.desc',
+        x: -120,
+        y: 120,
+        size: 88,
+      },
+      {
+        icon: Package,
+        labelKey: 'bubbles.shop.premium.label',
+        descKey: 'bubbles.shop.premium.desc',
+        x: 120,
+        y: 120,
+        size: 88,
+      },
+    ],
+  },
+];
 
-function FeatureBubble({ feature, index, href, isMobile, t }: { feature: Feature; index: number; href: string; isMobile: boolean; t: (key: string) => string }) {
-    const Icon = feature.icon
-    const floatDelay = index * 0.5
-    const floatDuration = 3 + index * 0.3
+function FeatureBubble({
+  feature,
+  index,
+  href,
+  isMobile,
+  t,
+}: {
+  feature: Feature;
+  index: number;
+  href: string;
+  isMobile: boolean;
+  t: (key: string) => string;
+}) {
+  const Icon = feature.icon;
+  const floatDelay = index * 0.5;
+  const floatDuration = 3 + index * 0.3;
 
-    const scaleX = isMobile ? 0.55 : 1
-    const scaleY = isMobile ? 1.3 : 1
-    const posX = feature.x * scaleX
-    const posY = feature.y * scaleY
+  const scaleX = isMobile ? 0.55 : 1;
+  const scaleY = isMobile ? 1.3 : 1;
+  const posX = feature.x * scaleX;
+  const posY = feature.y * scaleY;
 
-    const shouldReduceMotion = useReducedMotion()
+  const shouldReduceMotion = useReducedMotion();
 
-    return (
-        <motion.div
-            className="absolute"
-            style={{ left: '50%', top: '50%' }}
-            initial={{ x: '-50%', y: '-50%', opacity: 0, scale: 0 }}
-            animate={{
-                x: `calc(-50% + ${posX}%)`,
-                y: `calc(-50% + ${posY}%)`,
-                opacity: 1,
-                scale: 1,
-            }}
-            exit={{ x: '-50%', y: '-50%', opacity: 0, scale: 0 }}
-            transition={shouldReduceMotion ? { duration: 0 } : {
-                x: { delay: 0.1 + index * 0.08, duration: 0.6, type: "spring", bounce: 0.3 },
-                y: { delay: 0.1 + index * 0.08, duration: 0.6, type: "spring", bounce: 0.3 },
-                opacity: { delay: 0.1 + index * 0.08, duration: 0.3 },
-                scale: { delay: 0.1 + index * 0.08, duration: 0.5, type: "spring", bounce: 0.4 },
-            }}
-        >
-            <div
-                className="animate-float motion-reduce:animate-none"
-                style={{ animationDelay: `${floatDelay}s`, animationDuration: `${floatDuration}s` }}
-            >
-                <Link href={href} className="group block">
-                    <div className="flex items-center gap-2 md:gap-3 px-2 md:px-3 py-2 md:py-2.5 w-[140px] md:w-[180px] bg-white dark:bg-neutral-900 border border-gray-200 dark:border-white/10 shadow-lg dark:shadow-black/30 rounded-xl md:rounded-2xl cursor-pointer transition-all duration-200 group-hover:border-[#1e5eff]/40 dark:group-hover:border-[#ff2d55]/40 group-hover:shadow-[0_8px_30px_rgba(30,94,255,0.25)] dark:group-hover:shadow-[0_8px_30px_rgba(255,45,85,0.25)] group-hover:scale-105">
-                        <div
-                            className="flex items-center justify-center shrink-0 w-8 h-8 md:w-10 md:h-10 bg-[#1e5eff]/10 dark:bg-[#ff2d55]/10 rounded-lg md:rounded-xl transition-transform duration-200 group-hover:rotate-6 group-hover:scale-110"
-                        >
-                            <Icon className="w-4 h-4 md:w-5 md:h-5 text-[#1e5eff] dark:text-[#ff2d55]" strokeWidth={1.5} />
-                        </div>
-                        <div className="min-w-0">
-                            <div className="text-xs md:text-sm font-bold text-gray-800 dark:text-white">{t(feature.labelKey)}</div>
-                            <div className="text-[10px] md:text-xs text-gray-500 dark:text-gray-400">{t(feature.descKey)}</div>
-                        </div>
-                    </div>
-                </Link>
+  return (
+    <motion.div
+      className="absolute"
+      style={{ left: '50%', top: '50%' }}
+      initial={{ x: '-50%', y: '-50%', opacity: 0, scale: 0 }}
+      animate={{
+        x: `calc(-50% + ${posX}%)`,
+        y: `calc(-50% + ${posY}%)`,
+        opacity: 1,
+        scale: 1,
+      }}
+      exit={{ x: '-50%', y: '-50%', opacity: 0, scale: 0 }}
+      transition={
+        shouldReduceMotion
+          ? { duration: 0 }
+          : {
+              x: {
+                delay: 0.1 + index * 0.08,
+                duration: 0.6,
+                type: 'spring',
+                bounce: 0.3,
+              },
+              y: {
+                delay: 0.1 + index * 0.08,
+                duration: 0.6,
+                type: 'spring',
+                bounce: 0.3,
+              },
+              opacity: { delay: 0.1 + index * 0.08, duration: 0.3 },
+              scale: {
+                delay: 0.1 + index * 0.08,
+                duration: 0.5,
+                type: 'spring',
+                bounce: 0.4,
+              },
+            }
+      }
+    >
+      <div
+        className="animate-float motion-reduce:animate-none"
+        style={{
+          animationDelay: `${floatDelay}s`,
+          animationDuration: `${floatDuration}s`,
+        }}
+      >
+        <Link href={href} className="group block">
+          <div className="flex w-[140px] cursor-pointer items-center gap-2 rounded-xl border border-gray-200 bg-white px-2 py-2 shadow-lg transition-all duration-200 group-hover:scale-105 group-hover:border-[#1e5eff]/40 group-hover:shadow-[0_8px_30px_rgba(30,94,255,0.25)] md:w-[180px] md:gap-3 md:rounded-2xl md:px-3 md:py-2.5 dark:border-white/10 dark:bg-neutral-900 dark:shadow-black/30 dark:group-hover:border-[#ff2d55]/40 dark:group-hover:shadow-[0_8px_30px_rgba(255,45,85,0.25)]">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[#1e5eff]/10 transition-transform duration-200 group-hover:scale-110 group-hover:rotate-6 md:h-10 md:w-10 md:rounded-xl dark:bg-[#ff2d55]/10">
+              <Icon
+                className="h-4 w-4 text-[#1e5eff] md:h-5 md:w-5 dark:text-[#ff2d55]"
+                strokeWidth={1.5}
+              />
             </div>
-        </motion.div>
-    )
+            <div className="min-w-0">
+              <div className="text-xs font-bold text-gray-800 md:text-sm dark:text-white">
+                {t(feature.labelKey)}
+              </div>
+              <div className="text-[10px] text-gray-500 md:text-xs dark:text-gray-400">
+                {t(feature.descKey)}
+              </div>
+            </div>
+          </div>
+        </Link>
+      </div>
+    </motion.div>
+  );
 }
 
 function CentralIcon({ page }: { page: Page }) {
-    const Icon = page.icon
-    
-    return (
-        <motion.div
-            initial={{ opacity: 0, scale: 0.5 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.8 }}
-            transition={{ duration: 0.5, type: "spring", bounce: 0.3 }}
-            className="relative flex items-center justify-center z-30"
-        >
-            <motion.div 
-                className="absolute w-60 h-60 rounded-full blur-3xl"
-                animate={{ opacity: [0.15, 0.25, 0.15], scale: [1, 1.1, 1] }}
-                transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
-            >
-                <div className="w-full h-full rounded-full bg-[#1e5eff] dark:bg-[#ff2d55]" />
-            </motion.div>
-            
-            <div className="relative w-36 h-36 md:w-40 md:h-40 rounded-full flex items-center justify-center border border-gray-100 dark:border-white/10 bg-white/80 dark:bg-neutral-900/60 backdrop-blur-xl shadow-2xl dark:shadow-black/40">
-                <div className="absolute inset-2 rounded-full bg-gradient-to-br from-[#1e5eff]/10 to-[#1e5eff]/5 dark:from-[#ff2d55]/10 dark:to-[#ff2d55]/5" />
-                <Icon className="relative z-10 w-16 h-16 text-[#1e5eff] dark:text-[#ff2d55]" strokeWidth={1.5} />
-            </div>
-        </motion.div>
-    )
+  const Icon = page.icon;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.5 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.8 }}
+      transition={{ duration: 0.5, type: 'spring', bounce: 0.3 }}
+      className="relative z-30 flex items-center justify-center"
+    >
+      <motion.div
+        className="absolute h-60 w-60 rounded-full blur-3xl"
+        animate={{ opacity: [0.15, 0.25, 0.15], scale: [1, 1.1, 1] }}
+        transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
+      >
+        <div className="h-full w-full rounded-full bg-[#1e5eff] dark:bg-[#ff2d55]" />
+      </motion.div>
+
+      <div className="relative flex h-36 w-36 items-center justify-center rounded-full border border-gray-100 bg-white/80 shadow-2xl backdrop-blur-xl md:h-40 md:w-40 dark:border-white/10 dark:bg-neutral-900/60 dark:shadow-black/40">
+        <div className="absolute inset-2 rounded-full bg-gradient-to-br from-[#1e5eff]/10 to-[#1e5eff]/5 dark:from-[#ff2d55]/10 dark:to-[#ff2d55]/5" />
+        <Icon
+          className="relative z-10 h-16 w-16 text-[#1e5eff] dark:text-[#ff2d55]"
+          strokeWidth={1.5}
+        />
+      </div>
+    </motion.div>
+  );
 }
 
 function DecorativeDots() {
-    return (
-        <div className="absolute inset-0 pointer-events-none z-0" aria-hidden="true">
-            {decorativeDots.map((dot, i) => (
-                <div
-                    key={i}
-                    className="absolute rounded-full bg-[#1e5eff]/40 dark:bg-[#ff2d55]/40 animate-float"
-                    style={{
-                        left: dot.x,
-                        top: dot.y,
-                        width: dot.size,
-                        height: dot.size,
-                        animationDelay: `${i * 0.3}s`,
-                        animationDuration: `${3 + i * 0.2}s`,
-                    }}
-                />
-            ))}
-        </div>
-    )
+  return (
+    <div
+      className="pointer-events-none absolute inset-0 z-0"
+      aria-hidden="true"
+    >
+      {decorativeDots.map((dot, i) => (
+        <div
+          key={i}
+          className="animate-float absolute rounded-full bg-[#1e5eff]/40 dark:bg-[#ff2d55]/40"
+          style={{
+            left: dot.x,
+            top: dot.y,
+            width: dot.size,
+            height: dot.size,
+            animationDelay: `${i * 0.3}s`,
+            animationDuration: `${3 + i * 0.2}s`,
+          }}
+        />
+      ))}
+    </div>
+  );
 }
 
 function OrbitRings() {
-    return (
-        <div className="absolute inset-0 flex items-center justify-center pointer-events-none" aria-hidden="true">
-            <div className="absolute w-[55%] h-[55%] rounded-full border border-dashed border-gray-300/50 dark:border-white/10 animate-spin-slow" />
-            <div className="absolute w-[75%] h-[75%] rounded-full border border-dashed border-gray-200/50 dark:border-white/[0.07] animate-spin-slower" />
-            <div className="absolute w-[95%] h-[95%] rounded-full border border-gray-100/50 dark:border-white/[0.03]" />
-        </div>
-    )
+  return (
+    <div
+      className="pointer-events-none absolute inset-0 flex items-center justify-center"
+      aria-hidden="true"
+    >
+      <div className="animate-spin-slow absolute h-[55%] w-[55%] rounded-full border border-dashed border-gray-300/50 dark:border-white/10" />
+      <div className="animate-spin-slower absolute h-[75%] w-[75%] rounded-full border border-dashed border-gray-200/50 dark:border-white/[0.07]" />
+      <div className="absolute h-[95%] w-[95%] rounded-full border border-gray-100/50 dark:border-white/[0.03]" />
+    </div>
+  );
 }
 
 function ConnectingLines() {
-    const lines = [
-        { x2: "15%", y2: "15%", delay: "0s" },
-        { x2: "85%", y2: "15%", delay: "0.5s" },
-        { x2: "15%", y2: "85%", delay: "1s" },
-        { x2: "85%", y2: "85%", delay: "1.5s" },
-    ]
-    
-    return (
-        <svg className="absolute inset-0 w-full h-full pointer-events-none" aria-hidden="true">
-            <defs>
-                <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                    <stop offset="0%" className="[stop-color:#1e5eff] dark:[stop-color:#ff2d55]" stopOpacity="0.3" />
-                    <stop offset="100%" className="[stop-color:#1e5eff] dark:[stop-color:#ff2d55]" stopOpacity="0" />
-                </linearGradient>
-            </defs>
-            {lines.map((line, i) => (
-                <line 
-                    key={i}
-                    x1="50%" y1="50%" x2={line.x2} y2={line.y2} 
-                    stroke="url(#lineGradient)" 
-                    strokeWidth="1" 
-                    strokeDasharray="4 4" 
-                    className="animate-dash-flow" 
-                    style={{ animationDelay: line.delay }} 
-                />
-            ))}
-        </svg>
-    )
+  const lines = [
+    { x2: '15%', y2: '15%', delay: '0s' },
+    { x2: '85%', y2: '15%', delay: '0.5s' },
+    { x2: '15%', y2: '85%', delay: '1s' },
+    { x2: '85%', y2: '85%', delay: '1.5s' },
+  ];
+
+  return (
+    <svg
+      className="pointer-events-none absolute inset-0 h-full w-full"
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop
+            offset="0%"
+            className="[stop-color:#1e5eff] dark:[stop-color:#ff2d55]"
+            stopOpacity="0.3"
+          />
+          <stop
+            offset="100%"
+            className="[stop-color:#1e5eff] dark:[stop-color:#ff2d55]"
+            stopOpacity="0"
+          />
+        </linearGradient>
+      </defs>
+      {lines.map((line, i) => (
+        <line
+          key={i}
+          x1="50%"
+          y1="50%"
+          x2={line.x2}
+          y2={line.y2}
+          stroke="url(#lineGradient)"
+          strokeWidth="1"
+          strokeDasharray="4 4"
+          className="animate-dash-flow"
+          style={{ animationDelay: line.delay }}
+        />
+      ))}
+    </svg>
+  );
 }
 
 function TabButton({
-    page,
-    isActive,
-    onClick,
-    onKeyDown,
-    t
+  page,
+  isActive,
+  onClick,
+  onKeyDown,
+  t,
 }: {
-    page: Page;
-    isActive: boolean;
-    onClick: () => void
-    onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void
-    t: (key: string) => string
+  page: Page;
+  isActive: boolean;
+  onClick: () => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  t: (key: string) => string;
 }) {
-    return (
-        <button
-            type="button"
-            id={`${page.id}-tab`}
-            onClick={onClick}
-            onKeyDown={onKeyDown}
-            role="tab"
-            aria-selected={isActive}
-            aria-controls={`${page.id}-panel`}
-            tabIndex={isActive ? 0 : -1}
-            className={`relative p-2.5 md:px-5 md:py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
-                isActive
-                    ? "text-white"
-                    : "text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10"
-            }`}
-        >
-            {isActive && (
-                <motion.div
-                    layoutId="activeTabBackground"
-                    className="absolute inset-0 bg-[#1e5eff] dark:bg-[#ff2d55] shadow-lg shadow-[#1e5eff]/25 dark:shadow-[#ff2d55]/25"
-                    initial={false}
-                    transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
-                    style={{ borderRadius: 9999 }}
-                />
-            )}
-            <span className="relative z-10 flex items-center gap-2">
-                <page.icon size={18} className="md:w-4 md:h-4" aria-hidden="true" />
-                <span className="hidden md:inline">{t(`${page.id}.title`)}</span>
-            </span>
-        </button>
-    )
+  return (
+    <button
+      type="button"
+      id={`${page.id}-tab`}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      role="tab"
+      aria-selected={isActive}
+      aria-controls={`${page.id}-panel`}
+      tabIndex={isActive ? 0 : -1}
+      className={`relative rounded-full p-2.5 text-sm font-medium transition-all duration-300 md:px-5 md:py-2.5 ${
+        isActive
+          ? 'text-white'
+          : 'text-gray-600 hover:bg-gray-100 hover:text-black dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white'
+      }`}
+    >
+      {isActive && (
+        <motion.div
+          layoutId="activeTabBackground"
+          className="absolute inset-0 bg-[#1e5eff] shadow-lg shadow-[#1e5eff]/25 dark:bg-[#ff2d55] dark:shadow-[#ff2d55]/25"
+          initial={false}
+          transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
+          style={{ borderRadius: 9999 }}
+        />
+      )}
+      <span className="relative z-10 flex items-center gap-2">
+        <page.icon size={18} className="md:h-4 md:w-4" aria-hidden="true" />
+        <span className="hidden md:inline">{t(`${page.id}.title`)}</span>
+      </span>
+    </button>
+  );
 }
 
 export function FeaturesSection() {
-    const t = useTranslations("about.features")
-    const [activeTab, setActiveTab] = useState("qa")
-    const [isMobile, setIsMobile] = useState(() =>
-        typeof window !== "undefined" ? window.innerWidth < 768 : false
-    )
-    const activePage = pages.find(p => p.id === activeTab) || pages[0]
+  const t = useTranslations('about.features');
+  const [activeTab, setActiveTab] = useState('qa');
+  const [isMobile, setIsMobile] = useState(() =>
+    typeof window !== 'undefined' ? window.innerWidth < 768 : false
+  );
+  const activePage = pages.find(p => p.id === activeTab) || pages[0];
 
-    useEffect(() => {
-        const checkMobile = () => setIsMobile(window.innerWidth < 768)
-        checkMobile()
-        window.addEventListener('resize', checkMobile)
-        return () => window.removeEventListener('resize', checkMobile)
-    }, [])
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
 
-    const onTabKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
-        if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return
-        event.preventDefault()
-        const dir = event.key === "ArrowRight" ? 1 : -1
-        const nextIndex = (index + dir + pages.length) % pages.length
-        const nextId = pages[nextIndex].id
-        setActiveTab(nextId)
-        setTimeout(() => {
-             document.getElementById(`${nextId}-tab`)?.focus()
-        }, 0)
-    }
+  const onTabKeyDown = (
+    event: React.KeyboardEvent<HTMLButtonElement>,
+    index: number
+  ) => {
+    if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;
+    event.preventDefault();
+    const dir = event.key === 'ArrowRight' ? 1 : -1;
+    const nextIndex = (index + dir + pages.length) % pages.length;
+    const nextId = pages[nextIndex].id;
+    setActiveTab(nextId);
+    setTimeout(() => {
+      document.getElementById(`${nextId}-tab`)?.focus();
+    }, 0);
+  };
 
+  return (
+    <section className="relative w-full overflow-hidden bg-gray-50 py-20 lg:py-28 dark:bg-transparent">
+      <DecorativeDots />
 
+      <div
+        className="pointer-events-none absolute inset-0 -z-10"
+        aria-hidden="true"
+      >
+        <div className="absolute top-1/2 left-1/2 h-[400px] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#1e5eff]/20 opacity-20 blur-[150px] dark:bg-[#ff2d55]/20" />
+      </div>
 
-    return (
-        <section className="relative w-full py-20 lg:py-28 overflow-hidden bg-gray-50 dark:bg-transparent">
-            <DecorativeDots />
+      <div className="container-main relative z-10 flex flex-col items-center">
+        <SectionHeading
+          title={t('title')}
+          highlight={t('titleHighlight')}
+          subtitle={t('subtitle')}
+        />
 
-            <div className="absolute inset-0 -z-10 pointer-events-none" aria-hidden="true">
-                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl h-[400px] rounded-full blur-[150px] opacity-20 bg-[#1e5eff]/20 dark:bg-[#ff2d55]/20" />
-            </div>
+        <div className="relative mx-auto mb-4 aspect-square w-full max-w-md">
+          <OrbitRings />
+          <ConnectingLines />
 
-            <div className="relative container-main z-10 flex flex-col items-center">
-                <SectionHeading
-                    title={t("title")}
-                    highlight={t("titleHighlight")}
-                    subtitle={t("subtitle")}
-                />
+          <div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center">
+            <AnimatePresence mode="wait">
+              <CentralIcon key={activeTab} page={activePage} />
+            </AnimatePresence>
+          </div>
 
-                <div className="w-full max-w-md mx-auto aspect-square relative mb-4">
-                    <OrbitRings />
-                    <ConnectingLines />
-
-                    <div className="absolute inset-0 flex items-center justify-center z-30 pointer-events-none">
-                        <AnimatePresence mode="wait">
-                            <CentralIcon key={activeTab} page={activePage} />
-                        </AnimatePresence>
-                    </div>
-
-                    <AnimatePresence mode="wait">
-                        <motion.div
-                            key={activeTab}
-                            role="tabpanel"
-                            id={`${activeTab}-panel`}
-                            aria-labelledby={`${activeTab}-tab`}
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            className="absolute inset-0"
-                        >
-                            {activePage.features.map((feature, i) => (
-                                <FeatureBubble
-                                    key={feature.labelKey}
-                                    feature={feature}
-                                    index={i}
-                                    href={activePage.href}
-                                    isMobile={isMobile}
-                                    t={t}
-                                />
-                            ))}
-                        </motion.div>
-                    </AnimatePresence>
-                </div>
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={activeTab}
+              role="tabpanel"
+              id={`${activeTab}-panel`}
+              aria-labelledby={`${activeTab}-tab`}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="absolute inset-0"
+            >
+              {activePage.features.map((feature, i) => (
+                <FeatureBubble
+                  key={feature.labelKey}
+                  feature={feature}
+                  index={i}
+                  href={activePage.href}
+                  isMobile={isMobile}
+                  t={t}
+                />
+              ))}
+            </motion.div>
+          </AnimatePresence>
+        </div>
 
-                <div className="flex justify-center mb-8">
-                    <div role="tablist" aria-label="Feature categories" className="inline-flex gap-1 md:gap-2 p-1.5 rounded-full border border-gray-200 dark:border-white/10 bg-white/20 dark:bg-white/5 backdrop-blur-md shadow-sm dark:shadow-none">
-                        {pages.map((page, index) => (
-                            <TabButton
-                                key={page.id}
-                                page={page}
-                                isActive={activeTab === page.id}
-                                onClick={() => setActiveTab(page.id)}
-                                onKeyDown={(e) => onTabKeyDown(e, index)}
-                                t={t}
-                            />
-                        ))}
-                    </div>
-                </div>
+        <div className="mb-8 flex justify-center">
+          <div
+            role="tablist"
+            aria-label="Feature categories"
+            className="inline-flex gap-1 rounded-full border border-gray-200 bg-white/20 p-1.5 shadow-sm backdrop-blur-md md:gap-2 dark:border-white/10 dark:bg-white/5 dark:shadow-none"
+          >
+            {pages.map((page, index) => (
+              <TabButton
+                key={page.id}
+                page={page}
+                isActive={activeTab === page.id}
+                onClick={() => setActiveTab(page.id)}
+                onKeyDown={e => onTabKeyDown(e, index)}
+                t={t}
+              />
+            ))}
+          </div>
+        </div>
 
-                <div className="max-w-2xl mx-auto text-center relative h-20 md:h-16 w-full mb-4">
-                    <AnimatePresence mode="wait">
-                        <motion.div
-                            key={activeTab}
-                            initial={{ opacity: 0, y: 10 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            exit={{ opacity: 0, y: -10 }}
-                            transition={{ duration: 0.2 }}
-                            className="absolute w-full top-0 left-0 flex justify-center"
-                        >
-                            <p className="text-base md:text-lg text-gray-600 dark:text-gray-300 leading-relaxed font-light">
-                                {t(`${activeTab}.description`)}
-                            </p>
-                        </motion.div>
-                    </AnimatePresence>
-                </div>
-            </div>
-        </section>
-    )
-}
\ No newline at end of file
+        <div className="relative mx-auto mb-4 h-20 w-full max-w-2xl text-center md:h-16">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={activeTab}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.2 }}
+              className="absolute top-0 left-0 flex w-full justify-center"
+            >
+              <p className="text-base leading-relaxed font-light text-gray-600 md:text-lg dark:text-gray-300">
+                {t(`${activeTab}.description`)}
+              </p>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/components/about/HeroSection.tsx b/frontend/components/about/HeroSection.tsx
index 7bb783ee..eccabb40 100644
--- a/frontend/components/about/HeroSection.tsx
+++ b/frontend/components/about/HeroSection.tsx
@@ -1,123 +1,212 @@
-"use client"
+'use client';
 
-import { motion } from "framer-motion"
-import { CheckCircle, Users, Star, Linkedin, ArrowDown } from "lucide-react"
-import { useTranslations } from "next-intl"
-import { InteractiveGame } from "./InteractiveGame"
-import type { PlatformStats } from "@/lib/about/stats"
-import { DynamicGridBackground } from "@/components/shared/DynamicGridBackground"
+import { motion } from 'framer-motion';
+import { ArrowDown,CheckCircle, Linkedin, Star, Users } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
+import type { PlatformStats } from '@/lib/about/stats';
+
+import { InteractiveGame } from './InteractiveGame';
 
 export function HeroSection({ stats }: { stats?: PlatformStats }) {
-  const t = useTranslations("about.hero")
+  const t = useTranslations('about.hero');
 
   const data = stats || {
-    questionsSolved: "850+",
-    githubStars: "120+",
-    activeUsers: "200+",
-    linkedinFollowers: "1.3k+"
-  }
+    questionsSolved: '850+',
+    githubStars: '120+',
+    activeUsers: '200+',
+    linkedinFollowers: '1.3k+',
+  };
 
   return (
-    <DynamicGridBackground showStaticGrid className="flex min-h-[calc(100svh)] items-center justify-center bg-gray-50 transition-colors duration-300 dark:bg-transparent pt-20 pb-10">
-      <div className="relative z-10 grid w-full max-w-[1600px] grid-cols-1 items-center px-4 sm:px-6 lg:px-8 xl:grid-cols-12 xl:gap-8 h-full">
-
+    <DynamicGridBackground
+      showStaticGrid
+      className="flex min-h-[calc(100svh)] items-center justify-center bg-gray-50 pt-20 pb-10 transition-colors duration-300 dark:bg-transparent"
+    >
+      <div className="relative z-10 grid h-full w-full max-w-[1600px] grid-cols-1 items-center px-4 sm:px-6 lg:px-8 xl:grid-cols-12 xl:gap-8">
         <div className="hidden h-full flex-col justify-center gap-24 xl:col-span-3 xl:flex">
-             <motion.div initial={{ x: -50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.2 }} className="self-end">
-                <GlassWidget icon={CheckCircle} color="text-green-500" bg="bg-green-500/10" label={t("stats.quizzesPassed")} value={data.questionsSolved} />
-             </motion.div>
-             <motion.div initial={{ x: -50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.4 }} className="self-start">
-                <GlassWidget icon={Star} color="text-yellow-500" bg="bg-yellow-500/10" label={t("stats.githubStars")} value={data.githubStars} />
-             </motion.div>
+          <motion.div
+            initial={{ x: -50, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{ delay: 0.2 }}
+            className="self-end"
+          >
+            <GlassWidget
+              icon={CheckCircle}
+              color="text-green-500"
+              bg="bg-green-500/10"
+              label={t('stats.quizzesPassed')}
+              value={data.questionsSolved}
+            />
+          </motion.div>
+          <motion.div
+            initial={{ x: -50, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{ delay: 0.4 }}
+            className="self-start"
+          >
+            <GlassWidget
+              icon={Star}
+              color="text-yellow-500"
+              bg="bg-yellow-500/10"
+              label={t('stats.githubStars')}
+              value={data.githubStars}
+            />
+          </motion.div>
         </div>
 
         <div className="flex flex-col items-center text-center xl:col-span-6">
+          <div className="mb-6 scale-90 md:scale-100">
+            <InteractiveGame />
+          </div>
 
-            <div className="scale-90 md:scale-100 mb-6">
-                <InteractiveGame />
-            </div>
-
-            <motion.h1
-              initial={{ y: 20, opacity: 0 }}
-              animate={{ y: 0, opacity: 1 }}
-              transition={{ duration: 0.6 }}
-              className="mt-4 mb-8 text-4xl font-black tracking-tight text-gray-900 dark:text-white md:text-5xl lg:text-6xl xl:text-7xl max-w-5xl text-balance leading-[1.1]"
-            >
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#1e5eff]/70 dark:from-[#ff2d55] dark:to-[#ff2d55]/70">
-                {t("titleHighlight")} <br/>
-              </span> {t("titleRest")}
-            </motion.h1>
+          <motion.h1
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ duration: 0.6 }}
+            className="mt-4 mb-8 max-w-5xl text-4xl leading-[1.1] font-black tracking-tight text-balance text-gray-900 md:text-5xl lg:text-6xl xl:text-7xl dark:text-white"
+          >
+            <span className="bg-gradient-to-r from-[#1e5eff] to-[#1e5eff]/70 bg-clip-text text-transparent dark:from-[#ff2d55] dark:to-[#ff2d55]/70">
+              {t('titleHighlight')} <br />
+            </span>{' '}
+            {t('titleRest')}
+          </motion.h1>
 
-            <motion.p
-              initial={{ y: 20, opacity: 0 }}
-              animate={{ y: 0, opacity: 1 }}
-              transition={{ duration: 0.6, delay: 0.1 }}
-              className="max-w-3xl text-sm font-light leading-relaxed text-gray-700 text-balance dark:text-gray-300 md:text-lg lg:text-xl mb-10"
-            >
-              {t("description")} <strong className="font-medium text-gray-900 dark:text-gray-200">{t("descriptionHighlight")}</strong> {t("descriptionRest")}
-            </motion.p>
+          <motion.p
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ duration: 0.6, delay: 0.1 }}
+            className="mb-10 max-w-3xl text-sm leading-relaxed font-light text-balance text-gray-700 md:text-lg lg:text-xl dark:text-gray-300"
+          >
+            {t('description')}{' '}
+            <strong className="font-medium text-gray-900 dark:text-gray-200">
+              {t('descriptionHighlight')}
+            </strong>{' '}
+            {t('descriptionRest')}
+          </motion.p>
 
-            <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.3 }}
-                className="grid w-full max-w-lg grid-cols-2 gap-4 xl:hidden"
-            >
-                <MobileStatItem icon={CheckCircle} color="text-green-500" bg="bg-green-500/10" label={t("stats.quizzes")} value={data.questionsSolved} />
-                <MobileStatItem icon={Star} color="text-yellow-500" bg="bg-yellow-500/10" label={t("stats.stars")} value={data.githubStars} />
-                <MobileStatItem icon={Users} color="text-[#ff2d55]" bg="bg-[#ff2d55]/10" label={t("stats.users")} value={data.activeUsers} />
-                <MobileStatItem icon={Linkedin} color="text-blue-600" bg="bg-blue-600/10" label={t("stats.followers")} value={data.linkedinFollowers} />
-            </motion.div>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.3 }}
+            className="grid w-full max-w-lg grid-cols-2 gap-4 xl:hidden"
+          >
+            <MobileStatItem
+              icon={CheckCircle}
+              color="text-green-500"
+              bg="bg-green-500/10"
+              label={t('stats.quizzes')}
+              value={data.questionsSolved}
+            />
+            <MobileStatItem
+              icon={Star}
+              color="text-yellow-500"
+              bg="bg-yellow-500/10"
+              label={t('stats.stars')}
+              value={data.githubStars}
+            />
+            <MobileStatItem
+              icon={Users}
+              color="text-[#ff2d55]"
+              bg="bg-[#ff2d55]/10"
+              label={t('stats.users')}
+              value={data.activeUsers}
+            />
+            <MobileStatItem
+              icon={Linkedin}
+              color="text-blue-600"
+              bg="bg-blue-600/10"
+              label={t('stats.followers')}
+              value={data.linkedinFollowers}
+            />
+          </motion.div>
 
-            <motion.div
-                animate={{ y: [0, 10, 0] }}
-                transition={{ duration: 2, repeat: Infinity }}
-                className="mt-16 text-gray-400 dark:text-gray-600 hidden xl:block"
-            >
-                <ArrowDown className="h-6 w-6" aria-hidden="true" />
-            </motion.div>
+          <motion.div
+            animate={{ y: [0, 10, 0] }}
+            transition={{ duration: 2, repeat: Infinity }}
+            className="mt-16 hidden text-gray-400 xl:block dark:text-gray-600"
+          >
+            <ArrowDown className="h-6 w-6" aria-hidden="true" />
+          </motion.div>
         </div>
 
         <div className="hidden h-full flex-col justify-center gap-24 xl:col-span-3 xl:flex">
-             <motion.div initial={{ x: 50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.3 }} className="self-start">
-                <GlassWidget icon={Users} color="text-[#ff2d55]" bg="bg-[#ff2d55]/10" label={t("stats.activeUsers")} value={data.activeUsers} />
-             </motion.div>
-             <motion.div initial={{ x: 50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.5 }} className="self-end">
-                <GlassWidget icon={Linkedin} color="text-blue-600" bg="bg-blue-600/10" label={t("stats.linkedinFollowers")} value={data.linkedinFollowers} />
-             </motion.div>
+          <motion.div
+            initial={{ x: 50, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{ delay: 0.3 }}
+            className="self-start"
+          >
+            <GlassWidget
+              icon={Users}
+              color="text-[#ff2d55]"
+              bg="bg-[#ff2d55]/10"
+              label={t('stats.activeUsers')}
+              value={data.activeUsers}
+            />
+          </motion.div>
+          <motion.div
+            initial={{ x: 50, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{ delay: 0.5 }}
+            className="self-end"
+          >
+            <GlassWidget
+              icon={Linkedin}
+              color="text-blue-600"
+              bg="bg-blue-600/10"
+              label={t('stats.linkedinFollowers')}
+              value={data.linkedinFollowers}
+            />
+          </motion.div>
         </div>
-
       </div>
     </DynamicGridBackground>
-  )
+  );
 }
 
 function GlassWidget({ icon: Icon, color, bg, label, value }: any) {
-    return (
-        <motion.div 
-            whileHover={{ y: -5 }}
-            className="flex min-w-[220px] items-center gap-4 rounded-2xl border border-gray-100 bg-white/10 p-5 shadow-xl backdrop-blur-xl transition-all hover:border-[#1e5eff]/30 dark:border-white/5 dark:bg-neutral-900/10 dark:hover:border-[#ff2d55]/30 dark:shadow-black/50"
-        >
-            <div className={`flex h-12 w-12 items-center justify-center rounded-xl ${bg} ${color}`} aria-hidden="true">
-                <Icon size={24} />
-            </div>
-            <div className="flex flex-col items-start">
-                <div className="text-[10px] font-bold uppercase tracking-widest text-gray-400">{label}</div>
-                <div className="text-2xl font-bold text-gray-900 dark:text-white">{value}</div>
-            </div>
-        </motion.div>
-    )
+  return (
+    <motion.div
+      whileHover={{ y: -5 }}
+      className="flex min-w-[220px] items-center gap-4 rounded-2xl border border-gray-100 bg-white/10 p-5 shadow-xl backdrop-blur-xl transition-all hover:border-[#1e5eff]/30 dark:border-white/5 dark:bg-neutral-900/10 dark:shadow-black/50 dark:hover:border-[#ff2d55]/30"
+    >
+      <div
+        className={`flex h-12 w-12 items-center justify-center rounded-xl ${bg} ${color}`}
+        aria-hidden="true"
+      >
+        <Icon size={24} />
+      </div>
+      <div className="flex flex-col items-start">
+        <div className="text-[10px] font-bold tracking-widest text-gray-400 uppercase">
+          {label}
+        </div>
+        <div className="text-2xl font-bold text-gray-900 dark:text-white">
+          {value}
+        </div>
+      </div>
+    </motion.div>
+  );
 }
 
 function MobileStatItem({ icon: Icon, color, bg, label, value }: any) {
-    return (
-        <div className="flex items-center gap-3 rounded-xl border border-gray-100 bg-white/10 p-3 shadow-sm backdrop-blur-xl dark:border-white/5 dark:bg-neutral-900/10">
-            <div className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${bg} ${color}`} aria-hidden="true">
-                <Icon size={20} />
-            </div>
-            <div className="flex flex-col items-start overflow-hidden">
-                <div className="text-lg font-bold text-gray-900 dark:text-white leading-tight truncate">{value}</div>
-                <div className="text-[10px] uppercase font-medium text-gray-500 dark:text-gray-400 tracking-wider truncate">{label}</div>
-            </div>
+  return (
+    <div className="flex items-center gap-3 rounded-xl border border-gray-100 bg-white/10 p-3 shadow-sm backdrop-blur-xl dark:border-white/5 dark:bg-neutral-900/10">
+      <div
+        className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${bg} ${color}`}
+        aria-hidden="true"
+      >
+        <Icon size={20} />
+      </div>
+      <div className="flex flex-col items-start overflow-hidden">
+        <div className="truncate text-lg leading-tight font-bold text-gray-900 dark:text-white">
+          {value}
+        </div>
+        <div className="truncate text-[10px] font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400">
+          {label}
         </div>
-    )
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/components/about/InteractiveGame.tsx b/frontend/components/about/InteractiveGame.tsx
index b85afd4b..d2ef905e 100644
--- a/frontend/components/about/InteractiveGame.tsx
+++ b/frontend/components/about/InteractiveGame.tsx
@@ -1,518 +1,612 @@
-"use client"
-
-import { useState, useEffect, useRef, useCallback } from "react"
-import { motion, AnimatePresence } from "framer-motion"
-import { Heart, Bug, Play, X, RotateCcw, Zap, Skull, Rabbit } from "lucide-react"
-import { useTranslations } from "next-intl"
-
-const GAME_WIDTH_DESKTOP = 540
-const GAME_WIDTH_MOBILE = 320
-const IDLE_WIDTH_DESKTOP = 280
-const IDLE_WIDTH_MOBILE = 240
-
-const GROUND_Y_DESKTOP = 32
-const GROUND_Y_MOBILE = 24
-const PLAYER_X_DESKTOP = 64
-const PLAYER_X_MOBILE = 40
-const PLAYER_SIZE_DESKTOP = 40
-const PLAYER_SIZE_MOBILE = 32
-const JUMP_HEIGHT_DESKTOP = 90
-const JUMP_HEIGHT_MOBILE = 70
-const JUMP_DURATION = 500
-
-type ObstacleType = 'ground' | 'flying' | 'fast' | 'tall'
+'use client';
+
+import { AnimatePresence,motion } from 'framer-motion';
+import {
+  Bug,
+  Heart,
+  Play,
+  Rabbit,
+  RotateCcw,
+  Skull,
+  X,
+  Zap,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback,useEffect, useRef, useState } from 'react';
+
+const GAME_WIDTH_DESKTOP = 540;
+const GAME_WIDTH_MOBILE = 320;
+const IDLE_WIDTH_DESKTOP = 280;
+const IDLE_WIDTH_MOBILE = 240;
+
+const GROUND_Y_DESKTOP = 32;
+const GROUND_Y_MOBILE = 24;
+const PLAYER_X_DESKTOP = 64;
+const PLAYER_X_MOBILE = 40;
+const PLAYER_SIZE_DESKTOP = 40;
+const PLAYER_SIZE_MOBILE = 32;
+const JUMP_HEIGHT_DESKTOP = 90;
+const JUMP_HEIGHT_MOBILE = 70;
+const JUMP_DURATION = 500;
+
+type ObstacleType = 'ground' | 'flying' | 'fast' | 'tall';
 
 interface Obstacle {
-    type: ObstacleType
-    x: number
-    size: number
-    heightOffset: number
-    speedMultiplier: number
+  type: ObstacleType;
+  x: number;
+  size: number;
+  heightOffset: number;
+  speedMultiplier: number;
 }
 
 const OBSTACLE_CONFIGS: Record<ObstacleType, Omit<Obstacle, 'x'>> = {
-    ground: { type: 'ground', size: 32, heightOffset: 0, speedMultiplier: 1 },
-    flying: { type: 'flying', size: 28, heightOffset: 45, speedMultiplier: 1 },
-    fast: { type: 'fast', size: 24, heightOffset: 0, speedMultiplier: 1.2 },
-    tall: { type: 'tall', size: 38, heightOffset: 0, speedMultiplier: 0.95 },
-}
+  ground: { type: 'ground', size: 32, heightOffset: 0, speedMultiplier: 1 },
+  flying: { type: 'flying', size: 28, heightOffset: 45, speedMultiplier: 1 },
+  fast: { type: 'fast', size: 24, heightOffset: 0, speedMultiplier: 1.2 },
+  tall: { type: 'tall', size: 38, heightOffset: 0, speedMultiplier: 0.95 },
+};
 
 const LEVEL_THRESHOLDS = [
-    { score: 0, types: ['ground'] as ObstacleType[], nameKey: 'level1', baseSpeed: 3.5 },
-    { score: 8, types: ['ground', 'fast'] as ObstacleType[], nameKey: 'level2', baseSpeed: 4 },
-    { score: 18, types: ['ground', 'fast', 'flying'] as ObstacleType[], nameKey: 'level3', baseSpeed: 4.5 },
-    { score: 30, types: ['ground', 'fast', 'flying', 'tall'] as ObstacleType[], nameKey: 'level4', baseSpeed: 5 },
-]
+  {
+    score: 0,
+    types: ['ground'] as ObstacleType[],
+    nameKey: 'level1',
+    baseSpeed: 3.5,
+  },
+  {
+    score: 8,
+    types: ['ground', 'fast'] as ObstacleType[],
+    nameKey: 'level2',
+    baseSpeed: 4,
+  },
+  {
+    score: 18,
+    types: ['ground', 'fast', 'flying'] as ObstacleType[],
+    nameKey: 'level3',
+    baseSpeed: 4.5,
+  },
+  {
+    score: 30,
+    types: ['ground', 'fast', 'flying', 'tall'] as ObstacleType[],
+    nameKey: 'level4',
+    baseSpeed: 5,
+  },
+];
 
 function getBaseSpeed(score: number): number {
-    let speed = 3.5
-    for (const level of LEVEL_THRESHOLDS) {
-        if (score >= level.score) {
-            speed = level.baseSpeed
-        }
+  let speed = 3.5;
+  for (const level of LEVEL_THRESHOLDS) {
+    if (score >= level.score) {
+      speed = level.baseSpeed;
     }
-    return speed
+  }
+  return speed;
 }
 
 function getAvailableTypes(score: number): ObstacleType[] {
-    let types: ObstacleType[] = ['ground']
-    for (const level of LEVEL_THRESHOLDS) {
-        if (score >= level.score) {
-            types = level.types
-        }
+  let types: ObstacleType[] = ['ground'];
+  for (const level of LEVEL_THRESHOLDS) {
+    if (score >= level.score) {
+      types = level.types;
     }
-    return types
+  }
+  return types;
 }
 
 function getCurrentLevelKey(score: number): string {
-    let nameKey = 'level1'
-    for (const level of LEVEL_THRESHOLDS) {
-        if (score >= level.score) {
-            nameKey = level.nameKey
-        }
+  let nameKey = 'level1';
+  for (const level of LEVEL_THRESHOLDS) {
+    if (score >= level.score) {
+      nameKey = level.nameKey;
     }
-    return nameKey
+  }
+  return nameKey;
 }
 
 function getRandomObstacle(score: number, gameWidth: number): Obstacle {
-    const types = getAvailableTypes(score)
-    let selectedType: ObstacleType
-    const rand = Math.random()
-
-    if (types.length === 1) {
-        selectedType = 'ground'
-    } else if (types.length === 2) {
-        selectedType = rand < 0.7 ? 'ground' : types[1]
-    } else if (types.length === 3) {
-        if (rand < 0.5) selectedType = 'ground'
-        else if (rand < 0.75) selectedType = types[1]
-        else selectedType = types[2]
-    } else {
-        if (rand < 0.4) selectedType = 'ground'
-        else if (rand < 0.6) selectedType = types[1]
-        else if (rand < 0.8) selectedType = types[2]
-        else selectedType = types[3]
-    }
-
-    return {
-        ...OBSTACLE_CONFIGS[selectedType],
-        x: gameWidth + 40,
-    }
+  const types = getAvailableTypes(score);
+  let selectedType: ObstacleType;
+  const rand = Math.random();
+
+  if (types.length === 1) {
+    selectedType = 'ground';
+  } else if (types.length === 2) {
+    selectedType = rand < 0.7 ? 'ground' : types[1];
+  } else if (types.length === 3) {
+    if (rand < 0.5) selectedType = 'ground';
+    else if (rand < 0.75) selectedType = types[1];
+    else selectedType = types[2];
+  } else {
+    if (rand < 0.4) selectedType = 'ground';
+    else if (rand < 0.6) selectedType = types[1];
+    else if (rand < 0.8) selectedType = types[2];
+    else selectedType = types[3];
+  }
+
+  return {
+    ...OBSTACLE_CONFIGS[selectedType],
+    x: gameWidth + 40,
+  };
 }
 
 export function InteractiveGame() {
-    const t = useTranslations("about.arcade")
-    const [mode, setMode] = useState<'idle' | 'preview' | 'playing'>('idle')
-    const [gameOver, setGameOver] = useState(false)
-    const [score, setScore] = useState(0)
-    const [levelUpFlash, setLevelUpFlash] = useState(false)
-    const [isMobile, setIsMobile] = useState(false)
-
-    const gameWidth = isMobile ? GAME_WIDTH_MOBILE : GAME_WIDTH_DESKTOP
-    const idleWidth = isMobile ? IDLE_WIDTH_MOBILE : IDLE_WIDTH_DESKTOP
-    const playerX = isMobile ? PLAYER_X_MOBILE : PLAYER_X_DESKTOP
-    const groundY = isMobile ? GROUND_Y_MOBILE : GROUND_Y_DESKTOP
-    const playerSize = isMobile ? PLAYER_SIZE_MOBILE : PLAYER_SIZE_DESKTOP
-    const jumpHeight = isMobile ? JUMP_HEIGHT_MOBILE : JUMP_HEIGHT_DESKTOP
-    const obstacleEndX = -60
-
-    const [highScore, setHighScore] = useState(0)
-
-    useEffect(() => {
-        const checkMobile = () => setIsMobile(window.innerWidth < 640)
-        checkMobile()
-        window.addEventListener('resize', checkMobile)
-        return () => window.removeEventListener('resize', checkMobile)
-    }, [])
-
-    useEffect(() => {
-        const saved = localStorage.getItem('devlovers_highscore')
-        if (saved) setHighScore(parseInt(saved, 10))
-    }, [])
-
-    const [playerY, setPlayerY] = useState(0)
-    const [obstacle, setObstacle] = useState<Obstacle>(() => getRandomObstacle(0, GAME_WIDTH_DESKTOP))
-    const [gameSpeed, setGameSpeed] = useState(3.5)
-
-    const isJumpingRef = useRef(false)
-    const jumpStartTime = useRef(0)
-    const lastTimeRef = useRef(0)
-    const requestRef = useRef<number | null>(null)
-    const pillRef = useRef<HTMLDivElement>(null)
-    const hasPassedRef = useRef(false)
-    const prevLevelRef = useRef('level1')
-
-    const exitGame = useCallback(() => {
-        setMode('idle')
-        setGameOver(false)
-        setScore(0)
-        setPlayerY(0)
-        setObstacle(getRandomObstacle(0, gameWidth))
-        setGameSpeed(3.5)
-        isJumpingRef.current = false
-        hasPassedRef.current = false
-        prevLevelRef.current = 'level1'
-        if (requestRef.current !== null) cancelAnimationFrame(requestRef.current)
-    }, [gameWidth])
-
-    const handleRetry = useCallback(() => {
-        setGameOver(false)
-        setScore(0)
-        setPlayerY(0)
-        setObstacle(getRandomObstacle(0, gameWidth))
-        setGameSpeed(3.5)
-        isJumpingRef.current = false
-        hasPassedRef.current = false
-        lastTimeRef.current = 0
-        prevLevelRef.current = 'level1'
-    }, [gameWidth])
-
-    const handleGameOver = useCallback((finalScore: number) => {
-        setGameOver(true)
-        if (finalScore > highScore) {
-            setHighScore(finalScore)
-            localStorage.setItem('devlovers_highscore', finalScore.toString())
+  const t = useTranslations('about.arcade');
+  const [mode, setMode] = useState<'idle' | 'preview' | 'playing'>('idle');
+  const [gameOver, setGameOver] = useState(false);
+  const [score, setScore] = useState(0);
+  const [levelUpFlash, setLevelUpFlash] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  const gameWidth = isMobile ? GAME_WIDTH_MOBILE : GAME_WIDTH_DESKTOP;
+  const idleWidth = isMobile ? IDLE_WIDTH_MOBILE : IDLE_WIDTH_DESKTOP;
+  const playerX = isMobile ? PLAYER_X_MOBILE : PLAYER_X_DESKTOP;
+  const groundY = isMobile ? GROUND_Y_MOBILE : GROUND_Y_DESKTOP;
+  const playerSize = isMobile ? PLAYER_SIZE_MOBILE : PLAYER_SIZE_DESKTOP;
+  const jumpHeight = isMobile ? JUMP_HEIGHT_MOBILE : JUMP_HEIGHT_DESKTOP;
+  const obstacleEndX = -60;
+
+  const [highScore, setHighScore] = useState(0);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('devlovers_highscore');
+    if (saved) setHighScore(parseInt(saved, 10));
+  }, []);
+
+  const [playerY, setPlayerY] = useState(0);
+  const [obstacle, setObstacle] = useState<Obstacle>(() =>
+    getRandomObstacle(0, GAME_WIDTH_DESKTOP)
+  );
+  const [gameSpeed, setGameSpeed] = useState(3.5);
+
+  const isJumpingRef = useRef(false);
+  const jumpStartTime = useRef(0);
+  const lastTimeRef = useRef(0);
+  const requestRef = useRef<number | null>(null);
+  const pillRef = useRef<HTMLDivElement>(null);
+  const hasPassedRef = useRef(false);
+  const prevLevelRef = useRef('level1');
+
+  const exitGame = useCallback(() => {
+    setMode('idle');
+    setGameOver(false);
+    setScore(0);
+    setPlayerY(0);
+    setObstacle(getRandomObstacle(0, gameWidth));
+    setGameSpeed(3.5);
+    isJumpingRef.current = false;
+    hasPassedRef.current = false;
+    prevLevelRef.current = 'level1';
+    if (requestRef.current !== null) cancelAnimationFrame(requestRef.current);
+  }, [gameWidth]);
+
+  const handleRetry = useCallback(() => {
+    setGameOver(false);
+    setScore(0);
+    setPlayerY(0);
+    setObstacle(getRandomObstacle(0, gameWidth));
+    setGameSpeed(3.5);
+    isJumpingRef.current = false;
+    hasPassedRef.current = false;
+    lastTimeRef.current = 0;
+    prevLevelRef.current = 'level1';
+  }, [gameWidth]);
+
+  const handleGameOver = useCallback(
+    (finalScore: number) => {
+      setGameOver(true);
+      if (finalScore > highScore) {
+        setHighScore(finalScore);
+        localStorage.setItem('devlovers_highscore', finalScore.toString());
+      }
+    },
+    [highScore]
+  );
+
+  const jump = useCallback(() => {
+    if (!isJumpingRef.current && mode === 'playing' && !gameOver) {
+      isJumpingRef.current = true;
+      jumpStartTime.current = performance.now();
+    }
+  }, [mode, gameOver]);
+
+  useEffect(() => {
+    const currentLevelKey = getCurrentLevelKey(score);
+    if (currentLevelKey !== prevLevelRef.current && score > 0) {
+      prevLevelRef.current = currentLevelKey;
+      setLevelUpFlash(true);
+      setTimeout(() => setLevelUpFlash(false), 500);
+    }
+  }, [score]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (pillRef.current && !pillRef.current.contains(e.target as Node)) {
+        exitGame();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [exitGame]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (mode !== 'playing') return;
+      if (e.code === 'Space' || e.code === 'ArrowUp') {
+        e.preventDefault();
+        if (gameOver) {
+          handleRetry();
+        } else {
+          jump();
         }
-    }, [highScore])
+      }
+      if (e.code === 'Escape') exitGame();
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [mode, gameOver, jump, handleRetry, exitGame]);
+
+  useEffect(() => {
+    if (mode !== 'playing' || gameOver) {
+      if (requestRef.current !== null) cancelAnimationFrame(requestRef.current);
+      return;
+    }
 
-    const jump = useCallback(() => {
-        if (!isJumpingRef.current && mode === 'playing' && !gameOver) {
-            isJumpingRef.current = true
-            jumpStartTime.current = performance.now()
-        }
-    }, [mode, gameOver])
-
-    useEffect(() => {
-        const currentLevelKey = getCurrentLevelKey(score)
-        if (currentLevelKey !== prevLevelRef.current && score > 0) {
-            prevLevelRef.current = currentLevelKey
-            setLevelUpFlash(true)
-            setTimeout(() => setLevelUpFlash(false), 500)
-        }
-    }, [score])
+    const gameLoop = (currentTime: number) => {
+      if (lastTimeRef.current === 0) {
+        lastTimeRef.current = currentTime;
+      }
 
-    useEffect(() => {
-        const handleClickOutside = (e: MouseEvent) => {
-            if (pillRef.current && !pillRef.current.contains(e.target as Node)) {
-                exitGame()
-            }
-        }
-        document.addEventListener("mousedown", handleClickOutside)
-        return () => document.removeEventListener("mousedown", handleClickOutside)
-    }, [exitGame])
-
-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (mode !== 'playing') return
-            if (e.code === "Space" || e.code === "ArrowUp") {
-                e.preventDefault()
-                if (gameOver) {
-                    handleRetry()
-                } else {
-                    jump()
-                }
-            }
-            if (e.code === "Escape") exitGame()
+      const deltaTime = (currentTime - lastTimeRef.current) / 1000;
+      lastTimeRef.current = currentTime;
+
+      let newPlayerY = 0;
+      if (isJumpingRef.current) {
+        const jumpElapsed = currentTime - jumpStartTime.current;
+        const jumpProgress = jumpElapsed / JUMP_DURATION;
+
+        if (jumpProgress >= 1) {
+          isJumpingRef.current = false;
+          newPlayerY = 0;
+        } else {
+          newPlayerY = jumpHeight * Math.sin(jumpProgress * Math.PI);
         }
-        window.addEventListener("keydown", handleKeyDown)
-        return () => window.removeEventListener("keydown", handleKeyDown)
-    }, [mode, gameOver, jump, handleRetry, exitGame])
-
-    useEffect(() => {
-        if (mode !== 'playing' || gameOver) {
-            if (requestRef.current !== null) cancelAnimationFrame(requestRef.current)
-            return
+      }
+      setPlayerY(newPlayerY);
+
+      setObstacle(prevObstacle => {
+        const effectiveSpeed = gameSpeed * prevObstacle.speedMultiplier;
+        const newX = prevObstacle.x - effectiveSpeed * deltaTime * 100;
+        const obstacleRight = newX + prevObstacle.size;
+
+        if (!hasPassedRef.current && obstacleRight < playerX) {
+          hasPassedRef.current = true;
+          setScore(s => {
+            const newScore = s + 1;
+            const newBaseSpeed = getBaseSpeed(newScore);
+            setGameSpeed(newBaseSpeed);
+            return newScore;
+          });
         }
 
-        const gameLoop = (currentTime: number) => {
-            if (lastTimeRef.current === 0) {
-                lastTimeRef.current = currentTime
-            }
-
-            const deltaTime = (currentTime - lastTimeRef.current) / 1000
-            lastTimeRef.current = currentTime
-
-            let newPlayerY = 0
-            if (isJumpingRef.current) {
-                const jumpElapsed = currentTime - jumpStartTime.current
-                const jumpProgress = jumpElapsed / JUMP_DURATION
-
-                if (jumpProgress >= 1) {
-                    isJumpingRef.current = false
-                    newPlayerY = 0
-                } else {
-                    newPlayerY = jumpHeight * Math.sin(jumpProgress * Math.PI)
-                }
-            }
-            setPlayerY(newPlayerY)
-
-            setObstacle(prevObstacle => {
-                const effectiveSpeed = gameSpeed * prevObstacle.speedMultiplier
-                let newX = prevObstacle.x - effectiveSpeed * deltaTime * 100
-                const obstacleRight = newX + prevObstacle.size
-
-                if (!hasPassedRef.current && obstacleRight < playerX) {
-                    hasPassedRef.current = true
-                    setScore(s => {
-                        const newScore = s + 1
-                        const newBaseSpeed = getBaseSpeed(newScore)
-                        setGameSpeed(newBaseSpeed)
-                        return newScore
-                    })
-                }
-
-                if (newX < obstacleEndX) {
-                    hasPassedRef.current = false
-                    return getRandomObstacle(score, gameWidth)
-                }
-
-                return { ...prevObstacle, x: newX }
-            })
-
-            setObstacle(currentObstacle => {
-                const pLeft = playerX + 8
-                const pRight = playerX + playerSize - 8
-                const playerBottom = groundY + newPlayerY
-                const playerTop = playerBottom + playerSize - 8
-
-                const oLeft = currentObstacle.x + 6
-                const oRight = currentObstacle.x + currentObstacle.size - 6
-                const obstacleBottom = groundY + currentObstacle.heightOffset
-                const obstacleTop = obstacleBottom + currentObstacle.size - 4
-
-                const isColliding =
-                    pRight > oLeft &&
-                    pLeft < oRight &&
-                    playerBottom < obstacleTop &&
-                    playerTop > obstacleBottom
-
-                if (isColliding) {
-                    setScore(s => {
-                        handleGameOver(s)
-                        return s
-                    })
-                }
-
-                return currentObstacle
-            })
-
-            requestRef.current = requestAnimationFrame(gameLoop)
+        if (newX < obstacleEndX) {
+          hasPassedRef.current = false;
+          return getRandomObstacle(score, gameWidth);
         }
 
-        lastTimeRef.current = 0
-        requestRef.current = requestAnimationFrame(gameLoop)
-
-        return () => {
-            if (requestRef.current !== null) cancelAnimationFrame(requestRef.current)
+        return { ...prevObstacle, x: newX };
+      });
+
+      setObstacle(currentObstacle => {
+        const pLeft = playerX + 8;
+        const pRight = playerX + playerSize - 8;
+        const playerBottom = groundY + newPlayerY;
+        const playerTop = playerBottom + playerSize - 8;
+
+        const oLeft = currentObstacle.x + 6;
+        const oRight = currentObstacle.x + currentObstacle.size - 6;
+        const obstacleBottom = groundY + currentObstacle.heightOffset;
+        const obstacleTop = obstacleBottom + currentObstacle.size - 4;
+
+        const isColliding =
+          pRight > oLeft &&
+          pLeft < oRight &&
+          playerBottom < obstacleTop &&
+          playerTop > obstacleBottom;
+
+        if (isColliding) {
+          setScore(s => {
+            handleGameOver(s);
+            return s;
+          });
         }
-    }, [mode, gameOver, gameSpeed, handleGameOver, score, playerX, obstacleEndX, gameWidth, groundY, playerSize, jumpHeight])
-
-    const renderObstacle = (obs: Obstacle) => {
-        const baseClasses = "transition-colors"
-
-        switch (obs.type) {
-            case 'flying':
-                return (
-                    <div className="relative">
-                        <Bug
-                            className={`${baseClasses} text-purple-500 dark:text-purple-400`}
-                            style={{ width: obs.size, height: obs.size }}
-                        />
-                        <div className="absolute -inset-1 bg-purple-500/20 blur-md rounded-full" />
-                    </div>
-                )
-            case 'fast':
-                return (
-                    <div className="relative">
-                        <Rabbit
-                            className={`${baseClasses} text-orange-500 dark:text-orange-400`}
-                            style={{ width: obs.size, height: obs.size }}
-                        />
-                    </div>
-                )
-            case 'tall':
-                return (
-                    <div className="relative">
-                        <Skull
-                            className={`${baseClasses} text-red-600 dark:text-red-500`}
-                            style={{ width: obs.size, height: obs.size }}
-                        />
-                        <div className="absolute -inset-1 bg-red-500/20 blur-md rounded-full" />
-                    </div>
-                )
-            default:
-                return (
-                    <Bug
-                        className={`${baseClasses} text-neutral-600 dark:text-neutral-400 opacity-90`}
-                        style={{ width: obs.size, height: obs.size }}
-                    />
-                )
-        }
-    }
 
-    return (
-        <motion.div
-            ref={pillRef}
-            layout
-            transition={{ type: "spring", stiffness: 180, damping: 24 }}
-            animate={{
-                width: mode === 'idle' ? idleWidth : gameWidth,
-                height: mode === 'idle' ? 56 : (isMobile ? 180 : 240),
-                borderRadius: mode === 'idle' ? "9999px" : (isMobile ? "20px" : "24px")
-            }}
-            onHoverStart={() => mode === 'idle' && setMode('preview')}
-            onHoverEnd={() => mode === 'preview' && setMode('idle')}
-            className="relative mb-8 md:mb-14 select-none border border-neutral-200/50 dark:border-white/10 bg-white/40 dark:bg-white/5 backdrop-blur-md shadow-xl z-50 mx-auto group overflow-hidden"
-            onClick={() => mode !== 'playing' && setMode('playing')}
-        >
-            <AnimatePresence>
-                {levelUpFlash && (
-                    <motion.div
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        transition={{ duration: 0.2 }}
-                        className="absolute inset-0 z-50 bg-[#ff005b]/20 pointer-events-none"
+        return currentObstacle;
+      });
+
+      requestRef.current = requestAnimationFrame(gameLoop);
+    };
+
+    lastTimeRef.current = 0;
+    requestRef.current = requestAnimationFrame(gameLoop);
+
+    return () => {
+      if (requestRef.current !== null) cancelAnimationFrame(requestRef.current);
+    };
+  }, [
+    mode,
+    gameOver,
+    gameSpeed,
+    handleGameOver,
+    score,
+    playerX,
+    obstacleEndX,
+    gameWidth,
+    groundY,
+    playerSize,
+    jumpHeight,
+  ]);
+
+  const renderObstacle = (obs: Obstacle) => {
+    const baseClasses = 'transition-colors';
+
+    switch (obs.type) {
+      case 'flying':
+        return (
+          <div className="relative">
+            <Bug
+              className={`${baseClasses} text-purple-500 dark:text-purple-400`}
+              style={{ width: obs.size, height: obs.size }}
+            />
+            <div className="absolute -inset-1 rounded-full bg-purple-500/20 blur-md" />
+          </div>
+        );
+      case 'fast':
+        return (
+          <div className="relative">
+            <Rabbit
+              className={`${baseClasses} text-orange-500 dark:text-orange-400`}
+              style={{ width: obs.size, height: obs.size }}
+            />
+          </div>
+        );
+      case 'tall':
+        return (
+          <div className="relative">
+            <Skull
+              className={`${baseClasses} text-red-600 dark:text-red-500`}
+              style={{ width: obs.size, height: obs.size }}
+            />
+            <div className="absolute -inset-1 rounded-full bg-red-500/20 blur-md" />
+          </div>
+        );
+      default:
+        return (
+          <Bug
+            className={`${baseClasses} text-neutral-600 opacity-90 dark:text-neutral-400`}
+            style={{ width: obs.size, height: obs.size }}
+          />
+        );
+    }
+  };
+
+  return (
+    <motion.div
+      ref={pillRef}
+      layout
+      transition={{ type: 'spring', stiffness: 180, damping: 24 }}
+      animate={{
+        width: mode === 'idle' ? idleWidth : gameWidth,
+        height: mode === 'idle' ? 56 : isMobile ? 180 : 240,
+        borderRadius: mode === 'idle' ? '9999px' : isMobile ? '20px' : '24px',
+      }}
+      onHoverStart={() => mode === 'idle' && setMode('preview')}
+      onHoverEnd={() => mode === 'preview' && setMode('idle')}
+      className="group relative z-50 mx-auto mb-8 overflow-hidden border border-neutral-200/50 bg-white/40 shadow-xl backdrop-blur-md select-none md:mb-14 dark:border-white/10 dark:bg-white/5"
+      onClick={() => mode !== 'playing' && setMode('playing')}
+    >
+      <AnimatePresence>
+        {levelUpFlash && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="pointer-events-none absolute inset-0 z-50 bg-[#ff005b]/20"
+          />
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence mode="wait">
+        {mode === 'idle' ? (
+          <motion.div
+            key="idle"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="flex h-full w-full items-center justify-between px-4 md:px-6"
+          >
+            <div className="flex items-center gap-2 md:gap-3">
+              <Heart
+                className="h-4 w-4 fill-[#ff005b] text-[#ff005b] md:h-5 md:w-5"
+                strokeWidth={0}
+              />
+              <span className="text-[9px] font-bold tracking-[0.15em] text-neutral-600 uppercase md:text-[10px] md:tracking-[0.2em] dark:text-neutral-300">
+                {t('title')}
+              </span>
+            </div>
+            <div className="flex items-center gap-2 opacity-50">
+              <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-green-500" />
+              <span className="font-mono text-[8px] text-neutral-400 md:text-[9px]">
+                {t('ready')}
+              </span>
+            </div>
+          </motion.div>
+        ) : (
+          <motion.div
+            key="active"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0, transition: { duration: 0.15 } }}
+            className="flex h-full w-full flex-col"
+          >
+            <div className="flex items-center justify-between border-b border-neutral-200/30 bg-white/30 px-3 py-2 md:px-6 md:py-3 dark:border-white/5 dark:bg-white/5">
+              <div className="hidden items-center gap-3 md:flex">
+                <div
+                  className={`h-2 w-2 rounded-full ${mode === 'playing' && !gameOver ? 'bg-green-500 shadow-[0_0_8px_#22c55e]' : 'bg-red-500'}`}
+                />
+                <div className="flex flex-col">
+                  <span className="font-mono text-[8px] font-bold tracking-wider text-neutral-400 uppercase">
+                    {t(getCurrentLevelKey(score))}
+                  </span>
+                  <span className="text-[10px] leading-none font-bold text-neutral-700 dark:text-white">
+                    {gameOver ? t('crashed') : t('running')}
+                  </span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2 md:hidden">
+                <div
+                  className={`h-2 w-2 rounded-full ${mode === 'playing' && !gameOver ? 'bg-green-500' : 'bg-red-500'}`}
+                />
+                <span className="font-mono text-[8px] font-bold text-neutral-400 uppercase">
+                  {t(getCurrentLevelKey(score))}
+                </span>
+              </div>
+
+              <div className="flex items-center gap-3 md:absolute md:left-1/2 md:-translate-x-1/2 md:gap-6">
+                <div className="flex flex-col items-center">
+                  <span className="text-[7px] font-bold tracking-widest text-neutral-400 uppercase md:text-[8px]">
+                    {t('high')}
+                  </span>
+                  <span
+                    suppressHydrationWarning
+                    className="font-mono text-[10px] font-bold text-neutral-500 md:text-xs"
+                  >
+                    {highScore.toString().padStart(3, '0')}
+                  </span>
+                </div>
+                <div className="h-3 w-[1px] bg-neutral-300 md:h-4 dark:bg-white/20" />
+                <div className="flex flex-col items-center">
+                  <span className="text-[7px] font-bold tracking-widest text-[#ff005b] uppercase md:text-[8px]">
+                    {t('score')}
+                  </span>
+                  <span className="font-mono text-sm leading-none font-black text-neutral-800 md:text-lg dark:text-white">
+                    {score.toString().padStart(3, '0')}
+                  </span>
+                </div>
+              </div>
+
+              <button
+                onClick={e => {
+                  e.stopPropagation();
+                  exitGame();
+                }}
+                className="-mr-1 p-1.5 transition-colors hover:text-[#ff005b] md:-mr-2 md:p-2"
+              >
+                <X size={14} className="text-neutral-400 md:h-4 md:w-4" />
+              </button>
+            </div>
+
+            <div
+              className="relative w-full flex-1 cursor-pointer overflow-hidden"
+              onClick={mode === 'playing' && !gameOver ? jump : undefined}
+            >
+              <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808015_1px,transparent_1px),linear-gradient(to_bottom,#80808015_1px,transparent_1px)] bg-[size:40px_40px]" />
+
+              <div
+                className="absolute z-10 transition-transform"
+                style={{
+                  left: playerX,
+                  bottom: groundY + playerY,
+                  transform:
+                    playerY > 10
+                      ? 'rotate(-15deg) scale(0.95)'
+                      : 'rotate(0deg) scale(1)',
+                  transition: 'transform 0.1s ease-out',
+                }}
+              >
+                <div className="relative">
+                  <div className="absolute -inset-4 rounded-full bg-[#ff005b]/20 opacity-50 blur-xl" />
+                  <Heart
+                    className="relative fill-[#ff005b] text-[#ff005b] drop-shadow-sm"
+                    strokeWidth={0}
+                    style={{ width: playerSize, height: playerSize }}
+                  />
+                </div>
+              </div>
+
+              {mode === 'playing' && (
+                <div
+                  className="absolute z-10"
+                  style={{
+                    left: obstacle.x,
+                    bottom: groundY + obstacle.heightOffset,
+                  }}
+                >
+                  {renderObstacle(obstacle)}
+                </div>
+              )}
+
+              {mode === 'preview' && (
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center"
+                >
+                  <div className="flex items-center gap-2 rounded-lg border border-neutral-200 bg-white/90 px-5 py-2 shadow-xl dark:border-white/10 dark:bg-neutral-800/90">
+                    <Play
+                      size={10}
+                      fill="currentColor"
+                      className="text-[#ff005b]"
                     />
-                )}
-            </AnimatePresence>
-
-            <AnimatePresence mode="wait">
-                {mode === 'idle' ? (
-                    <motion.div
-                        key="idle"
-                        initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
-                        className="flex items-center justify-between w-full h-full px-4 md:px-6"
-                    >
-                        <div className="flex items-center gap-2 md:gap-3">
-                            <Heart className="h-4 w-4 md:h-5 md:w-5 fill-[#ff005b] text-[#ff005b]" strokeWidth={0} />
-                            <span className="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.15em] md:tracking-[0.2em] text-neutral-600 dark:text-neutral-300">
-                                {t("title")}
-                            </span>
-                        </div>
-                        <div className="flex items-center gap-2 opacity-50">
-                            <span className="h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse" />
-                            <span className="text-[8px] md:text-[9px] font-mono text-neutral-400">{t("ready")}</span>
-                        </div>
-                    </motion.div>
-                ) : (
-                    <motion.div
-                        key="active"
-                        initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0, transition: { duration: 0.15 } }}
-                        className="flex flex-col h-full w-full"
+                    <span className="text-[10px] font-bold tracking-widest text-neutral-800 uppercase dark:text-white">
+                      {t('clickToStart')}
+                    </span>
+                  </div>
+                </motion.div>
+              )}
+
+              {gameOver && (
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  className="absolute inset-0 z-30 flex flex-col items-center justify-center bg-white/60 backdrop-blur-sm dark:bg-black/60"
+                >
+                  <div className="mb-4 flex items-center gap-2 text-[#ff005b]">
+                    <Zap size={18} fill="currentColor" />
+                    <span className="text-sm font-black tracking-widest uppercase">
+                      {t('systemFailure')}
+                    </span>
+                  </div>
+                  <div className="flex gap-3">
+                    <button
+                      onClick={e => {
+                        e.stopPropagation();
+                        handleRetry();
+                      }}
+                      className="flex items-center gap-2 rounded-lg bg-[#ff005b] px-6 py-2.5 text-[10px] font-bold tracking-widest text-white uppercase shadow-lg transition-all hover:brightness-110 active:scale-95"
                     >
-                        <div className="flex justify-between items-center px-3 md:px-6 py-2 md:py-3 border-b border-neutral-200/30 dark:border-white/5 bg-white/30 dark:bg-white/5">
-                            <div className="hidden md:flex items-center gap-3">
-                                <div className={`h-2 w-2 rounded-full ${mode === 'playing' && !gameOver ? 'bg-green-500 shadow-[0_0_8px_#22c55e]' : 'bg-red-500'}`} />
-                                <div className="flex flex-col">
-                                    <span className="text-[8px] font-mono font-bold text-neutral-400 uppercase tracking-wider">
-                                        {t(getCurrentLevelKey(score))}
-                                    </span>
-                                    <span className="text-[10px] font-bold text-neutral-700 dark:text-white leading-none">
-                                        {gameOver ? t("crashed") : t("running")}
-                                    </span>
-                                </div>
-                            </div>
-
-                            <div className="flex md:hidden items-center gap-2">
-                                <div className={`h-2 w-2 rounded-full ${mode === 'playing' && !gameOver ? 'bg-green-500' : 'bg-red-500'}`} />
-                                <span className="text-[8px] font-mono font-bold text-neutral-400 uppercase">
-                                    {t(getCurrentLevelKey(score))}
-                                </span>
-                            </div>
-
-                            <div className="flex items-center gap-3 md:gap-6 md:absolute md:left-1/2 md:-translate-x-1/2">
-                                <div className="flex flex-col items-center">
-                                    <span className="text-[7px] md:text-[8px] font-bold text-neutral-400 uppercase tracking-widest">{t("high")}</span>
-                                    <span suppressHydrationWarning className="font-mono text-[10px] md:text-xs font-bold text-neutral-500">
-                                        {highScore.toString().padStart(3, '0')}
-                                    </span>
-                                </div>
-                                <div className="w-[1px] h-3 md:h-4 bg-neutral-300 dark:bg-white/20" />
-                                <div className="flex flex-col items-center">
-                                    <span className="text-[7px] md:text-[8px] font-bold text-[#ff005b] uppercase tracking-widest">{t("score")}</span>
-                                    <span className="font-mono text-sm md:text-lg font-black text-neutral-800 dark:text-white leading-none">
-                                        {score.toString().padStart(3, '0')}
-                                    </span>
-                                </div>
-                            </div>
-
-                            <button onClick={(e) => {e.stopPropagation(); exitGame();}} className="p-1.5 md:p-2 -mr-1 md:-mr-2 hover:text-[#ff005b] transition-colors">
-                                <X size={14} className="md:w-4 md:h-4 text-neutral-400" />
-                            </button>
-                        </div>
-
-                        <div
-                            className="relative flex-1 w-full overflow-hidden cursor-pointer"
-                            onClick={mode === 'playing' && !gameOver ? jump : undefined}
-                        >
-                            <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808015_1px,transparent_1px),linear-gradient(to_bottom,#80808015_1px,transparent_1px)] bg-[size:40px_40px]" />
-
-                            <div
-                                className="absolute z-10 transition-transform"
-                                style={{
-                                    left: playerX,
-                                    bottom: groundY + playerY,
-                                    transform: playerY > 10 ? 'rotate(-15deg) scale(0.95)' : 'rotate(0deg) scale(1)',
-                                    transition: 'transform 0.1s ease-out'
-                                }}
-                            >
-                                <div className="relative">
-                                    <div className="absolute -inset-4 bg-[#ff005b]/20 blur-xl rounded-full opacity-50" />
-                                    <Heart
-                                        className="relative fill-[#ff005b] text-[#ff005b] drop-shadow-sm"
-                                        strokeWidth={0}
-                                        style={{ width: playerSize, height: playerSize }}
-                                    />
-                                </div>
-                            </div>
-
-                            {mode === 'playing' && (
-                                <div
-                                    className="absolute z-10"
-                                    style={{
-                                        left: obstacle.x,
-                                        bottom: groundY + obstacle.heightOffset
-                                    }}
-                                >
-                                    {renderObstacle(obstacle)}
-                                </div>
-                            )}
-
-                            {mode === 'preview' && (
-                                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="absolute inset-0 flex items-center justify-center z-20 pointer-events-none">
-                                    <div className="bg-white/90 dark:bg-neutral-800/90 border border-neutral-200 dark:border-white/10 px-5 py-2 rounded-lg shadow-xl flex items-center gap-2">
-                                        <Play size={10} fill="currentColor" className="text-[#ff005b]" />
-                                        <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-800 dark:text-white">{t("clickToStart")}</span>
-                                    </div>
-                                </motion.div>
-                            )}
-
-                            {gameOver && (
-                                <motion.div
-                                    initial={{ opacity: 0 }} animate={{ opacity: 1 }}
-                                    className="absolute inset-0 z-30 flex flex-col items-center justify-center bg-white/60 dark:bg-black/60 backdrop-blur-sm"
-                                >
-                                    <div className="flex items-center gap-2 mb-4 text-[#ff005b]">
-                                        <Zap size={18} fill="currentColor" />
-                                        <span className="text-sm font-black uppercase tracking-widest">{t("systemFailure")}</span>
-                                    </div>
-                                    <div className="flex gap-3">
-                                        <button
-                                            onClick={(e) => {e.stopPropagation(); handleRetry();}}
-                                            className="px-6 py-2.5 bg-[#ff005b] text-white text-[10px] font-bold uppercase tracking-widest rounded-lg shadow-lg hover:brightness-110 active:scale-95 transition-all flex items-center gap-2"
-                                        >
-                                            <RotateCcw size={12} /> {t("retry")}
-                                        </button>
-                                    </div>
-                                </motion.div>
-                            )}
-
-                            <div className="absolute w-full h-[1px] bg-neutral-300 dark:bg-white/10" style={{ bottom: groundY }} />
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-        </motion.div>
-    )
+                      <RotateCcw size={12} /> {t('retry')}
+                    </button>
+                  </div>
+                </motion.div>
+              )}
+
+              <div
+                className="absolute h-[1px] w-full bg-neutral-300 dark:bg-white/10"
+                style={{ bottom: groundY }}
+              />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
 }
diff --git a/frontend/components/about/PricingSection.tsx b/frontend/components/about/PricingSection.tsx
index 1e6382ca..d134bd66 100644
--- a/frontend/components/about/PricingSection.tsx
+++ b/frontend/components/about/PricingSection.tsx
@@ -1,169 +1,216 @@
-"use client"
-import { useState } from "react"
-import { motion } from "framer-motion"
-import { Check, Heart, X, Sparkles, Server, ArrowRight } from "lucide-react"
-import Link from "next/link"
-import { useTranslations } from "next-intl"
-import type { Sponsor } from "@/lib/about/github-sponsors"
-import { SponsorsWall } from "./SponsorsWall"
-import { GradientBadge } from "@/components/ui/gradient-badge"
-import { SectionHeading } from "@/components/ui/section-heading"
-import { ParticleCanvas } from "@/components/ui/particle-canvas"
+'use client';
+import { motion } from 'framer-motion';
+import { ArrowRight,Check, Heart, Server, Sparkles, X } from 'lucide-react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+import { GradientBadge } from '@/components/ui/gradient-badge';
+import { ParticleCanvas } from '@/components/ui/particle-canvas';
+import { SectionHeading } from '@/components/ui/section-heading';
+import type { Sponsor } from '@/lib/about/github-sponsors';
+
+import { SponsorsWall } from './SponsorsWall';
 
 interface PricingSectionProps {
-  sponsors?: Sponsor[]
+  sponsors?: Sponsor[];
 }
 
 export function PricingSection({ sponsors = [] }: PricingSectionProps) {
-    const t = useTranslations("about.pricing")
-    const [activeShape, setActiveShape] = useState<"brackets" | "heart" | null>(null)
-
-    const juniorFeatures = [
-        t("junior.features.unlimited"),
-        t("junior.features.fullAccess"),
-        t("junior.features.noCard"),
-        t("junior.features.noGuilt"),
-    ]
-
-    const heroFeatures = [
-        t("hero.features.servers"),
-        t("hero.features.coffee"),
-        t("hero.features.badge"),
-        t("hero.features.feeling"),
-    ]
-
-    return (
-        <section className="w-full py-20 lg:py-28 relative overflow-hidden bg-gray-50 dark:bg-transparent" aria-labelledby="pricing-heading">
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#1e5eff]/5 dark:bg-[#ff2d55]/5 blur-[100px] rounded-full pointer-events-none" aria-hidden="true" />
-
-            <div className="absolute inset-0 pointer-events-none z-0">
-                <ParticleCanvas activeShape={activeShape} className="w-full h-full" />
+  const t = useTranslations('about.pricing');
+  const [activeShape, setActiveShape] = useState<'brackets' | 'heart' | null>(
+    null
+  );
+
+  const juniorFeatures = [
+    t('junior.features.unlimited'),
+    t('junior.features.fullAccess'),
+    t('junior.features.noCard'),
+    t('junior.features.noGuilt'),
+  ];
+
+  const heroFeatures = [
+    t('hero.features.servers'),
+    t('hero.features.coffee'),
+    t('hero.features.badge'),
+    t('hero.features.feeling'),
+  ];
+
+  return (
+    <section
+      className="relative w-full overflow-hidden bg-gray-50 py-20 lg:py-28 dark:bg-transparent"
+      aria-labelledby="pricing-heading"
+    >
+      <div
+        className="pointer-events-none absolute top-1/2 left-1/2 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#1e5eff]/5 blur-[100px] dark:bg-[#ff2d55]/5"
+        aria-hidden="true"
+      />
+
+      <div className="pointer-events-none absolute inset-0 z-0">
+        <ParticleCanvas activeShape={activeShape} className="h-full w-full" />
+      </div>
+
+      <div className="container-main relative z-10">
+        <div className="mb-16 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            whileInView={{ opacity: 1, y: 0 }}
+          >
+            <h2 id="pricing-heading" className="sr-only">
+              {t('heading')}
+            </h2>
+            <GradientBadge icon={Sparkles} text={t('badge')} className="mb-4" />
+          </motion.div>
+
+          <SectionHeading
+            title={t('title')}
+            highlight={t('titleHighlight')}
+            subtitle={t('subtitle')}
+          />
+        </div>
+
+        <div className="mx-auto mb-6 grid max-w-4xl grid-cols-1 gap-6 md:grid-cols-2 lg:gap-12">
+          <motion.div
+            whileHover={{ y: -5 }}
+            onMouseEnter={() => setActiveShape('brackets')}
+            onMouseLeave={() => setActiveShape(null)}
+            onFocus={() => setActiveShape('brackets')}
+            onBlur={() => setActiveShape(null)}
+            className="relative z-10 flex flex-col rounded-3xl border border-gray-200 bg-white/10 p-8 shadow-sm backdrop-blur-md lg:p-10 dark:border-neutral-800 dark:bg-neutral-900/10"
+          >
+            <div className="mb-6">
+              <h3 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
+                {t('junior.title')}
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-neutral-400">
+                {t('junior.description')}
+              </p>
+            </div>
+            <div className="mb-8">
+              <span className="text-4xl font-black text-gray-900 lg:text-5xl dark:text-white">
+                {t('junior.price')}
+              </span>
+              <span className="ml-2 font-mono text-sm text-gray-500 dark:text-neutral-500">
+                {t('junior.period')}
+              </span>
             </div>
 
-            <div className="container-main relative z-10">
-                <div className="text-center mb-16">
-                    <motion.div
-                        initial={{ opacity: 0, y: 10 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                    >
-                        <h2 id="pricing-heading" className="sr-only">{t("heading")}</h2>
-                        <GradientBadge icon={Sparkles} text={t("badge")} className="mb-4" />
-                    </motion.div>
-
-                    <SectionHeading
-                        title={t("title")}
-                        highlight={t("titleHighlight")}
-                        subtitle={t("subtitle")}
-                    />
+            <ul className="mb-8 flex-1 space-y-4">
+              {juniorFeatures.map(item => (
+                <li
+                  key={item}
+                  className="flex items-center gap-3 text-sm text-gray-700 dark:text-neutral-300"
+                >
+                  <div
+                    className="rounded-full bg-green-500/10 p-1 text-green-500"
+                    aria-hidden="true"
+                  >
+                    <Check size={12} />
+                  </div>
+                  {item}
+                </li>
+              ))}
+              <li className="flex items-center gap-3 text-sm text-gray-400 line-through decoration-gray-300 dark:text-neutral-500 dark:decoration-neutral-700">
+                <div
+                  className="rounded-full bg-gray-100 p-1 text-gray-400 dark:bg-neutral-800 dark:text-neutral-600"
+                  aria-hidden="true"
+                >
+                  <X size={12} />
                 </div>
+                {t('junior.noYacht')}
+              </li>
+            </ul>
+
+            <Link
+              href="/"
+              className="w-full rounded-xl border border-gray-200 bg-gray-50 py-4 text-center text-xs font-bold tracking-widest text-gray-900 uppercase transition-all hover:bg-gray-100 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
+            >
+              {t('junior.cta')}
+            </Link>
+          </motion.div>
+
+          <motion.div
+            whileHover={{ y: -5 }}
+            onMouseEnter={() => setActiveShape('heart')}
+            onMouseLeave={() => setActiveShape(null)}
+            onFocus={() => setActiveShape('heart')}
+            onBlur={() => setActiveShape(null)}
+            className="relative z-10 flex flex-col overflow-hidden rounded-3xl border border-[#1e5eff]/30 bg-gradient-to-b from-[#1e5eff]/5 to-white/10 p-8 backdrop-blur-md lg:p-10 dark:border-[#ff2d55]/30 dark:from-[#ff2d55]/10 dark:to-neutral-900/10"
+          >
+            <div className="absolute top-0 right-0 rounded-bl-xl bg-[#1e5eff] px-3 py-1 text-[10px] font-bold tracking-widest text-white uppercase dark:bg-[#ff2d55]">
+              {t('hero.badge')}
+            </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-12 max-w-4xl mx-auto mb-6">
-
-                    <motion.div
-                        whileHover={{ y: -5 }}
-                        onMouseEnter={() => setActiveShape("brackets")}
-                        onMouseLeave={() => setActiveShape(null)}
-                        onFocus={() => setActiveShape("brackets")}
-                        onBlur={() => setActiveShape(null)}
-                        className="flex flex-col p-8 lg:p-10 rounded-3xl border border-gray-200 dark:border-neutral-800 bg-white/10 dark:bg-neutral-900/10 backdrop-blur-md shadow-sm relative z-10"
-                    >
-                        <div className="mb-6">
-                            <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{t("junior.title")}</h3>
-                            <p className="text-sm text-gray-600 dark:text-neutral-400">{t("junior.description")}</p>
-                        </div>
-                        <div className="mb-8">
-                            <span className="text-4xl lg:text-5xl font-black text-gray-900 dark:text-white">{t("junior.price")}</span>
-                            <span className="text-gray-500 dark:text-neutral-500 font-mono text-sm ml-2">{t("junior.period")}</span>
-                        </div>
-
-                        <ul className="space-y-4 mb-8 flex-1">
-                            {juniorFeatures.map((item) => (
-                                <li key={item} className="flex items-center gap-3 text-sm text-gray-700 dark:text-neutral-300">
-                                    <div className="p-1 rounded-full bg-green-500/10 text-green-500" aria-hidden="true">
-                                        <Check size={12} />
-                                    </div>
-                                    {item}
-                                </li>
-                            ))}
-                             <li className="flex items-center gap-3 text-sm text-gray-400 dark:text-neutral-500 line-through decoration-gray-300 dark:decoration-neutral-700">
-                                    <div className="p-1 rounded-full bg-gray-100 dark:bg-neutral-800 text-gray-400 dark:text-neutral-600" aria-hidden="true">
-                                        <X size={12} />
-                                    </div>
-                                    {t("junior.noYacht")}
-                                </li>
-                        </ul>
-
-                        <Link href="/" className="w-full py-4 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 hover:bg-gray-100 dark:hover:bg-white/10 text-gray-900 dark:text-white font-bold text-center transition-all uppercase tracking-widest text-xs">
-                            {t("junior.cta")}
-                        </Link>
-                    </motion.div>
-
-                    <motion.div
-                        whileHover={{ y: -5 }}
-                        onMouseEnter={() => setActiveShape("heart")}
-                        onMouseLeave={() => setActiveShape(null)}
-                        onFocus={() => setActiveShape("heart")}
-                        onBlur={() => setActiveShape(null)}
-                        className="relative flex flex-col p-8 lg:p-10 rounded-3xl overflow-hidden backdrop-blur-md z-10
-                            border border-[#1e5eff]/30 dark:border-[#ff2d55]/30
-                            bg-gradient-to-b from-[#1e5eff]/5 to-white/10 dark:from-[#ff2d55]/10 dark:to-neutral-900/10"
-                    >
-                        <div className="absolute top-0 right-0 px-3 py-1 rounded-bl-xl uppercase tracking-widest text-[10px] font-bold text-white
-                            bg-[#1e5eff] dark:bg-[#ff2d55]"
-                        >
-                            {t("hero.badge")}
-                        </div>
-
-                        <div className="mb-6">
-                            <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
-                                {t("hero.title")}
-                                <Heart size={18} className="fill-[#1e5eff] text-[#1e5eff] dark:fill-[#ff2d55] dark:text-[#ff2d55]" aria-label="Supporter" />
-                            </h3>
-                            <p className="text-sm text-neutral-500 dark:text-neutral-400">{t("hero.description")}</p>
-                        </div>
-                        <div className="mb-8">
-                            <span className="text-4xl lg:text-5xl font-black text-[#1e5eff] dark:text-[#ff2d55]">{t("hero.price")}</span>
-                            <span className="text-neutral-500 font-mono text-sm ml-2">{t("hero.period")}</span>
-                        </div>
-
-                        <ul className="space-y-4 mb-8 flex-1">
-                            {heroFeatures.map((item) => (
-                                <li key={item} className="flex items-center gap-3 text-sm text-gray-900 dark:text-white font-medium">
-                                    <div className="p-1 rounded-full bg-[#1e5eff]/20 text-[#1e5eff] dark:bg-[#ff2d55]/20 dark:text-[#ff2d55]" aria-hidden="true">
-                                        <Sparkles size={12} />
-                                    </div>
-                                    {item}
-                                </li>
-                            ))}
-                            <li className="flex items-center gap-3 text-sm text-gray-600 dark:text-neutral-400 italic">
-                                    <div className="p-1 rounded-full bg-gray-200 dark:bg-neutral-800 text-gray-500 dark:text-neutral-500" aria-hidden="true">
-                                        <Server size={12} />
-                                    </div>
-                                    {t("hero.drizzle")}
-                                </li>
-                        </ul>
-
-                        <Link
-                            href="https://github.com/sponsors/DevLoversTeam"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="group w-full py-4 rounded-xl text-white font-bold flex items-center justify-center gap-2 transition-all uppercase tracking-widest text-xs
-                                bg-[#1e5eff] hover:bg-[#1e5eff]/90 shadow-[0_0_20px_rgba(30,94,255,0.3)] hover:shadow-[0_0_30px_rgba(30,94,255,0.5)]
-                                dark:bg-[#ff2d55] dark:hover:bg-[#ff2d55]/90 dark:shadow-[0_0_20px_rgba(255,45,85,0.3)] dark:hover:shadow-[0_0_30px_rgba(255,45,85,0.5)]"
-                        >
-                            {t("hero.cta")} <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" aria-hidden="true" />
-                        </Link>
-                    </motion.div>
+            <div className="mb-6">
+              <h3 className="mb-2 flex items-center gap-2 text-xl font-bold text-gray-900 dark:text-white">
+                {t('hero.title')}
+                <Heart
+                  size={18}
+                  className="fill-[#1e5eff] text-[#1e5eff] dark:fill-[#ff2d55] dark:text-[#ff2d55]"
+                  aria-label="Supporter"
+                />
+              </h3>
+              <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                {t('hero.description')}
+              </p>
+            </div>
+            <div className="mb-8">
+              <span className="text-4xl font-black text-[#1e5eff] lg:text-5xl dark:text-[#ff2d55]">
+                {t('hero.price')}
+              </span>
+              <span className="ml-2 font-mono text-sm text-neutral-500">
+                {t('hero.period')}
+              </span>
+            </div>
 
+            <ul className="mb-8 flex-1 space-y-4">
+              {heroFeatures.map(item => (
+                <li
+                  key={item}
+                  className="flex items-center gap-3 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                  <div
+                    className="rounded-full bg-[#1e5eff]/20 p-1 text-[#1e5eff] dark:bg-[#ff2d55]/20 dark:text-[#ff2d55]"
+                    aria-hidden="true"
+                  >
+                    <Sparkles size={12} />
+                  </div>
+                  {item}
+                </li>
+              ))}
+              <li className="flex items-center gap-3 text-sm text-gray-600 italic dark:text-neutral-400">
+                <div
+                  className="rounded-full bg-gray-200 p-1 text-gray-500 dark:bg-neutral-800 dark:text-neutral-500"
+                  aria-hidden="true"
+                >
+                  <Server size={12} />
                 </div>
-
-                <p className="text-center text-gray-400 dark:text-neutral-600 text-[10px] mb-16 font-mono max-w-lg mx-auto leading-relaxed">
-                    {t("disclaimer")}
-                </p>
-
-                <SponsorsWall sponsors={sponsors} />
-
-            </div>
-        </section>
-    )
-}
\ No newline at end of file
+                {t('hero.drizzle')}
+              </li>
+            </ul>
+
+            <Link
+              href="https://github.com/sponsors/DevLoversTeam"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group flex w-full items-center justify-center gap-2 rounded-xl bg-[#1e5eff] py-4 text-xs font-bold tracking-widest text-white uppercase shadow-[0_0_20px_rgba(30,94,255,0.3)] transition-all hover:bg-[#1e5eff]/90 hover:shadow-[0_0_30px_rgba(30,94,255,0.5)] dark:bg-[#ff2d55] dark:shadow-[0_0_20px_rgba(255,45,85,0.3)] dark:hover:bg-[#ff2d55]/90 dark:hover:shadow-[0_0_30px_rgba(255,45,85,0.5)]"
+            >
+              {t('hero.cta')}{' '}
+              <ArrowRight
+                size={14}
+                className="transition-transform group-hover:translate-x-1"
+                aria-hidden="true"
+              />
+            </Link>
+          </motion.div>
+        </div>
+
+        <p className="mx-auto mb-16 max-w-lg text-center font-mono text-[10px] leading-relaxed text-gray-400 dark:text-neutral-600">
+          {t('disclaimer')}
+        </p>
+
+        <SponsorsWall sponsors={sponsors} />
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/components/about/SponsorsWall.tsx b/frontend/components/about/SponsorsWall.tsx
index 8eb1cba7..5ea51bd9 100644
--- a/frontend/components/about/SponsorsWall.tsx
+++ b/frontend/components/about/SponsorsWall.tsx
@@ -1,113 +1,143 @@
-"use client"
+'use client';
 
-import { motion } from "framer-motion"
-import Image from "next/image"
-import Link from "next/link"
-import { Plus, Crown, Sparkles } from "lucide-react"
-import { useTranslations } from "next-intl"
-import { cn } from "@/lib/utils"
-import type { Sponsor } from "@/lib/about/github-sponsors"
-import { GradientBadge } from "@/components/ui/gradient-badge"
+import { motion } from 'framer-motion';
+import { Crown, Plus, Sparkles } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+
+import { GradientBadge } from '@/components/ui/gradient-badge';
+import type { Sponsor } from '@/lib/about/github-sponsors';
+import { cn } from '@/lib/utils';
 
 interface SponsorsWallProps {
-  sponsors?: Sponsor[]
+  sponsors?: Sponsor[];
 }
 
-const MAX_SPONSORS = 10
+const MAX_SPONSORS = 10;
 
 export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
-  const t = useTranslations("about.sponsors")
-  const displaySponsors = sponsors.slice(0, MAX_SPONSORS)
+  const t = useTranslations('about.sponsors');
+  const displaySponsors = sponsors.slice(0, MAX_SPONSORS);
 
   return (
-    <div className="w-full mt-16 flex flex-col items-center">
+    <div className="mt-16 flex w-full flex-col items-center">
       <div className="mb-4 opacity-100">
-          <GradientBadge icon={Sparkles} text={t("badge")} />
+        <GradientBadge icon={Sparkles} text={t('badge')} />
       </div>
 
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
-        className="group relative flex items-center p-2 rounded-full border border-gray-200 dark:border-white/10 bg-white/10 dark:bg-neutral-900/10 backdrop-blur-xl shadow-sm hover:shadow-lg hover:border-[#1e5eff]/20 dark:hover:border-[#ff2d55]/20 transition-all duration-300"
+        className="group relative flex items-center rounded-full border border-gray-200 bg-white/10 p-2 shadow-sm backdrop-blur-xl transition-all duration-300 hover:border-[#1e5eff]/20 hover:shadow-lg dark:border-white/10 dark:bg-neutral-900/10 dark:hover:border-[#ff2d55]/20"
       >
-        <div className="flex -space-x-3 md:-space-x-4 pl-2">
-            {displaySponsors.map((sponsor) => (
-                <SponsorItem key={sponsor.login} sponsor={sponsor} />
-            ))}
-
-             {displaySponsors.length === 0 && (
-                <div className="w-9 h-9 rounded-full bg-gray-100 dark:bg-white/5 border-2 border-white dark:border-black flex items-center justify-center">
-                    <span className="text-[8px] text-gray-400">{t("emptySlot")}</span>
-                </div>
-             )}
+        <div className="flex -space-x-3 pl-2 md:-space-x-4">
+          {displaySponsors.map(sponsor => (
+            <SponsorItem key={sponsor.login} sponsor={sponsor} />
+          ))}
+
+          {displaySponsors.length === 0 && (
+            <div className="flex h-9 w-9 items-center justify-center rounded-full border-2 border-white bg-gray-100 dark:border-black dark:bg-white/5">
+              <span className="text-[8px] text-gray-400">{t('emptySlot')}</span>
+            </div>
+          )}
         </div>
 
-        <div className="h-6 w-[1px] bg-gray-200 dark:bg-white/10 mx-4" />
+        <div className="mx-4 h-6 w-[1px] bg-gray-200 dark:bg-white/10" />
 
         <Link
-            href="https://github.com/sponsors/DevLoversTeam"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label={t("ctaAriaLabel")}
-            className="relative flex items-center justify-center w-10 h-10 rounded-full border-2 border-dashed border-gray-300 dark:border-white/20 hover:border-[#1e5eff] dark:hover:border-[#ff2d55] bg-transparent hover:bg-[#1e5eff]/5 dark:hover:bg-[#ff2d55]/5 transition-all group/cta"
+          href="https://github.com/sponsors/DevLoversTeam"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={t('ctaAriaLabel')}
+          className="group/cta relative flex h-10 w-10 items-center justify-center rounded-full border-2 border-dashed border-gray-300 bg-transparent transition-all hover:border-[#1e5eff] hover:bg-[#1e5eff]/5 dark:border-white/20 dark:hover:border-[#ff2d55] dark:hover:bg-[#ff2d55]/5"
         >
-            <Plus size={16} className="text-gray-400 group-hover/cta:text-[#1e5eff] dark:group-hover/cta:text-[#ff2d55] transition-colors" aria-hidden="true" />
-
-            <div className="absolute bottom-full mb-3 left-1/2 -translate-x-1/2 px-2 py-1 bg-[#1e5eff] dark:bg-[#ff2d55] text-white text-[10px] font-bold rounded opacity-0 group-hover/cta:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">
-                {t("yourSpot")}
-                <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-[#1e5eff] dark:border-t-[#ff2d55]" />
-            </div>
+          <Plus
+            size={16}
+            className="text-gray-400 transition-colors group-hover/cta:text-[#1e5eff] dark:group-hover/cta:text-[#ff2d55]"
+            aria-hidden="true"
+          />
+
+          <div className="pointer-events-none absolute bottom-full left-1/2 mb-3 -translate-x-1/2 rounded bg-[#1e5eff] px-2 py-1 text-[10px] font-bold whitespace-nowrap text-white opacity-0 transition-opacity group-hover/cta:opacity-100 dark:bg-[#ff2d55]">
+            {t('yourSpot')}
+            <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-[#1e5eff] dark:border-t-[#ff2d55]" />
+          </div>
         </Link>
 
-        <Link href="https://github.com/sponsors/DevLoversTeam" target="_blank" rel="noopener noreferrer" className="hidden sm:block ml-3 mr-2 text-xs font-bold text-gray-500 hover:text-[#1e5eff] dark:hover:text-[#ff2d55] transition-colors">
-            {t("joinClub")}
+        <Link
+          href="https://github.com/sponsors/DevLoversTeam"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mr-2 ml-3 hidden text-xs font-bold text-gray-500 transition-colors hover:text-[#1e5eff] sm:block dark:hover:text-[#ff2d55]"
+        >
+          {t('joinClub')}
         </Link>
-
       </motion.div>
 
-      <p className="mt-4 text-[10px] text-gray-500 dark:text-neutral-500 font-mono">
-         {t("fundsNote")}
+      <p className="mt-4 font-mono text-[10px] text-gray-500 dark:text-neutral-500">
+        {t('fundsNote')}
       </p>
-
     </div>
-  )
+  );
 }
 
 function SponsorItem({ sponsor }: { sponsor: Sponsor }) {
-  const ringColor = sponsor.tierColor === 'gold' ? 'ring-[#1e5eff] dark:ring-[#ff2d55]' : 
-                    sponsor.tierColor === 'silver' ? 'ring-gray-400' : 'ring-orange-700/50'
+  const ringColor =
+    sponsor.tierColor === 'gold'
+      ? 'ring-[#1e5eff] dark:ring-[#ff2d55]'
+      : sponsor.tierColor === 'silver'
+        ? 'ring-gray-400'
+        : 'ring-orange-700/50';
 
   return (
-    <Link 
-        href={`https://github.com/${sponsor.login}`}
-        target="_blank"
-        className="group/avatar relative z-0 hover:z-10 transition-transform duration-200 hover:-translate-y-2 hover:scale-110"
+    <Link
+      href={`https://github.com/${sponsor.login}`}
+      target="_blank"
+      className="group/avatar relative z-0 transition-transform duration-200 hover:z-10 hover:-translate-y-2 hover:scale-110"
     >
-        <div className={cn(
-            "relative w-9 h-9 md:w-11 md:h-11 rounded-full border-[3px] overflow-hidden bg-gray-100 dark:bg-[#111] transition-all",
-            "border-white dark:border-black", 
-            (sponsor.tierColor === 'gold' || sponsor.tierColor === 'silver') && `ring-2 ${ringColor} ring-offset-0`
-        )}>
-            <Image src={sponsor.avatarUrl} alt={sponsor.login} fill className="object-cover" />
-            
-            {sponsor.tierColor === 'gold' && (
-                 <div className="absolute inset-0 bg-black/10 flex items-center justify-center opacity-0 group-hover/avatar:opacity-100 transition-opacity">
-                    <Crown size={12} className="text-white fill-white" aria-label="Gold Tier Sponsor" />
-                 </div>
-            )}
-        </div>
+      <div
+        className={cn(
+          'relative h-9 w-9 overflow-hidden rounded-full border-[3px] bg-gray-100 transition-all md:h-11 md:w-11 dark:bg-[#111]',
+          'border-white dark:border-black',
+          (sponsor.tierColor === 'gold' || sponsor.tierColor === 'silver') &&
+            `ring-2 ${ringColor} ring-offset-0`
+        )}
+      >
+        <Image
+          src={sponsor.avatarUrl}
+          alt={sponsor.login}
+          fill
+          className="object-cover"
+        />
+
+        {sponsor.tierColor === 'gold' && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black/10 opacity-0 transition-opacity group-hover/avatar:opacity-100">
+            <Crown
+              size={12}
+              className="fill-white text-white"
+              aria-label="Gold Tier Sponsor"
+            />
+          </div>
+        )}
+      </div>
 
-        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-gray-900 dark:bg-white text-white dark:text-black text-[10px] font-bold rounded-lg opacity-0 group-hover/avatar:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap shadow-xl transform translate-y-1 group-hover/avatar:translate-y-0 z-20">
-            <span className="text-gray-300 dark:text-gray-500 font-normal">@{sponsor.login}</span>
-            <span className="mx-1.5 opacity-30">|</span>
-            <span className={cn(
-                "capitalize",
-                sponsor.tierColor === 'gold' ? "text-[#1e5eff] dark:text-[#ff2d55]" : "text-white dark:text-black"
-            )}>
-                {sponsor.tierName}
-            </span>
-        </div>
+      <div className="pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 -translate-x-1/2 translate-y-1 transform rounded-lg bg-gray-900 px-3 py-1.5 text-[10px] font-bold whitespace-nowrap text-white opacity-0 shadow-xl transition-all duration-200 group-hover/avatar:translate-y-0 group-hover/avatar:opacity-100 dark:bg-white dark:text-black">
+        <span className="font-normal text-gray-300 dark:text-gray-500">
+          @{sponsor.login}
+        </span>
+        <span className="mx-1.5 opacity-30">|</span>
+        <span
+          className={cn(
+            'capitalize',
+            sponsor.tierColor === 'gold'
+              ? 'text-[#1e5eff] dark:text-[#ff2d55]'
+              : 'text-white dark:text-black'
+          )}
+        >
+          {sponsor.tierName}
+        </span>
+      </div>
     </Link>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/components/about/TopicsSection.tsx b/frontend/components/about/TopicsSection.tsx
index fce47870..afe21842 100644
--- a/frontend/components/about/TopicsSection.tsx
+++ b/frontend/components/about/TopicsSection.tsx
@@ -1,101 +1,96 @@
-"use client"
+'use client';
 
-import { motion } from "framer-motion"
-import { ArrowUpRight } from "lucide-react"
-import { useTranslations } from "next-intl"
-import { TOPICS, type Topic } from "@/data/about"
-import Image from "next/image"
-import Link from "next/link"
+import { motion } from 'framer-motion';
+import { ArrowUpRight } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
 
-export function TopicsSection() {
-    const t = useTranslations("about.topics")
-
-    return (
-        <section id="topics" className="w-full py-20 lg:py-28 bg-gray-50 dark:bg-transparent">
-            <div className="container-main">
+import { type Topic,TOPICS } from '@/data/about';
 
-                    <div className="mb-16 md:flex md:justify-between md:items-end">
-                        <div className="max-w-2xl">
-                            <motion.div
-                                initial={{ opacity: 0, x: -20 }}
-                                whileInView={{ opacity: 1, x: 0 }}
-                                className="text-blue-600 dark:text-[#ff2d55] font-bold uppercase tracking-widest text-xs mb-4"
-                            >
-                                {t("pretitle")}
-                            </motion.div>
-                            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-black dark:text-white tracking-tighter">
-                                {t("titleStart")} <br />
-                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#1e5eff]/70 dark:from-[#ff2d55] dark:to-[#ff2d55]/70">
-                                    {t("titleHighlight")}
-                                </span>
-                            </h2>
-                        </div>
+export function TopicsSection() {
+  const t = useTranslations('about.topics');
 
-                        <p className="hidden md:block text-neutral-600 dark:text-neutral-400 max-w-sm text-base font-normal mt-4 md:mt-0 md:mb-2">
-                             {t("description")}
-                        </p>
-                    </div>
+  return (
+    <section
+      id="topics"
+      className="w-full bg-gray-50 py-20 lg:py-28 dark:bg-transparent"
+    >
+      <div className="container-main">
+        <div className="mb-16 md:flex md:items-end md:justify-between">
+          <div className="max-w-2xl">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              className="mb-4 text-xs font-bold tracking-widest text-blue-600 uppercase dark:text-[#ff2d55]"
+            >
+              {t('pretitle')}
+            </motion.div>
+            <h2 className="text-4xl font-black tracking-tighter text-black md:text-5xl lg:text-6xl dark:text-white">
+              {t('titleStart')} <br />
+              <span className="bg-gradient-to-r from-[#1e5eff] to-[#1e5eff]/70 bg-clip-text text-transparent dark:from-[#ff2d55] dark:to-[#ff2d55]/70">
+                {t('titleHighlight')}
+              </span>
+            </h2>
+          </div>
 
-                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-                        {TOPICS.map((topic, i) => (
-                            <TopicCard key={topic.id} topic={topic as Topic} index={i} />
-                        ))}
-                    </div>
+          <p className="mt-4 hidden max-w-sm text-base font-normal text-neutral-600 md:mt-0 md:mb-2 md:block dark:text-neutral-400">
+            {t('description')}
+          </p>
+        </div>
 
-            </div>
-        </section>
-    )
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5">
+          {TOPICS.map((topic, i) => (
+            <TopicCard key={topic.id} topic={topic as Topic} index={i} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
 }
 
-function TopicCard({ topic, index }: { topic: Topic, index: number }) {
-    return (
-        <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            transition={{ delay: index * 0.05 }}
-            viewport={{ once: true, margin: "-50px" }}
-            className="group relative h-full"
+function TopicCard({ topic, index }: { topic: Topic; index: number }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.05 }}
+      viewport={{ once: true, margin: '-50px' }}
+      className="group relative h-full"
+    >
+      <Link href={topic.href} className="block h-full">
+        <div
+          className={`relative h-full overflow-hidden rounded-2xl border border-black/5 bg-white p-6 backdrop-blur-sm transition-all duration-300 ease-out dark:border-white/5 dark:bg-neutral-900/40 ${topic.color} cursor-pointer hover:-translate-y-1 hover:shadow-xl dark:hover:shadow-black/50`}
         >
-            <Link href={topic.href} className="block h-full">
-                <div className={`
-                    relative overflow-hidden
-                    h-full p-6 rounded-2xl 
-                    border border-black/5 dark:border-white/5 
-                    bg-white dark:bg-neutral-900/40 backdrop-blur-sm
-                    transition-all duration-300 ease-out
-                    ${topic.color} 
-                    hover:-translate-y-1 hover:shadow-xl dark:hover:shadow-black/50
-                    cursor-pointer
-                `}>
-                        
-                        <div className="flex justify-between items-start mb-6">
-                            <div className="relative w-10 h-10 grayscale group-hover:grayscale-0 transition-all duration-300 group-hover:scale-110">
-                                <Image
-                                    src={topic.icon}
-                                    alt={topic.name}
-                                    fill
-                                    className="object-contain"
-                                />
-                            </div>
-                            <ArrowUpRight size={16} className="text-neutral-300 dark:text-neutral-700 group-hover:text-black dark:group-hover:text-white transition-colors" />
-                        </div>
+          <div className="mb-6 flex items-start justify-between">
+            <div className="relative h-10 w-10 grayscale transition-all duration-300 group-hover:scale-110 group-hover:grayscale-0">
+              <Image
+                src={topic.icon}
+                alt={topic.name}
+                fill
+                className="object-contain"
+              />
+            </div>
+            <ArrowUpRight
+              size={16}
+              className="text-neutral-300 transition-colors group-hover:text-black dark:text-neutral-700 dark:group-hover:text-white"
+            />
+          </div>
 
-                        <div>
-                            <h3 className="text-sm font-bold text-black dark:text-white mb-1 leading-tight">
-                                {topic.name}
-                            </h3>
-                            <p className="text-[10px] font-mono text-neutral-500 dark:text-neutral-500 uppercase tracking-wider">
-                                {topic.questions}
-                            </p>
-                        </div>
+          <div>
+            <h3 className="mb-1 text-sm leading-tight font-bold text-black dark:text-white">
+              {topic.name}
+            </h3>
+            <p className="font-mono text-[10px] tracking-wider text-neutral-500 uppercase dark:text-neutral-500">
+              {topic.questions}
+            </p>
+          </div>
 
-                        <div className={`
-                            absolute -bottom-6 -right-6 w-20 h-20 rounded-full blur-[40px] opacity-0 
-                            group-hover:opacity-40 transition-opacity duration-500
-                            ${topic.glow}
-                        `} />
-                </div>
-            </Link>
-        </motion.div>
-    )
-}
\ No newline at end of file
+          <div
+            className={`absolute -right-6 -bottom-6 h-20 w-20 rounded-full opacity-0 blur-[40px] transition-opacity duration-500 group-hover:opacity-40 ${topic.glow} `}
+          />
+        </div>
+      </Link>
+    </motion.div>
+  );
+}
diff --git a/frontend/components/auth/AuthErrorBanner.tsx b/frontend/components/auth/AuthErrorBanner.tsx
index 74e76c37..8fbcf8f9 100644
--- a/frontend/components/auth/AuthErrorBanner.tsx
+++ b/frontend/components/auth/AuthErrorBanner.tsx
@@ -1,29 +1,25 @@
 // import type { ReactNode } from "react";
 
 type AuthErrorBannerProps = {
-    message: string;
-    actionLabel?: string;
-    onAction?: () => void;
+  message: string;
+  actionLabel?: string;
+  onAction?: () => void;
 };
 
 export function AuthErrorBanner({
-    message,
-    actionLabel,
-    onAction,
+  message,
+  actionLabel,
+  onAction,
 }: AuthErrorBannerProps) {
-    return (
-        <div className="rounded-md border border-yellow-400 bg-yellow-50 p-3 text-sm text-yellow-800">
-            <p>{message}</p>
+  return (
+    <div className="rounded-md border border-yellow-400 bg-yellow-50 p-3 text-sm text-yellow-800">
+      <p>{message}</p>
 
-            {actionLabel && onAction && (
-                <button
-                    type="button"
-                    onClick={onAction}
-                    className="mt-2 underline"
-                >
-                    {actionLabel}
-                </button>
-            )}
-        </div>
-    );
-}
\ No newline at end of file
+      {actionLabel && onAction && (
+        <button type="button" onClick={onAction} className="mt-2 underline">
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/auth/AuthProvidersBlock.tsx b/frontend/components/auth/AuthProvidersBlock.tsx
index 21d0f053..05b10456 100644
--- a/frontend/components/auth/AuthProvidersBlock.tsx
+++ b/frontend/components/auth/AuthProvidersBlock.tsx
@@ -1,22 +1,21 @@
-"use client";
+'use client';
 
-import { useTranslations } from "next-intl";
-import { OAuthButtons } from "@/components/auth/OAuthButtons";
+import { useTranslations } from 'next-intl';
+
+import { OAuthButtons } from '@/components/auth/OAuthButtons';
 
 export function AuthProvidersBlock() {
-    const t = useTranslations("auth");
+  const t = useTranslations('auth');
 
-    return (
-        <>
-            <OAuthButtons />
+  return (
+    <>
+      <OAuthButtons />
 
-            <div className="flex items-center gap-3">
-                <div className="h-px flex-1 bg-gray-200" />
-                <span className="text-xs text-gray-500">
-                    {t("divider")}
-                </span>
-                <div className="h-px flex-1 bg-gray-200" />
-            </div>
-        </>
-    );
-}
\ No newline at end of file
+      <div className="flex items-center gap-3">
+        <div className="h-px flex-1 bg-gray-200" />
+        <span className="text-xs text-gray-500">{t('divider')}</span>
+        <div className="h-px flex-1 bg-gray-200" />
+      </div>
+    </>
+  );
+}
diff --git a/frontend/components/auth/AuthShell.tsx b/frontend/components/auth/AuthShell.tsx
index 1875133f..a9237700 100644
--- a/frontend/components/auth/AuthShell.tsx
+++ b/frontend/components/auth/AuthShell.tsx
@@ -1,31 +1,19 @@
-import type { ReactNode } from "react";
+import type { ReactNode } from 'react';
 
 type AuthShellProps = {
-    title: string;
-    children: ReactNode;
-    footer?: ReactNode;
+  title: string;
+  children: ReactNode;
+  footer?: ReactNode;
 };
 
-export function AuthShell({
-    title,
-    children,
-    footer,
-}: AuthShellProps) {
-    return (
-        <div className="mx-auto max-w-sm py-12">
-            <h1 className="mb-6 text-2xl font-semibold">
-                {title}
-            </h1>
+export function AuthShell({ title, children, footer }: AuthShellProps) {
+  return (
+    <div className="mx-auto max-w-sm py-12">
+      <h1 className="mb-6 text-2xl font-semibold">{title}</h1>
 
-            <div className="space-y-6">
-                {children}
-            </div>
+      <div className="space-y-6">{children}</div>
 
-            {footer && (
-                <div className="mt-6">
-                    {footer}
-                </div>
-            )}
-        </div>
-    );
-}
\ No newline at end of file
+      {footer && <div className="mt-6">{footer}</div>}
+    </div>
+  );
+}
diff --git a/frontend/components/auth/AuthSuccessBanner.tsx b/frontend/components/auth/AuthSuccessBanner.tsx
index 5524ce35..afdddfd4 100644
--- a/frontend/components/auth/AuthSuccessBanner.tsx
+++ b/frontend/components/auth/AuthSuccessBanner.tsx
@@ -1,23 +1,16 @@
-import type { ReactNode } from "react";
+import type { ReactNode } from 'react';
 
 type AuthSuccessBannerProps = {
-    message: ReactNode;
-    footer?: ReactNode;
+  message: ReactNode;
+  footer?: ReactNode;
 };
 
-export function AuthSuccessBanner({
-    message,
-    footer,
-}: AuthSuccessBannerProps) {
-    return (
-        <div className="rounded-md border border-green-400 bg-green-50 p-4 text-sm text-green-800">
-            <div>{message}</div>
+export function AuthSuccessBanner({ message, footer }: AuthSuccessBannerProps) {
+  return (
+    <div className="rounded-md border border-green-400 bg-green-50 p-4 text-sm text-green-800">
+      <div>{message}</div>
 
-            {footer && (
-                <div className="mt-3">
-                    {footer}
-                </div>
-            )}
-        </div>
-    );
-}
\ No newline at end of file
+      {footer && <div className="mt-3">{footer}</div>}
+    </div>
+  );
+}
diff --git a/frontend/components/auth/ForgotPasswordForm.tsx b/frontend/components/auth/ForgotPasswordForm.tsx
index 870ed55c..9f676f93 100644
--- a/frontend/components/auth/ForgotPasswordForm.tsx
+++ b/frontend/components/auth/ForgotPasswordForm.tsx
@@ -1,89 +1,76 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import { Button } from "@/components/ui/button";
-import { AuthShell } from "@/components/auth/AuthShell";
-import { AuthErrorBanner } from "@/components/auth/AuthErrorBanner";
-import { AuthSuccessBanner } from "@/components/auth/AuthSuccessBanner";
-import { EmailField } from "@/components/auth/fields/EmailField";
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+import { AuthErrorBanner } from '@/components/auth/AuthErrorBanner';
+import { AuthShell } from '@/components/auth/AuthShell';
+import { AuthSuccessBanner } from '@/components/auth/AuthSuccessBanner';
+import { EmailField } from '@/components/auth/fields/EmailField';
+import { Button } from '@/components/ui/button';
 
 export function ForgotPasswordForm() {
-    const t = useTranslations("auth.forgotPassword");
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [emailSent, setEmailSent] = useState(false);
-    const [email, setEmail] = useState("");
+  const t = useTranslations('auth.forgotPassword');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [emailSent, setEmailSent] = useState(false);
+  const [email, setEmail] = useState('');
 
-    async function onSubmit(
-        e: React.FormEvent<HTMLFormElement>
-    ) {
-        e.preventDefault();
-        setLoading(true);
-        setError(null);
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
 
-        const formData = new FormData(e.currentTarget);
-        const emailValue = String(formData.get("email") || "");
-        setEmail(emailValue);
+    const formData = new FormData(e.currentTarget);
+    const emailValue = String(formData.get('email') || '');
+    setEmail(emailValue);
 
-        try {
-            const res = await fetch(
-                "/api/auth/password-reset",
-                {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    body: JSON.stringify({ email: emailValue }),
-                }
-            );
+    try {
+      const res = await fetch('/api/auth/password-reset', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email: emailValue }),
+      });
 
-            if (!res.ok) {
-                setError(t("errors.sendFailed"));
-                return;
-            }
+      if (!res.ok) {
+        setError(t('errors.sendFailed'));
+        return;
+      }
 
-            setEmailSent(true);
-        } catch {
-            setError(t("errors.networkError"));
-        } finally {
-            setLoading(false);
-        }
+      setEmailSent(true);
+    } catch {
+      setError(t('errors.networkError'));
+    } finally {
+      setLoading(false);
     }
+  }
 
-    return (
-        <AuthShell title={t("title")}>
-            {emailSent ? (
-                <AuthSuccessBanner
-                    message={
-                        <>
-                            <p>
-                                {t("emailSent")}{" "}
-                                <strong>{email}</strong>.
-                            </p>
-                            <p className="mt-2">
-                                {t("checkInbox")}
-                            </p>
-                        </>
-                    }
-                />
-            ) : (
-                <form onSubmit={onSubmit} className="space-y-4">
-                    <EmailField onChange={setEmail} />
+  return (
+    <AuthShell title={t('title')}>
+      {emailSent ? (
+        <AuthSuccessBanner
+          message={
+            <>
+              <p>
+                {t('emailSent')} <strong>{email}</strong>.
+              </p>
+              <p className="mt-2">{t('checkInbox')}</p>
+            </>
+          }
+        />
+      ) : (
+        <form onSubmit={onSubmit} className="space-y-4">
+          <EmailField onChange={setEmail} />
 
-                    {error && (
-                        <AuthErrorBanner message={error} />
-                    )}
+          {error && <AuthErrorBanner message={error} />}
 
-                    <Button
-                        type="submit"
-                        disabled={loading}
-                        className="w-full"
-                    >
-                        {loading ? t("submitting") : t("submit")}
-                    </Button>
-                </form>
-            )}
-        </AuthShell>
-    );
-}
\ No newline at end of file
+          <Button type="submit" disabled={loading} className="w-full">
+            {loading ? t('submitting') : t('submit')}
+          </Button>
+        </form>
+      )}
+    </AuthShell>
+  );
+}
diff --git a/frontend/components/auth/LoginForm.tsx b/frontend/components/auth/LoginForm.tsx
index baec41b6..cda0b0f7 100644
--- a/frontend/components/auth/LoginForm.tsx
+++ b/frontend/components/auth/LoginForm.tsx
@@ -1,189 +1,171 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import { Link } from "@/i18n/routing";
-import { Button } from "@/components/ui/button";
-import { AuthShell } from "@/components/auth/AuthShell";
-import { AuthProvidersBlock } from "@/components/auth/AuthProvidersBlock";
-import { EmailField } from "@/components/auth/fields/EmailField";
-import { PasswordField } from "@/components/auth/fields/PasswordField";
-import { AuthErrorBanner } from "@/components/auth/AuthErrorBanner";
-import { AuthSuccessBanner } from "@/components/auth/AuthSuccessBanner";
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 
+import { AuthErrorBanner } from '@/components/auth/AuthErrorBanner';
+import { AuthProvidersBlock } from '@/components/auth/AuthProvidersBlock';
+import { AuthShell } from '@/components/auth/AuthShell';
+import { AuthSuccessBanner } from '@/components/auth/AuthSuccessBanner';
+import { EmailField } from '@/components/auth/fields/EmailField';
+import { PasswordField } from '@/components/auth/fields/PasswordField';
+import { Button } from '@/components/ui/button';
+import { Link } from '@/i18n/routing';
 
 type LoginFormProps = {
-    locale: string;
-    returnTo: string;
+  locale: string;
+  returnTo: string;
 };
 
-export function LoginForm({
-    locale,
-    returnTo,
-}: LoginFormProps) {
-    const t = useTranslations("auth.login");
-    const [loading, setLoading] = useState(false);
-    const [errorMessage, setErrorMessage] =
-        useState<string | null>(null);
-    const [errorCode, setErrorCode] =
-        useState<string | null>(null);
-    const [email, setEmail] = useState("");
-    const [verificationSent, setVerificationSent] =
-        useState(false);
-
-    async function onSubmit(
-        e: React.FormEvent<HTMLFormElement>
-    ) {
-        e.preventDefault();
-        setLoading(true);
-        setErrorMessage(null);
-        setErrorCode(null);
-        setVerificationSent(false);
-
-        const formData = new FormData(e.currentTarget);
-        const emailValue = String(formData.get("email") || "");
-        setEmail(emailValue);
-
-        try {
-            const res = await fetch("/api/auth/login", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    email: emailValue,
-                    password: formData.get("password"),
-                }),
-            });
-
-            const data = await res.json().catch(() => null);
-
-            if (!res.ok) {
-                setErrorCode(data?.code ?? null);
-
-                if (data?.code === "EMAIL_NOT_VERIFIED") {
-                    setErrorMessage(t("errors.emailNotVerified"));
-                } else {
-                    setErrorMessage(t("errors.invalidCredentials"));
-                }
-                return;
-            }
-
-            window.location.href =
-                returnTo || `/${locale}/dashboard`;
-        } catch (err) {
-            console.error("Login request failed:", err);
-            setErrorMessage(t("errors.networkError"));
-            setErrorCode(null);
-        } finally {
-            setLoading(false);
+export function LoginForm({ locale, returnTo }: LoginFormProps) {
+  const t = useTranslations('auth.login');
+  const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [errorCode, setErrorCode] = useState<string | null>(null);
+  const [email, setEmail] = useState('');
+  const [verificationSent, setVerificationSent] = useState(false);
+
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    setErrorMessage(null);
+    setErrorCode(null);
+    setVerificationSent(false);
+
+    const formData = new FormData(e.currentTarget);
+    const emailValue = String(formData.get('email') || '');
+    setEmail(emailValue);
+
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email: emailValue,
+          password: formData.get('password'),
+        }),
+      });
+
+      const data = await res.json().catch(() => null);
+
+      if (!res.ok) {
+        setErrorCode(data?.code ?? null);
+
+        if (data?.code === 'EMAIL_NOT_VERIFIED') {
+          setErrorMessage(t('errors.emailNotVerified'));
+        } else {
+          setErrorMessage(t('errors.invalidCredentials'));
         }
+        return;
+      }
+
+      window.location.href = returnTo || `/${locale}/dashboard`;
+    } catch (err) {
+      console.error('Login request failed:', err);
+      setErrorMessage(t('errors.networkError'));
+      setErrorCode(null);
+    } finally {
+      setLoading(false);
     }
-
-    async function resendVerification() {
-        if (!email) return;
-
-        try {
-            const res = await fetch("/api/auth/resend-verification", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ email }),
-            });
-
-            const data = await res.json().catch(() => null);
-
-            if (!res.ok) {
-                setErrorCode(data?.code ?? "RESEND_FAILED");
-                setErrorMessage(data?.error ?? t("errors.resendFailed"));
-                return;
-            }
-
-            setVerificationSent(true);
-            setErrorCode(null);
-            setErrorMessage(null);
-        } catch (err) {
-            console.error("Resend verification failed:", err);
-            setErrorCode("NETWORK_ERROR");
-            setErrorMessage(t("errors.networkError"));
-        }
+  }
+
+  async function resendVerification() {
+    if (!email) return;
+
+    try {
+      const res = await fetch('/api/auth/resend-verification', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await res.json().catch(() => null);
+
+      if (!res.ok) {
+        setErrorCode(data?.code ?? 'RESEND_FAILED');
+        setErrorMessage(data?.error ?? t('errors.resendFailed'));
+        return;
+      }
+
+      setVerificationSent(true);
+      setErrorCode(null);
+      setErrorMessage(null);
+    } catch (err) {
+      console.error('Resend verification failed:', err);
+      setErrorCode('NETWORK_ERROR');
+      setErrorMessage(t('errors.networkError'));
     }
-
-    return (
-        <AuthShell
-            title={t("title")}
-            footer={
-                <p className="text-sm text-gray-600">
-                    {t("noAccount")}{" "}
-                    <Link
-                        href={
-                            returnTo
-                                ? `/signup?returnTo=${encodeURIComponent(
-                                    returnTo
-                                )}`
-                                : "/signup"
-                        }
-                        className="underline"
-                    >
-                        {t("signupLink")}
-                    </Link>
-                </p>
+  }
+
+  return (
+    <AuthShell
+      title={t('title')}
+      footer={
+        <p className="text-sm text-gray-600">
+          {t('noAccount')}{' '}
+          <Link
+            href={
+              returnTo
+                ? `/signup?returnTo=${encodeURIComponent(returnTo)}`
+                : '/signup'
+            }
+            className="underline"
+          >
+            {t('signupLink')}
+          </Link>
+        </p>
+      }
+    >
+      <AuthProvidersBlock />
+
+      <form onSubmit={onSubmit} className="space-y-4">
+        <EmailField onChange={setEmail} />
+
+        <PasswordField />
+
+        <div className="text-right">
+          <Link
+            href={
+              returnTo
+                ? `/forgot-password?returnTo=${encodeURIComponent(returnTo)}`
+                : '/forgot-password'
+            }
+            className="text-sm text-gray-600 underline"
+          >
+            {t('forgotPassword')}
+          </Link>
+        </div>
+
+        {errorMessage && !verificationSent && (
+          <AuthErrorBanner
+            message={errorMessage}
+            actionLabel={
+              errorCode === 'EMAIL_NOT_VERIFIED'
+                ? t('resendVerification')
+                : undefined
+            }
+            onAction={
+              errorCode === 'EMAIL_NOT_VERIFIED'
+                ? resendVerification
+                : undefined
+            }
+          />
+        )}
+
+        {verificationSent && (
+          <AuthSuccessBanner
+            message={
+              <>
+                {t('verificationSent')} <strong>{email}</strong>
+              </>
             }
-        >
-            <AuthProvidersBlock />
-
-            <form onSubmit={onSubmit} className="space-y-4">
-                <EmailField onChange={setEmail} />
-
-                <PasswordField />
-
-                <div className="text-right">
-                    <Link
-                        href={
-                            returnTo
-                                ? `/forgot-password?returnTo=${encodeURIComponent(
-                                    returnTo
-                                )}`
-                                : "/forgot-password"
-                        }
-                        className="text-sm underline text-gray-600"
-                    >
-                        {t("forgotPassword")}
-                    </Link>
-                </div>
-
-                {errorMessage && !verificationSent && (
-                    <AuthErrorBanner
-                        message={errorMessage}
-                        actionLabel={
-                            errorCode === "EMAIL_NOT_VERIFIED"
-                                ? t("resendVerification")
-                                : undefined
-                        }
-                        onAction={
-                            errorCode === "EMAIL_NOT_VERIFIED"
-                                ? resendVerification
-                                : undefined
-                        }
-                    />
-                )}
-
-                {verificationSent && (
-                    <AuthSuccessBanner
-                        message={
-                            <>
-                                {t("verificationSent")}{" "}
-                                <strong>{email}</strong>
-                            </>
-                        }
-                    />
-                )}
-
-                <Button
-                    type="submit"
-                    disabled={loading}
-                    className="w-full"
-                >
-                    {loading ? t("submitting") : t("submit")}
-                </Button>
-            </form>
-        </AuthShell>
-    );
-}
\ No newline at end of file
+          />
+        )}
+
+        <Button type="submit" disabled={loading} className="w-full">
+          {loading ? t('submitting') : t('submit')}
+        </Button>
+      </form>
+    </AuthShell>
+  );
+}
diff --git a/frontend/components/auth/OAuthButtons.tsx b/frontend/components/auth/OAuthButtons.tsx
index f1088aea..732add73 100644
--- a/frontend/components/auth/OAuthButtons.tsx
+++ b/frontend/components/auth/OAuthButtons.tsx
@@ -1,21 +1,21 @@
-import { ProviderButton } from "./ProviderButton";
-import { GoogleIcon } from "./icons/GoogleIcon";
-import { GitHubIcon } from "./icons/GitHubIcon";
+import { GitHubIcon } from './icons/GitHubIcon';
+import { GoogleIcon } from './icons/GoogleIcon';
+import { ProviderButton } from './ProviderButton';
 
 export function OAuthButtons() {
-    return (
-        <div className="space-y-2">
-            <ProviderButton
-                provider="google"
-                label="Continue with Google"
-                icon={<GoogleIcon className="h-4 w-4" />}
-            />
+  return (
+    <div className="space-y-2">
+      <ProviderButton
+        provider="google"
+        label="Continue with Google"
+        icon={<GoogleIcon className="h-4 w-4" />}
+      />
 
-            <ProviderButton
-                provider="github"
-                label="Continue with GitHub"
-                icon={<GitHubIcon className="h-4 w-4" />}
-            />
-        </div>
-    );
-}
\ No newline at end of file
+      <ProviderButton
+        provider="github"
+        label="Continue with GitHub"
+        icon={<GitHubIcon className="h-4 w-4" />}
+      />
+    </div>
+  );
+}
diff --git a/frontend/components/auth/PostAuthQuizSync.tsx b/frontend/components/auth/PostAuthQuizSync.tsx
index ee4be623..834334ae 100644
--- a/frontend/components/auth/PostAuthQuizSync.tsx
+++ b/frontend/components/auth/PostAuthQuizSync.tsx
@@ -1,63 +1,62 @@
-"use client";
+'use client';
 
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
-import {
-    getPendingQuizResult,
-    clearPendingQuizResult,
-} from "@/lib/quiz/guest-quiz";
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 
+import {
+  clearPendingQuizResult,
+  getPendingQuizResult,
+} from '@/lib/quiz/guest-quiz';
 
 export function PostAuthQuizSync() {
-    const router = useRouter();
-
-    useEffect(() => {
-
-        queueMicrotask(() => {
-            const pendingResult = getPendingQuizResult();
-            if (!pendingResult) return;
-
-            (async () => {
-                try {
-                    const res = await fetch("/api/quiz/guest-result", {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({
-                            quizId: pendingResult.quizId,
-                            answers: pendingResult.answers,
-                            violations: pendingResult.violations,
-                            timeSpentSeconds: pendingResult.timeSpentSeconds,
-                        }),
-                    });
-
-                    if (!res.ok) {
-                        throw new Error(`Failed to save quiz result (${res.status})`);
-                    }
-
-                    const result = await res.json();
-
-                    if (!result?.success) {
-                        throw new Error("Quiz save did not succeed");
-                    }
-
-                    sessionStorage.setItem(
-                        "quiz_just_saved",
-                        JSON.stringify({
-                            score: result.score,
-                            total: result.totalQuestions,
-                            percentage: result.percentage,
-                            pointsAwarded: result.pointsAwarded,
-                            quizSlug: pendingResult.quizSlug,
-                        })
-                    );
-                    clearPendingQuizResult();
-                    router.refresh();
-                } catch (error) {
-                    console.error("Failed to sync guest quiz result:", error);
-                }
-            })();
-        });
-    }, [router]);
-
-    return null;
-}
\ No newline at end of file
+  const router = useRouter();
+
+  useEffect(() => {
+    queueMicrotask(() => {
+      const pendingResult = getPendingQuizResult();
+      if (!pendingResult) return;
+
+      (async () => {
+        try {
+          const res = await fetch('/api/quiz/guest-result', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              quizId: pendingResult.quizId,
+              answers: pendingResult.answers,
+              violations: pendingResult.violations,
+              timeSpentSeconds: pendingResult.timeSpentSeconds,
+            }),
+          });
+
+          if (!res.ok) {
+            throw new Error(`Failed to save quiz result (${res.status})`);
+          }
+
+          const result = await res.json();
+
+          if (!result?.success) {
+            throw new Error('Quiz save did not succeed');
+          }
+
+          sessionStorage.setItem(
+            'quiz_just_saved',
+            JSON.stringify({
+              score: result.score,
+              total: result.totalQuestions,
+              percentage: result.percentage,
+              pointsAwarded: result.pointsAwarded,
+              quizSlug: pendingResult.quizSlug,
+            })
+          );
+          clearPendingQuizResult();
+          router.refresh();
+        } catch (error) {
+          console.error('Failed to sync guest quiz result:', error);
+        }
+      })();
+    });
+  }, [router]);
+
+  return null;
+}
diff --git a/frontend/components/auth/ProviderButton.tsx b/frontend/components/auth/ProviderButton.tsx
index 2a46443c..b874ed45 100644
--- a/frontend/components/auth/ProviderButton.tsx
+++ b/frontend/components/auth/ProviderButton.tsx
@@ -1,32 +1,29 @@
-"use client";
+'use client';
 
-import { Button } from "@/components/ui/button";
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
+
+import { Button } from '@/components/ui/button';
 
 type ProviderButtonProps = {
-    provider: "google" | "github";
-    label: string;
-    icon: ReactNode;
+  provider: 'google' | 'github';
+  label: string;
+  icon: ReactNode;
 };
 
-export function ProviderButton({
-    provider,
-    label,
-    icon,
-}: ProviderButtonProps) {
-    function oauthLogin() {
-        window.location.href = `/api/auth/${provider}`;
-    }
+export function ProviderButton({ provider, label, icon }: ProviderButtonProps) {
+  function oauthLogin() {
+    window.location.href = `/api/auth/${provider}`;
+  }
 
-    return (
-        <Button
-            type="button"
-            variant="outline"
-            className="w-full flex items-center justify-center gap-2"
-            onClick={oauthLogin}
-        >
-            {icon}
-            <span>{label}</span>
-        </Button>
-    );
-}
\ No newline at end of file
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      className="flex w-full items-center justify-center gap-2"
+      onClick={oauthLogin}
+    >
+      {icon}
+      <span>{label}</span>
+    </Button>
+  );
+}
diff --git a/frontend/components/auth/ResetPasswordForm.tsx b/frontend/components/auth/ResetPasswordForm.tsx
index e940a79e..3517c3ed 100644
--- a/frontend/components/auth/ResetPasswordForm.tsx
+++ b/frontend/components/auth/ResetPasswordForm.tsx
@@ -1,83 +1,71 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import { Button } from "@/components/ui/button";
-import { AuthShell } from "@/components/auth/AuthShell";
-import { AuthErrorBanner } from "@/components/auth/AuthErrorBanner";
-import { AuthSuccessBanner } from "@/components/auth/AuthSuccessBanner";
-import { PasswordField } from "@/components/auth/fields/PasswordField";
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+import { AuthErrorBanner } from '@/components/auth/AuthErrorBanner';
+import { AuthShell } from '@/components/auth/AuthShell';
+import { AuthSuccessBanner } from '@/components/auth/AuthSuccessBanner';
+import { PasswordField } from '@/components/auth/fields/PasswordField';
+import { Button } from '@/components/ui/button';
 
 type ResetPasswordFormProps = {
-    token: string;
+  token: string;
 };
 
-export function ResetPasswordForm({
-    token,
-}: ResetPasswordFormProps) {
-    const t = useTranslations("auth.resetPassword");
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [success, setSuccess] = useState(false);
+export function ResetPasswordForm({ token }: ResetPasswordFormProps) {
+  const t = useTranslations('auth.resetPassword');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
 
-    async function onSubmit(
-        e: React.FormEvent<HTMLFormElement>
-    ) {
-        e.preventDefault();
-        setLoading(true);
-        setError(null);
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
 
-        const formData = new FormData(e.currentTarget);
+    const formData = new FormData(e.currentTarget);
 
-        try {
-            const res = await fetch(
-                "/api/auth/password-reset/confirm",
-                {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    body: JSON.stringify({
-                        token,
-                        password: formData.get("password"),
-                    }),
-                }
-            );
+    try {
+      const res = await fetch('/api/auth/password-reset/confirm', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          token,
+          password: formData.get('password'),
+        }),
+      });
 
-            if (!res.ok) {
-                setError(t("errors.resetFailed"));
-                return;
-            }
+      if (!res.ok) {
+        setError(t('errors.resetFailed'));
+        return;
+      }
 
-            setSuccess(true);
-        } catch {
-            setError(t("errors.networkError"));
-        } finally {
-            setLoading(false);
-        }
+      setSuccess(true);
+    } catch {
+      setError(t('errors.networkError'));
+    } finally {
+      setLoading(false);
     }
+  }
 
-    return (
-        <AuthShell title={t("title")}>
-            {success ? (
-                <AuthSuccessBanner message={t("success")} />
-            ) : (
-                <form onSubmit={onSubmit} className="space-y-4">
-                    <PasswordField minLength={8} />
+  return (
+    <AuthShell title={t('title')}>
+      {success ? (
+        <AuthSuccessBanner message={t('success')} />
+      ) : (
+        <form onSubmit={onSubmit} className="space-y-4">
+          <PasswordField minLength={8} />
 
-                    {error && (
-                        <AuthErrorBanner message={error} />
-                    )}
+          {error && <AuthErrorBanner message={error} />}
 
-                    <Button
-                        type="submit"
-                        disabled={loading}
-                        className="w-full"
-                    >
-                        {loading ? t("submitting") : t("submit")}
-                    </Button>
-                </form>
-            )}
-        </AuthShell>
-    );
-}
\ No newline at end of file
+          <Button type="submit" disabled={loading} className="w-full">
+            {loading ? t('submitting') : t('submit')}
+          </Button>
+        </form>
+      )}
+    </AuthShell>
+  );
+}
diff --git a/frontend/components/auth/SignupForm.tsx b/frontend/components/auth/SignupForm.tsx
index d798a042..aec0ed7d 100644
--- a/frontend/components/auth/SignupForm.tsx
+++ b/frontend/components/auth/SignupForm.tsx
@@ -1,154 +1,132 @@
-"use client";
-
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import { Link } from "@/i18n/routing";
-import { Button } from "@/components/ui/button";
-import { AuthShell } from "@/components/auth/AuthShell";
-import { AuthProvidersBlock } from "@/components/auth/AuthProvidersBlock";
-import { EmailField } from "@/components/auth/fields/EmailField";
-import { PasswordField } from "@/components/auth/fields/PasswordField";
-import { NameField } from "@/components/auth/fields/NameField";
-import { AuthErrorBanner } from "@/components/auth/AuthErrorBanner";
-import { AuthSuccessBanner } from "@/components/auth/AuthSuccessBanner";
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+import { AuthErrorBanner } from '@/components/auth/AuthErrorBanner';
+import { AuthProvidersBlock } from '@/components/auth/AuthProvidersBlock';
+import { AuthShell } from '@/components/auth/AuthShell';
+import { AuthSuccessBanner } from '@/components/auth/AuthSuccessBanner';
+import { EmailField } from '@/components/auth/fields/EmailField';
+import { NameField } from '@/components/auth/fields/NameField';
+import { PasswordField } from '@/components/auth/fields/PasswordField';
+import { Button } from '@/components/ui/button';
+import { Link } from '@/i18n/routing';
 
 type SignupFormProps = {
-    locale: string;
-    returnTo: string;
+  locale: string;
+  returnTo: string;
 };
 
-export function SignupForm({
-    locale,
-    returnTo,
-}: SignupFormProps) {
-    const t = useTranslations("auth.signup");
-    const [loading, setLoading] = useState(false);
-    const [error, setError] =
-        useState<string | null>(null);
-    const [verificationRequired, setVerificationRequired] =
-        useState(false);
-    const [email, setEmail] = useState("");
-
-    async function onSubmit(
-        e: React.FormEvent<HTMLFormElement>
-    ) {
-        e.preventDefault();
-        setLoading(true);
-        setError(null);
-
-        const formData = new FormData(e.currentTarget);
-        const emailValue = String(formData.get("email") || "");
-        setEmail(emailValue);
-
-        try {
-            const res = await fetch("/api/auth/signup", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    name: formData.get("name"),
-                    email: emailValue,
-                    password: formData.get("password"),
-                }),
-            });
-
-            const data = await res.json().catch(() => null);
-
-            if (!res.ok) {
-                setError(data?.error ?? t("errors.signupFailed"));
-                return;
-            }
-
-            if (data?.verificationRequired) {
-                setVerificationRequired(true);
-                return;
-            }
-
-            window.location.href =
-                returnTo || `/${locale}/dashboard`;
-        } catch {
-            setError(t("errors.networkError"));
-        } finally {
-            setLoading(false);
-        }
+export function SignupForm({ locale, returnTo }: SignupFormProps) {
+  const t = useTranslations('auth.signup');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [verificationRequired, setVerificationRequired] = useState(false);
+  const [email, setEmail] = useState('');
+
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    const formData = new FormData(e.currentTarget);
+    const emailValue = String(formData.get('email') || '');
+    setEmail(emailValue);
+
+    try {
+      const res = await fetch('/api/auth/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: formData.get('name'),
+          email: emailValue,
+          password: formData.get('password'),
+        }),
+      });
+
+      const data = await res.json().catch(() => null);
+
+      if (!res.ok) {
+        setError(data?.error ?? t('errors.signupFailed'));
+        return;
+      }
+
+      if (data?.verificationRequired) {
+        setVerificationRequired(true);
+        return;
+      }
+
+      window.location.href = returnTo || `/${locale}/dashboard`;
+    } catch {
+      setError(t('errors.networkError'));
+    } finally {
+      setLoading(false);
     }
-
-    return (
-        <AuthShell
-            title={t("title")}
-            footer={
-                !verificationRequired && (
-                    <p className="text-sm text-gray-600">
-                        {t("hasAccount")}{" "}
-                        <Link
-                            href={
-                                returnTo
-                                    ? `/login?returnTo=${encodeURIComponent(
-                                        returnTo
-                                    )}`
-                                    : "/login"
-                            }
-                            className="underline"
-                        >
-                            {t("loginLink")}
-                        </Link>
-                    </p>
-                )
-            }
-        >
-            {!verificationRequired && (
-                <AuthProvidersBlock />
-            )}
-
-            {verificationRequired ? (
-                <AuthSuccessBanner
-                    message={
-                        <>
-                            <p>
-                                {t("verificationSent")}{" "}
-                                <strong>{email}</strong>.
-                            </p>
-
-                            <p className="mt-2">
-                                {t("checkInbox")}
-                            </p>
-                        </>
-                    }
-                    footer={
-                        <Link
-                            href={
-                                returnTo
-                                    ? `/login?returnTo=${encodeURIComponent(
-                                        returnTo
-                                    )}`
-                                    : "/login"
-                            }
-                            className="inline-block underline"
-                        >
-                            {t("goToLogin")}
-                        </Link>
-                    }
-                />
-            ) : (
-                <form onSubmit={onSubmit} className="space-y-4">
-                    <NameField />
-
-                    <EmailField />
-
-                    <PasswordField minLength={8} />
-
-                    {error && (
-                        <AuthErrorBanner message={error} />
-                    )}
-
-                    <Button
-                        type="submit"
-                        disabled={loading}
-                        className="w-full"
-                    >
-                        {loading ? t("submitting") : t("submit")}
-                    </Button>
-                </form>
-            )}
-        </AuthShell>
-    );
-}
\ No newline at end of file
+  }
+
+  return (
+    <AuthShell
+      title={t('title')}
+      footer={
+        !verificationRequired && (
+          <p className="text-sm text-gray-600">
+            {t('hasAccount')}{' '}
+            <Link
+              href={
+                returnTo
+                  ? `/login?returnTo=${encodeURIComponent(returnTo)}`
+                  : '/login'
+              }
+              className="underline"
+            >
+              {t('loginLink')}
+            </Link>
+          </p>
+        )
+      }
+    >
+      {!verificationRequired && <AuthProvidersBlock />}
+
+      {verificationRequired ? (
+        <AuthSuccessBanner
+          message={
+            <>
+              <p>
+                {t('verificationSent')} <strong>{email}</strong>.
+              </p>
+
+              <p className="mt-2">{t('checkInbox')}</p>
+            </>
+          }
+          footer={
+            <Link
+              href={
+                returnTo
+                  ? `/login?returnTo=${encodeURIComponent(returnTo)}`
+                  : '/login'
+              }
+              className="inline-block underline"
+            >
+              {t('goToLogin')}
+            </Link>
+          }
+        />
+      ) : (
+        <form onSubmit={onSubmit} className="space-y-4">
+          <NameField />
+
+          <EmailField />
+
+          <PasswordField minLength={8} />
+
+          {error && <AuthErrorBanner message={error} />}
+
+          <Button type="submit" disabled={loading} className="w-full">
+            {loading ? t('submitting') : t('submit')}
+          </Button>
+        </form>
+      )}
+    </AuthShell>
+  );
+}
diff --git a/frontend/components/auth/fields/EmailField.tsx b/frontend/components/auth/fields/EmailField.tsx
index 5a3344f5..e1b3c705 100644
--- a/frontend/components/auth/fields/EmailField.tsx
+++ b/frontend/components/auth/fields/EmailField.tsx
@@ -1,43 +1,37 @@
-"use client";
+'use client';
 
-import { useTranslations } from "next-intl";
+import { useTranslations } from 'next-intl';
 
 type EmailFieldProps = {
-    onChange?: (value: string) => void;
+  onChange?: (value: string) => void;
 };
 
-export function EmailField({
-    onChange,
-}: EmailFieldProps) {
-    const t = useTranslations("auth.fields");
+export function EmailField({ onChange }: EmailFieldProps) {
+  const t = useTranslations('auth.fields');
 
-    const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
-        const input = e.currentTarget;
-        if (input.validity.valueMissing) {
-            input.setCustomValidity(t("validation.required"));
-        } else if (input.validity.typeMismatch) {
-            input.setCustomValidity(t("validation.invalidEmail"));
-        }
-    };
+  const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
+    const input = e.currentTarget;
+    if (input.validity.valueMissing) {
+      input.setCustomValidity(t('validation.required'));
+    } else if (input.validity.typeMismatch) {
+      input.setCustomValidity(t('validation.invalidEmail'));
+    }
+  };
 
-    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
-        e.currentTarget.setCustomValidity("");
-    };
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    e.currentTarget.setCustomValidity('');
+  };
 
-    return (
-        <input
-            name="email"
-            type="email"
-            placeholder={t("email")}
-            required
-            className="w-full rounded border px-3 py-2"
-            onInvalid={handleInvalid}
-            onInput={handleInput}
-            onChange={
-                onChange
-                    ? e => onChange(e.currentTarget.value)
-                    : undefined
-            }
-        />
-    );
+  return (
+    <input
+      name="email"
+      type="email"
+      placeholder={t('email')}
+      required
+      className="w-full rounded border px-3 py-2"
+      onInvalid={handleInvalid}
+      onInput={handleInput}
+      onChange={onChange ? e => onChange(e.currentTarget.value) : undefined}
+    />
+  );
 }
diff --git a/frontend/components/auth/fields/NameField.tsx b/frontend/components/auth/fields/NameField.tsx
index f2ddcee7..0eca8d95 100644
--- a/frontend/components/auth/fields/NameField.tsx
+++ b/frontend/components/auth/fields/NameField.tsx
@@ -1,36 +1,34 @@
-"use client";
+'use client';
 
-import { useTranslations } from "next-intl";
+import { useTranslations } from 'next-intl';
 
 type NameFieldProps = {
-    name?: string;
+  name?: string;
 };
 
-export function NameField({
-    name = "name",
-}: NameFieldProps) {
-    const t = useTranslations("auth.fields");
+export function NameField({ name = 'name' }: NameFieldProps) {
+  const t = useTranslations('auth.fields');
 
-    const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
-        const input = e.currentTarget;
-        if (input.validity.valueMissing) {
-            input.setCustomValidity(t("validation.required"));
-        }
-    };
+  const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
+    const input = e.currentTarget;
+    if (input.validity.valueMissing) {
+      input.setCustomValidity(t('validation.required'));
+    }
+  };
 
-    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
-        e.currentTarget.setCustomValidity("");
-    };
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    e.currentTarget.setCustomValidity('');
+  };
 
-    return (
-        <input
-            name={name}
-            type="text"
-            placeholder={t("name")}
-            required
-            className="w-full rounded border px-3 py-2"
-            onInvalid={handleInvalid}
-            onInput={handleInput}
-        />
-    );
+  return (
+    <input
+      name={name}
+      type="text"
+      placeholder={t('name')}
+      required
+      className="w-full rounded border px-3 py-2"
+      onInvalid={handleInvalid}
+      onInput={handleInput}
+    />
+  );
 }
diff --git a/frontend/components/auth/fields/PasswordField.tsx b/frontend/components/auth/fields/PasswordField.tsx
index 4f78d772..f42a8359 100644
--- a/frontend/components/auth/fields/PasswordField.tsx
+++ b/frontend/components/auth/fields/PasswordField.tsx
@@ -1,56 +1,54 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { useTranslations } from "next-intl";
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 
 type PasswordFieldProps = {
-    name?: string;
-    minLength?: number;
+  name?: string;
+  minLength?: number;
 };
 
 export function PasswordField({
-    name = "password",
-    minLength,
+  name = 'password',
+  minLength,
 }: PasswordFieldProps) {
-    const t = useTranslations("auth.fields");
-    const [visible, setVisible] = useState(false);
+  const t = useTranslations('auth.fields');
+  const [visible, setVisible] = useState(false);
 
-    const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
-        const input = e.currentTarget;
-        if (input.validity.valueMissing) {
-            input.setCustomValidity(t("validation.required"));
-        } else if (input.validity.tooShort && minLength) {
-            input.setCustomValidity(
-                t("validation.passwordTooShort", { minLength })
-            );
-        }
-    };
+  const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
+    const input = e.currentTarget;
+    if (input.validity.valueMissing) {
+      input.setCustomValidity(t('validation.required'));
+    } else if (input.validity.tooShort && minLength) {
+      input.setCustomValidity(t('validation.passwordTooShort', { minLength }));
+    }
+  };
 
-    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
-        e.currentTarget.setCustomValidity("");
-    };
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    e.currentTarget.setCustomValidity('');
+  };
 
-    return (
-        <div className="relative">
-            <input
-                name={name}
-                type={visible ? "text" : "password"}
-                placeholder={t("password")}
-                required
-                minLength={minLength}
-                className="w-full rounded border px-3 py-2 pr-10"
-                onInvalid={handleInvalid}
-                onInput={handleInput}
-            />
+  return (
+    <div className="relative">
+      <input
+        name={name}
+        type={visible ? 'text' : 'password'}
+        placeholder={t('password')}
+        required
+        minLength={minLength}
+        className="w-full rounded border px-3 py-2 pr-10"
+        onInvalid={handleInvalid}
+        onInput={handleInput}
+      />
 
-            <button
-                type="button"
-                aria-label={visible ? t("hidePassword") : t("showPassword")}
-                onClick={() => setVisible(v => !v)}
-                className="absolute inset-y-0 right-2 flex items-center text-sm text-gray-500"
-            >
-                {visible ? t("hide") : t("show")}
-            </button>
-        </div>
-    );
+      <button
+        type="button"
+        aria-label={visible ? t('hidePassword') : t('showPassword')}
+        onClick={() => setVisible(v => !v)}
+        className="absolute inset-y-0 right-2 flex items-center text-sm text-gray-500"
+      >
+        {visible ? t('hide') : t('show')}
+      </button>
+    </div>
+  );
 }
diff --git a/frontend/components/auth/icons/GitHubIcon.tsx b/frontend/components/auth/icons/GitHubIcon.tsx
index 57b5bf87..2aba759a 100644
--- a/frontend/components/auth/icons/GitHubIcon.tsx
+++ b/frontend/components/auth/icons/GitHubIcon.tsx
@@ -1,13 +1,13 @@
 export function GitHubIcon({ className }: { className?: string }) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            className={className}
-            fill="currentColor"
-            aria-hidden="true"
-        >
-            <path d="M12 .5C5.73.5.75 5.67.75 12.1c0 5.16 3.33 9.53 7.95 11.07.58.11.79-.26.79-.56v-2.1c-3.23.72-3.91-1.41-3.91-1.41-.53-1.36-1.29-1.72-1.29-1.72-1.05-.74.08-.73.08-.73 1.16.08 1.77 1.21 1.77 1.21 1.03 1.8 2.7 1.28 3.36.98.1-.77.4-1.28.72-1.58-2.58-.3-5.29-1.32-5.29-5.86 0-1.29.45-2.35 1.19-3.18-.12-.3-.52-1.52.11-3.17 0 0 .97-.32 3.18 1.22.92-.26 1.9-.39 2.88-.4.98.01 1.96.14 2.88.4 2.2-1.54 3.17-1.22 3.17-1.22.64 1.65.24 2.87.12 3.17.74.83 1.18 1.89 1.18 3.18 0 4.55-2.72 5.56-5.31 5.86.41.36.77 1.08.77 2.18v3.23c0 .31.21.68.8.56 4.61-1.54 7.93-5.9 7.93-11.06C23.25 5.67 18.27.5 12 .5z" />
-        </svg>
-    );
-}
\ No newline at end of file
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className={className}
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M12 .5C5.73.5.75 5.67.75 12.1c0 5.16 3.33 9.53 7.95 11.07.58.11.79-.26.79-.56v-2.1c-3.23.72-3.91-1.41-3.91-1.41-.53-1.36-1.29-1.72-1.29-1.72-1.05-.74.08-.73.08-.73 1.16.08 1.77 1.21 1.77 1.21 1.03 1.8 2.7 1.28 3.36.98.1-.77.4-1.28.72-1.58-2.58-.3-5.29-1.32-5.29-5.86 0-1.29.45-2.35 1.19-3.18-.12-.3-.52-1.52.11-3.17 0 0 .97-.32 3.18 1.22.92-.26 1.9-.39 2.88-.4.98.01 1.96.14 2.88.4 2.2-1.54 3.17-1.22 3.17-1.22.64 1.65.24 2.87.12 3.17.74.83 1.18 1.89 1.18 3.18 0 4.55-2.72 5.56-5.31 5.86.41.36.77 1.08.77 2.18v3.23c0 .31.21.68.8.56 4.61-1.54 7.93-5.9 7.93-11.06C23.25 5.67 18.27.5 12 .5z" />
+    </svg>
+  );
+}
diff --git a/frontend/components/auth/icons/GoogleIcon.tsx b/frontend/components/auth/icons/GoogleIcon.tsx
index bebc244e..515085b6 100644
--- a/frontend/components/auth/icons/GoogleIcon.tsx
+++ b/frontend/components/auth/icons/GoogleIcon.tsx
@@ -1,15 +1,27 @@
 export function GoogleIcon({ className }: { className?: string }) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 48 48"
-            className={className}
-            aria-hidden="true"
-        >
-            <path fill="#4285F4" d="M24 9.5c3.54 0 6.3 1.54 7.74 2.82l5.64-5.64C33.92 3.52 29.4 1.5 24 1.5 14.88 1.5 7.04 6.78 3.38 14.44l6.56 5.1C11.6 13.48 17.34 9.5 24 9.5z" />
-            <path fill="#34A853" d="M46.5 24.5c0-1.34-.12-2.62-.34-3.86H24v7.32h12.7c-.54 2.9-2.18 5.36-4.66 7.02l7.2 5.58c4.2-3.88 6.26-9.6 6.26-16.06z" />
-            <path fill="#FBBC05" d="M9.94 28.56a14.3 14.3 0 010-9.12l-6.56-5.1a23.97 23.97 0 000 19.32l6.56-5.1z" />
-            <path fill="#EA4335" d="M24 46.5c5.4 0 9.92-1.78 13.22-4.84l-7.2-5.58c-2 1.34-4.56 2.14-6.02 2.14-6.66 0-12.4-3.98-14.06-9.04l-6.56 5.1C7.04 41.22 14.88 46.5 24 46.5z" />
-        </svg>
-    );
-}
\ No newline at end of file
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 48 48"
+      className={className}
+      aria-hidden="true"
+    >
+      <path
+        fill="#4285F4"
+        d="M24 9.5c3.54 0 6.3 1.54 7.74 2.82l5.64-5.64C33.92 3.52 29.4 1.5 24 1.5 14.88 1.5 7.04 6.78 3.38 14.44l6.56 5.1C11.6 13.48 17.34 9.5 24 9.5z"
+      />
+      <path
+        fill="#34A853"
+        d="M46.5 24.5c0-1.34-.12-2.62-.34-3.86H24v7.32h12.7c-.54 2.9-2.18 5.36-4.66 7.02l7.2 5.58c4.2-3.88 6.26-9.6 6.26-16.06z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M9.94 28.56a14.3 14.3 0 010-9.12l-6.56-5.1a23.97 23.97 0 000 19.32l6.56-5.1z"
+      />
+      <path
+        fill="#EA4335"
+        d="M24 46.5c5.4 0 9.92-1.78 13.22-4.84l-7.2-5.58c-2 1.34-4.56 2.14-6.02 2.14-6.66 0-12.4-3.98-14.06-9.04l-6.56 5.1C7.04 41.22 14.88 46.5 24 46.5z"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/components/auth/logoutButton.tsx b/frontend/components/auth/logoutButton.tsx
index c132f1af..5ad86246 100644
--- a/frontend/components/auth/logoutButton.tsx
+++ b/frontend/components/auth/logoutButton.tsx
@@ -1,8 +1,9 @@
 'use client';
 
+import { LogOut } from 'lucide-react';
 import { useLocale } from 'next-intl';
 import { useTranslations } from 'next-intl';
-import { LogOut } from 'lucide-react';
+
 import { logout } from '@/lib/logout';
 
 type LogoutButtonProps = {
@@ -25,7 +26,7 @@ export function LogoutButton({ iconOnly = false }: LogoutButtonProps) {
         onClick={handleLogout}
         aria-label={t('logout')}
         title={t('logout')}
-        className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground active:bg-secondary active:text-foreground"
+        className="text-muted-foreground hover:bg-secondary hover:text-foreground active:bg-secondary active:text-foreground flex h-10 w-10 items-center justify-center rounded-md transition-colors"
       >
         <LogOut className="h-5 w-5" />
       </button>
@@ -36,7 +37,7 @@ export function LogoutButton({ iconOnly = false }: LogoutButtonProps) {
     <button
       type="button"
       onClick={handleLogout}
-      className="group relative inline-flex w-fit items-center gap-2 overflow-hidden rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-all duration-500 hover:text-white active:text-white"
+      className="group bg-secondary text-secondary-foreground relative inline-flex w-fit items-center gap-2 overflow-hidden rounded-lg px-4 py-2 text-sm font-medium transition-all duration-500 hover:text-white active:text-white"
     >
       <span
         className="absolute inset-0 opacity-0 transition-opacity duration-500 ease-out group-hover:opacity-100 group-active:opacity-100"
diff --git a/frontend/components/blog/BlogCard.tsx b/frontend/components/blog/BlogCard.tsx
index b7e09afe..b145a1c4 100644
--- a/frontend/components/blog/BlogCard.tsx
+++ b/frontend/components/blog/BlogCard.tsx
@@ -1,15 +1,17 @@
 'use client';
 
-import { useMemo } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+
 import { formatBlogDate } from '@/lib/blog/date';
+
 import type {
   Author,
-  Post,
   PortableTextBlock,
   PortableTextSpan,
+  Post,
 } from './BlogFilters';
 
 export default function BlogCard({
@@ -57,81 +59,49 @@ export default function BlogCard({
   const categoryLabel = rawCategory ? getCategoryLabel(rawCategory) : undefined;
 
   return (
-    <article
-      className="
-        group
-        bg-transparent
-        border-0
-        shadow-none
-        rounded-none
-        overflow-visible
-        flex flex-col
-        h-full
-        transition
-      "
-    >
+    <article className="group flex h-full flex-col overflow-visible rounded-none border-0 bg-transparent shadow-none transition">
       {post.mainImage && (
         <Link
           href={`/blog/${post.slug.current}`}
-          className="
-            relative w-full aspect-[16/9]
-            overflow-hidden
-            rounded-lg
-            bg-gray-100
-            shadow-[0_8px_24px_rgba(0,0,0,0.08)]
-            dark:border dark:border-[rgba(56,189,248,0.4)] dark:border-[0.5px]
-            transition-transform duration-300
-          "
+          className="relative aspect-[16/9] w-full overflow-hidden rounded-lg bg-gray-100 shadow-[0_8px_24px_rgba(0,0,0,0.08)] transition-transform duration-300 dark:border dark:border-[0.5px] dark:border-[rgba(56,189,248,0.4)]"
         >
           <Image
             src={post.mainImage}
             alt={post.title}
             fill
-            className="object-cover brightness-95 contrast-110 scale-[1.03] transition-transform duration-300 group-hover:scale-[1.06]"
+            className="scale-[1.03] object-cover brightness-95 contrast-110 transition-transform duration-300 group-hover:scale-[1.06]"
             priority={false}
           />
         </Link>
       )}
 
-      <div className="pt-2 px-1 flex flex-col flex-1">
+      <div className="flex flex-1 flex-col px-1 pt-2">
         <Link
           href={`/blog/${post.slug.current}`}
-          className={`
-            block
-            text-[18px] md:text-[22px]
-            font-semibold
-            tracking-tight
-            leading-[1.15]
-            text-gray-950 dark:text-gray-100
-            transition
-            hover:underline
-            group-hover:underline
-            underline-offset-4
-            ${
-              disableHoverColor
-                ? ''
-                : 'hover:text-[var(--accent-primary)] group-hover:text-[var(--accent-primary)]'
-            }
-          `}
+          className={`block text-[18px] leading-[1.15] font-semibold tracking-tight text-gray-950 underline-offset-4 transition group-hover:underline hover:underline md:text-[22px] dark:text-gray-100 ${
+            disableHoverColor
+              ? ''
+              : 'group-hover:text-[var(--accent-primary)] hover:text-[var(--accent-primary)]'
+          } `}
           style={{ fontFamily: 'ui-rounded, system-ui, -apple-system' }}
         >
           {post.title}
         </Link>
 
         {excerpt && (
-          <p className="mt-2 text-[15px] md:text-[16px] leading-[1.55] text-gray-700 dark:text-gray-300 max-w-[60ch] line-clamp-2 whitespace-pre-line">
+          <p className="mt-2 line-clamp-2 max-w-[60ch] text-[15px] leading-[1.55] whitespace-pre-line text-gray-700 md:text-[16px] dark:text-gray-300">
             {excerpt}
           </p>
         )}
 
         <div className="mt-auto pt-3">
           {(post.author?.name || formattedDate || categoryLabel) && (
-            <div className="mb-2 flex flex-wrap items-center gap-2 text-[12px] md:text-[13px] text-gray-500 dark:text-gray-400">
+            <div className="mb-2 flex flex-wrap items-center gap-2 text-[12px] text-gray-500 md:text-[13px] dark:text-gray-400">
               {post.author?.name && (
                 <button
                   type="button"
                   onClick={() => post.author && onAuthorSelect(post.author)}
-                  className="flex items-center gap-2 hover:text-[var(--accent-primary)] hover:underline underline-offset-4 transition"
+                  className="flex items-center gap-2 underline-offset-4 transition hover:text-[var(--accent-primary)] hover:underline"
                 >
                   {post.author?.image && (
                     <span className="relative h-5 w-5 overflow-hidden rounded-full">
diff --git a/frontend/components/blog/BlogCategoryGrid.tsx b/frontend/components/blog/BlogCategoryGrid.tsx
index 2786f4e6..9bad4036 100644
--- a/frontend/components/blog/BlogCategoryGrid.tsx
+++ b/frontend/components/blog/BlogCategoryGrid.tsx
@@ -1,8 +1,9 @@
 'use client';
 
 import { useCallback } from 'react';
-import BlogGrid from '@/components/blog/BlogGrid';
+
 import type { Author, Post } from '@/components/blog/BlogFilters';
+import BlogGrid from '@/components/blog/BlogGrid';
 import { useRouter } from '@/i18n/routing';
 
 export function BlogCategoryGrid({ posts }: { posts: Post[] }) {
diff --git a/frontend/components/blog/BlogCategoryLinks.tsx b/frontend/components/blog/BlogCategoryLinks.tsx
index 1289dfee..cff9cd4a 100644
--- a/frontend/components/blog/BlogCategoryLinks.tsx
+++ b/frontend/components/blog/BlogCategoryLinks.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import { useTranslations } from 'next-intl';
-import { usePathname } from '@/i18n/routing';
 import { Home } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { useTranslations } from 'next-intl';
+
 import { AnimatedNavLink } from '@/components/shared/AnimatedNavLink';
 import { HeaderButton } from '@/components/shared/HeaderButton';
+import { usePathname } from '@/i18n/routing';
+import { cn } from '@/lib/utils';
 
 type Category = {
   _id: string;
diff --git a/frontend/components/blog/BlogFilters.tsx b/frontend/components/blog/BlogFilters.tsx
index 2fc10216..ed127b2f 100644
--- a/frontend/components/blog/BlogFilters.tsx
+++ b/frontend/components/blog/BlogFilters.tsx
@@ -1,24 +1,25 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Image from 'next/image';
-import { useLocale, useTranslations } from 'next-intl';
-import { useSearchParams } from 'next/navigation';
 import {
   Dribbble,
   Facebook,
   Github,
   Globe,
   Instagram,
-  Linkedin,
   Link as LinkIcon,
+  Linkedin,
   Send,
   Twitter,
   Youtube,
 } from 'lucide-react';
-import { usePathname, useRouter } from '@/i18n/routing';
+import Image from 'next/image';
+import { useSearchParams } from 'next/navigation';
+import { useLocale, useTranslations } from 'next-intl';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
 import BlogGrid from '@/components/blog/BlogGrid';
 import { BlogPagination } from '@/components/blog/BlogPagination';
+import { usePathname, useRouter } from '@/i18n/routing';
 import { Link } from '@/i18n/routing';
 import { formatBlogDate } from '@/lib/blog/date';
 
@@ -304,7 +305,7 @@ export default function BlogFilters({
         params.set('page', String(page));
       }
       const nextPath = params.toString() ? `${pathname}?${params}` : pathname;
-    router.replace(nextPath, { scroll: false });
+      router.replace(nextPath, { scroll: false });
     },
     [pathname, router, searchParams]
   );
@@ -441,7 +442,10 @@ export default function BlogFilters({
       return true;
     });
   }, [posts, resolvedAuthor, resolvedCategory, searchQueryNormalized]);
-  const totalPages = Math.max(1, Math.ceil(filteredPosts.length / POSTS_PER_PAGE));
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredPosts.length / POSTS_PER_PAGE)
+  );
   const paginatedPosts = useMemo(() => {
     const start = (currentPage - 1) * POSTS_PER_PAGE;
     return filteredPosts.slice(start, start + POSTS_PER_PAGE);
@@ -490,34 +494,38 @@ export default function BlogFilters({
                 href={`/blog/${featuredPost.slug.current}`}
                 className="group block"
               >
-                <div className="overflow-hidden rounded-3xl shadow-[0_12px_30px_rgba(0,0,0,0.12)] h-[300px] sm:h-[340px] md:h-full md:min-h-[400px] lg:min-h-[440px] border-0">
+                <div className="h-[300px] overflow-hidden rounded-3xl border-0 shadow-[0_12px_30px_rgba(0,0,0,0.12)] sm:h-[340px] md:h-full md:min-h-[400px] lg:min-h-[440px]">
                   <img
                     src={featuredPost.mainImage}
                     alt={featuredPost.title}
-                    className="block w-full h-full object-cover transition-transform duration-300 scale-[1.02] group-hover:scale-[1.05] border-0"
+                    className="block h-full w-full scale-[1.02] border-0 object-cover transition-transform duration-300 group-hover:scale-[1.05]"
                   />
                 </div>
               </Link>
             )}
-            <div className="relative flex flex-col h-full pt-8">
+            <div className="relative flex h-full flex-col pt-8">
               {featuredPost.categories?.[0] && (
-                <div className="absolute top-0 left-0 text-xs font-bold uppercase tracking-[0.2em] text-[var(--accent-primary)]">
-                  {getCategoryLabel(featuredPost.categories[0] === 'Growth' ? 'Career' : featuredPost.categories[0])}
+                <div className="absolute top-0 left-0 text-xs font-bold tracking-[0.2em] text-[var(--accent-primary)] uppercase">
+                  {getCategoryLabel(
+                    featuredPost.categories[0] === 'Growth'
+                      ? 'Career'
+                      : featuredPost.categories[0]
+                  )}
                 </div>
               )}
               <div className="my-auto">
                 <Link
                   href={`/blog/${featuredPost.slug.current}`}
-                  className="mt-3 block text-3xl font-semibold leading-tight text-gray-900 transition hover:underline underline-offset-4 dark:text-gray-100 md:text-4xl"
+                  className="mt-3 block text-3xl leading-tight font-semibold text-gray-900 underline-offset-4 transition hover:underline md:text-4xl dark:text-gray-100"
                 >
                   {featuredPost.title}
                 </Link>
-                <p className="mt-4 text-base leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-3 whitespace-pre-line">
+                <p className="mt-4 line-clamp-3 text-base leading-relaxed whitespace-pre-line text-gray-600 dark:text-gray-400">
                   {plainTextExcerpt(featuredPost.body)}
                 </p>
               </div>
               {featuredPost.publishedAt && (
-                <div className="mt-auto pt-8 flex items-center justify-between text-xs tracking-[0.25em] text-gray-500 dark:text-gray-400">
+                <div className="mt-auto flex items-center justify-between pt-8 text-xs tracking-[0.25em] text-gray-500 dark:text-gray-400">
                   <time
                     dateTime={featuredPost.publishedAt}
                     className="uppercase"
@@ -526,7 +534,7 @@ export default function BlogFilters({
                   </time>
                   <Link
                     href={`/blog/${featuredPost.slug.current}`}
-                    className="text-sm font-medium tracking-normal text-[var(--accent-primary)] transition hover:underline underline-offset-4"
+                    className="text-sm font-medium tracking-normal text-[var(--accent-primary)] underline-offset-4 transition hover:underline"
                   >
                     {t('readMore')} <span aria-hidden="true">→</span>
                   </Link>
@@ -543,7 +551,7 @@ export default function BlogFilters({
             <button
               type="button"
               onClick={clearAll}
-              className="transition hover:text-[var(--accent-primary)] hover:underline underline-offset-4"
+              className="underline-offset-4 transition hover:text-[var(--accent-primary)] hover:underline"
             >
               {tNav('blog')}
             </button>
@@ -569,7 +577,7 @@ export default function BlogFilters({
                 {selectedAuthorData.name && (
                   <h2
                     ref={authorHeadingRef}
-                    className="text-2xl font-semibold text-gray-900 dark:text-gray-100 scroll-mt-24"
+                    className="scroll-mt-24 text-2xl font-semibold text-gray-900 dark:text-gray-100"
                   >
                     {selectedAuthorData.name}
                   </h2>
@@ -588,7 +596,7 @@ export default function BlogFilters({
                   </p>
                 )}
                 {authorBioText && (
-                  <p className="mt-3 whitespace-pre-line text-sm leading-relaxed text-gray-600 dark:text-gray-400">
+                  <p className="mt-3 text-sm leading-relaxed whitespace-pre-line text-gray-600 dark:text-gray-400">
                     {authorBioText}
                   </p>
                 )}
@@ -602,7 +610,7 @@ export default function BlogFilters({
                           href={item.url}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="group inline-flex items-center gap-2 rounded-full border border-gray-200 px-3 py-1 text-xs text-gray-600 transition hover:text-[var(--accent-primary)] hover:border-[var(--accent-primary)] dark:border-gray-700 dark:text-gray-300 dark:hover:text-[var(--accent-primary)] dark:hover:border-[var(--accent-primary)]"
+                          className="group inline-flex items-center gap-2 rounded-full border border-gray-200 px-3 py-1 text-xs text-gray-600 transition hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] dark:border-gray-700 dark:text-gray-300 dark:hover:border-[var(--accent-primary)] dark:hover:text-[var(--accent-primary)]"
                         >
                           <SocialIcon platform={item.platform} />
                           {item.platform || 'link'}
@@ -638,8 +646,8 @@ export default function BlogFilters({
               onClick={() => setSelectedCategory(null)}
               className={
                 !resolvedCategory
-                  ? 'rounded-full border border-transparent px-4 py-2 text-sm font-medium text-[var(--accent-primary)] transition whitespace-nowrap sm:border-[var(--accent-primary)]'
-                  : 'rounded-full border border-transparent px-4 py-2 text-sm text-gray-600 transition whitespace-nowrap dark:text-gray-300 sm:border-gray-300 sm:text-gray-700 sm:dark:border-gray-700 sm:dark:text-gray-200 hover:bg-secondary hover:text-foreground'
+                  ? 'rounded-full border border-transparent px-4 py-2 text-sm font-medium whitespace-nowrap text-[var(--accent-primary)] transition sm:border-[var(--accent-primary)]'
+                  : 'hover:bg-secondary hover:text-foreground rounded-full border border-transparent px-4 py-2 text-sm whitespace-nowrap text-gray-600 transition sm:border-gray-300 sm:text-gray-700 dark:text-gray-300 sm:dark:border-gray-700 sm:dark:text-gray-200'
               }
             >
               {t('all')}
@@ -657,8 +665,8 @@ export default function BlogFilters({
                 }
                 className={
                   resolvedCategory?.norm === category.norm
-                    ? 'rounded-full border border-transparent px-4 py-2 text-sm font-medium text-[var(--accent-primary)] transition whitespace-nowrap sm:border-[var(--accent-primary)]'
-                    : 'rounded-full border border-transparent px-4 py-2 text-sm text-gray-600 transition whitespace-nowrap dark:text-gray-300 sm:border-gray-300 sm:text-gray-700 sm:dark:border-gray-700 sm:dark:text-gray-200 hover:bg-secondary hover:text-foreground'
+                    ? 'rounded-full border border-transparent px-4 py-2 text-sm font-medium whitespace-nowrap text-[var(--accent-primary)] transition sm:border-[var(--accent-primary)]'
+                    : 'hover:bg-secondary hover:text-foreground rounded-full border border-transparent px-4 py-2 text-sm whitespace-nowrap text-gray-600 transition sm:border-gray-300 sm:text-gray-700 dark:text-gray-300 sm:dark:border-gray-700 sm:dark:text-gray-200'
                 }
               >
                 {getCategoryLabel(category.name)}
diff --git a/frontend/components/blog/BlogGrid.tsx b/frontend/components/blog/BlogGrid.tsx
index 9c0fc7b7..f02160bf 100644
--- a/frontend/components/blog/BlogGrid.tsx
+++ b/frontend/components/blog/BlogGrid.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
+
 import BlogCard from '@/components/blog/BlogCard';
 import type { Author, Post } from '@/components/blog/BlogFilters';
 
@@ -20,7 +21,7 @@ export default function BlogGrid({
   }
 
   return (
-    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-12">
+    <div className="grid gap-12 sm:grid-cols-2 lg:grid-cols-3">
       {posts.map(post => (
         <BlogCard
           key={post._id}
diff --git a/frontend/components/blog/BlogHeaderSearch.tsx b/frontend/components/blog/BlogHeaderSearch.tsx
index c934883f..c73d34f7 100644
--- a/frontend/components/blog/BlogHeaderSearch.tsx
+++ b/frontend/components/blog/BlogHeaderSearch.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { useEffect, useMemo, useRef, useState } from 'react';
 import { Search } from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
 import { useRouter } from '@/i18n/routing';
 
 type PostSearchItem = {
@@ -101,7 +102,9 @@ export function BlogHeaderSearch() {
     if (debounceRef.current) window.clearTimeout(debounceRef.current);
     debounceRef.current = window.setTimeout(() => {
       const query = value.trim();
-      router.replace(query ? `/blog?search=${encodeURIComponent(query)}` : '/blog');
+      router.replace(
+        query ? `/blog?search=${encodeURIComponent(query)}` : '/blog'
+      );
     }, 300);
     return () => {
       if (debounceRef.current) window.clearTimeout(debounceRef.current);
@@ -158,7 +161,7 @@ export function BlogHeaderSearch() {
             return next;
           })
         }
-        className="flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+        className="text-muted-foreground hover:bg-secondary hover:text-foreground flex h-9 w-9 items-center justify-center rounded-md transition-colors"
         aria-label={tAria('searchBlog')}
       >
         <Search className="h-4 w-4" aria-hidden="true" />
@@ -167,7 +170,7 @@ export function BlogHeaderSearch() {
       {open && (
         <div
           id="wrap"
-          className="absolute right-0 top-12 z-50 w-72 overflow-hidden rounded-lg border border-border bg-background shadow-lg"
+          className="border-border bg-background absolute top-12 right-0 z-50 w-72 overflow-hidden rounded-lg border shadow-lg"
         >
           <form
             action=""
@@ -188,22 +191,24 @@ export function BlogHeaderSearch() {
                   startLoading();
                 }
               }}
-                onKeyDown={event => {
-                  if (event.key === 'Escape') setOpen(false);
-                }}
+              onKeyDown={event => {
+                if (event.key === 'Escape') setOpen(false);
+              }}
               placeholder={t('searchPlaceholder')}
-              className="w-full bg-transparent text-sm text-foreground outline-none"
-              style={{ fontFamily: 'Lato, system-ui, -apple-system, sans-serif' }}
+              className="text-foreground w-full bg-transparent text-sm outline-none"
+              style={{
+                fontFamily: 'Lato, system-ui, -apple-system, sans-serif',
+              }}
             />
             <input
               id="search_submit"
               value=""
               type="submit"
-              className="text-sm font-medium text-muted-foreground hover:text-foreground"
+              className="text-muted-foreground hover:text-foreground text-sm font-medium"
             />
           </form>
           {value && results.length > 0 && (
-            <div className="max-h-56 overflow-auto border-t border-border py-2">
+            <div className="border-border max-h-56 overflow-auto border-t py-2">
               {results.map(result => (
                 <button
                   key={result._id}
@@ -219,13 +224,13 @@ export function BlogHeaderSearch() {
                     }
                     setOpen(false);
                   }}
-                  className="block w-full px-3 py-2 text-left text-sm text-muted-foreground hover:bg-secondary hover:text-foreground"
+                  className="text-muted-foreground hover:bg-secondary hover:text-foreground block w-full px-3 py-2 text-left text-sm"
                 >
-                  <div className="font-medium text-foreground">
+                  <div className="text-foreground font-medium">
                     {result.title}
                   </div>
                   {result.snippet && (
-                    <div className="mt-1 text-xs text-muted-foreground">
+                    <div className="text-muted-foreground mt-1 text-xs">
                       {result.snippet}
                     </div>
                   )}
@@ -234,7 +239,7 @@ export function BlogHeaderSearch() {
             </div>
           )}
           {value && !results.length && !isLoading && (
-            <div className="border-t border-border px-3 py-2 text-xs text-muted-foreground">
+            <div className="border-border text-muted-foreground border-t px-3 py-2 text-xs">
               {t('noMatches')}
             </div>
           )}
diff --git a/frontend/components/blog/BlogNavLinks.tsx b/frontend/components/blog/BlogNavLinks.tsx
index b2cb7456..45c90c56 100644
--- a/frontend/components/blog/BlogNavLinks.tsx
+++ b/frontend/components/blog/BlogNavLinks.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
-import { usePathname, Link } from '@/i18n/routing';
-import { useSearchParams } from 'next/navigation';
 import groq from 'groq';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+
 import { client } from '@/client';
+import { Link,usePathname } from '@/i18n/routing';
 import { cn } from '@/lib/utils';
 
 type Category = {
@@ -80,7 +81,9 @@ export function BlogNavLinks({
           aria-current={category.isActive ? 'page' : undefined}
           className={cn(
             baseLink,
-            category.isActive ? 'bg-muted text-foreground' : 'text-muted-foreground'
+            category.isActive
+              ? 'bg-muted text-foreground'
+              : 'text-muted-foreground'
           )}
         >
           {category.title}
diff --git a/frontend/components/blog/BlogPageHeader.tsx b/frontend/components/blog/BlogPageHeader.tsx
index 3a2ff306..df3c07cc 100644
--- a/frontend/components/blog/BlogPageHeader.tsx
+++ b/frontend/components/blog/BlogPageHeader.tsx
@@ -14,7 +14,7 @@ export function BlogPageHeader({ title, subtitle }: BlogPageHeaderProps) {
 
   return (
     <>
-      <h1 className="text-5xl font-extrabold mb-3 text-center leading-[1.1] bg-gradient-to-b from-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-[var(--accent-hover)] bg-clip-text text-transparent">
+      <h1 className="mb-3 bg-gradient-to-b from-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-[var(--accent-hover)] bg-clip-text text-center text-5xl leading-[1.1] font-extrabold text-transparent">
         {title}
       </h1>
       <p className="mx-auto mb-10 max-w-2xl text-center text-base text-gray-500 dark:text-gray-400">
diff --git a/frontend/components/blog/BlogPagination.tsx b/frontend/components/blog/BlogPagination.tsx
index e65e3e65..9101bb5c 100644
--- a/frontend/components/blog/BlogPagination.tsx
+++ b/frontend/components/blog/BlogPagination.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
 import { cn } from '@/lib/utils';
 
 interface BlogPaginationProps {
@@ -73,7 +74,7 @@ export function BlogPagination({
 
   return (
     <nav
-      className="flex items-center justify-center gap-1 mt-8 sm:gap-2"
+      className="mt-8 flex items-center justify-center gap-1 sm:gap-2"
       style={
         {
           '--qa-accent': accentColor,
@@ -87,18 +88,18 @@ export function BlogPagination({
         onClick={() => onPageChange(currentPage - 1)}
         disabled={currentPage === 1}
         className={cn(
-          'px-2 py-2 text-sm font-medium rounded-lg transition-colors sm:px-3',
+          'rounded-lg px-2 py-2 text-sm font-medium transition-colors sm:px-3',
           'border border-gray-300 bg-white/90 dark:border-gray-700 dark:bg-neutral-900/80',
           currentPage === 1
-            ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
-            : 'text-gray-700 dark:text-gray-300 hover:bg-[var(--qa-accent-soft)]'
+            ? 'cursor-not-allowed text-gray-400 dark:text-gray-600'
+            : 'text-gray-700 hover:bg-[var(--qa-accent-soft)] dark:text-gray-300'
         )}
         aria-label={t('previousPage')}
       >
         ← <span className="hidden sm:inline">{t('previous')}</span>
       </button>
 
-      <div className="flex items-center gap-1 mx-1 sm:mx-2">
+      <div className="mx-1 flex items-center gap-1 sm:mx-2">
         {pages.map((page, index) =>
           page === 'ellipsis' ? (
             <span
@@ -113,10 +114,10 @@ export function BlogPagination({
               onClick={() => onPageChange(page)}
               disabled={page === currentPage}
               className={cn(
-                'min-w-[40px] px-3 py-2 text-sm font-medium rounded-lg transition-colors border border-transparent overflow-hidden bg-white/90 dark:bg-neutral-900/80',
+                'min-w-[40px] overflow-hidden rounded-lg border border-transparent bg-white/90 px-3 py-2 text-sm font-medium transition-colors dark:bg-neutral-900/80',
                 page === currentPage
-                  ? 'shadow-sm text-gray-700 dark:text-gray-300'
-                  : 'text-gray-700 dark:text-gray-300 hover:bg-[var(--qa-accent-soft)]'
+                  ? 'text-gray-700 shadow-sm dark:text-gray-300'
+                  : 'text-gray-700 hover:bg-[var(--qa-accent-soft)] dark:text-gray-300'
               )}
               style={
                 page === currentPage
@@ -140,11 +141,11 @@ export function BlogPagination({
         onClick={() => onPageChange(currentPage + 1)}
         disabled={currentPage === totalPages}
         className={cn(
-          'px-2 py-2 text-sm font-medium rounded-lg transition-colors sm:px-3',
+          'rounded-lg px-2 py-2 text-sm font-medium transition-colors sm:px-3',
           'border border-gray-300 bg-white/90 dark:border-gray-700 dark:bg-neutral-900/80',
           currentPage === totalPages
-            ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
-            : 'text-gray-700 dark:text-gray-300 hover:bg-[var(--qa-accent-soft)]'
+            ? 'cursor-not-allowed text-gray-400 dark:text-gray-600'
+            : 'text-gray-700 hover:bg-[var(--qa-accent-soft)] dark:text-gray-300'
         )}
         aria-label={t('nextPage')}
       >
diff --git a/frontend/components/blog/FeaturedPostCtaButton.tsx b/frontend/components/blog/FeaturedPostCtaButton.tsx
index 76d3fe3f..20a41444 100644
--- a/frontend/components/blog/FeaturedPostCtaButton.tsx
+++ b/frontend/components/blog/FeaturedPostCtaButton.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { ArrowUpRight } from 'lucide-react';
+
 import { HeaderButton } from '@/components/shared/HeaderButton';
 
 type FeaturedPostCtaButtonProps = {
diff --git a/frontend/components/dashboard/ProfileCard.tsx b/frontend/components/dashboard/ProfileCard.tsx
index 1eb2b638..c5c276d0 100644
--- a/frontend/components/dashboard/ProfileCard.tsx
+++ b/frontend/components/dashboard/ProfileCard.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { useTranslations } from "next-intl";
+import { useTranslations } from 'next-intl';
 
 interface ProfileCardProps {
   user: {
@@ -14,7 +14,7 @@ interface ProfileCardProps {
 }
 
 export function ProfileCard({ user, locale }: ProfileCardProps) {
-  const t = useTranslations("dashboard.profile");
+  const t = useTranslations('dashboard.profile');
 
   const cardStyles = `
     relative overflow-hidden rounded-[2rem]
@@ -29,10 +29,10 @@ export function ProfileCard({ user, locale }: ProfileCardProps) {
     <section className={cardStyles} aria-labelledby="profile-heading">
       <div className="flex items-start gap-6">
         <div
-          className="relative p-[3px] rounded-full bg-gradient-to-br from-sky-400 to-pink-400"
+          className="relative rounded-full bg-gradient-to-br from-sky-400 to-pink-400 p-[3px]"
           aria-hidden="true"
         >
-          <div className="h-20 w-20 rounded-full bg-white dark:bg-slate-900 flex items-center justify-center text-3xl font-bold text-slate-700 dark:text-slate-200">
+          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-white text-3xl font-bold text-slate-700 dark:bg-slate-900 dark:text-slate-200">
             {user.name?.[0]?.toUpperCase() || user.email[0].toUpperCase()}
           </div>
         </div>
@@ -42,33 +42,33 @@ export function ProfileCard({ user, locale }: ProfileCardProps) {
             id="profile-heading"
             className="text-2xl font-bold text-slate-800 dark:text-slate-100"
           >
-            {user.name || t("defaultName")}
+            {user.name || t('defaultName')}
           </h2>
-          <p className="text-slate-500 dark:text-slate-400 text-sm font-mono">
+          <p className="font-mono text-sm text-slate-500 dark:text-slate-400">
             {user.email}
           </p>
 
-          <div className="mt-3 inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-sky-100 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300">
-            {user.role || t("defaultRole")}
+          <div className="mt-3 inline-flex items-center rounded-full bg-sky-100 px-3 py-1 text-xs font-bold tracking-wider text-sky-700 uppercase dark:bg-sky-900/30 dark:text-sky-300">
+            {user.role || t('defaultRole')}
           </div>
         </div>
       </div>
 
-      <dl className="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800/50 grid grid-cols-2 gap-6">
+      <dl className="mt-8 grid grid-cols-2 gap-6 border-t border-slate-100 pt-6 dark:border-slate-800/50">
         <div>
-          <dt className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
-            {t("totalPoints")}
+          <dt className="text-xs font-semibold tracking-wider text-slate-400 uppercase">
+            {t('totalPoints')}
           </dt>
 
-          <dd className="text-3xl font-black text-slate-800 dark:text-white mt-1">
+          <dd className="mt-1 text-3xl font-black text-slate-800 dark:text-white">
             {user.points}
           </dd>
         </div>
         <div>
-          <dt className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
-            {t("joined")}
+          <dt className="text-xs font-semibold tracking-wider text-slate-400 uppercase">
+            {t('joined')}
           </dt>
-          <dd className="text-lg font-medium text-slate-700 dark:text-slate-300 mt-2">
+          <dd className="mt-2 text-lg font-medium text-slate-700 dark:text-slate-300">
             {user.createdAt
               ? new Date(user.createdAt).toLocaleDateString(locale)
               : '-'}
diff --git a/frontend/components/dashboard/QuizSavedBanner.tsx b/frontend/components/dashboard/QuizSavedBanner.tsx
index 20c6e4eb..8f7b95ff 100644
--- a/frontend/components/dashboard/QuizSavedBanner.tsx
+++ b/frontend/components/dashboard/QuizSavedBanner.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
-import { Link } from '@/i18n/routing'
+import { useEffect, useState } from 'react';
+
+import { Link } from '@/i18n/routing';
 
 interface SavedQuizInfo {
   score: number;
@@ -19,43 +20,54 @@ export function QuizSavedBanner() {
   useEffect(() => {
     const saved = sessionStorage.getItem('quiz_just_saved');
     if (saved) {
-       try {
-       setInfo(JSON.parse(saved));
+      try {
+        setInfo(JSON.parse(saved));
         sessionStorage.removeItem('quiz_just_saved');
-     } catch (error) {
-       console.error('Failed to parse quiz_just_saved from sessionStorage:', error);
-      sessionStorage.removeItem('quiz_just_saved');
-    }
+      } catch (error) {
+        console.error(
+          'Failed to parse quiz_just_saved from sessionStorage:',
+          error
+        );
+        sessionStorage.removeItem('quiz_just_saved');
+      }
     }
   }, []);
 
   if (!info) return null;
 
   return (
-    <div className="mb-6 p-4 rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
-      <div className="text-center space-y-2">
-        <p className="text-green-800 dark:text-green-200 font-medium text-lg">
+    <div className="mb-6 rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-900/20">
+      <div className="space-y-2 text-center">
+        <p className="text-lg font-medium text-green-800 dark:text-green-200">
           🎉 {t('title')}
         </p>
         <p className="text-green-700 dark:text-green-300">
-          {t('scored')} <strong>{info.score}/{info.total}</strong> ({info.percentage.toFixed(0)}%)
+          {t('scored')}{' '}
+          <strong>
+            {info.score}/{info.total}
+          </strong>{' '}
+          ({info.percentage.toFixed(0)}%)
           {info.pointsAwarded > 0 && (
-            <> • <strong>{t('pointsAwarded', { points: info.pointsAwarded })}</strong></>
-          )}
-          {info.pointsAwarded === 0 && (
-            <> • {t('noPoints')}</>
+            <>
+              {' '}
+              •{' '}
+              <strong>
+                {t('pointsAwarded', { points: info.pointsAwarded })}
+              </strong>
+            </>
           )}
+          {info.pointsAwarded === 0 && <> • {t('noPoints')}</>}
         </p>
-        <div className="flex gap-3 justify-center pt-2">
+        <div className="flex justify-center gap-3 pt-2">
           <Link
             href="/leaderboard"
-            className="text-green-600 dark:text-green-400 underline hover:no-underline"
+            className="text-green-600 underline hover:no-underline dark:text-green-400"
           >
             {t('viewLeaderboard')}
           </Link>
           <Link
             href={`/quiz/${info.quizSlug}`}
-            className="text-green-600 dark:text-green-400 underline hover:no-underline"
+            className="text-green-600 underline hover:no-underline dark:text-green-400"
           >
             {t('tryAgain')}
           </Link>
diff --git a/frontend/components/dashboard/StatsCard.tsx b/frontend/components/dashboard/StatsCard.tsx
index 7cfb19d3..b0cb5b77 100644
--- a/frontend/components/dashboard/StatsCard.tsx
+++ b/frontend/components/dashboard/StatsCard.tsx
@@ -1,8 +1,9 @@
-"use client";
+'use client';
+
+import { History,TrendingUp } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
-import { useTranslations } from "next-intl";
 import { Link } from '@/i18n/routing';
-import { TrendingUp, History } from 'lucide-react';
 
 interface StatsCardProps {
   stats?: {
@@ -13,7 +14,7 @@ interface StatsCardProps {
 }
 
 export function StatsCard({ stats }: StatsCardProps) {
-  const t = useTranslations("dashboard.stats");
+  const t = useTranslations('dashboard.stats');
   const hasActivity = stats && stats.totalAttempts > 0;
 
   const cardStyles = `
@@ -38,7 +39,7 @@ export function StatsCard({ stats }: StatsCardProps) {
   return (
     <section className={cardStyles} aria-labelledby="stats-heading">
       <div
-        className="mb-6 p-4 rounded-full bg-slate-50 dark:bg-slate-800/50 shadow-inner"
+        className="mb-6 rounded-full bg-slate-50 p-4 shadow-inner dark:bg-slate-800/50"
         aria-hidden="true"
       >
         <span className="text-4xl">📊</span>
@@ -46,38 +47,38 @@ export function StatsCard({ stats }: StatsCardProps) {
 
       <h3
         id="stats-heading"
-        className="text-xl font-bold text-slate-800 dark:text-slate-100 mb-2"
+        className="mb-2 text-xl font-bold text-slate-800 dark:text-slate-100"
       >
-        {t("title")}
+        {t('title')}
       </h3>
 
       {!hasActivity ? (
         <>
-          <p className="text-slate-500 dark:text-slate-400 mb-8 max-w-xs mx-auto">
-            {t("noActivity")}
+          <p className="mx-auto mb-8 max-w-xs text-slate-500 dark:text-slate-400">
+            {t('noActivity')}
           </p>
           <Link href="/quizzes" className={primaryBtnStyles}>
-            <span className="relative z-10">{t("startQuiz")}</span>
+            <span className="relative z-10">{t('startQuiz')}</span>
             <span
-              className="absolute inset-0 rounded-full bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"
+              className="absolute inset-0 rounded-full bg-gradient-to-r from-white/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100"
               aria-hidden="true"
             />
           </Link>
         </>
       ) : (
-        <dl className="w-full grid grid-cols-2 gap-4 mt-2">
-          <div className="p-4 rounded-2xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700">
-            <dt className="flex items-center justify-center gap-2 text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">
-              <History className="w-3 h-3" /> {t("attempts")}
+        <dl className="mt-2 grid w-full grid-cols-2 gap-4">
+          <div className="rounded-2xl border border-slate-100 bg-slate-50/50 p-4 dark:border-slate-700 dark:bg-slate-800/50">
+            <dt className="mb-1 flex items-center justify-center gap-2 text-xs font-semibold tracking-wider text-slate-400 uppercase">
+              <History className="h-3 w-3" /> {t('attempts')}
             </dt>
             <dd className="text-2xl font-black text-slate-800 dark:text-white">
               {stats?.totalAttempts}
             </dd>
           </div>
 
-          <div className="p-4 rounded-2xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700">
-            <dt className="flex items-center justify-center gap-2 text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">
-              <TrendingUp className="w-3 h-3" /> {t("avgScore")}
+          <div className="rounded-2xl border border-slate-100 bg-slate-50/50 p-4 dark:border-slate-700 dark:bg-slate-800/50">
+            <dt className="mb-1 flex items-center justify-center gap-2 text-xs font-semibold tracking-wider text-slate-400 uppercase">
+              <TrendingUp className="h-3 w-3" /> {t('avgScore')}
             </dt>
             <dd className="text-2xl font-black text-slate-800 dark:text-white">
               {stats?.averageScore}%
@@ -86,7 +87,7 @@ export function StatsCard({ stats }: StatsCardProps) {
 
           <div className="col-span-2 mt-4">
             <Link href="/q&a" className={primaryBtnStyles}>
-              <span className="relative z-10">{t("continueLearning")}</span>
+              <span className="relative z-10">{t('continueLearning')}</span>
             </Link>
           </div>
         </dl>
diff --git a/frontend/components/header/AppChrome.tsx b/frontend/components/header/AppChrome.tsx
index aca5f3b8..7689c93a 100644
--- a/frontend/components/header/AppChrome.tsx
+++ b/frontend/components/header/AppChrome.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import React from 'react';
 import { useSelectedLayoutSegments } from 'next/navigation';
+import React from 'react';
 
 import { UnifiedHeader } from '@/components/header/UnifiedHeader';
 import { CartProvider } from '@/components/shop/CartProvider';
diff --git a/frontend/components/header/AppMobileMenu.tsx b/frontend/components/header/AppMobileMenu.tsx
index 78bf4d13..e1252e62 100644
--- a/frontend/components/header/AppMobileMenu.tsx
+++ b/frontend/components/header/AppMobileMenu.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import { Menu, X, LogIn, ShoppingBag, Home } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslations } from 'next-intl';
+import { Home,LogIn, Menu, ShoppingBag, X } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
-import { Link, usePathname } from '@/i18n/routing';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
 
-import { SITE_LINKS } from '@/lib/navigation';
 import { LogoutButton } from '@/components/auth/logoutButton';
 import { HeaderButton } from '@/components/shared/HeaderButton';
+import { Link, usePathname } from '@/i18n/routing';
+import { SITE_LINKS } from '@/lib/navigation';
 
 export type AppMobileMenuVariant = 'platform' | 'shop' | 'blog';
 
@@ -79,12 +79,27 @@ export function AppMobileMenu({
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [open]);
 
-  const shopLinks = useMemo(() => [
-    { href: '/shop/products', label: tProducts('title'), category: null },
-    { href: '/shop/products?category=apparel', label: tCategories('apparel'), category: 'apparel' },
-    { href: '/shop/products?category=lifestyle', label: tCategories('lifestyle'), category: 'lifestyle' },
-    { href: '/shop/products?category=collectibles', label: tCategories('collectibles'), category: 'collectibles' },
-  ], [tProducts, tCategories]);
+  const shopLinks = useMemo(
+    () => [
+      { href: '/shop/products', label: tProducts('title'), category: null },
+      {
+        href: '/shop/products?category=apparel',
+        label: tCategories('apparel'),
+        category: 'apparel',
+      },
+      {
+        href: '/shop/products?category=lifestyle',
+        label: tCategories('lifestyle'),
+        category: 'lifestyle',
+      },
+      {
+        href: '/shop/products?category=collectibles',
+        label: tCategories('collectibles'),
+        category: 'collectibles',
+      },
+    ],
+    [tProducts, tCategories]
+  );
 
   const links = useMemo(() => {
     if (variant === 'shop') return shopLinks;
@@ -131,7 +146,7 @@ export function AppMobileMenu({
       <button
         type="button"
         onClick={toggle}
-        className="flex h-9 w-9 items-center justify-center rounded-md transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary"
+        className="focus-visible:ring-accent-primary flex h-9 w-9 items-center justify-center rounded-md transition-colors focus:outline-none focus-visible:ring-2"
         style={{
           color: open ? 'var(--accent-primary)' : 'var(--muted-foreground)',
         }}
@@ -145,7 +160,7 @@ export function AppMobileMenu({
       {open && (
         <>
           <div
-            className={`fixed inset-x-0 top-16 bottom-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden transition-opacity duration-200 ${
+            className={`fixed inset-x-0 top-16 bottom-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity duration-200 lg:hidden ${
               isAnimating ? 'opacity-100' : 'opacity-0'
             }`}
             onClick={close}
@@ -154,7 +169,7 @@ export function AppMobileMenu({
 
           <nav
             id="app-mobile-nav"
-            className={`fixed left-0 right-0 top-16 z-50 h-[calc(100dvh-4rem)] overflow-y-auto bg-background px-4 sm:px-6 lg:px-8 py-4 lg:hidden overscroll-contain transition-transform duration-300 ease-out ${
+            className={`bg-background fixed top-16 right-0 left-0 z-50 h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain px-4 py-4 transition-transform duration-300 ease-out sm:px-6 lg:hidden lg:px-8 ${
               isAnimating ? 'translate-y-0' : '-translate-y-4'
             }`}
             style={{
@@ -169,8 +184,11 @@ export function AppMobileMenu({
                     {t('home')}
                   </HeaderButton>
                   {links.map(link => {
-                    const isActive = pathname === '/shop/products' &&
-                      ('category' in link ? link.category === currentCategory : currentCategory === null);
+                    const isActive =
+                      pathname === '/shop/products' &&
+                      ('category' in link
+                        ? link.category === currentCategory
+                        : currentCategory === null);
                     return (
                       <Link
                         key={link.href}
@@ -194,7 +212,8 @@ export function AppMobileMenu({
                     const slug = slugify(category.title || '');
                     const href = `/blog/category/${slug}`;
                     const isActive = pathname === href;
-                    const displayTitle = category.title === 'Growth' ? 'Career' : category.title;
+                    const displayTitle =
+                      category.title === 'Growth' ? 'Career' : category.title;
                     return (
                       <Link
                         key={category._id}
@@ -245,7 +264,7 @@ export function AppMobileMenu({
                 </Link>
               ) : null}
 
-              <div className="my-2 h-px bg-border" />
+              <div className="bg-border my-2 h-px" />
 
               {userExists ? (
                 <>
diff --git a/frontend/components/header/DesktopActions.tsx b/frontend/components/header/DesktopActions.tsx
index 9bb3fbc0..7fbda96c 100644
--- a/frontend/components/header/DesktopActions.tsx
+++ b/frontend/components/header/DesktopActions.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import { useTranslations } from 'next-intl';
 import { LogIn, Settings, User } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
-import { HeaderButton } from '@/components/shared/HeaderButton';
+import { LogoutButton } from '@/components/auth/logoutButton';
+import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
 import { GitHubStarButton } from '@/components/shared/GitHubStarButton';
+import { HeaderButton } from '@/components/shared/HeaderButton';
 import LanguageSwitcher from '@/components/shared/LanguageSwitcher';
-import { LogoutButton } from '@/components/auth/logoutButton';
 import { CartButton } from '@/components/shop/header/CartButton';
-import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
 
 type DesktopActionsProps = {
   variant: 'platform' | 'shop' | 'blog';
diff --git a/frontend/components/header/DesktopNav.tsx b/frontend/components/header/DesktopNav.tsx
index 2041273f..2b82ebe0 100644
--- a/frontend/components/header/DesktopNav.tsx
+++ b/frontend/components/header/DesktopNav.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { useTranslations } from 'next-intl';
 import { ShoppingBag } from 'lucide-react';
-import { SITE_LINKS } from '@/lib/navigation';
+import { useTranslations } from 'next-intl';
 
+import { BlogCategoryLinks } from '@/components/blog/BlogCategoryLinks';
 import { NavLink } from '@/components/header/NavLink';
 import { HeaderButton } from '@/components/shared/HeaderButton';
 import { NavLinks } from '@/components/shop/header/NavLinks';
-import { BlogCategoryLinks } from '@/components/blog/BlogCategoryLinks';
+import { SITE_LINKS } from '@/lib/navigation';
 
 type Category = {
   _id: string;
diff --git a/frontend/components/header/MainSwitcher.tsx b/frontend/components/header/MainSwitcher.tsx
index 47d7c045..951d0bd3 100644
--- a/frontend/components/header/MainSwitcher.tsx
+++ b/frontend/components/header/MainSwitcher.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import type { ReactNode } from 'react';
 import { usePathname } from 'next/navigation';
+import type { ReactNode } from 'react';
+
 import { UnifiedHeader } from '@/components/header/UnifiedHeader';
 
 function isShopPath(pathname: string): boolean {
@@ -55,7 +56,7 @@ export function MainSwitcher({
           showAdminLink={showAdminLink}
           blogCategories={blogCategories}
         />
-        <main className="mx-auto px-4 sm:px-6 lg:px-8 min-h-[80vh]">
+        <main className="mx-auto min-h-[80vh] px-4 sm:px-6 lg:px-8">
           {children}
         </main>
       </>
@@ -63,7 +64,7 @@ export function MainSwitcher({
   }
 
   return (
-    <main className={isQa || isHome ? 'mx-auto' : 'mx-auto px-6 min-h-[80vh]'}>
+    <main className={isQa || isHome ? 'mx-auto' : 'mx-auto min-h-[80vh] px-6'}>
       {children}
     </main>
   );
diff --git a/frontend/components/header/MobileActions.tsx b/frontend/components/header/MobileActions.tsx
index 263048ee..5e19652b 100644
--- a/frontend/components/header/MobileActions.tsx
+++ b/frontend/components/header/MobileActions.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import LanguageSwitcher from '@/components/shared/LanguageSwitcher';
-import { CartButton } from '@/components/shop/header/CartButton';
 import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
 import { AppMobileMenu } from '@/components/header/AppMobileMenu';
+import LanguageSwitcher from '@/components/shared/LanguageSwitcher';
+import { CartButton } from '@/components/shop/header/CartButton';
 
 type Category = {
   _id: string;
diff --git a/frontend/components/header/NavLink.tsx b/frontend/components/header/NavLink.tsx
index 9d66f983..3ac4d786 100644
--- a/frontend/components/header/NavLink.tsx
+++ b/frontend/components/header/NavLink.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { usePathname } from 'next/navigation';
+
 import { AnimatedNavLink } from '@/components/shared/AnimatedNavLink';
 
 interface NavLinkProps {
diff --git a/frontend/components/header/UnifiedHeader.tsx b/frontend/components/header/UnifiedHeader.tsx
index 4b5d85aa..5d3be135 100644
--- a/frontend/components/header/UnifiedHeader.tsx
+++ b/frontend/components/header/UnifiedHeader.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { Logo } from '@/components/shared/Logo';
-import { DesktopNav } from '@/components/header/DesktopNav';
 import { DesktopActions } from '@/components/header/DesktopActions';
+import { DesktopNav } from '@/components/header/DesktopNav';
 import { MobileActions } from '@/components/header/MobileActions';
+import { Logo } from '@/components/shared/Logo';
 
 export type UnifiedHeaderVariant = 'platform' | 'shop' | 'blog';
 
@@ -24,7 +24,7 @@ export function UnifiedHeader({
     variant === 'shop' ? '/shop' : variant === 'blog' ? '/blog' : '/';
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur">
       <div className="container-main flex h-16 items-center justify-between">
         <Logo href={brandHref} />
 
diff --git a/frontend/components/home/CodeCard.tsx b/frontend/components/home/CodeCard.tsx
index f66efbf2..1e60b02f 100644
--- a/frontend/components/home/CodeCard.tsx
+++ b/frontend/components/home/CodeCard.tsx
@@ -12,23 +12,23 @@ export function CodeCard({ fileName, snippet, className }: CodeCardProps) {
       className={`pointer-events-none absolute hidden lg:block ${className} animate-card-breathe`}
       aria-hidden="true"
     >
-      <div className="absolute top-1/3 -left-4 -right-4 -bottom-6 bg-[var(--accent-primary)]/8 rounded-3xl blur-2xl" />
+      <div className="absolute top-1/3 -right-4 -bottom-6 -left-4 rounded-3xl bg-[var(--accent-primary)]/8 blur-2xl" />
 
-      <div className="absolute top-1/2 -left-2 -right-2 -bottom-4 bg-[var(--accent-primary)]/12 rounded-2xl blur-xl" />
+      <div className="absolute top-1/2 -right-2 -bottom-4 -left-2 rounded-2xl bg-[var(--accent-primary)]/12 blur-xl" />
 
-      <div className="absolute top-2/3 -left-1 -right-1 -bottom-2 bg-[var(--accent-primary)]/15 rounded-2xl blur-md" />
+      <div className="absolute top-2/3 -right-1 -bottom-2 -left-1 rounded-2xl bg-[var(--accent-primary)]/15 blur-md" />
 
-      <div className="relative rounded-2xl border border-[var(--accent-primary)]/20 bg-card/90 backdrop-blur-xl shadow-2xl dark:shadow-[var(--accent-primary)]/10 px-3.5 py-3 min-w-[180px] max-w-[200px] overflow-hidden">
-        <div className="flex items-center justify-between mb-2 text-[9px] text-muted-foreground/80">
+      <div className="bg-card/90 relative max-w-[200px] min-w-[180px] overflow-hidden rounded-2xl border border-[var(--accent-primary)]/20 px-3.5 py-3 shadow-2xl backdrop-blur-xl dark:shadow-[var(--accent-primary)]/10">
+        <div className="text-muted-foreground/80 mb-2 flex items-center justify-between text-[9px]">
           <div className="flex items-center gap-1">
             <span className="h-1.5 w-1.5 rounded-full bg-red-400/80 shadow-sm" />
             <span className="h-1.5 w-1.5 rounded-full bg-yellow-400/80 shadow-sm" />
             <span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm" />
           </div>
-          <span className="font-medium text-[8.5px]">{fileName}</span>
+          <span className="text-[8.5px] font-medium">{fileName}</span>
         </div>
 
-        <code className="text-[10px] whitespace-pre leading-relaxed font-mono text-foreground/85 block relative z-10">
+        <code className="text-foreground/85 relative z-10 block font-mono text-[10px] leading-relaxed whitespace-pre">
           {snippet}
         </code>
       </div>
diff --git a/frontend/components/home/HeroBackground.tsx b/frontend/components/home/HeroBackground.tsx
index 56caf61b..06e360d2 100644
--- a/frontend/components/home/HeroBackground.tsx
+++ b/frontend/components/home/HeroBackground.tsx
@@ -4,15 +4,15 @@ export function HeroBackground() {
       <div className="pointer-events-none absolute inset-0 opacity-60">
         <div className="absolute -top-32 left-1/2 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-[var(--accent-primary)]/20 blur-3xl" />
         <div className="absolute bottom-[-12rem] left-1/4 h-[22rem] w-[22rem] rounded-full bg-[var(--accent-hover)]/15 blur-3xl" />
-        <div className="absolute bottom-[-10rem] right-0 h-[26rem] w-[26rem] rounded-full bg-[var(--accent-primary)]/25 blur-3xl" />
+        <div className="absolute right-0 bottom-[-10rem] h-[26rem] w-[26rem] rounded-full bg-[var(--accent-primary)]/25 blur-3xl" />
       </div>
 
       <div className="pointer-events-none absolute inset-0 opacity-40 dark:opacity-60">
-        <span className="absolute left-[10%] top-[18%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
-        <span className="absolute left-[35%] top-[8%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
-        <span className="absolute left-[70%] top-[16%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
-        <span className="absolute left-[80%] top-[40%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
-        <span className="absolute left-[18%] top-[60%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute top-[18%] left-[10%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute top-[8%] left-[35%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
+        <span className="absolute top-[16%] left-[70%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute top-[40%] left-[80%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
+        <span className="absolute top-[60%] left-[18%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
       </div>
     </>
   );
diff --git a/frontend/components/home/HeroCodeCards.tsx b/frontend/components/home/HeroCodeCards.tsx
index 8e696b93..106a2e95 100644
--- a/frontend/components/home/HeroCodeCards.tsx
+++ b/frontend/components/home/HeroCodeCards.tsx
@@ -5,7 +5,7 @@ export function HeroCodeCards() {
     <>
       <CodeCard
         fileName="arrays.ts"
-        className="lg:left-16 lg:top-0"
+        className="lg:top-0 lg:left-16"
         snippet={
           <>
             <span className="text-[var(--accent-primary)]">type</span> Arr1 = [
diff --git a/frontend/components/home/HeroSection.tsx b/frontend/components/home/HeroSection.tsx
index 8fee2a71..90998053 100644
--- a/frontend/components/home/HeroSection.tsx
+++ b/frontend/components/home/HeroSection.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
+
 import { HeroBackground } from './HeroBackground';
 import { HeroCodeCards } from './HeroCodeCards';
 import { InteractiveCTAButton } from './InteractiveCTAButton';
@@ -9,35 +10,24 @@ export default function HeroSection() {
   const t = useTranslations('homepage');
 
   return (
-    <section
-      className="
-        relative
-        overflow-hidden
-        min-h-[calc(100vh-260px)]
-sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-[100vh]
-        flex
-        items-center
-        bg-gray-50 dark:bg-black
-        transition-colors duration-300
-      "
-    >
+    <section className="relative flex min-h-[calc(100vh-260px)] items-center overflow-hidden bg-gray-50 transition-colors duration-300 sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-[100vh] dark:bg-black">
       <HeroBackground />
 
-      <div className="relative max-w-5xl mx-auto w-full px-6 py-8 sm:py-12 md:py-28 lg:py-[7.5rem] xl:py-32 flex flex-col items-center text-center">
+      <div className="relative mx-auto flex w-full max-w-5xl flex-col items-center px-6 py-8 text-center sm:py-12 md:py-28 lg:py-[7.5rem] xl:py-32">
         <HeroCodeCards />
 
-        <p className="text-[11px] sm:text-xs lg:text-sm tracking-[0.35em] uppercase text-foreground/90 font-bold">
+        <p className="text-foreground/90 text-[11px] font-bold tracking-[0.35em] uppercase sm:text-xs lg:text-sm">
           {t('subtitle')}
         </p>
 
-        <div className="mt-6 sm:mt-8 lg:mt-14 relative inline-block">
-          <h1 className="min-[375px]:text-[3.5rem] text-5xl sm:text-7xl md:text-[5rem] lg:text-8xl xl:text-[100px] font-black tracking-tight relative inline-block px-4">
+        <div className="relative mt-6 inline-block sm:mt-8 lg:mt-14">
+          <h1 className="relative inline-block px-4 text-5xl font-black tracking-tight min-[375px]:text-[3.5rem] sm:text-7xl md:text-[5rem] lg:text-8xl xl:text-[100px]">
             <span className="relative inline-block bg-gradient-to-r from-[var(--accent-primary)]/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-[var(--accent-hover)]/70 bg-clip-text text-transparent">
               DevLovers
             </span>
 
             <span
-              className="absolute inset-0 inline-block bg-gradient-to-r from-[var(--accent-primary)] via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-[var(--accent-hover)] bg-clip-text text-transparent wave-text-gradient"
+              className="wave-text-gradient absolute inset-0 inline-block bg-gradient-to-r from-[var(--accent-primary)] via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-[var(--accent-hover)] bg-clip-text text-transparent"
               aria-hidden="true"
             >
               DevLovers
@@ -45,7 +35,7 @@ sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-[100vh]
           </h1>
         </div>
 
-        <p className="mt-4 sm:mt-6 md:mt-10 lg:mt-12 md:max-w-xl lg:max-w-2xl text-sm sm:text-sm lg:text-base text-muted-foreground font-light">
+        <p className="text-muted-foreground mt-4 text-sm font-light sm:mt-6 sm:text-sm md:mt-10 md:max-w-xl lg:mt-12 lg:max-w-2xl lg:text-base">
           {t('description')}
         </p>
 
diff --git a/frontend/components/home/InteractiveCTAButton.tsx b/frontend/components/home/InteractiveCTAButton.tsx
index e072ef08..5221cfca 100644
--- a/frontend/components/home/InteractiveCTAButton.tsx
+++ b/frontend/components/home/InteractiveCTAButton.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import React from 'react';
+import { AnimatePresence,motion } from 'framer-motion';
+import { Heart } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import React from 'react';
+
 import { Link } from '@/i18n/routing';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Heart } from 'lucide-react';
 
 export function InteractiveCTAButton() {
   const t = useTranslations('homepage');
@@ -47,20 +48,7 @@ export function InteractiveCTAButton() {
       href="/q&a"
       onMouseEnter={handleEnter}
       onMouseLeave={handleLeave}
-      className="
-        group relative inline-flex items-center justify-center overflow-visible rounded-2xl
-        px-8 sm:px-10 md:px-12 py-3 md:py-3.5 lg:py-4
-        text-xs md:text-sm font-semibold tracking-[0.25em] uppercase text-white
-        shadow-[0_18px_45px_rgba(30,94,255,0.35)]
-        dark:shadow-[0_22px_60px_rgba(255,45,85,0.5)]
-        hover:shadow-[0_22px_55px_rgba(30,94,255,0.45)]
-        dark:hover:shadow-[0_28px_70px_rgba(255,45,85,0.6)]
-        transition-shadow duration-500 ease-out
-        active:scale-95
-        active:brightness-110
-        active:shadow-xl
-        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-primary)] focus-visible:ring-offset-2
-      "
+      className="group relative inline-flex items-center justify-center overflow-visible rounded-2xl px-8 py-3 text-xs font-semibold tracking-[0.25em] text-white uppercase shadow-[0_18px_45px_rgba(30,94,255,0.35)] transition-shadow duration-500 ease-out hover:shadow-[0_22px_55px_rgba(30,94,255,0.45)] focus-visible:ring-2 focus-visible:ring-[var(--accent-primary)] focus-visible:ring-offset-2 focus-visible:outline-none active:scale-95 active:shadow-xl active:brightness-110 sm:px-10 md:px-12 md:py-3.5 md:text-sm lg:py-4 dark:shadow-[0_22px_60px_rgba(255,45,85,0.5)] dark:hover:shadow-[0_28px_70px_rgba(255,45,85,0.6)]"
     >
       {/* Базовий градієнт з анімацією */}
       <motion.span
@@ -88,7 +76,7 @@ export function InteractiveCTAButton() {
 
       {/* М'яка неонова підсвітка */}
       <motion.span
-        className="absolute inset-0 rounded-2xl pointer-events-none"
+        className="pointer-events-none absolute inset-0 rounded-2xl"
         initial={{ opacity: 0 }}
         animate={{
           opacity: isHovered ? [0.15, 0.25, 0.15] : 0,
@@ -112,7 +100,7 @@ export function InteractiveCTAButton() {
           particles.map(particle => (
             <motion.span
               key={particle.id}
-              className="absolute w-3 h-3 pointer-events-none"
+              className="pointer-events-none absolute h-3 w-3"
               style={{
                 left: '50%',
                 top: '50%',
diff --git a/frontend/components/leaderboard/LeaderboardClient.tsx b/frontend/components/leaderboard/LeaderboardClient.tsx
index 970644a9..99fccd7e 100644
--- a/frontend/components/leaderboard/LeaderboardClient.tsx
+++ b/frontend/components/leaderboard/LeaderboardClient.tsx
@@ -2,10 +2,12 @@
 
 import { motion } from 'framer-motion';
 import { useTranslations } from 'next-intl';
+
 import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
+
 import { LeaderboardPodium } from './LeaderboardPodium';
 import { LeaderboardTable } from './LeaderboardTable';
-import { User, CurrentUser } from './types';
+import { CurrentUser,User } from './types';
 
 interface LeaderboardClientProps {
   initialUsers: User[];
@@ -27,18 +29,18 @@ export default function LeaderboardClient({
       <div className="fixed inset-0 z-0">
         <DynamicGridBackground
           showStaticGrid
-          className="w-full h-full bg-gray-50 transition-colors duration-300 dark:bg-transparent"
+          className="h-full w-full bg-gray-50 transition-colors duration-300 dark:bg-transparent"
         />
       </div>
 
-      <div className="relative z-10 w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center pt-20 pb-10">
-        <header className="text-center mb-16 max-w-3xl">
+      <div className="relative z-10 mx-auto flex w-full max-w-5xl flex-col items-center px-4 pt-20 pb-10 sm:px-6 lg:px-8">
+        <header className="mb-16 max-w-3xl text-center">
           <motion.div
             initial={{ y: 20, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ duration: 0.6 }}
           >
-            <h1 className="text-4xl md:text-6xl lg:text-7xl font-black tracking-tight text-[var(--accent-primary)] mb-6 drop-shadow-sm">
+            <h1 className="mb-6 text-4xl font-black tracking-tight text-[var(--accent-primary)] drop-shadow-sm md:text-6xl lg:text-7xl">
               {t('title')}
             </h1>
           </motion.div>
@@ -47,24 +49,24 @@ export default function LeaderboardClient({
             initial={{ y: 20, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ duration: 0.6, delay: 0.1 }}
-            className="text-lg md:text-xl text-gray-600 dark:text-gray-400 font-light leading-relaxed"
+            className="text-lg leading-relaxed font-light text-gray-600 md:text-xl dark:text-gray-400"
           >
             {t('subtitle')}
           </motion.p>
         </header>
 
-        <div className="w-full flex flex-col items-center">
-          <div className="w-full mb-24">
+        <div className="flex w-full flex-col items-center">
+          <div className="mb-24 w-full">
             {hasResults ? (
               <LeaderboardPodium topThree={topThree} />
             ) : (
               <motion.div
                 initial={{ opacity: 0, scale: 0.95 }}
                 animate={{ opacity: 1, scale: 1 }}
-                className="text-center py-20 rounded-2xl border border-gray-200 dark:border-white/10 bg-white/60 dark:bg-[#111]/60 backdrop-blur-xl shadow-xl"
+                className="rounded-2xl border border-gray-200 bg-white/60 py-20 text-center shadow-xl backdrop-blur-xl dark:border-white/10 dark:bg-[#111]/60"
               >
-                <p className="text-6xl mb-4 grayscale opacity-50">🏆</p>
-                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                <p className="mb-4 text-6xl opacity-50 grayscale">🏆</p>
+                <h2 className="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
                   {t('noResults')}
                 </h2>
                 <p className="text-gray-600 dark:text-gray-400">
@@ -74,7 +76,7 @@ export default function LeaderboardClient({
             )}
           </div>
 
-          <div className="w-full animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200">
+          <div className="animate-in fade-in slide-in-from-bottom-8 w-full delay-200 duration-700">
             <LeaderboardTable users={allUsers} currentUser={currentUser} />
           </div>
         </div>
diff --git a/frontend/components/leaderboard/LeaderboardPodium.tsx b/frontend/components/leaderboard/LeaderboardPodium.tsx
index 67d9d294..92fc89c1 100644
--- a/frontend/components/leaderboard/LeaderboardPodium.tsx
+++ b/frontend/components/leaderboard/LeaderboardPodium.tsx
@@ -1,9 +1,11 @@
 'use client';
 
-import Image from 'next/image';
 import { motion } from 'framer-motion';
 import { Crown } from 'lucide-react';
+import Image from 'next/image';
+
 import { cn } from '@/lib/utils';
+
 import { User } from './types';
 
 const rankConfig = {
@@ -50,7 +52,7 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
   ].filter(Boolean) as User[];
 
   return (
-    <div className="flex items-end justify-center gap-4 md:gap-8 h-[350px] w-full max-w-3xl mx-auto">
+    <div className="mx-auto flex h-[350px] w-full max-w-3xl items-end justify-center gap-4 md:gap-8">
       {podiumOrder.map(user => {
         const rank = user.rank as 1 | 2 | 3;
         const isFirst = rank === 1;
@@ -61,29 +63,29 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
         return (
           <div
             key={user.id}
-            className="relative flex flex-col items-center justify-end w-1/3 h-full"
+            className="relative flex h-full w-1/3 flex-col items-center justify-end"
           >
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: delay + 0.5, duration: 0.5 }}
-              className="mb-3 md:mb-4 flex flex-col items-center text-center z-10"
+              className="z-10 mb-3 flex flex-col items-center text-center md:mb-4"
             >
               <div className="relative mb-2">
                 {isFirst && (
                   <Crown
-                    className="absolute -top-6 md:-top-8 left-1/2 -translate-x-1/2 w-5 h-5 md:w-6 md:h-6 text-yellow-500 animate-bounce"
+                    className="absolute -top-6 left-1/2 h-5 w-5 -translate-x-1/2 animate-bounce text-yellow-500 md:-top-8 md:h-6 md:w-6"
                     fill="currentColor"
                   />
                 )}
 
                 <div
                   className={cn(
-                    'relative w-14 h-14 md:w-20 md:h-20 rounded-full p-1 transition-colors duration-300 border-2',
+                    'relative h-14 w-14 rounded-full border-2 p-1 transition-colors duration-300 md:h-20 md:w-20',
                     style.ring
                   )}
                 >
-                  <div className="relative w-full h-full rounded-full overflow-hidden bg-gray-100 dark:bg-black">
+                  <div className="relative h-full w-full overflow-hidden rounded-full bg-gray-100 dark:bg-black">
                     <Image
                       src={user.avatar}
                       alt={user.username}
@@ -94,7 +96,7 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
 
                   <div
                     className={cn(
-                      'absolute -bottom-2 left-1/2 -translate-x-1/2 w-5 h-5 md:w-6 md:h-6 rounded-full flex items-center justify-center text-[10px] md:text-xs font-bold text-white shadow-sm transition-colors duration-300',
+                      'absolute -bottom-2 left-1/2 flex h-5 w-5 -translate-x-1/2 items-center justify-center rounded-full text-[10px] font-bold text-white shadow-sm transition-colors duration-300 md:h-6 md:w-6 md:text-xs',
                       style.badge
                     )}
                   >
@@ -103,13 +105,13 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
                 </div>
               </div>
 
-              <div className="font-bold text-gray-900 dark:text-white text-xs md:text-base truncate max-w-[90px] md:max-w-[140px]">
+              <div className="max-w-[90px] truncate text-xs font-bold text-gray-900 md:max-w-[140px] md:text-base dark:text-white">
                 {user.username}
               </div>
 
               <div
                 className={cn(
-                  'font-mono font-bold mt-0.5 text-base md:text-lg',
+                  'mt-0.5 font-mono text-base font-bold md:text-lg',
                   style.text
                 )}
               >
@@ -128,7 +130,7 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
                 damping: 15,
               }}
               className={cn(
-                'w-full rounded-t-xl md:rounded-t-2xl relative overflow-hidden backdrop-blur-md border-x border-t transition-colors duration-300',
+                'relative w-full overflow-hidden rounded-t-xl border-x border-t backdrop-blur-md transition-colors duration-300 md:rounded-t-2xl',
                 style.bg,
                 style.border
               )}
diff --git a/frontend/components/leaderboard/LeaderboardTable.tsx b/frontend/components/leaderboard/LeaderboardTable.tsx
index ed7361b8..0226f828 100644
--- a/frontend/components/leaderboard/LeaderboardTable.tsx
+++ b/frontend/components/leaderboard/LeaderboardTable.tsx
@@ -1,10 +1,12 @@
 'use client';
 
-import { TrendingUp, Trophy, Medal } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { Medal,TrendingUp, Trophy } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+
 import { cn } from '@/lib/utils';
-import { User, CurrentUser } from './types';
+
+import { CurrentUser,User } from './types';
 
 interface LeaderboardTableProps {
   users: User[];
@@ -31,21 +33,21 @@ export function LeaderboardTable({
   const isUserInTop = currentUserRank > 0 && currentUserRank <= 10;
 
   return (
-    <div className="w-full flex flex-col gap-4">
-      <div className="bg-white dark:bg-white/5 backdrop-blur-md rounded-2xl border border-slate-200 dark:border-white/10 overflow-hidden shadow-lg dark:shadow-2xl">
+    <div className="flex w-full flex-col gap-4">
+      <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-lg backdrop-blur-md dark:border-white/10 dark:bg-white/5 dark:shadow-2xl">
         <div className="w-full">
-          <table className="w-full text-left border-separate border-spacing-0 table-fixed">
+          <table className="w-full table-fixed border-separate border-spacing-0 text-left">
             <caption className="sr-only">{t('tableCaption')}</caption>
 
             <thead className="bg-slate-50/80 dark:bg-white/5">
               <tr>
-                <th className="px-2 sm:px-6 py-3 sm:py-5 text-center text-[10px] sm:text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest w-[15%] sm:w-[12%] border-b border-slate-200 dark:border-white/10">
+                <th className="w-[15%] border-b border-slate-200 px-2 py-3 text-center text-[10px] font-bold tracking-widest text-slate-500 uppercase sm:w-[12%] sm:px-6 sm:py-5 sm:text-xs dark:border-white/10 dark:text-slate-400">
                   {t('rank')}
                 </th>
-                <th className="px-2 sm:px-6 py-3 sm:py-5 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest w-auto border-b border-slate-200 dark:border-white/10">
+                <th className="w-auto border-b border-slate-200 px-2 py-3 text-xs font-bold tracking-widest text-slate-500 uppercase sm:px-6 sm:py-5 dark:border-white/10 dark:text-slate-400">
                   {t('user')}
                 </th>
-                <th className="pl-2 pr-4 sm:px-6 py-3 sm:py-5 text-right text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest w-[25%] sm:w-[20%] border-b border-slate-200 dark:border-white/10">
+                <th className="w-[25%] border-b border-slate-200 py-3 pr-4 pl-2 text-right text-xs font-bold tracking-widest text-slate-500 uppercase sm:w-[20%] sm:px-6 sm:py-5 dark:border-white/10 dark:text-slate-400">
                   {t('score')}
                 </th>
               </tr>
@@ -73,13 +75,13 @@ export function LeaderboardTable({
 
       {!isUserInTop && matchedUser && (
         <>
-          <div className="text-center text-slate-400 dark:text-slate-600 text-xl font-bold tracking-widest select-none py-2">
+          <div className="py-2 text-center text-xl font-bold tracking-widest text-slate-400 select-none dark:text-slate-600">
             • • •
           </div>
 
-          <div className="bg-white dark:bg-white/5 backdrop-blur-md rounded-2xl border-2 border-[var(--accent-primary)] overflow-hidden shadow-[0_0_20px_var(--accent-primary)]">
+          <div className="overflow-hidden rounded-2xl border-2 border-[var(--accent-primary)] bg-white shadow-[0_0_20px_var(--accent-primary)] backdrop-blur-md dark:bg-white/5">
             <div className="w-full">
-              <table className="w-full text-left border-separate border-spacing-0 table-fixed">
+              <table className="w-full table-fixed border-separate border-spacing-0 text-left">
                 <tbody>
                   <TableRow user={matchedUser} isCurrentUser={true} t={t} />
                 </tbody>
@@ -122,38 +124,38 @@ function TableRow({
       )}
     >
       <td className={cn(cellClass, leftBorderClass)}>
-        <div className="flex justify-center items-center">
+        <div className="flex items-center justify-center">
           <RankBadge rank={user.rank} />
         </div>
       </td>
 
       <td className={cellClass}>
-        <div className="flex items-center gap-2 sm:gap-4 overflow-hidden">
+        <div className="flex items-center gap-2 overflow-hidden sm:gap-4">
           <div
             className={cn(
-              'w-8 h-8 sm:w-10 sm:h-10 rounded-full border flex-shrink-0 flex items-center justify-center text-xs sm:text-sm font-bold transition-all duration-300',
+              'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border text-xs font-bold transition-all duration-300 sm:h-10 sm:w-10 sm:text-sm',
               isCurrentUser
-                ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white shadow-[0_0_1px_var(--accent-primary)]'
-                : 'bg-slate-100 border-slate-200 text-slate-600 dark:bg-gradient-to-br dark:from-slate-800 dark:to-slate-900 dark:border-white/10 dark:text-slate-300 group-hover:border-[var(--accent-primary)] group-hover:text-[var(--accent-primary)]'
+                ? 'border-[var(--accent-primary)] bg-[var(--accent-primary)] text-white shadow-[0_0_1px_var(--accent-primary)]'
+                : 'border-slate-200 bg-slate-100 text-slate-600 group-hover:border-[var(--accent-primary)] group-hover:text-[var(--accent-primary)] dark:border-white/10 dark:bg-gradient-to-br dark:from-slate-800 dark:to-slate-900 dark:text-slate-300'
             )}
             aria-hidden="true"
           >
             {user.username.slice(0, 1).toUpperCase()}
           </div>
 
-          <div className="flex flex-col min-w-0">
+          <div className="flex min-w-0 flex-col">
             <span
               className={cn(
-                'font-medium text-sm transition-colors flex items-center gap-1 sm:gap-2',
+                'flex items-center gap-1 text-sm font-medium transition-colors sm:gap-2',
                 isCurrentUser
-                  ? 'text-[var(--accent-primary)] font-black text-sm sm:text-base'
-                  : 'text-slate-700 dark:text-slate-200 group-hover:text-[var(--accent-primary)] dark:group-hover:text-[var(--accent-primary)]'
+                  ? 'text-sm font-black text-[var(--accent-primary)] sm:text-base'
+                  : 'text-slate-700 group-hover:text-[var(--accent-primary)] dark:text-slate-200 dark:group-hover:text-[var(--accent-primary)]'
               )}
             >
               <span className="truncate">{user.username}</span>
 
               {isCurrentUser && (
-                <div className="relative flex-shrink-0 flex items-center justify-center w-5 h-5 sm:w-8 sm:h-8 ml-1">
+                <div className="relative ml-1 flex h-5 w-5 flex-shrink-0 items-center justify-center sm:h-8 sm:w-8">
                   <motion.div
                     animate={{ scale: [1, 1.2, 1] }}
                     transition={{
@@ -166,7 +168,7 @@ function TableRow({
                     <svg
                       viewBox="0 0 24 24"
                       fill="currentColor"
-                      className="w-full h-full drop-shadow-md"
+                      className="h-full w-full drop-shadow-md"
                     >
                       <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                     </svg>
@@ -176,8 +178,8 @@ function TableRow({
             </span>
 
             {user.change > 0 && (
-              <span className="hidden sm:flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400 font-bold uppercase tracking-wide opacity-70 group-hover:opacity-100 transition-opacity">
-                <TrendingUp className="w-3 h-3" aria-hidden="true" />
+              <span className="hidden items-center gap-1 text-[10px] font-bold tracking-wide text-emerald-600 uppercase opacity-70 transition-opacity group-hover:opacity-100 sm:flex dark:text-emerald-400">
+                <TrendingUp className="h-3 w-3" aria-hidden="true" />
                 {t('rising')}
               </span>
             )}
@@ -186,14 +188,14 @@ function TableRow({
       </td>
 
       <td
-        className={cn(cellClass, 'text-right pr-4 sm:pr-6', rightBorderClass)}
+        className={cn(cellClass, 'pr-4 text-right sm:pr-6', rightBorderClass)}
       >
         <span
           className={cn(
-            'font-mono font-bold inline-block transition-all',
+            'inline-block font-mono font-bold transition-all',
             isCurrentUser
-              ? 'text-[var(--accent-primary)] scale-110 drop-shadow-sm text-sm sm:text-lg'
-              : 'text-slate-700 dark:text-slate-300 group-hover:scale-105 text-sm sm:text-base'
+              ? 'scale-110 text-sm text-[var(--accent-primary)] drop-shadow-sm sm:text-lg'
+              : 'text-sm text-slate-700 group-hover:scale-105 sm:text-base dark:text-slate-300'
           )}
         >
           {user.points.toLocaleString()}
@@ -206,37 +208,37 @@ function TableRow({
 function RankBadge({ rank }: { rank: number }) {
   if (rank === 1) {
     return (
-      <div className="relative w-8 h-6 sm:w-14 sm:h-8 flex items-center justify-center gap-0.5 sm:gap-1.5 rounded-md sm:rounded-lg bg-yellow-100 dark:bg-yellow-500/20 border border-yellow-500/50 shadow-[0_0_10px_rgba(234,179,8,0.3)]">
-        <span className="font-black text-xs sm:text-base text-yellow-700 dark:text-yellow-400">
+      <div className="relative flex h-6 w-8 items-center justify-center gap-0.5 rounded-md border border-yellow-500/50 bg-yellow-100 shadow-[0_0_10px_rgba(234,179,8,0.3)] sm:h-8 sm:w-14 sm:gap-1.5 sm:rounded-lg dark:bg-yellow-500/20">
+        <span className="text-xs font-black text-yellow-700 sm:text-base dark:text-yellow-400">
           1
         </span>
-        <Trophy className="w-2.5 h-2.5 sm:w-4 sm:h-4 text-yellow-600 dark:text-yellow-400" />
-        <div className="absolute -top-1 -right-1 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-yellow-400 rounded-full animate-pulse" />
+        <Trophy className="h-2.5 w-2.5 text-yellow-600 sm:h-4 sm:w-4 dark:text-yellow-400" />
+        <div className="absolute -top-1 -right-1 h-1.5 w-1.5 animate-pulse rounded-full bg-yellow-400 sm:h-2 sm:w-2" />
       </div>
     );
   }
   if (rank === 2) {
     return (
-      <div className="w-8 h-6 sm:w-14 sm:h-8 flex items-center justify-center gap-0.5 sm:gap-1.5 rounded-md sm:rounded-lg bg-slate-100 dark:bg-slate-400/10 border border-slate-300 dark:border-slate-400/30">
-        <span className="font-black text-xs sm:text-base text-slate-600 dark:text-slate-300">
+      <div className="flex h-6 w-8 items-center justify-center gap-0.5 rounded-md border border-slate-300 bg-slate-100 sm:h-8 sm:w-14 sm:gap-1.5 sm:rounded-lg dark:border-slate-400/30 dark:bg-slate-400/10">
+        <span className="text-xs font-black text-slate-600 sm:text-base dark:text-slate-300">
           2
         </span>
-        <Medal className="w-2.5 h-2.5 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-300" />
+        <Medal className="h-2.5 w-2.5 text-slate-500 sm:h-4 sm:w-4 dark:text-slate-300" />
       </div>
     );
   }
   if (rank === 3) {
     return (
-      <div className="w-8 h-6 sm:w-14 sm:h-8 flex items-center justify-center gap-0.5 sm:gap-1.5 rounded-md sm:rounded-lg bg-orange-50 dark:bg-orange-500/10 border border-orange-300 dark:border-orange-500/30">
-        <span className="font-black text-xs sm:text-base text-orange-700 dark:text-orange-400">
+      <div className="flex h-6 w-8 items-center justify-center gap-0.5 rounded-md border border-orange-300 bg-orange-50 sm:h-8 sm:w-14 sm:gap-1.5 sm:rounded-lg dark:border-orange-500/30 dark:bg-orange-500/10">
+        <span className="text-xs font-black text-orange-700 sm:text-base dark:text-orange-400">
           3
         </span>
-        <Medal className="w-2.5 h-2.5 sm:w-4 sm:h-4 text-orange-600 dark:text-orange-400" />
+        <Medal className="h-2.5 w-2.5 text-orange-600 sm:h-4 sm:w-4 dark:text-orange-400" />
       </div>
     );
   }
   return (
-    <span className="flex items-center justify-center w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-slate-100 dark:bg-white/5 font-bold text-xs sm:text-sm text-slate-500 dark:text-slate-500">
+    <span className="flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-500 sm:h-8 sm:w-8 sm:text-sm dark:bg-white/5 dark:text-slate-500">
       {rank}
     </span>
   );
diff --git a/frontend/components/leaderboard/types.ts b/frontend/components/leaderboard/types.ts
index ce0d77c6..38c64958 100644
--- a/frontend/components/leaderboard/types.ts
+++ b/frontend/components/leaderboard/types.ts
@@ -10,4 +10,4 @@ export interface User {
 export interface CurrentUser {
   id: string;
   username: string;
-}
\ No newline at end of file
+}
diff --git a/frontend/components/legal/LegalBlock.tsx b/frontend/components/legal/LegalBlock.tsx
index 7fd607b9..034588b5 100644
--- a/frontend/components/legal/LegalBlock.tsx
+++ b/frontend/components/legal/LegalBlock.tsx
@@ -8,18 +8,13 @@ export default function LegalBlock({ id, title, children }: Props) {
   return (
     <section
       id={id}
-      className="
-        py-8 sm:py-10
-        border-b border-gray-200/60
-        dark:border-neutral-800/60
-        last:border-b-0
-      "
+      className="border-b border-gray-200/60 py-8 last:border-b-0 sm:py-10 dark:border-neutral-800/60"
     >
-      <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100">
+      <h2 className="text-2xl font-semibold tracking-tight text-slate-900 sm:text-3xl dark:text-slate-100">
         {title}
       </h2>
 
-      <div className="mt-4 pb-4 max-w-3xl text-slate-700 dark:text-slate-200 leading-7">
+      <div className="mt-4 max-w-3xl pb-4 leading-7 text-slate-700 dark:text-slate-200">
         {children}
       </div>
     </section>
diff --git a/frontend/components/legal/LegalPageShell.tsx b/frontend/components/legal/LegalPageShell.tsx
index 0a0a9269..ce32a938 100644
--- a/frontend/components/legal/LegalPageShell.tsx
+++ b/frontend/components/legal/LegalPageShell.tsx
@@ -1,6 +1,7 @@
-import { Link } from '@/i18n/routing';
 import { getTranslations } from 'next-intl/server';
 
+import { Link } from '@/i18n/routing';
+
 type Props = {
   title: string;
   lastUpdated: string;
@@ -15,43 +16,21 @@ export default async function LegalPageShell({
   const t = await getTranslations('legal');
 
   return (
-    <main
-      className="
-        relative min-h-screen overflow-hidden
-        bg-white text-slate-900
-        dark:bg-neutral-950 dark:text-slate-100
-      "
-    >
+    <main className="relative min-h-screen overflow-hidden bg-white text-slate-900 dark:bg-neutral-950 dark:text-slate-100">
       <div
         aria-hidden="true"
-        className="
-          pointer-events-none absolute inset-0
-          dark:opacity-80 opacity-100
-          [background-image:
-            radial-gradient(1000px_700px_at_20%_10%,rgba(59,130,246,0.10),transparent),
-            radial-gradient(900px_600px_at_80%_20%,rgba(168,85,247,0.10),transparent)
-          ]
-          dark:[background-image:
-            radial-gradient(1000px_700px_at_20%_10%,rgba(59,130,246,0.18),transparent),
-            radial-gradient(900px_600px_at_80%_20%,rgba(168,85,247,0.16),transparent)
-          ]
-        "
+        className="[background-image: radial-gradient(1000px_700px_at_20%_10%,rgba(59,130,246,0.10),transparent), radial-gradient(900px_600px_at_80%_20%,rgba(168,85,247,0.10),transparent) ] dark:[background-image: radial-gradient(1000px_700px_at_20%_10%,rgba(59,130,246,0.18),transparent), radial-gradient(900px_600px_at_80%_20%,rgba(168,85,247,0.16),transparent) ] pointer-events-none absolute inset-0 opacity-100 dark:opacity-80"
       />
       <div
         aria-hidden="true"
-        className="
-          pointer-events-none absolute inset-0
-          opacity-0 dark:opacity-40
-          [background-image:radial-gradient(circle,rgba(148,163,184,0.18)_1px,transparent_1px)]
-          [background-size:22px_22px]
-        "
+        className="pointer-events-none absolute inset-0 [background-image:radial-gradient(circle,rgba(148,163,184,0.18)_1px,transparent_1px)] [background-size:22px_22px] opacity-0 dark:opacity-40"
       />
 
       <div className="relative mx-auto max-w-4xl px-6 py-12 sm:py-16">
         <header className="space-y-5">
           <Link
             href="/"
-            className="inline-flex text-sm text-slate-600 hover:text-blue-600 transition-colors dark:text-slate-300 dark:hover:text-white"
+            className="inline-flex text-sm text-slate-600 transition-colors hover:text-blue-600 dark:text-slate-300 dark:hover:text-white"
           >
             ← {t('back')}
           </Link>
@@ -66,14 +45,15 @@ export default async function LegalPageShell({
             <address className="not-italic">
               <a
                 href={`mailto:${t('contactEmail')}`}
-                className="underline underline-offset-4 hover:text-blue-600 dark:hover:text-white transition-colors"
+                className="underline underline-offset-4 transition-colors hover:text-blue-600 dark:hover:text-white"
               >
                 {t('contactEmail')}
               </a>
             </address>
             <span className="opacity-60">•</span>
             <span>
-              {t('lastUpdated')}: <span className="font-medium">{lastUpdated}</span>
+              {t('lastUpdated')}:{' '}
+              <span className="font-medium">{lastUpdated}</span>
             </span>
           </div>
         </header>
diff --git a/frontend/components/legal/PrivacyPolicyContent.tsx b/frontend/components/legal/PrivacyPolicyContent.tsx
index caf35978..3ab756b9 100644
--- a/frontend/components/legal/PrivacyPolicyContent.tsx
+++ b/frontend/components/legal/PrivacyPolicyContent.tsx
@@ -1,4 +1,5 @@
 import { getTranslations } from 'next-intl/server';
+
 import LegalBlock from './LegalBlock';
 
 export const PRIVACY_LAST_UPDATED = '2025-12-14';
@@ -24,7 +25,7 @@ export default async function PrivacyPolicyContent() {
       </LegalBlock>
 
       <LegalBlock id="data-we-collect" title={t('dataWeCollect.title')}>
-        <ul className="list-disc pl-5 space-y-2">
+        <ul className="list-disc space-y-2 pl-5">
           <li>
             <strong>{t('dataWeCollect.accountData')}</strong>{' '}
             {t('dataWeCollect.accountDataDesc')}
@@ -41,7 +42,7 @@ export default async function PrivacyPolicyContent() {
       </LegalBlock>
 
       <LegalBlock id="why-we-collect" title={t('whyWeCollect.title')}>
-        <ul className="list-disc pl-5 space-y-2">
+        <ul className="list-disc space-y-2 pl-5">
           <li>{t('whyWeCollect.reason1')}</li>
           <li>{t('whyWeCollect.reason2')}</li>
           <li>{t('whyWeCollect.reason3')}</li>
@@ -72,7 +73,7 @@ export default async function PrivacyPolicyContent() {
 
       <LegalBlock id="gdpr" title={t('gdpr.title')}>
         <p className="mb-4">{t('gdpr.intro')}</p>
-        <ul className="list-disc pl-5 space-y-2">
+        <ul className="list-disc space-y-2 pl-5">
           <li>
             <strong>{t('gdpr.rightAccess')}</strong> {t('gdpr.rightAccessDesc')}
           </li>
@@ -81,7 +82,8 @@ export default async function PrivacyPolicyContent() {
             {t('gdpr.rightRectificationDesc')}
           </li>
           <li>
-            <strong>{t('gdpr.rightErasure')}</strong> {t('gdpr.rightErasureDesc')}
+            <strong>{t('gdpr.rightErasure')}</strong>{' '}
+            {t('gdpr.rightErasureDesc')}
           </li>
           <li>
             <strong>{t('gdpr.rightRestriction')}</strong>{' '}
diff --git a/frontend/components/legal/TermsOfServiceContent.tsx b/frontend/components/legal/TermsOfServiceContent.tsx
index 44d1f194..040d8a01 100644
--- a/frontend/components/legal/TermsOfServiceContent.tsx
+++ b/frontend/components/legal/TermsOfServiceContent.tsx
@@ -1,4 +1,5 @@
 import { getTranslations } from 'next-intl/server';
+
 import LegalBlock from './LegalBlock';
 
 export const TERMS_LAST_UPDATED = '2025-12-14';
@@ -22,7 +23,7 @@ export default async function TermsOfServiceContent() {
       </LegalBlock>
 
       <LegalBlock id="features" title={t('features.title')}>
-        <ul className="list-disc pl-5 space-y-2">
+        <ul className="list-disc space-y-2 pl-5">
           <li>{t('features.feature1')}</li>
           <li>{t('features.feature2')}</li>
           <li>{t('features.feature3')}</li>
@@ -30,7 +31,7 @@ export default async function TermsOfServiceContent() {
       </LegalBlock>
 
       <LegalBlock id="prohibited" title={t('prohibited.title')}>
-        <ul className="list-disc pl-5 space-y-2">
+        <ul className="list-disc space-y-2 pl-5">
           <li>{t('prohibited.item1')}</li>
           <li>{t('prohibited.item2')}</li>
         </ul>
diff --git a/frontend/components/q&a/AIWordHelper.tsx b/frontend/components/q&a/AIWordHelper.tsx
index a860ecd2..9bbd7aa3 100644
--- a/frontend/components/q&a/AIWordHelper.tsx
+++ b/frontend/components/q&a/AIWordHelper.tsx
@@ -1,34 +1,34 @@
 'use client';
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { useTranslations } from 'next-intl';
-import { useParams } from 'next/navigation';
 import {
-  X,
-  Loader2,
-  RefreshCw,
-  Sparkles,
-  GripHorizontal,
+  BookOpen,
   Clock,
-  Coffee,
   CloudOff,
-  Wrench,
-  Star,
+  Coffee,
   Github,
+  GripHorizontal,
   Heart,
-  BookOpen,
+  Loader2,
+  RefreshCw,
+  Sparkles,
+  Star,
+  Wrench,
+  X,
 } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { useParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import React, { useCallback, useEffect, useRef,useState } from 'react';
+
 import { Link } from '@/i18n/routing';
 import {
   getCachedExplanation,
   setCachedExplanation,
 } from '@/lib/ai/explainCache';
 import type { ExplanationResponse } from '@/lib/ai/prompts';
-
-import ukMessages from '@/messages/uk.json';
+import { cn } from '@/lib/utils';
 import enMessages from '@/messages/en.json';
 import plMessages from '@/messages/pl.json';
+import ukMessages from '@/messages/uk.json';
 
 type Locale = 'uk' | 'en' | 'pl';
 
@@ -432,7 +432,7 @@ export default function AIWordHelper({
           'bg-white dark:bg-neutral-900',
           'rounded-xl',
           'border border-gray-200 dark:border-neutral-800',
-          'max-w-lg w-full',
+          'w-full max-w-lg',
           'max-h-[80vh] overflow-hidden',
           'flex flex-col',
           'animate-in zoom-in-95 duration-200',
@@ -446,7 +446,7 @@ export default function AIWordHelper({
       >
         <div
           className={cn(
-            'flex items-center justify-between p-4 border-b border-gray-200 dark:border-neutral-800',
+            'flex items-center justify-between border-b border-gray-200 p-4 dark:border-neutral-800',
             'cursor-grab active:cursor-grabbing',
             'select-none'
           )}
@@ -469,7 +469,7 @@ export default function AIWordHelper({
               'text-gray-500 dark:text-gray-400',
               'hover:bg-gray-100 dark:hover:bg-neutral-800',
               'transition-colors',
-              'focus:outline-none focus:ring-2 focus:ring-[var(--accent-primary)]'
+              'focus:ring-2 focus:ring-[var(--accent-primary)] focus:outline-none'
             )}
             aria-label={t('close')}
           >
@@ -583,8 +583,8 @@ export default function AIWordHelper({
                           </button>
 
                           {/* Activity suggestions while waiting */}
-                          <div className="mt-4 w-full border-t border-gray-200 dark:border-neutral-700 pt-4">
-                            <p className="text-center text-xs font-medium text-gray-500 dark:text-gray-400 mb-3">
+                          <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-neutral-700">
+                            <p className="mb-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400">
                               {messages.rateLimit.whileWaiting}
                             </p>
 
@@ -773,8 +773,8 @@ export default function AIWordHelper({
                 })()}
 
               {explanation && !isLoading && !error && (
-                <div className="prose prose-sm max-w-none dark:prose-invert">
-                  <div className="whitespace-pre-wrap leading-relaxed text-gray-800 dark:text-gray-200 [&>*]:my-2">
+                <div className="prose prose-sm dark:prose-invert max-w-none">
+                  <div className="leading-relaxed whitespace-pre-wrap text-gray-800 dark:text-gray-200 [&>*]:my-2">
                     {formatExplanation(explanation[activeLocale])}
                   </div>
                 </div>
diff --git a/frontend/components/q&a/AccordionList.tsx b/frontend/components/q&a/AccordionList.tsx
index bd642099..da5fc73f 100644
--- a/frontend/components/q&a/AccordionList.tsx
+++ b/frontend/components/q&a/AccordionList.tsx
@@ -1,26 +1,18 @@
 'use client';
 
 import {
-  useState,
-  useCallback,
-  useEffect,
   type CSSProperties,
   type ReactNode,
+  useCallback,
+  useEffect,
+  useState,
 } from 'react';
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from '@/components/ui/accordion';
-import { categoryTabStyles } from '@/data/categoryStyles';
 
+import AIWordHelper from '@/components/q&a/AIWordHelper';
 import CodeBlock from '@/components/q&a/CodeBlock';
-import SelectableText from '@/components/q&a/SelectableText';
 import FloatingExplainButton from '@/components/q&a/FloatingExplainButton';
-import AIWordHelper from '@/components/q&a/AIWordHelper';
 import HighlightCachedTerms from '@/components/q&a/HighlightCachedTerms';
-import { getCachedTerms, CACHE_KEY } from '@/lib/ai/explainCache';
+import SelectableText from '@/components/q&a/SelectableText';
 import type {
   AnswerBlock,
   BulletListBlock,
@@ -35,6 +27,14 @@ import type {
   TableBlock,
   TextNode,
 } from '@/components/q&a/types';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { categoryTabStyles } from '@/data/categoryStyles';
+import { CACHE_KEY,getCachedTerms } from '@/lib/ai/explainCache';
 
 function isListItemBlock(value: ListEntry): value is ListItemBlock {
   return (
diff --git a/frontend/components/q&a/CodeBlock.tsx b/frontend/components/q&a/CodeBlock.tsx
index 9c765b1d..636eea6e 100644
--- a/frontend/components/q&a/CodeBlock.tsx
+++ b/frontend/components/q&a/CodeBlock.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { Highlight, themes } from 'prism-react-renderer';
+import { Check,Copy } from 'lucide-react';
 import { useTheme } from 'next-themes';
+import { Highlight, themes } from 'prism-react-renderer';
 import { useState } from 'react';
-import { Copy, Check } from 'lucide-react';
 
 type Props = {
   code: string;
@@ -30,11 +30,11 @@ export default function CodeBlock({ code, language }: Props) {
     >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre
-          className={`${className} relative rounded-lg p-4 text-sm overflow-x-auto`}
+          className={`${className} relative overflow-x-auto rounded-lg p-4 text-sm`}
           style={style}
         >
           {language && (
-            <div className="absolute left-3 top-2 text-xs uppercase text-gray-400 font-mono">
+            <div className="absolute top-2 left-3 font-mono text-xs text-gray-400 uppercase">
               {language}
             </div>
           )}
@@ -42,10 +42,7 @@ export default function CodeBlock({ code, language }: Props) {
           <button
             onClick={handleCopy}
             aria-label="Copy code"
-            className="absolute right-3 top-2 flex items-center gap-1 rounded-md px-2 py-1 text-xs
-              text-gray-400 hover:text-gray-700 dark:hover:text-gray-200
-              bg-white/70 dark:bg-black/40 backdrop-blur
-              transition-colors cursor-pointer"
+            className="absolute top-2 right-3 flex cursor-pointer items-center gap-1 rounded-md bg-white/70 px-2 py-1 text-xs text-gray-400 backdrop-blur transition-colors hover:text-gray-700 dark:bg-black/40 dark:hover:text-gray-200"
           >
             {copied ? (
               <>
diff --git a/frontend/components/q&a/FloatingExplainButton.tsx b/frontend/components/q&a/FloatingExplainButton.tsx
index a5f8d0ef..e04d6384 100644
--- a/frontend/components/q&a/FloatingExplainButton.tsx
+++ b/frontend/components/q&a/FloatingExplainButton.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
 import { useTranslations } from 'next-intl';
+import { useEffect, useRef } from 'react';
+
 import { cn } from '@/lib/utils';
 
 interface FloatingExplainButtonProps {
@@ -64,7 +65,7 @@ export default function FloatingExplainButton({
         'hover:bg-[var(--accent-hover)]',
         'transition-all duration-200',
         'animate-in fade-in-0 zoom-in-95',
-        'focus:outline-none focus:ring-2 focus:ring-[var(--accent-primary)] focus:ring-offset-2'
+        'focus:ring-2 focus:ring-[var(--accent-primary)] focus:ring-offset-2 focus:outline-none'
       )}
       style={{
         left: `${position.x}px`,
diff --git a/frontend/components/q&a/HighlightCachedTerms.tsx b/frontend/components/q&a/HighlightCachedTerms.tsx
index b8bd4776..7a77bb28 100644
--- a/frontend/components/q&a/HighlightCachedTerms.tsx
+++ b/frontend/components/q&a/HighlightCachedTerms.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useMemo } from 'react';
+
 import { cn } from '@/lib/utils';
 
 interface HighlightCachedTermsProps {
@@ -95,9 +96,9 @@ export default function HighlightCachedTerms({
               'border-b border-dashed border-emerald-500/60',
               'bg-emerald-50/50 dark:bg-emerald-900/20',
               'hover:bg-emerald-100 dark:hover:bg-emerald-900/40',
-              'focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:ring-offset-1',
+              'focus:ring-2 focus:ring-emerald-500/50 focus:ring-offset-1 focus:outline-none',
               'transition-colors duration-150',
-              'rounded-sm px-0.5 -mx-0.5'
+              '-mx-0.5 rounded-sm px-0.5'
             )}
             title="Click to see explanation (cached)"
           >
diff --git a/frontend/components/q&a/Pagination.tsx b/frontend/components/q&a/Pagination.tsx
index 6487d9a7..5d905300 100644
--- a/frontend/components/q&a/Pagination.tsx
+++ b/frontend/components/q&a/Pagination.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
 import { cn } from '@/lib/utils';
 
 interface PaginationProps {
@@ -82,7 +83,7 @@ export function Pagination({
 
   return (
     <nav
-      className="flex items-center justify-center gap-1 mt-8 sm:gap-2"
+      className="mt-8 flex items-center justify-center gap-1 sm:gap-2"
       style={
         {
           '--qa-accent': accentColor,
@@ -96,18 +97,18 @@ export function Pagination({
         onClick={() => onPageChange(currentPage - 1)}
         disabled={currentPage === 1}
         className={cn(
-          'px-2 py-2 text-sm font-medium rounded-lg transition-colors sm:px-3',
+          'rounded-lg px-2 py-2 text-sm font-medium transition-colors sm:px-3',
           'border border-gray-300 bg-white/90 dark:border-gray-700 dark:bg-neutral-900/80',
           currentPage === 1
-            ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
-            : 'text-gray-700 dark:text-gray-300 hover:bg-[var(--qa-accent-soft)]'
+            ? 'cursor-not-allowed text-gray-400 dark:text-gray-600'
+            : 'text-gray-700 hover:bg-[var(--qa-accent-soft)] dark:text-gray-300'
         )}
         aria-label={t('previousPage')}
       >
         ← <span className="hidden sm:inline">{t('previous')}</span>
       </button>
 
-      <div className="flex items-center gap-1 mx-1 sm:mx-2">
+      <div className="mx-1 flex items-center gap-1 sm:mx-2">
         {pages.map((page, index) =>
           page === 'ellipsis' ? (
             <span
@@ -122,10 +123,10 @@ export function Pagination({
               onClick={() => onPageChange(page)}
               disabled={page === currentPage}
               className={cn(
-                'min-w-[40px] px-3 py-2 text-sm font-medium rounded-lg transition-colors border border-transparent overflow-hidden bg-white/90 dark:bg-neutral-900/80',
+                'min-w-[40px] overflow-hidden rounded-lg border border-transparent bg-white/90 px-3 py-2 text-sm font-medium transition-colors dark:bg-neutral-900/80',
                 page === currentPage
-                  ? 'shadow-sm text-gray-700 dark:text-gray-300'
-                  : 'text-gray-700 dark:text-gray-300 hover:bg-[var(--qa-accent-soft)]'
+                  ? 'text-gray-700 shadow-sm dark:text-gray-300'
+                  : 'text-gray-700 hover:bg-[var(--qa-accent-soft)] dark:text-gray-300'
               )}
               style={
                 page === currentPage
@@ -149,11 +150,11 @@ export function Pagination({
         onClick={() => onPageChange(currentPage + 1)}
         disabled={currentPage === totalPages}
         className={cn(
-          'px-2 py-2 text-sm font-medium rounded-lg transition-colors sm:px-3',
+          'rounded-lg px-2 py-2 text-sm font-medium transition-colors sm:px-3',
           'border border-gray-300 bg-white/90 dark:border-gray-700 dark:bg-neutral-900/80',
           currentPage === totalPages
-            ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
-            : 'text-gray-700 dark:text-gray-300 hover:bg-[var(--qa-accent-soft)]'
+            ? 'cursor-not-allowed text-gray-400 dark:text-gray-600'
+            : 'text-gray-700 hover:bg-[var(--qa-accent-soft)] dark:text-gray-300'
         )}
         aria-label={t('nextPage')}
       >
diff --git a/frontend/components/q&a/QaSection.tsx b/frontend/components/q&a/QaSection.tsx
index 09c255f6..a07b9304 100644
--- a/frontend/components/q&a/QaSection.tsx
+++ b/frontend/components/q&a/QaSection.tsx
@@ -1,15 +1,16 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
+
 import AccordionList from '@/components/q&a/AccordionList';
 import { Pagination } from '@/components/q&a/Pagination';
-import { Tabs, TabsList, TabsContent } from '@/components/ui/tabs';
-import { categoryData } from '@/data/category';
+import type { CategorySlug } from '@/components/q&a/types';
 import { useQaTabs } from '@/components/q&a/useQaTabs';
 import { CategoryTabButton } from '@/components/shared/CategoryTabButton';
+import { Tabs, TabsContent,TabsList } from '@/components/ui/tabs';
+import { categoryData } from '@/data/category';
 import { categoryTabStyles } from '@/data/categoryStyles';
 import { cn } from '@/lib/utils';
-import type { CategorySlug } from '@/components/q&a/types';
 
 export default function TabsSection() {
   const t = useTranslations('qa');
@@ -27,22 +28,22 @@ export default function TabsSection() {
   return (
     <div className="w-full">
       <Tabs value={active} onValueChange={handleCategoryChange}>
-        <TabsList className="!bg-transparent !p-0 !h-auto !w-full flex flex-wrap items-stretch justify-start gap-3 mb-6">
+        <TabsList className="mb-6 flex !h-auto !w-full flex-wrap items-stretch justify-start gap-3 !bg-transparent !p-0">
           {categoryData.map(category => {
             const slug = category.slug as keyof typeof categoryTabStyles;
             const value = slug as CategorySlug;
             return (
-            <CategoryTabButton
-              key={slug}
-              value={value}
-              label={
-                category.translations[localeKey] ??
-                category.translations.en ??
-                value
-              }
-              style={categoryTabStyles[slug]}
-              isActive={active === value}
-            />
+              <CategoryTabButton
+                key={slug}
+                value={value}
+                label={
+                  category.translations[localeKey] ??
+                  category.translations.en ??
+                  value
+                }
+                style={categoryTabStyles[slug]}
+                isActive={active === value}
+              />
             );
           })}
         </TabsList>
@@ -51,7 +52,7 @@ export default function TabsSection() {
           <TabsContent key={category.slug} value={category.slug}>
             {isLoading && (
               <div className="flex justify-center py-12">
-                <div className="animate-spin h-8 w-8 border-b-2" />
+                <div className="h-8 w-8 animate-spin border-b-2" />
               </div>
             )}
             <div
@@ -64,9 +65,7 @@ export default function TabsSection() {
               {items.length ? (
                 <AccordionList items={items} />
               ) : (
-                <p className="text-center py-12">
-                  {t('noQuestions')}
-                </p>
+                <p className="py-12 text-center">{t('noQuestions')}</p>
               )}
             </div>
           </TabsContent>
@@ -78,7 +77,9 @@ export default function TabsSection() {
           currentPage={currentPage}
           totalPages={totalPages}
           onPageChange={handlePageChange}
-          accentColor={categoryTabStyles[active as keyof typeof categoryTabStyles].accent}
+          accentColor={
+            categoryTabStyles[active as keyof typeof categoryTabStyles].accent
+          }
         />
       )}
     </div>
diff --git a/frontend/components/q&a/types.ts b/frontend/components/q&a/types.ts
index 3c097667..7c9b550f 100644
--- a/frontend/components/q&a/types.ts
+++ b/frontend/components/q&a/types.ts
@@ -33,7 +33,11 @@ export type NumberedListBlock = {
   children: ListEntry[];
 };
 
-export type ListItemChild = TextNode | CodeBlock | BulletListBlock | NumberedListBlock;
+export type ListItemChild =
+  | TextNode
+  | CodeBlock
+  | BulletListBlock
+  | NumberedListBlock;
 
 export type ListItemBlock = {
   type: 'listItem';
diff --git a/frontend/components/q&a/useQaTabs.ts b/frontend/components/q&a/useQaTabs.ts
index 0a7c4510..d6c6f8e4 100644
--- a/frontend/components/q&a/useQaTabs.ts
+++ b/frontend/components/q&a/useQaTabs.ts
@@ -1,10 +1,9 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { useLocale } from 'next-intl';
-import { useRouter } from '@/i18n/routing';
-import { categoryData } from '@/data/category';
+import { useCallback,useEffect, useState } from 'react';
+
 import {
   type CategorySlug,
   type Locale,
@@ -12,6 +11,8 @@ import {
   type QuestionApiItem,
   type QuestionEntry,
 } from '@/components/q&a/types';
+import { categoryData } from '@/data/category';
+import { useRouter } from '@/i18n/routing';
 
 const CATEGORY_SLUGS = categoryData.map(category => category.slug);
 const DEFAULT_CATEGORY = CATEGORY_SLUGS[0] || 'html';
diff --git a/frontend/components/quiz/CountdownTimer.tsx b/frontend/components/quiz/CountdownTimer.tsx
index 18aec648..56b4c27c 100644
--- a/frontend/components/quiz/CountdownTimer.tsx
+++ b/frontend/components/quiz/CountdownTimer.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
 import { cn } from '@/lib/utils';
-import { AlertTriangle } from 'lucide-react';
 
 interface CountdownTimerProps {
   timeLimitSeconds: number;
@@ -90,14 +91,14 @@ export function CountdownTimer({
         percentage <= 10 && 'animate-pulse'
       )}
     >
-      <div className="flex items-center justify-between mb-2">
+      <div className="mb-2 flex items-center justify-between">
         <span className="text-sm font-medium">{t('label')}</span>
-        <span className="text-2xl font-bold font-mono">
+        <span className="font-mono text-2xl font-bold">
           {String(minutes).padStart(2, '0')}:{String(seconds).padStart(2, '0')}
         </span>
       </div>
 
-      <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+      <div className="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
         <div
           className={cn(
             'h-full transition-all duration-1000 ease-linear',
@@ -108,10 +109,10 @@ export function CountdownTimer({
       </div>
 
       {percentage <= 30 && (
-        <p className="text-xs mt-2 font-medium">
+        <p className="mt-2 text-xs font-medium">
           {percentage <= 10 ? (
             <>
-              <AlertTriangle className="w-4 h-4 inline text-amber-500" />{' '}
+              <AlertTriangle className="inline h-4 w-4 text-amber-500" />{' '}
               {t('almostDone')}
             </>
           ) : (
diff --git a/frontend/components/quiz/ExplanationRenderer.tsx b/frontend/components/quiz/ExplanationRenderer.tsx
index b58d7425..a80b65ac 100644
--- a/frontend/components/quiz/ExplanationRenderer.tsx
+++ b/frontend/components/quiz/ExplanationRenderer.tsx
@@ -29,8 +29,7 @@ const renderText = (node: TextNode, index: number) => {
     text = (
       <code
         key={index}
-        className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-sm
-  font-mono"
+        className="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-sm dark:bg-gray-800"
       >
         {node.text}
       </code>
@@ -77,9 +76,9 @@ export default function ExplanationRenderer({
             return (
               <pre
                 key={blockIndex}
-                className="bg-gray-900 text-gray-100 p-6 rounded-lg overflow-x-auto"
+                className="overflow-x-auto rounded-lg bg-gray-900 p-6 text-gray-100"
               >
-                <code className="text-sm font-mono block leading-relaxed">
+                <code className="block font-mono text-sm leading-relaxed">
                   {block.children
                     .map(child => (child as TextNode).text)
                     .join('')}
@@ -91,7 +90,7 @@ export default function ExplanationRenderer({
             return (
               <ol
                 key={blockIndex}
-                className="list-decimal list-inside space-y-2 ml-4"
+                className="ml-4 list-inside list-decimal space-y-2"
               >
                 {renderChildren(block.children)}
               </ol>
@@ -101,7 +100,7 @@ export default function ExplanationRenderer({
             return (
               <ul
                 key={blockIndex}
-                className="list-disc list-inside space-y-2 ml-4"
+                className="ml-4 list-inside list-disc space-y-2"
               >
                 {renderChildren(block.children)}
               </ul>
diff --git a/frontend/components/quiz/PendingResultHandler.tsx b/frontend/components/quiz/PendingResultHandler.tsx
index 1bfe65a5..479bc06e 100644
--- a/frontend/components/quiz/PendingResultHandler.tsx
+++ b/frontend/components/quiz/PendingResultHandler.tsx
@@ -1,7 +1,11 @@
 'use client';
 
 import { useEffect } from 'react';
-import { getPendingQuizResult, clearPendingQuizResult } from '@/lib/quiz/guest-quiz';
+
+import {
+  clearPendingQuizResult,
+  getPendingQuizResult,
+} from '@/lib/quiz/guest-quiz';
 
 interface Props {
   userId: string;
@@ -13,9 +17,9 @@ export function PendingResultHandler({ userId }: Props) {
     if (!pending) return;
 
     if (pending) {
-      fetch("/api/quiz/guest-result", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+      fetch('/api/quiz/guest-result', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           userId,
           quizId: pending.quizId,
@@ -24,18 +28,18 @@ export function PendingResultHandler({ userId }: Props) {
           timeSpentSeconds: pending.timeSpentSeconds,
         }),
       })
-        .then(async (res) => {
+        .then(async res => {
           if (res.ok) {
             clearPendingQuizResult();
           } else {
-            console.error("Guest-result API error:", res.status);
+            console.error('Guest-result API error:', res.status);
           }
         })
         .catch(err => {
-          console.error("Guest-result fetch error:", err);
+          console.error('Guest-result fetch error:', err);
         });
     }
   }, [userId]);
 
   return null;
-}
\ No newline at end of file
+}
diff --git a/frontend/components/quiz/QuizCard.tsx b/frontend/components/quiz/QuizCard.tsx
index 10a39370..eb23c28c 100644
--- a/frontend/components/quiz/QuizCard.tsx
+++ b/frontend/components/quiz/QuizCard.tsx
@@ -1,10 +1,11 @@
 'use client';
 
+import { Clock,FileText } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { Link } from '@/i18n/routing';
+
 import { Badge } from '@/components/ui/badge';
-import { FileText, Clock } from 'lucide-react';
 import { categoryTabStyles } from '@/data/categoryStyles';
+import { Link } from '@/i18n/routing';
 
 interface QuizCardProps {
   quiz: {
@@ -27,7 +28,8 @@ interface QuizCardProps {
 export function QuizCard({ quiz, userProgress }: QuizCardProps) {
   const t = useTranslations('quiz.card');
   const slug = quiz.categorySlug as keyof typeof categoryTabStyles | null;
-  const style = slug && categoryTabStyles[slug] ? categoryTabStyles[slug] : null;
+  const style =
+    slug && categoryTabStyles[slug] ? categoryTabStyles[slug] : null;
   const accentColor = style?.accent ?? '#3B82F6'; // fallback blue
 
   const percentage =
@@ -36,16 +38,16 @@ export function QuizCard({ quiz, userProgress }: QuizCardProps) {
       : 0;
 
   return (
-    <div 
-      className="group/card relative flex flex-col rounded-xl border border-black/10 dark:border-white/10 hover:!border-[var(--accent)] bg-white dark:bg-neutral-900 p-5 shadow-sm overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
+    <div
+      className="group/card relative flex flex-col overflow-hidden rounded-xl border border-black/10 bg-white p-5 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:!border-[var(--accent)] hover:shadow-xl dark:border-white/10 dark:bg-neutral-900"
       style={{ '--accent': `${accentColor}60` } as React.CSSProperties}
     >
       <span
-        className="pointer-events-none absolute -top-6 -right-6 w-24 h-24 rounded-full blur-[40px] opacity-0 group-hover/card:opacity-20 transition-opacity duration-500"
+        className="pointer-events-none absolute -top-6 -right-6 h-24 w-24 rounded-full opacity-0 blur-[40px] transition-opacity duration-500 group-hover/card:opacity-20"
         style={{ backgroundColor: accentColor }}
       />
       <div className="flex-grow">
-        <div className="flex gap-2 mb-3">
+        <div className="mb-3 flex gap-2">
           <Badge
             variant="default"
             style={{
@@ -57,21 +59,21 @@ export function QuizCard({ quiz, userProgress }: QuizCardProps) {
           </Badge>
           {userProgress && <Badge variant="success">{t('completed')}</Badge>}
         </div>
-        <h2 className="text-xl font-semibold mb-2">
+        <h2 className="mb-2 text-xl font-semibold">
           {quiz.title ?? quiz.slug}
         </h2>
         {quiz.description && (
-          <p className="line-clamp-2 text-sm text-gray-600 dark:text-gray-400 mb-3">
+          <p className="mb-3 line-clamp-2 text-sm text-gray-600 dark:text-gray-400">
             {quiz.description}
           </p>
         )}
-        <div className="flex gap-3 text-xs text-gray-500 mb-3">
+        <div className="mb-3 flex gap-3 text-xs text-gray-500">
           <span className="flex items-center gap-1">
-           <FileText className="w-3.5 h-3.5" style={{ color: accentColor }} />
+            <FileText className="h-3.5 w-3.5" style={{ color: accentColor }} />
             {quiz.questionsCount} {t('questions')}
           </span>
           <span className="flex items-center gap-1">
-            <Clock className="w-3.5 h-3.5" style={{ color: accentColor }} />
+            <Clock className="h-3.5 w-3.5" style={{ color: accentColor }} />
             {Math.floor(
               (quiz.timeLimitSeconds ?? quiz.questionsCount * 30) / 60
             )}{' '}
@@ -81,7 +83,7 @@ export function QuizCard({ quiz, userProgress }: QuizCardProps) {
       </div>
       {userProgress && (
         <div className="mb-6">
-          <div className="flex justify-between text-xs mb-1.5">
+          <div className="mb-1.5 flex justify-between text-xs">
             <span className="text-gray-600 dark:text-gray-400">
               {t('best')} {userProgress.bestScore}/{userProgress.totalQuestions}
             </span>
@@ -93,7 +95,7 @@ export function QuizCard({ quiz, userProgress }: QuizCardProps) {
               {percentage}%
             </span>
           </div>
-          <div className="h-1.5 bg-gray-200 dark:bg-neutral-800 rounded-full overflow-hidden">
+          <div className="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-neutral-800">
             <div
               className="h-full rounded-full transition-all"
               style={{ width: `${percentage}%`, backgroundColor: accentColor }}
@@ -103,7 +105,7 @@ export function QuizCard({ quiz, userProgress }: QuizCardProps) {
       )}
       <Link
         href={`/quiz/${quiz.slug}`}
-        className="group relative block w-full overflow-hidden text-center rounded-xl border px-4 py-2.5 text-sm font-semibold transition-all duration-300"
+        className="group relative block w-full overflow-hidden rounded-xl border px-4 py-2.5 text-center text-sm font-semibold transition-all duration-300"
         style={{
           borderColor: `${accentColor}50`,
           backgroundColor: `${accentColor}15`,
@@ -112,7 +114,7 @@ export function QuizCard({ quiz, userProgress }: QuizCardProps) {
       >
         {userProgress ? t('retake') : t('start')}
         <span
-          className="pointer-events-none absolute left-1/2 top-1/2 h-[150%] w-[80%] -translate-x-1/2 -translate-y-1/2 rounded-full blur-[20px] opacity-0 transition-opacity duration-300 group-hover:opacity-30"
+          className="pointer-events-none absolute top-1/2 left-1/2 h-[150%] w-[80%] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-0 blur-[20px] transition-opacity duration-300 group-hover:opacity-30"
           style={{ backgroundColor: accentColor }}
         />
       </Link>
diff --git a/frontend/components/quiz/QuizContainer.tsx b/frontend/components/quiz/QuizContainer.tsx
index 6b1a4003..82c61d6a 100644
--- a/frontend/components/quiz/QuizContainer.tsx
+++ b/frontend/components/quiz/QuizContainer.tsx
@@ -1,33 +1,35 @@
 'use client';
 
-import { useLocale, useTranslations } from 'next-intl';
+import { AlertTriangle, Ban, Clock,FileText } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useLocale, useTranslations } from 'next-intl';
 import {
+  useCallback,
+  useEffect,
   useReducer,
-  useTransition,
   useState,
-  useEffect,
-  useCallback,
+  useTransition,
 } from 'react';
 import { toast } from 'sonner';
+
+import { submitQuizAttempt } from '@/actions/quiz';
+import { Button } from '@/components/ui/button';
+import { ConfirmModal } from '@/components/ui/confirm-modal';
+import { categoryTabStyles } from '@/data/categoryStyles';
+import type { QuizQuestionClient } from '@/db/queries/quiz';
 import { useAntiCheat } from '@/hooks/useAntiCheat';
-import { useQuizSession } from '@/hooks/useQuizSession';
 import { useQuizGuards } from '@/hooks/useQuizGuards';
-import { QuizProgress } from './QuizProgress';
-import { QuizQuestion } from './QuizQuestion';
-import { QuizResult } from './QuizResult';
-import { CountdownTimer } from './CountdownTimer';
-import { submitQuizAttempt } from '@/actions/quiz';
+import { useQuizSession } from '@/hooks/useQuizSession';
+import { savePendingQuizResult } from '@/lib/quiz/guest-quiz';
 import {
   clearQuizSession,
   type QuizSessionData,
 } from '@/lib/quiz/quiz-session';
-import { savePendingQuizResult } from '@/lib/quiz/guest-quiz';
-import type { QuizQuestionClient } from '@/db/queries/quiz';
-import { ConfirmModal } from '@/components/ui/confirm-modal';
-import { Button } from '@/components/ui/button';
-import { FileText, Ban, AlertTriangle, Clock } from 'lucide-react';
-import { categoryTabStyles } from '@/data/categoryStyles';
+
+import { CountdownTimer } from './CountdownTimer';
+import { QuizProgress } from './QuizProgress';
+import { QuizQuestion } from './QuizQuestion';
+import { QuizResult } from './QuizResult';
 
 interface Answer {
   questionId: string;
@@ -391,14 +393,14 @@ export function QuizContainer({
 
   if (state.status === 'rules') {
     return (
-      <div className="max-w-2xl mx-auto space-y-6 p-6 rounded-xl border border-gray-200 dark:border-gray-800">
+      <div className="mx-auto max-w-2xl space-y-6 rounded-xl border border-gray-200 p-6 dark:border-gray-800">
         <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
           {tRules('title')}
         </h2>
 
         <div className="space-y-4 text-gray-700 dark:text-gray-300">
           <div className="flex gap-3">
-            <FileText className="w-5 h-5 text-blue-500 dark:text-blue-400 flex-shrink-0 mt-0.5" />
+            <FileText className="mt-0.5 h-5 w-5 flex-shrink-0 text-blue-500 dark:text-blue-400" />
             <div>
               <p className="font-medium">{tRules('general.title')}</p>
               <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -408,10 +410,10 @@ export function QuizContainer({
           </div>
 
           <div className="flex gap-3">
-            <Ban className="w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5" />
+            <Ban className="mt-0.5 h-5 w-5 flex-shrink-0 text-red-500 dark:text-red-400" />
             <div>
               <p className="font-medium">{tRules('forbidden.title')}</p>
-              <ul className="text-sm text-gray-600 dark:text-gray-400 list-disc list-inside space-y-1">
+              <ul className="list-inside list-disc space-y-1 text-sm text-gray-600 dark:text-gray-400">
                 <li>{tRules('forbidden.copyPaste')}</li>
                 <li>{tRules('forbidden.contextMenu')}</li>
                 <li>{tRules('forbidden.tabSwitch')}</li>
@@ -421,7 +423,7 @@ export function QuizContainer({
           </div>
 
           <div className="flex gap-3">
-            <AlertTriangle className="w-5 h-5 text-amber-500 dark:text-amber-400 flex-shrink-0 mt-0.5" />
+            <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500 dark:text-amber-400" />
             <div>
               <p className="font-medium">{tRules('control.title')}</p>
               <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -430,7 +432,7 @@ export function QuizContainer({
             </div>
           </div>
           <div className="flex gap-3">
-            <Clock className="w-5 h-5 text-blue-500 dark:text-blue-400 flex-shrink-0 mt-0.5" />
+            <Clock className="mt-0.5 h-5 w-5 flex-shrink-0 text-blue-500 dark:text-blue-400" />
             <div>
               <p className="font-medium">{tRules('time.title')}</p>
               <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -441,7 +443,7 @@ export function QuizContainer({
         </div>
         <button
           onClick={handleStart}
-          className="group relative w-full overflow-hidden text-center rounded-xl border px-6 py-3 text-base font-semibold transition-all duration-300"
+          className="group relative w-full overflow-hidden rounded-xl border px-6 py-3 text-center text-base font-semibold transition-all duration-300"
           style={{
             borderColor: `${accentColor}50`,
             backgroundColor: `${accentColor}15`,
@@ -450,7 +452,7 @@ export function QuizContainer({
         >
           {tRules('startButton')}
           <span
-            className="pointer-events-none absolute left-1/2 top-1/2 h-[150%] w-[80%] -translate-x-1/2 -translate-y-1/2 rounded-full blur-[20px] opacity-0 transition-opacity duration-300 group-hover:opacity-30"
+            className="pointer-events-none absolute top-1/2 left-1/2 h-[150%] w-[80%] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-0 blur-[20px] transition-opacity duration-300 group-hover:opacity-30"
             style={{ backgroundColor: accentColor }}
           />
         </button>
@@ -480,7 +482,7 @@ export function QuizContainer({
   }
 
   return (
-    <div className="space-y-8 no-select">
+    <div className="no-select space-y-8">
       <div className="flex justify-end">
         <Button
           variant="outline"
@@ -489,7 +491,7 @@ export function QuizContainer({
           className="gap-2 hover:border-red-500 hover:text-red-600 dark:hover:text-red-400"
         >
           <svg
-            className="w-4 h-4"
+            className="h-4 w-4"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
diff --git a/frontend/components/quiz/QuizProgress.tsx b/frontend/components/quiz/QuizProgress.tsx
index dc15a6b0..a6e84e01 100644
--- a/frontend/components/quiz/QuizProgress.tsx
+++ b/frontend/components/quiz/QuizProgress.tsx
@@ -1,8 +1,9 @@
 'use client';
 
+import { Check, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+
 import { cn } from '@/lib/utils';
-import { Check, X } from 'lucide-react';
 
 interface Answer {
   questionId: string;
@@ -15,7 +16,10 @@ interface QuizProgressProps {
   answers: Answer[];
 }
 
-function getVisibleIndices(current: number, total: number): (number | 'ellipsis')[] {
+function getVisibleIndices(
+  current: number,
+  total: number
+): (number | 'ellipsis')[] {
   if (total <= 7) {
     return Array.from({ length: total }, (_, i) => i);
   }
@@ -65,7 +69,7 @@ export function QuizProgress({ current, total, answers }: QuizProgressProps) {
             return (
               <span
                 key={`ellipsis-${idx}`}
-                className="px-2 text-gray-400 dark:text-gray-500 text-sm"
+                className="px-2 text-sm text-gray-400 dark:text-gray-500"
               >
                 ...
               </span>
@@ -82,34 +86,48 @@ export function QuizProgress({ current, total, answers }: QuizProgressProps) {
             <div
               key={index}
               className={cn(
-                'relative flex items-center justify-center w-9 h-9 rounded-full transition-all border text-sm font-medium',
-                isCurrent && !isAnswered && 'border-blue-500 bg-blue-500/20 dark:bg-blue-500/20',
-                isAnswered && isCorrect && 'border-green-500 bg-green-500/20 dark:bg-green-500/20',
-                isAnswered && !isCorrect && 'border-red-500 bg-red-500/20 dark:bg-red-500/20',
-                !isAnswered && !isCurrent && 'border-gray-300 dark:border-gray-600 bg-white/90 dark:bg-neutral-900/80'
+                'relative flex h-9 w-9 items-center justify-center rounded-full border text-sm font-medium transition-all',
+                isCurrent &&
+                  !isAnswered &&
+                  'border-blue-500 bg-blue-500/20 dark:bg-blue-500/20',
+                isAnswered &&
+                  isCorrect &&
+                  'border-green-500 bg-green-500/20 dark:bg-green-500/20',
+                isAnswered &&
+                  !isCorrect &&
+                  'border-red-500 bg-red-500/20 dark:bg-red-500/20',
+                !isAnswered &&
+                  !isCurrent &&
+                  'border-gray-300 bg-white/90 dark:border-gray-600 dark:bg-neutral-900/80'
               )}
             >
               {isAnswered ? (
-                <span className="text-white font-bold">
-                  {isCorrect ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
+                <span className="font-bold text-white">
+                  {isCorrect ? (
+                    <Check className="h-3 w-3" />
+                  ) : (
+                    <X className="h-3 w-3" />
+                  )}
                 </span>
               ) : (
                 <span
                   className={cn(
-                    isCurrent ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400'
+                    isCurrent
+                      ? 'text-blue-600 dark:text-blue-400'
+                      : 'text-gray-400'
                   )}
                 >
                   {index + 1}
                 </span>
               )}
               {isCurrent && (
-                <div 
+                <div
                   className={cn(
-                    "absolute inset-0 rounded-full border-1 animate-pulse",
-                    !isAnswered && "border-blue-500",
-                    isAnswered && isCorrect && "border-green-500",
-                    isAnswered && !isCorrect && "border-red-500"
-                  )} 
+                    'absolute inset-0 animate-pulse rounded-full border-1',
+                    !isAnswered && 'border-blue-500',
+                    isAnswered && isCorrect && 'border-green-500',
+                    isAnswered && !isCorrect && 'border-red-500'
+                  )}
                 />
               )}
             </div>
diff --git a/frontend/components/quiz/QuizQuestion.tsx b/frontend/components/quiz/QuizQuestion.tsx
index 6d4898e7..5435816a 100644
--- a/frontend/components/quiz/QuizQuestion.tsx
+++ b/frontend/components/quiz/QuizQuestion.tsx
@@ -1,12 +1,14 @@
 'use client';
 
+import { Check, Lightbulb,X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { QuizQuestionClient } from '@/db/queries/quiz';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+
 import { Button } from '@/components/ui/button';
-import ExplanationRenderer from './ExplanationRenderer';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { QuizQuestionClient } from '@/db/queries/quiz';
 import { cn } from '@/lib/utils';
-import { Check, X, Lightbulb } from 'lucide-react';
+
+import ExplanationRenderer from './ExplanationRenderer';
 
 interface QuizQuestionProps {
   question: QuizQuestionClient;
@@ -55,7 +57,7 @@ export function QuizQuestion({
             <label
               key={answer.id}
               className={cn(
-                'flex items-center gap-3 rounded-xl border px-4 py-3 cursor-pointer transition-colors',
+                'flex cursor-pointer items-center gap-3 rounded-xl border px-4 py-3 transition-colors',
                 'hover:bg-gray-50 dark:hover:bg-gray-800',
                 isSelected &&
                   isAnswering &&
@@ -68,13 +70,13 @@ export function QuizQuestion({
               <RadioGroupItem value={answer.id} />
               <span className="flex-1 text-base">{answer.answerText}</span>
               {showCorrect && (
-                <span className="text-green-600 dark:text-green-400 text-sm font-medium">
-                  <Check className="w-4 h-4 inline" /> {t('correct')}
+                <span className="text-sm font-medium text-green-600 dark:text-green-400">
+                  <Check className="inline h-4 w-4" /> {t('correct')}
                 </span>
               )}
               {showIncorrect && (
-                <span className="text-red-600 dark:text-red-400 text-sm font-medium">
-                 <X className="w-4 h-4 inline" /> {t('incorrect')}
+                <span className="text-sm font-medium text-red-600 dark:text-red-400">
+                  <X className="inline h-4 w-4" /> {t('incorrect')}
                 </span>
               )}
             </label>
@@ -84,7 +86,7 @@ export function QuizQuestion({
       {isRevealed && isCorrectAnswer && question.explanation && (
         <div
           className={cn(
-            'rounded-xl border p-4 animate-in fade-in duration-300',
+            'animate-in fade-in rounded-xl border p-4 duration-300',
             'border-1 border-blue-500 dark:border-blue-500'
           )}
         >
@@ -97,14 +99,14 @@ export function QuizQuestion({
       {isRevealed && !isCorrectAnswer && (
         <div
           className={cn(
-            'rounded-xl border p-4 animate-in fade-in duration-300',
+            'animate-in fade-in rounded-xl border p-4 duration-300',
             'border-1 border-orange-500 dark:border-orange-500'
           )}
         >
           <div className="flex items-start gap-3">
-            <Lightbulb className="w-6 h-6 text-amber-500 flex-shrink-0" />
+            <Lightbulb className="h-6 w-6 flex-shrink-0 text-amber-500" />
             <div className="flex-1">
-              <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">
+              <h4 className="mb-1 font-semibold text-gray-900 dark:text-gray-100">
                 {t('recommendation.title')}
               </h4>
               <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -118,7 +120,7 @@ export function QuizQuestion({
         <button
           onClick={onNext}
           disabled={isLoading}
-          className="group relative mt-2 w-full overflow-hidden text-center rounded-xl border px-6 py-3 text-base font-semibold transition-all duration-300 disabled:opacity-50 animate-in fade-in slide-in-from-bottom-2"
+          className="group animate-in fade-in slide-in-from-bottom-2 relative mt-2 w-full overflow-hidden rounded-xl border px-6 py-3 text-center text-base font-semibold transition-all duration-300 disabled:opacity-50"
           style={{
             borderColor: `${accentColor}50`,
             backgroundColor: `${accentColor}15`,
@@ -127,7 +129,7 @@ export function QuizQuestion({
         >
           {isLoading ? t('loading') : t('nextButton')}
           <span
-            className="pointer-events-none absolute left-1/2 top-1/2 h-[150%] w-[80%] -translate-x-1/2 -translate-y-1/2 rounded-full blur-[20px] opacity-0 transition-opacity duration-300 group-hover:opacity-30"
+            className="pointer-events-none absolute top-1/2 left-1/2 h-[150%] w-[80%] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-0 blur-[20px] transition-opacity duration-300 group-hover:opacity-30"
             style={{ backgroundColor: accentColor }}
           />
         </button>
diff --git a/frontend/components/quiz/QuizResult.tsx b/frontend/components/quiz/QuizResult.tsx
index fad7f5ec..3a0bee75 100644
--- a/frontend/components/quiz/QuizResult.tsx
+++ b/frontend/components/quiz/QuizResult.tsx
@@ -1,9 +1,16 @@
 'use client';
 
+import {
+  AlertTriangle,
+  BookOpen,
+  Clock,
+  TrendingUp,
+  Trophy,
+} from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
-import { cn } from '@/lib/utils';
+
 import { Button } from '@/components/ui/button';
-import { Clock, BookOpen, TrendingUp, Trophy, AlertTriangle } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
 interface QuizResultProps {
   score: number;
@@ -28,7 +35,7 @@ export function QuizResult({
   pointsAwarded,
   isGuest = false,
   quizSlug = '',
-  isIncomplete = false, 
+  isIncomplete = false,
   onRestart,
   onBackToTopics,
 }: QuizResultProps) {
@@ -37,7 +44,7 @@ export function QuizResult({
   const getMotivationalMessage = () => {
     if (isIncomplete && answeredCount > 0) {
       return {
-        icon: <Clock className="w-14 h-14 text-orange-500" />,
+        icon: <Clock className="h-14 w-14 text-orange-500" />,
         title: t('incomplete.title'),
         message: t('incomplete.message', { answeredCount, total }),
         color: 'text-orange-600 dark:text-orange-400',
@@ -45,7 +52,7 @@ export function QuizResult({
     }
     if (score === 0 && answeredCount === 0) {
       return {
-        icon: <Clock className="w-14 h-14 text-gray-500" />,
+        icon: <Clock className="h-14 w-14 text-gray-500" />,
         title: t('timeUp.title'),
         message: t('timeUp.message'),
         color: 'text-gray-600 dark:text-gray-400',
@@ -54,7 +61,7 @@ export function QuizResult({
 
     if (score === 0 && answeredCount > 0) {
       return {
-        icon: <BookOpen className="w-14 h-14 text-red-500" />,
+        icon: <BookOpen className="h-14 w-14 text-red-500" />,
         title: t('allWrong.title'),
         message: t('allWrong.message'),
         color: 'text-red-600 dark:text-red-400',
@@ -63,21 +70,21 @@ export function QuizResult({
 
     if (percentage < 50) {
       return {
-        icon: <BookOpen className="w-14 h-14 text-red-500" />,
+        icon: <BookOpen className="h-14 w-14 text-red-500" />,
         title: t('needPractice.title'),
         message: t('needPractice.message'),
         color: 'text-red-600 dark:text-red-400',
       };
     } else if (percentage < 80) {
       return {
-        icon: <TrendingUp className="w-14 h-14 text-orange-500" />,
+        icon: <TrendingUp className="h-14 w-14 text-orange-500" />,
         title: t('goodJob.title'),
         message: t('goodJob.message'),
         color: 'text-orange-600 dark:text-orange-400',
       };
     } else {
       return {
-        icon: <Trophy className="w-14 h-14 text-amber-500" />,
+        icon: <Trophy className="h-14 w-14 text-amber-500" />,
         title: t('excellent.title'),
         message: t('excellent.message'),
         color: 'text-green-600 dark:text-green-400',
@@ -88,11 +95,11 @@ export function QuizResult({
   const motivation = getMotivationalMessage();
 
   return (
-    <div className="max-w-2xl mx-auto space-y-8">
+    <div className="mx-auto max-w-2xl space-y-8">
       <div className="flex justify-center">{motivation.icon}</div>
       {!isIncomplete && (
         <>
-          <div className="text-center space-y-2">
+          <div className="space-y-2 text-center">
             <h2 className="text-4xl font-bold text-gray-900 dark:text-gray-100">
               {score} / {total}
             </h2>
@@ -101,7 +108,7 @@ export function QuizResult({
             </p>
           </div>
           <div className="space-y-2">
-            <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded-full overflow-hidden">
+            <div className="h-4 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800">
               <div
                 className={cn(
                   'h-full transition-all duration-1000 ease-out',
@@ -115,30 +122,35 @@ export function QuizResult({
           </div>
         </>
       )}
-      <div className="text-center space-y-2">
+      <div className="space-y-2 text-center">
         <h3 className={cn('text-xl font-semibold', motivation.color)}>
           {motivation.title}
         </h3>
         <p className="text-gray-600 dark:text-gray-400">{motivation.message}</p>
       </div>
-{violationsCount >= 3 && (
-        <div className="p-4 rounded-xl bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800">
-          <p className="text-center text-orange-800 dark:text-orange-200 font-medium">
-            <AlertTriangle className="w-4 h-4 inline" /> {t('violations', { count: violationsCount })}
+      {violationsCount >= 3 && (
+        <div className="rounded-xl border border-orange-200 bg-orange-50 p-4 dark:border-orange-800 dark:bg-orange-900/20">
+          <p className="text-center font-medium text-orange-800 dark:text-orange-200">
+            <AlertTriangle className="inline h-4 w-4" />{' '}
+            {t('violations', { count: violationsCount })}
           </p>
         </div>
       )}
       {!isGuest && pointsAwarded !== null && pointsAwarded !== undefined && (
-        <div className={`p-4 rounded-xl border ${
-          pointsAwarded > 0 
-            ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800' 
-            : 'bg-gray-50 dark:bg-gray-900/20 border-gray-200 dark:border-gray-800'
-        }`}>
-          <p className={`text-center font-medium ${
+        <div
+          className={`rounded-xl border p-4 ${
             pointsAwarded > 0
-              ? 'text-green-800 dark:text-green-200'
-              : 'text-gray-600 dark:text-gray-400'
-          }`}>
+              ? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/20'
+              : 'border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/20'
+          }`}
+        >
+          <p
+            className={`text-center font-medium ${
+              pointsAwarded > 0
+                ? 'text-green-800 dark:text-green-200'
+                : 'text-gray-600 dark:text-gray-400'
+            }`}
+          >
             {pointsAwarded > 0
               ? t('pointsAwarded', { points: pointsAwarded })
               : violationsCount >= 3
@@ -148,39 +160,41 @@ export function QuizResult({
         </div>
       )}
       {isGuest && !isIncomplete ? (
-  <div className="space-y-4">
-    <div className="p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
-      <p className="text-center text-blue-800 dark:text-blue-200 font-medium">
-        {t('guestMessage')}
-      </p>
-    </div>
-<div className="flex flex-col sm:flex-row gap-3 justify-center">
-  <Button
-    onClick={() => {
-      const url = `/${locale}/login?returnTo=/quiz/${quizSlug}`;
-      window.location.href = url;
-    }}
-   >
-    {t('loginButton')}
-  </Button>
-  <Button
-    onClick={() => window.location.href = `/${locale}/signup?returnTo=/quiz/${quizSlug}`}
-    variant="secondary"
-  >
-    {t('signupButton')}
-  </Button>
-</div>
-  </div>
-) : (
-    <div className="flex flex-col sm:flex-row gap-3 justify-center">
-        <Button onClick={onRestart} variant="primary">
-          {t('retryButton')}
-        </Button>
-        <Button onClick={onBackToTopics} variant="secondary">
-          {t('backButton')}
-        </Button>
-      </div>
-)}
+        <div className="space-y-4">
+          <div className="rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20">
+            <p className="text-center font-medium text-blue-800 dark:text-blue-200">
+              {t('guestMessage')}
+            </p>
+          </div>
+          <div className="flex flex-col justify-center gap-3 sm:flex-row">
+            <Button
+              onClick={() => {
+                const url = `/${locale}/login?returnTo=/quiz/${quizSlug}`;
+                window.location.href = url;
+              }}
+            >
+              {t('loginButton')}
+            </Button>
+            <Button
+              onClick={() =>
+                (window.location.href = `/${locale}/signup?returnTo=/quiz/${quizSlug}`)
+              }
+              variant="secondary"
+            >
+              {t('signupButton')}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col justify-center gap-3 sm:flex-row">
+          <Button onClick={onRestart} variant="primary">
+            {t('retryButton')}
+          </Button>
+          <Button onClick={onBackToTopics} variant="secondary">
+            {t('backButton')}
+          </Button>
+        </div>
+      )}
     </div>
-    );
+  );
 }
diff --git a/frontend/components/quiz/QuizzesSection.tsx b/frontend/components/quiz/QuizzesSection.tsx
index c6b64510..7ba69d1a 100644
--- a/frontend/components/quiz/QuizzesSection.tsx
+++ b/frontend/components/quiz/QuizzesSection.tsx
@@ -1,13 +1,15 @@
 'use client';
 
+import { useParams, useRouter,useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { useParams, useSearchParams, useRouter } from 'next/navigation';
-import { QuizCard } from './QuizCard';
-import { Tabs, TabsList, TabsContent } from '@/components/ui/tabs';
-import { categoryData } from '@/data/category';
+
 import { CategoryTabButton } from '@/components/shared/CategoryTabButton';
+import { Tabs, TabsContent,TabsList } from '@/components/ui/tabs';
+import { categoryData } from '@/data/category';
 import { categoryTabStyles } from '@/data/categoryStyles';
 
+import { QuizCard } from './QuizCard';
+
 interface Quiz {
   id: string;
   slug: string;
@@ -57,27 +59,26 @@ export default function QuizzesSection({
     router.replace(`?${params.toString()}`, { scroll: false });
   };
 
-
   return (
     <div className="w-full">
       <Tabs value={activeCategory} onValueChange={handleCategoryChange}>
-        <TabsList className="!bg-transparent !p-0 !h-auto !w-full flex flex-wrap items-stretch justify-start gap-3 mb-6">
-        {categoryData.map(category => {
-          const slug = category.slug as keyof typeof categoryTabStyles;
-          return (
-            <CategoryTabButton
-              key={slug}
-              value={slug}
-              label={
-                category.translations[localeKey] ??
-                category.translations.en ??
-                slug
-              }
-              style={categoryTabStyles[slug]}
-              isActive={activeCategory === slug}
-            />
-          );
-        })}
+        <TabsList className="mb-6 flex !h-auto !w-full flex-wrap items-stretch justify-start gap-3 !bg-transparent !p-0">
+          {categoryData.map(category => {
+            const slug = category.slug as keyof typeof categoryTabStyles;
+            return (
+              <CategoryTabButton
+                key={slug}
+                value={slug}
+                label={
+                  category.translations[localeKey] ??
+                  category.translations.en ??
+                  slug
+                }
+                style={categoryTabStyles[slug]}
+                isActive={activeCategory === slug}
+              />
+            );
+          })}
         </TabsList>
         {categoryData.map(category => {
           const categoryQuizzes = quizzes.filter(
@@ -87,27 +88,27 @@ export default function QuizzesSection({
             <TabsContent key={category.slug} value={category.slug}>
               {categoryQuizzes.length > 0 ? (
                 <div className="max-w-5xl">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  {categoryQuizzes.map(quiz => (
-                    <QuizCard
-                      key={quiz.id}
-                      quiz={{
-                        id: quiz.id,
-                        slug: quiz.slug,
-                        title: quiz.title,
-                        description: quiz.description,
-                        questionsCount: quiz.questionsCount,
-                        timeLimitSeconds: quiz.timeLimitSeconds,
-                        categoryName: quiz.categoryName ?? category.slug,
-                        categorySlug: quiz.categorySlug ?? category.slug,
-                      }}
-                      userProgress={userProgressMap[quiz.id] || null}
-                    />
-                  ))}
-                </div>
+                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                    {categoryQuizzes.map(quiz => (
+                      <QuizCard
+                        key={quiz.id}
+                        quiz={{
+                          id: quiz.id,
+                          slug: quiz.slug,
+                          title: quiz.title,
+                          description: quiz.description,
+                          questionsCount: quiz.questionsCount,
+                          timeLimitSeconds: quiz.timeLimitSeconds,
+                          categoryName: quiz.categoryName ?? category.slug,
+                          categorySlug: quiz.categorySlug ?? category.slug,
+                        }}
+                        userProgress={userProgressMap[quiz.id] || null}
+                      />
+                    ))}
+                  </div>
                 </div>
               ) : (
-                <div className="text-center py-12">
+                <div className="py-12 text-center">
                   <p className="text-gray-600 dark:text-gray-400">
                     {t('noQuizzes')}
                   </p>
diff --git a/frontend/components/quiz/tests/quiz-container-flow.test.tsx b/frontend/components/quiz/tests/quiz-container-flow.test.tsx
index 88b87008..1b0527d3 100644
--- a/frontend/components/quiz/tests/quiz-container-flow.test.tsx
+++ b/frontend/components/quiz/tests/quiz-container-flow.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const { routerReplace, routerBack, toastMock } = vi.hoisted(() => ({
   routerReplace: vi.fn(),
@@ -20,7 +20,6 @@ vi.mock('next/navigation', () => ({
 
 vi.mock('sonner', () => ({ toast: toastMock }));
 
-
 vi.mock('@/hooks/useAntiCheat', () => ({
   useAntiCheat: () => ({
     violations: [],
@@ -113,6 +112,8 @@ describe('QuizContainer flow', () => {
 
     fireEvent.click(await screen.findByRole('button', { name: 'nextButton' }));
 
-    expect(await screen.findByRole('button', { name: 'loginButton' })).toBeTruthy();
+    expect(
+      await screen.findByRole('button', { name: 'loginButton' })
+    ).toBeTruthy();
   });
 });
diff --git a/frontend/components/shared/AnimatedNavLink.tsx b/frontend/components/shared/AnimatedNavLink.tsx
index 582ea25a..85bb3211 100644
--- a/frontend/components/shared/AnimatedNavLink.tsx
+++ b/frontend/components/shared/AnimatedNavLink.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { Link } from '@/i18n/routing';
 import type { ComponentProps } from 'react';
 
+import { Link } from '@/i18n/routing';
+
 interface AnimatedNavLinkProps {
   href: string;
   isActive: boolean;
@@ -25,25 +26,16 @@ export function AnimatedNavLink({
       href={href}
       onClick={onClick}
       aria-current={ariaCurrent ?? (isActive ? 'page' : undefined)}
-      className={`
-        group relative px-3 py-2 text-sm font-medium
-        transition-all duration-300 ease-out
-        ${
-          isActive
-            ? '[color:var(--accent-primary)]'
-            : 'text-muted-foreground hover:[color:var(--accent-hover)]'
-        }
-        ${className}
-      `}
+      className={`group relative px-3 py-2 text-sm font-medium transition-all duration-300 ease-out ${
+        isActive
+          ? '[color:var(--accent-primary)]'
+          : 'text-muted-foreground hover:[color:var(--accent-hover)]'
+      } ${className} `}
     >
       {children}
 
       <span
-        className={`
-          absolute inset-x-0 -bottom-3 h-12
-          transition-opacity duration-300 ease-out
-          ${isActive ? 'opacity-50' : 'opacity-0 group-hover:opacity-40'}
-        `}
+        className={`absolute inset-x-0 -bottom-3 h-12 transition-opacity duration-300 ease-out ${isActive ? 'opacity-50' : 'opacity-0 group-hover:opacity-40'} `}
         style={{
           background: `radial-gradient(ellipse 80px 40px at center bottom, ${
             isActive ? 'var(--accent-primary)' : 'var(--accent-hover)'
@@ -55,11 +47,7 @@ export function AnimatedNavLink({
 
       {isActive && (
         <span
-          className="
-            absolute bottom-[-12px] left-1/2 -translate-x-1/2
-            opacity-100 scale-100
-            transition-all duration-300 ease-out
-          "
+          className="absolute bottom-[-12px] left-1/2 -translate-x-1/2 scale-100 opacity-100 transition-all duration-300 ease-out"
           style={{
             width: 0,
             height: 0,
@@ -74,11 +62,7 @@ export function AnimatedNavLink({
 
       {isActive ? (
         <span
-          className="
-            absolute bottom-[-15px] left-1/2 -translate-x-1/2
-            h-[2px] w-full opacity-100
-            transition-all duration-300 ease-out
-          "
+          className="absolute bottom-[-15px] left-1/2 h-[2px] w-full -translate-x-1/2 opacity-100 transition-all duration-300 ease-out"
           style={{
             background: `linear-gradient(90deg, 
               transparent 0%, 
@@ -90,12 +74,7 @@ export function AnimatedNavLink({
         />
       ) : (
         <span
-          className="
-            absolute bottom-[-15px] left-1/2 -translate-x-1/2
-            h-[3px] w-0
-            opacity-0 group-hover:opacity-100 group-hover:w-full
-            transition-all duration-300 ease-out
-          "
+          className="absolute bottom-[-15px] left-1/2 h-[3px] w-0 -translate-x-1/2 opacity-0 transition-all duration-300 ease-out group-hover:w-full group-hover:opacity-100"
           style={{
             background: `linear-gradient(90deg, 
               transparent 0%,
diff --git a/frontend/components/shared/CategoryTabButton.tsx b/frontend/components/shared/CategoryTabButton.tsx
index 817971ca..a169247f 100644
--- a/frontend/components/shared/CategoryTabButton.tsx
+++ b/frontend/components/shared/CategoryTabButton.tsx
@@ -3,8 +3,8 @@
 import Image from 'next/image';
 
 import { TabsTrigger } from '@/components/ui/tabs';
-import { cn } from '@/lib/utils';
 import type { CategoryTabStyle } from '@/data/categoryStyles';
+import { cn } from '@/lib/utils';
 
 type CategoryTabButtonProps = {
   value: string;
@@ -23,8 +23,8 @@ export function CategoryTabButton({
     <TabsTrigger
       value={value}
       className={cn(
-        'group relative h-full min-w-[96px] !flex !w-fit !flex-none !shrink-0 !items-center !justify-start gap-2 overflow-hidden rounded-xl border border-black/5 bg-white/90 px-4 py-3 text-left text-xs font-semibold text-black shadow-sm transition-all duration-300 ease-out hover:-translate-y-0.5 hover:shadow-lg dark:border-white/20 dark:bg-neutral-900/80 dark:text-white',
-        'data-[state=active]:-translate-y-0.5 data-[state=active]:shadow-lg data-[state=active]:border-2 dark:data-[state=active]:border-2',
+        'group relative !flex h-full !w-fit min-w-[96px] !flex-none !shrink-0 !items-center !justify-start gap-2 overflow-hidden rounded-xl border border-black/5 bg-white/90 px-4 py-3 text-left text-xs font-semibold text-black shadow-sm transition-all duration-300 ease-out hover:-translate-y-0.5 hover:shadow-lg dark:border-white/20 dark:bg-neutral-900/80 dark:text-white',
+        'data-[state=active]:-translate-y-0.5 data-[state=active]:border-2 data-[state=active]:shadow-lg dark:data-[state=active]:border-2',
         style.color
       )}
     >
@@ -44,7 +44,7 @@ export function CategoryTabButton({
       <span className="whitespace-nowrap">{label}</span>
       <span
         className={cn(
-          'pointer-events-none absolute right-0 top-1/2 h-[120%] w-[55%] -translate-y-1/2 rounded-full blur-[24px] opacity-0 transition-opacity duration-500 group-hover:opacity-30',
+          'pointer-events-none absolute top-1/2 right-0 h-[120%] w-[55%] -translate-y-1/2 rounded-full opacity-0 blur-[24px] transition-opacity duration-500 group-hover:opacity-30',
           isActive && 'opacity-30',
           style.glow
         )}
diff --git a/frontend/components/shared/CookieBanner.tsx b/frontend/components/shared/CookieBanner.tsx
index a777ff33..473b560f 100644
--- a/frontend/components/shared/CookieBanner.tsx
+++ b/frontend/components/shared/CookieBanner.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import { X } from 'lucide-react';
-import { Link } from '@/i18n/routing';
-import { Button } from '@/components/ui/button';
 import { useTranslations } from 'next-intl';
+import { useEffect,useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Link } from '@/i18n/routing';
 
 export function CookieBanner() {
   const t = useTranslations('CookieBanner');
@@ -41,8 +42,8 @@ export function CookieBanner() {
   if (!isMounted || !isVisible) return null;
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6 animate-in slide-in-from-bottom-full fade-in duration-700">
-      <div className="mx-auto max-w-4xl rounded-2xl border border-gray-200 bg-white/90 p-5 shadow-2xl backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/90 md:flex md:items-center md:justify-between md:gap-6">
+    <div className="animate-in slide-in-from-bottom-full fade-in fixed right-0 bottom-0 left-0 z-[100] p-4 duration-700 md:p-6">
+      <div className="mx-auto max-w-4xl rounded-2xl border border-gray-200 bg-white/90 p-5 shadow-2xl backdrop-blur-md md:flex md:items-center md:justify-between md:gap-6 dark:border-gray-800 dark:bg-gray-900/90">
         <div className="mb-4 md:mb-0 md:flex-1">
           <div className="mb-1 text-lg font-semibold text-gray-900 dark:text-white">
             {t('title')}
@@ -72,7 +73,7 @@ export function CookieBanner() {
             variant="primary"
             size="sm"
             onClick={handleAccept}
-            className="w-full sm:w-auto shadow-lg shadow-blue-500/20"
+            className="w-full shadow-lg shadow-blue-500/20 sm:w-auto"
           >
             {t('accept')}
           </Button>
@@ -80,7 +81,7 @@ export function CookieBanner() {
 
         <button
           onClick={handleDecline}
-          className="absolute right-2 top-2 rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300 md:hidden"
+          className="absolute top-2 right-2 rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 md:hidden dark:hover:bg-gray-800 dark:hover:text-gray-300"
           aria-label={t('decline')}
         >
           <X size={20} />
diff --git a/frontend/components/shared/DynamicGridBackground.tsx b/frontend/components/shared/DynamicGridBackground.tsx
index fb8f4d99..0d681be4 100644
--- a/frontend/components/shared/DynamicGridBackground.tsx
+++ b/frontend/components/shared/DynamicGridBackground.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import type { ReactNode, MouseEvent } from 'react';
 import { motion, useMotionTemplate, useMotionValue } from 'framer-motion';
+import type { MouseEvent,ReactNode } from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -33,7 +33,7 @@ export function DynamicGridBackground({
     >
       {showStaticGrid && (
         <div className="pointer-events-none absolute inset-0">
-          <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808020_1px,transparent_1px),linear-gradient(to_bottom,#80808020_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,#000_70%,transparent_100%)]" />
+          <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808020_1px,transparent_1px),linear-gradient(to_bottom,#80808020_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,#000_70%,transparent_100%)] bg-[size:40px_40px]" />
         </div>
       )}
 
@@ -44,7 +44,7 @@ export function DynamicGridBackground({
           WebkitMaskImage: maskImage,
         }}
       >
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#1e5eff_1px,transparent_1px),linear-gradient(to_bottom,#1e5eff_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#ff2d55_1px,transparent_1px),linear-gradient(to_bottom,#ff2d55_1px,transparent_1px)] bg-[size:40px_40px] opacity-20 dark:opacity-30" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#1e5eff_1px,transparent_1px),linear-gradient(to_bottom,#1e5eff_1px,transparent_1px)] bg-[size:40px_40px] opacity-20 dark:bg-[linear-gradient(to_right,#ff2d55_1px,transparent_1px),linear-gradient(to_bottom,#ff2d55_1px,transparent_1px)] dark:opacity-30" />
       </motion.div>
 
       {children}
diff --git a/frontend/components/shared/Footer.tsx b/frontend/components/shared/Footer.tsx
index d195df3e..7535f632 100644
--- a/frontend/components/shared/Footer.tsx
+++ b/frontend/components/shared/Footer.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { Link } from '@/i18n/routing';
-
 import { Github, Linkedin, Send } from 'lucide-react';
-import { ThemeToggle } from '@/components/theme/ThemeToggle';
-import { useTranslations } from 'next-intl';
 import { useSelectedLayoutSegments } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+
+import { ThemeToggle } from '@/components/theme/ThemeToggle';
+import { Link } from '@/i18n/routing';
 import { cn } from '@/lib/utils';
 
 const SOCIAL = [
@@ -25,7 +25,7 @@ export default function Footer() {
   return (
     <footer
       className={cn(
-        'relative overflow-hidden border-t border-border bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/50 ' +
+        'border-border bg-background/90 supports-[backdrop-filter]:bg-background/50 relative overflow-hidden border-t backdrop-blur ' +
           '[--footer-brand:var(--accent-primary)] [--footer-hover:var(--accent-hover)] [--theme-toggle-hover:var(--footer-hover)]',
         isShop &&
           '[--footer-brand:var(--foreground)] [--footer-hover:var(--foreground)] ' +
@@ -46,24 +46,14 @@ export default function Footer() {
             <p className="text-sm text-slate-500 dark:text-slate-400">
               <Link
                 href="/privacy-policy"
-                className="
-                  transition-colors
-                  hover:[color:var(--footer-hover)]
-                  active:[color:var(--footer-hover)]
-                  focus-visible:[color:var(--footer-hover)]
-"
+                className="transition-colors hover:[color:var(--footer-hover)] focus-visible:[color:var(--footer-hover)] active:[color:var(--footer-hover)]"
               >
                 {t('privacyPolicy')}
               </Link>
               <span className="px-2 opacity-60">|</span>
               <Link
                 href="/terms-of-service"
-                className="
-                  transition-colors
-                  hover:[color:var(--footer-hover)]
-                  active:[color:var(--footer-hover)]
-                  focus-visible:[color:var(--footer-hover)]
-"
+                className="transition-colors hover:[color:var(--footer-hover)] focus-visible:[color:var(--footer-hover)] active:[color:var(--footer-hover)]"
               >
                 {t('termsOfService')}
               </Link>
@@ -71,12 +61,7 @@ export default function Footer() {
           </div>
 
           <div className="flex items-center gap-3 sm:justify-end">
-            <div
-              className="
-                inline-flex items-center gap-2
-
-              "
-            >
+            <div className="inline-flex items-center gap-2">
               <ThemeToggle />
 
               <span className="mx-1 h-5 w-px bg-gray-200/70 dark:bg-neutral-800/70" />
@@ -89,26 +74,7 @@ export default function Footer() {
                     target="_blank"
                     rel="noreferrer"
                     aria-label={label}
-                    className="
-                      inline-flex h-9 w-9 items-center justify-center
-                      rounded-full border border-gray-200/60
-                      bg-white/40
-                      text-slate-600
-                      dark:border-neutral-800/60
-                      dark:bg-neutral-950/30
-                      dark:text-slate-300
-                      transition-all
-
-                      hover:-translate-y-0.5
-                      hover:!text-[var(--footer-hover)]
-                      hover:!border-[var(--footer-hover)]
-
-                      active:!text-[var(--footer-hover)]
-                      active:!border-[var(--footer-hover)]
-                      active:scale-95
-
-
-                    "
+                    className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-gray-200/60 bg-white/40 text-slate-600 transition-all hover:-translate-y-0.5 hover:!border-[var(--footer-hover)] hover:!text-[var(--footer-hover)] active:scale-95 active:!border-[var(--footer-hover)] active:!text-[var(--footer-hover)] dark:border-neutral-800/60 dark:bg-neutral-950/30 dark:text-slate-300"
                   >
                     <Icon className="h-5 w-5" />
                   </a>
diff --git a/frontend/components/shared/GitHubStarButton.tsx b/frontend/components/shared/GitHubStarButton.tsx
index d79a58aa..c9776bdc 100644
--- a/frontend/components/shared/GitHubStarButton.tsx
+++ b/frontend/components/shared/GitHubStarButton.tsx
@@ -2,7 +2,7 @@
 
 import { Star } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef,useState } from 'react';
 
 interface GitHubStarButtonProps {
   className?: string;
@@ -77,22 +77,7 @@ export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
       target="_blank"
       rel="noopener noreferrer"
       aria-label={t('starOnGithub', { count: displayCount })}
-      className={`
-        hidden lg:inline-flex
-        group relative
-        items-center
-        px-3 py-2
-        text-sm font-medium
-        rounded-lg
-        overflow-hidden
-        bg-foreground text-background
-        dark:bg-foreground dark:text-background
-        border border-border
-        hover:opacity-90
-        transition-all duration-200
-        shadow-sm
-        ${className}
-      `}
+      className={`group bg-foreground text-background dark:bg-foreground dark:text-background border-border relative hidden items-center overflow-hidden rounded-lg border px-3 py-2 text-sm font-medium shadow-sm transition-all duration-200 hover:opacity-90 lg:inline-flex ${className} `}
     >
       <svg
         viewBox="0 0 16 16"
@@ -103,18 +88,12 @@ export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
         <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
       </svg>
 
-      <span className="flex items-center gap-0.5 ml-2">
-        <span className="font-semibold tabular-nums min-w-[2ch] text-right">
+      <span className="ml-2 flex items-center gap-0.5">
+        <span className="min-w-[2ch] text-right font-semibold tabular-nums">
           {formatStarCount(displayCount)}
         </span>
         <Star
-          className="
-            h-4 w-4 flex-shrink-0 
-            transition-all duration-300 
-            group-hover:rotate-12
-            group-hover:text-yellow-400
-            group-hover:drop-shadow-[0_0_6px_rgba(250,204,21,0.5)]
-          "
+          className="h-4 w-4 flex-shrink-0 transition-all duration-300 group-hover:rotate-12 group-hover:text-yellow-400 group-hover:drop-shadow-[0_0_6px_rgba(250,204,21,0.5)]"
           fill="currentColor"
           aria-hidden="true"
         />
diff --git a/frontend/components/shared/HeaderButton.tsx b/frontend/components/shared/HeaderButton.tsx
index 24f47938..3aff8b5f 100644
--- a/frontend/components/shared/HeaderButton.tsx
+++ b/frontend/components/shared/HeaderButton.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { Link } from '@/i18n/routing';
 import type { LucideIcon } from 'lucide-react';
 
+import { Link } from '@/i18n/routing';
+
 interface HeaderButtonProps {
   href?: string;
   onClick?: () => void;
@@ -63,11 +64,7 @@ export function HeaderButton({
   const content = (
     <>
       <span
-        className="
-          absolute inset-0
-          opacity-0 group-hover:opacity-100 group-active:opacity-100
-          transition-opacity duration-500 ease-out
-        "
+        className="absolute inset-0 opacity-0 transition-opacity duration-500 ease-out group-hover:opacity-100 group-active:opacity-100"
         style={{
           background:
             'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
@@ -76,14 +73,7 @@ export function HeaderButton({
       />
 
       <span
-        className="
-          absolute inset-0
-          [--tw-translate-x:-100%]
-          group-hover:[--tw-translate-x:100%]
-          group-active:[--tw-translate-x:100%]
-          transition-transform duration-1000 ease-in-out
-          [transform:translateX(var(--tw-translate-x))_skewX(-20deg)]
-        "
+        className="absolute inset-0 [--tw-translate-x:-100%] [transform:translateX(var(--tw-translate-x))_skewX(-20deg)] transition-transform duration-1000 ease-in-out group-hover:[--tw-translate-x:100%] group-active:[--tw-translate-x:100%]"
         style={{
           background: `linear-gradient(90deg, transparent 0%, rgba(255,255,255,${
             isIconOnly ? '0.3' : '0.4'
diff --git a/frontend/components/shared/LanguageSwitcher.tsx b/frontend/components/shared/LanguageSwitcher.tsx
index 181aa3fd..fc7baeea 100644
--- a/frontend/components/shared/LanguageSwitcher.tsx
+++ b/frontend/components/shared/LanguageSwitcher.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { Globe } from 'lucide-react';
 import { useParams, usePathname, useSearchParams } from 'next/navigation';
-import { locales, type Locale } from '@/i18n/config';
+import { useEffect,useRef, useState } from 'react';
+
+import { type Locale,locales } from '@/i18n/config';
 import { Link } from '@/i18n/routing';
-import { Globe } from 'lucide-react';
 
 const localeLabels: Record<Locale, string> = {
   uk: 'UA',
@@ -43,7 +44,7 @@ export default function LanguageSwitcher() {
     <div className="relative" ref={dropdownRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="group flex items-center gap-1.5 text-muted-foreground font-medium transition-colors active:text-[var(--accent-hover)]"
+        className="group text-muted-foreground flex items-center gap-1.5 font-medium transition-colors active:text-[var(--accent-hover)]"
         aria-label="Change language"
       >
         <Globe className="h-4 w-4 transition-colors group-hover:[color:var(--accent-hover)] group-active:[color:var(--accent-hover)]" />
@@ -68,7 +69,7 @@ export default function LanguageSwitcher() {
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 mt-2 py-2 w-20 bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-md shadow-lg z-[60]">
+        <div className="absolute right-0 z-[60] mt-2 w-20 rounded-md border border-gray-200 bg-white py-2 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
           {locales.map(locale => (
             <Link
               key={locale}
@@ -82,7 +83,7 @@ export default function LanguageSwitcher() {
               }}
               className={`block px-4 py-2 text-sm transition active:text-[var(--accent-hover)] ${
                 currentLocale === locale
-                  ? 'text-muted-foreground font-medium [background-color:color-mix(in_srgb,var(--accent-primary)_10%,transparent)]'
+                  ? 'text-muted-foreground [background-color:color-mix(in_srgb,var(--accent-primary)_10%,transparent)] font-medium'
                   : 'text-muted-foreground hover:bg-secondary active:bg-secondary'
               }`}
             >
diff --git a/frontend/components/shared/Logo.tsx b/frontend/components/shared/Logo.tsx
index 76d1bcb2..1d4c9943 100644
--- a/frontend/components/shared/Logo.tsx
+++ b/frontend/components/shared/Logo.tsx
@@ -10,20 +10,9 @@ export function Logo({ href }: LogoProps) {
   return (
     <Link
       href={href}
-      className="group flex min-w-0 items-center gap-2 active:scale-95 transition-transform"
+      className="group flex min-w-0 items-center gap-2 transition-transform active:scale-95"
     >
-      <span
-        className="
-          truncate text-xl font-bold tracking-tight
-          bg-[linear-gradient(90deg,var(--logo-foreground,var(--foreground)),var(--accent-hover))]
-          bg-[length:200%_100%]
-          bg-[position:0%_50%]
-          bg-clip-text text-transparent
-          transition-[background-position] duration-500 ease-out
-          group-hover:bg-[position:100%_50%]
-          group-active:bg-[position:100%_50%]
-        "
-      >
+      <span className="truncate bg-[linear-gradient(90deg,var(--logo-foreground,var(--foreground)),var(--accent-hover))] bg-[length:200%_100%] bg-clip-text bg-[position:0%_50%] text-xl font-bold tracking-tight text-transparent transition-[background-position] duration-500 ease-out group-hover:bg-[position:100%_50%] group-active:bg-[position:100%_50%]">
         DevLovers
       </span>
     </Link>
diff --git a/frontend/components/shared/OnlineCounterPopup.tsx b/frontend/components/shared/OnlineCounterPopup.tsx
index b2a79739..417bce17 100644
--- a/frontend/components/shared/OnlineCounterPopup.tsx
+++ b/frontend/components/shared/OnlineCounterPopup.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { useTranslations } from 'next-intl';
 import { Users } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
 
 export function OnlineCounterPopup() {
   const t = useTranslations('onlineCounter');
@@ -34,21 +34,18 @@ export function OnlineCounterPopup() {
   };
 
   return (
-    <div className="fixed bottom-[30vh] left-0 right-0 md:bottom-[10vh] md:left-auto md:right-12 z-50 flex justify-center md:justify-end md:pr-0">
+    <div className="fixed right-0 bottom-[30vh] left-0 z-50 flex justify-center md:right-12 md:bottom-[10vh] md:left-auto md:justify-end md:pr-0">
       <div
-        className={`
-          transition-all duration-500 ease-out
-          ${
-            show
-              ? 'translate-y-0 opacity-100 scale-100'
-              : 'translate-y-4 opacity-0 scale-90'
-          }
-        `}
+        className={`transition-all duration-500 ease-out ${
+          show
+            ? 'translate-y-0 scale-100 opacity-100'
+            : 'translate-y-4 scale-90 opacity-0'
+        } `}
       >
         <div className="relative">
-          <div className="absolute -inset-1.5 sm:-inset-2 bg-[var(--accent-primary)]/15 dark:bg-[var(--accent-primary)]/20 blur-xl rounded-3xl" />
+          <div className="absolute -inset-1.5 rounded-3xl bg-[var(--accent-primary)]/15 blur-xl sm:-inset-2 dark:bg-[var(--accent-primary)]/20" />
 
-          <div className="relative inline-flex items-center gap-2.5 sm:gap-2.5 md:gap-3 pl-3 sm:pl-3 md:pl-3.5 pr-3.5 sm:pr-3.5 md:pr-4 py-2.5 sm:py-2.5 md:py-3 rounded-xl sm:rounded-xl md:rounded-2xl bg-card/95 backdrop-blur-xl border border-[var(--accent-primary)]/20 shadow-2xl overflow-hidden">
+          <div className="bg-card/95 relative inline-flex items-center gap-2.5 overflow-hidden rounded-xl border border-[var(--accent-primary)]/20 py-2.5 pr-3.5 pl-3 shadow-2xl backdrop-blur-xl sm:gap-2.5 sm:rounded-xl sm:py-2.5 sm:pr-3.5 sm:pl-3 md:gap-3 md:rounded-2xl md:py-3 md:pr-4 md:pl-3.5">
             <div className="absolute inset-0 opacity-40">
               <div className="absolute inset-0 bg-gradient-to-br from-[var(--accent-primary)]/10 via-[var(--accent-primary)]/5 to-transparent" />
               <div
@@ -57,76 +54,76 @@ export function OnlineCounterPopup() {
               />
             </div>
 
-            <div className="relative flex-shrink-0 z-10">
-              <div className="w-9 h-9 sm:w-9 sm:h-9 md:w-10 md:h-10 rounded-lg sm:rounded-lg md:rounded-xl bg-[var(--accent-primary)]/10 dark:bg-[var(--accent-primary)]/15 backdrop-blur-sm flex items-center justify-center border border-[var(--accent-primary)]/20 relative overflow-hidden">
-                <div className="absolute inset-0 bg-gradient-to-tr from-[var(--accent-primary)]/20 to-transparent animate-pulse" />
-                <Users className="w-4 h-4 sm:w-4 sm:h-4 md:w-5 md:h-5 text-[var(--accent-primary)] relative z-10" />
+            <div className="relative z-10 flex-shrink-0">
+              <div className="relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg border border-[var(--accent-primary)]/20 bg-[var(--accent-primary)]/10 backdrop-blur-sm sm:h-9 sm:w-9 sm:rounded-lg md:h-10 md:w-10 md:rounded-xl dark:bg-[var(--accent-primary)]/15">
+                <div className="absolute inset-0 animate-pulse bg-gradient-to-tr from-[var(--accent-primary)]/20 to-transparent" />
+                <Users className="relative z-10 h-4 w-4 text-[var(--accent-primary)] sm:h-4 sm:w-4 md:h-5 md:w-5" />
               </div>
             </div>
 
-            <div className="flex items-baseline gap-1.5 sm:gap-1.5 md:gap-2 relative z-10">
+            <div className="relative z-10 flex items-baseline gap-1.5 sm:gap-1.5 md:gap-2">
               <div className="flex items-baseline gap-1 sm:gap-1 md:gap-1.5">
-                <span className="text-2xl sm:text-xl md:text-2xl font-black text-[var(--accent-primary)] dark:text-[var(--accent-primary)]">
+                <span className="text-2xl font-black text-[var(--accent-primary)] sm:text-xl md:text-2xl dark:text-[var(--accent-primary)]">
                   {online}
                 </span>
-                <span className="text-xs sm:text-xs md:text-sm font-semibold text-foreground/80 dark:text-foreground/90 whitespace-nowrap">
+                <span className="text-foreground/80 dark:text-foreground/90 text-xs font-semibold whitespace-nowrap sm:text-xs md:text-sm">
                   {getText(online)}
                 </span>
               </div>
             </div>
 
-            <div className="ml-auto flex-shrink-0 relative z-10">
+            <div className="relative z-10 ml-auto flex-shrink-0">
               <span className="relative flex h-2.5 w-2.5 sm:h-2.5 sm:w-2.5 md:h-3 md:w-3">
                 <span
-                  className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--accent-primary)]/60"
+                  className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--accent-primary)]/60"
                   style={{ animationDuration: '1.5s' }}
                 />
                 <span
-                  className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--accent-primary)]/40"
+                  className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--accent-primary)]/40"
                   style={{ animationDuration: '2s', animationDelay: '0.5s' }}
                 />
-                <span className="relative inline-flex rounded-full h-2.5 w-2.5 sm:h-2.5 sm:w-2.5 md:h-3 md:w-3 bg-[var(--accent-primary)] shadow-lg shadow-[var(--accent-primary)]/50" />
+                <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-[var(--accent-primary)] shadow-[var(--accent-primary)]/50 shadow-lg sm:h-2.5 sm:w-2.5 md:h-3 md:w-3" />
               </span>
             </div>
 
-            <div className="absolute bottom-0 left-0 right-0 h-0.5 sm:h-0.5 md:h-1 bg-[var(--accent-primary)]/10 rounded-b-xl sm:rounded-b-xl md:rounded-b-2xl overflow-hidden">
+            <div className="absolute right-0 bottom-0 left-0 h-0.5 overflow-hidden rounded-b-xl bg-[var(--accent-primary)]/10 sm:h-0.5 sm:rounded-b-xl md:h-1 md:rounded-b-2xl">
               <div
                 className="h-full bg-gradient-to-r from-[var(--accent-primary)]/30 via-[var(--accent-primary)]/50 to-[var(--accent-primary)]/30"
                 style={{ animation: 'shrink 8s linear forwards' }}
               />
             </div>
 
-            <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--accent-primary)]/30 to-transparent" />
+            <div className="absolute top-0 right-0 left-0 h-px bg-gradient-to-r from-transparent via-[var(--accent-primary)]/30 to-transparent" />
 
-            <div className="absolute left-0 top-1/4 bottom-1/4 w-px bg-gradient-to-b from-transparent via-[var(--accent-primary)]/20 to-transparent" />
-            <div className="absolute right-0 top-1/4 bottom-1/4 w-px bg-gradient-to-b from-transparent via-[var(--accent-primary)]/20 to-transparent" />
+            <div className="absolute top-1/4 bottom-1/4 left-0 w-px bg-gradient-to-b from-transparent via-[var(--accent-primary)]/20 to-transparent" />
+            <div className="absolute top-1/4 right-0 bottom-1/4 w-px bg-gradient-to-b from-transparent via-[var(--accent-primary)]/20 to-transparent" />
           </div>
 
-          <div className="absolute -top-1 left-4 sm:left-6 w-1 sm:w-1.5 h-1 sm:h-1.5 rounded-full bg-[var(--accent-primary)]/60 dark:bg-[var(--accent-primary)]/70 animate-ping" />
+          <div className="absolute -top-1 left-4 h-1 w-1 animate-ping rounded-full bg-[var(--accent-primary)]/60 sm:left-6 sm:h-1.5 sm:w-1.5 dark:bg-[var(--accent-primary)]/70" />
           <div
-            className="absolute -top-2 right-6 sm:right-8 w-0.5 sm:w-1 h-0.5 sm:h-1 rounded-full bg-[var(--accent-primary)]/60 dark:bg-[var(--accent-primary)]/70 animate-ping"
+            className="absolute -top-2 right-6 h-0.5 w-0.5 animate-ping rounded-full bg-[var(--accent-primary)]/60 sm:right-8 sm:h-1 sm:w-1 dark:bg-[var(--accent-primary)]/70"
             style={{ animationDelay: '0.5s' }}
           />
           <div
-            className="absolute -top-1.5 left-1/3 w-1 h-1 rounded-full bg-[var(--accent-primary)]/50 dark:bg-[var(--accent-primary)]/60 animate-ping"
+            className="absolute -top-1.5 left-1/3 h-1 w-1 animate-ping rounded-full bg-[var(--accent-primary)]/50 dark:bg-[var(--accent-primary)]/60"
             style={{ animationDelay: '1s' }}
           />
 
           <div
-            className="absolute top-1/4 -left-1 w-1 h-1 rounded-full bg-[var(--accent-primary)]/40 dark:bg-[var(--accent-primary)]/50 animate-ping"
+            className="absolute top-1/4 -left-1 h-1 w-1 animate-ping rounded-full bg-[var(--accent-primary)]/40 dark:bg-[var(--accent-primary)]/50"
             style={{ animationDelay: '1.5s' }}
           />
           <div
-            className="absolute top-2/3 -right-1 w-1 h-1 rounded-full bg-[var(--accent-primary)]/40 dark:bg-[var(--accent-primary)]/50 animate-ping"
+            className="absolute top-2/3 -right-1 h-1 w-1 animate-ping rounded-full bg-[var(--accent-primary)]/40 dark:bg-[var(--accent-primary)]/50"
             style={{ animationDelay: '2s' }}
           />
 
           <div
-            className="absolute -bottom-1 left-1/4 w-0.5 sm:w-1 h-0.5 sm:h-1 rounded-full bg-[var(--accent-primary)]/50 dark:bg-[var(--accent-primary)]/60 animate-ping"
+            className="absolute -bottom-1 left-1/4 h-0.5 w-0.5 animate-ping rounded-full bg-[var(--accent-primary)]/50 sm:h-1 sm:w-1 dark:bg-[var(--accent-primary)]/60"
             style={{ animationDelay: '0.8s' }}
           />
           <div
-            className="absolute -bottom-1.5 right-1/3 w-1 h-1 rounded-full bg-[var(--accent-primary)]/50 dark:bg-[var(--accent-primary)]/60 animate-ping"
+            className="absolute right-1/3 -bottom-1.5 h-1 w-1 animate-ping rounded-full bg-[var(--accent-primary)]/50 dark:bg-[var(--accent-primary)]/60"
             style={{ animationDelay: '1.2s' }}
           />
         </div>
diff --git a/frontend/components/shop/AddToCartButton.tsx b/frontend/components/shop/AddToCartButton.tsx
index 56a53a73..046211a6 100644
--- a/frontend/components/shop/AddToCartButton.tsx
+++ b/frontend/components/shop/AddToCartButton.tsx
@@ -1,23 +1,24 @@
 'use client';
 
-import { useId, useState } from 'react';
-import type { ShopProduct } from '@/lib/shop/data';
-import { cn } from '@/lib/utils';
 import { Check, Minus, Plus } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { useId, useState } from 'react';
+
+import type { ShopProduct } from '@/lib/shop/data';
 import {
+  SHOP_CHIP_HOVER,
+  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_SELECTED,
   SHOP_CTA_BASE,
   SHOP_CTA_INSET,
   SHOP_CTA_WAVE,
-  shopCtaGradient,
   SHOP_FOCUS,
-  SHOP_CHIP_INTERACTIVE,
-  SHOP_CHIP_HOVER,
-  SHOP_CHIP_SELECTED,
-  SHOP_SWATCH_BASE,
   SHOP_SIZE_CHIP_BASE,
   SHOP_STEPPER_BUTTON_BASE,
+  SHOP_SWATCH_BASE,
+  shopCtaGradient,
 } from '@/lib/shop/ui-classes';
+import { cn } from '@/lib/utils';
 
 import { useCart } from './CartProvider';
 
@@ -80,7 +81,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         <fieldset className="min-w-0">
           <legend
             id={colorGroupId}
-            className="text-sm font-semibold uppercase tracking-wide text-foreground"
+            className="text-foreground text-sm font-semibold tracking-wide uppercase"
           >
             {t('color')}
           </legend>
@@ -106,7 +107,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
                     selectedColor === color
                       ? cn(
                           SHOP_CHIP_SELECTED,
-                          'hover:shadow-[var(--shop-chip-shadow-selected)] hover:border-accent'
+                          'hover:border-accent hover:shadow-[var(--shop-chip-shadow-selected)]'
                         )
                       : 'hover:border-accent/60 hover:shadow-[var(--shop-chip-shadow-hover)]'
                   )}
@@ -126,7 +127,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         <fieldset className="min-w-0">
           <legend
             id={sizeGroupId}
-            className="text-sm font-semibold uppercase tracking-wide text-foreground"
+            className="text-foreground text-sm font-semibold tracking-wide uppercase"
           >
             {t('size')}
           </legend>
@@ -149,7 +150,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
                   SHOP_FOCUS,
                   selectedSize === size
                     ? cn('bg-accent text-accent-foreground', SHOP_CHIP_SELECTED)
-                    : 'bg-transparent text-muted-foreground border-border hover:text-foreground hover:shadow-[var(--shop-chip-shadow-hover)] hover:border-accent/60'
+                    : 'text-muted-foreground border-border hover:text-foreground hover:border-accent/60 bg-transparent hover:shadow-[var(--shop-chip-shadow-hover)]'
                 )}
               >
                 {size}
@@ -162,7 +163,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
       <section aria-labelledby={quantityGroupId}>
         <h3
           id={quantityGroupId}
-          className="text-sm font-semibold uppercase tracking-wide text-foreground"
+          className="text-foreground text-sm font-semibold tracking-wide uppercase"
         >
           {t('quantity')}
         </h3>
@@ -212,7 +213,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
           'w-full justify-center gap-2 px-8 py-3',
           'transition-[transform,filter] duration-700 ease-out',
           !product.inStock &&
-            'cursor-not-allowed bg-muted text-muted-foreground',
+            'bg-muted text-muted-foreground cursor-not-allowed',
           product.inStock &&
             (added
               ? 'text-white shadow-[var(--shop-hero-btn-success-shadow)] hover:shadow-[var(--shop-hero-btn-success-shadow-hover)]'
diff --git a/frontend/components/shop/CartProvider.tsx b/frontend/components/shop/CartProvider.tsx
index 14e4354e..2b54ecfe 100644
--- a/frontend/components/shop/CartProvider.tsx
+++ b/frontend/components/shop/CartProvider.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import type { ReactNode } from 'react';
 import {
   createContext,
   useCallback,
@@ -8,13 +9,12 @@ import {
   useRef,
   useState,
 } from 'react';
-import type { ReactNode } from 'react';
 
 import {
+  capQuantityByStock,
   type Cart,
   type CartClientItem,
   type CartRehydrateError,
-  capQuantityByStock,
   clearStoredCart,
   createCartItemKey,
   emptyCart,
@@ -22,8 +22,8 @@ import {
   persistCartItems,
   rehydrateCart,
 } from '@/lib/cart';
-import type { ShopProduct } from '@/lib/shop/data';
 import { logWarn } from '@/lib/logging';
+import type { ShopProduct } from '@/lib/shop/data';
 
 interface CartContextType {
   cart: Cart;
diff --git a/frontend/components/shop/CatalogLoadMore.tsx b/frontend/components/shop/CatalogLoadMore.tsx
index 29358b8a..27ea7083 100644
--- a/frontend/components/shop/CatalogLoadMore.tsx
+++ b/frontend/components/shop/CatalogLoadMore.tsx
@@ -1,13 +1,14 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { cn } from '@/lib/utils';
+
 import {
   SHOP_DISABLED,
   SHOP_FOCUS,
   SHOP_OUTLINE_BTN_BASE,
   SHOP_OUTLINE_BTN_INTERACTIVE,
 } from '@/lib/shop/ui-classes';
+import { cn } from '@/lib/utils';
 interface CatalogLoadMoreProps {
   hasMore: boolean;
   isLoading: boolean;
diff --git a/frontend/components/shop/CatalogProductsClient.tsx b/frontend/components/shop/CatalogProductsClient.tsx
index 7748ae04..eaf054bc 100644
--- a/frontend/components/shop/CatalogProductsClient.tsx
+++ b/frontend/components/shop/CatalogProductsClient.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import React from 'react';
-import { useSearchParams, type ReadonlyURLSearchParams } from 'next/navigation';
+import { type ReadonlyURLSearchParams,useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import React from 'react';
 
 import { CatalogLoadMore } from '@/components/shop/CatalogLoadMore';
 import { ProductCard } from '@/components/shop/ProductCard';
@@ -139,7 +139,7 @@ export function CatalogProductsClient({
         />
 
         {error ? (
-          <p className="text-sm text-muted-foreground" role="status">
+          <p className="text-muted-foreground text-sm" role="status">
             {error}
           </p>
         ) : null}
diff --git a/frontend/components/shop/CategoryTile.tsx b/frontend/components/shop/CategoryTile.tsx
index 3047f33b..a9907f26 100644
--- a/frontend/components/shop/CategoryTile.tsx
+++ b/frontend/components/shop/CategoryTile.tsx
@@ -1,7 +1,8 @@
 import Image from 'next/image';
+import { getTranslations } from 'next-intl/server';
+
 import { Link } from '@/i18n/routing';
 import type { ShopCategory } from '@/lib/shop/data';
-import { getTranslations } from 'next-intl/server';
 
 interface CategoryTileProps {
   category: ShopCategory;
@@ -21,9 +22,9 @@ export async function CategoryTile({ category }: CategoryTileProps) {
       aria-label={tCategoryTile('shopCategory', { name: categoryName })}
       className={[
         'group relative block w-full',
-        'aspect-[4/3] overflow-hidden rounded-lg bg-muted',
+        'bg-muted aspect-[4/3] overflow-hidden rounded-lg',
         'transition-[box-shadow] duration-500 hover:shadow-[var(--shop-card-shadow-hover)]',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+        'focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)] focus-visible:ring-offset-2 focus-visible:outline-none',
       ].join(' ')}
     >
       <Image
diff --git a/frontend/components/shop/ClearCartOnMount.tsx b/frontend/components/shop/ClearCartOnMount.tsx
index f79ea7c5..34daeccb 100644
--- a/frontend/components/shop/ClearCartOnMount.tsx
+++ b/frontend/components/shop/ClearCartOnMount.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef } from 'react';
+
 import { useCart } from '@/components/shop/CartProvider';
 
 type ClearCartOnMountProps = {
diff --git a/frontend/components/shop/ProductCard.tsx b/frontend/components/shop/ProductCard.tsx
index 51bacbc5..9472bff0 100644
--- a/frontend/components/shop/ProductCard.tsx
+++ b/frontend/components/shop/ProductCard.tsx
@@ -1,13 +1,14 @@
 'use client';
 
-import { Link } from '@/i18n/routing';
 import Image from 'next/image';
-import type { ShopProduct } from '@/lib/shop/data';
-import { cn } from '@/lib/utils';
 import { useParams } from 'next/navigation';
-import { formatMoney } from '@/lib/shop/currency';
 import { useTranslations } from 'next-intl';
 
+import { Link } from '@/i18n/routing';
+import { formatMoney } from '@/lib/shop/currency';
+import type { ShopProduct } from '@/lib/shop/data';
+import { cn } from '@/lib/utils';
+
 const PLACEHOLDER = '/placeholder.svg';
 const allowedHosts = new Set(['res.cloudinary.com', 'cdn.sanity.io']);
 
@@ -44,12 +45,12 @@ export function ProductCard({ product }: ProductCardProps) {
   return (
     <Link
       href={`/shop/products/${product.slug}`}
-      className="group relative flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-shadow duration-500 hover:shadow-[var(--shop-card-shadow-hover)] hover:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+      className="group border-border bg-card focus-visible:ring-offset-background relative flex flex-col overflow-hidden rounded-lg border transition-shadow duration-500 hover:border-transparent hover:shadow-[var(--shop-card-shadow-hover)] focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)] focus-visible:ring-offset-2 focus-visible:outline-none"
     >
       {product.badge && product.badge !== 'NONE' && (
         <span
           className={cn(
-            'absolute left-3 top-3 z-10 rounded px-2 py-1 text-xs font-semibold uppercase',
+            'absolute top-3 left-3 z-10 rounded px-2 py-1 text-xs font-semibold uppercase',
             product.badge === 'SALE' && 'bg-accent text-accent-foreground',
             product.badge === 'NEW' && 'bg-foreground text-background'
           )}
@@ -58,7 +59,7 @@ export function ProductCard({ product }: ProductCardProps) {
         </span>
       )}
 
-      <div className="relative aspect-square overflow-hidden bg-muted">
+      <div className="bg-muted relative aspect-square overflow-hidden">
         <Image
           src={src}
           alt={product.name}
@@ -69,7 +70,7 @@ export function ProductCard({ product }: ProductCardProps) {
       </div>
 
       <div className="flex flex-1 flex-col p-4">
-        <h3 className="text-sm font-medium text-foreground">{product.name}</h3>
+        <h3 className="text-foreground text-sm font-medium">{product.name}</h3>
 
         <div className="mt-2 flex items-center gap-2" aria-label="Price">
           <span
@@ -82,7 +83,7 @@ export function ProductCard({ product }: ProductCardProps) {
           </span>
 
           {product.originalPrice && (
-            <span className="text-sm text-muted-foreground line-through">
+            <span className="text-muted-foreground text-sm line-through">
               {formatMoney(product.originalPrice, product.currency, locale)}
             </span>
           )}
@@ -90,7 +91,7 @@ export function ProductCard({ product }: ProductCardProps) {
 
         <p
           className={cn(
-            'mt-2 text-xs text-muted-foreground min-h-[1rem] leading-4',
+            'text-muted-foreground mt-2 min-h-[1rem] text-xs leading-4',
             product.inStock && 'invisible'
           )}
           {...(product.inStock ? { 'aria-hidden': true } : { role: 'status' })}
diff --git a/frontend/components/shop/ProductFilters.tsx b/frontend/components/shop/ProductFilters.tsx
index 67554934..b7b92c23 100644
--- a/frontend/components/shop/ProductFilters.tsx
+++ b/frontend/components/shop/ProductFilters.tsx
@@ -1,19 +1,20 @@
 'use client';
 
-import { useId } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { useId } from 'react';
+
+import { CATEGORIES, COLORS, PRODUCT_TYPES, SIZES } from '@/lib/config/catalog';
 import {
-  SHOP_FOCUS,
-  SHOP_CHIP_INTERACTIVE,
+  SHOP_CHIP_BORDER_HOVER,
   SHOP_CHIP_HOVER,
+  SHOP_CHIP_INTERACTIVE,
   SHOP_CHIP_SELECTED,
-  SHOP_SWATCH_BASE,
-  SHOP_SIZE_CHIP_BASE,
   SHOP_FILTER_ITEM_BASE,
-  SHOP_CHIP_BORDER_HOVER,
+  SHOP_FOCUS,
+  SHOP_SIZE_CHIP_BASE,
+  SHOP_SWATCH_BASE,
 } from '@/lib/shop/ui-classes';
-import { CATEGORIES, COLORS, PRODUCT_TYPES, SIZES } from '@/lib/config/catalog';
 import { cn } from '@/lib/utils';
 
 export function ProductFilters() {
@@ -51,7 +52,7 @@ export function ProductFilters() {
       <section aria-labelledby={categoryGroupId}>
         <h3
           id={categoryGroupId}
-          className="text-sm font-semibold uppercase tracking-wide text-foreground"
+          className="text-foreground text-sm font-semibold tracking-wide uppercase"
         >
           {t('category')}
         </h3>
@@ -87,7 +88,7 @@ export function ProductFilters() {
       <section aria-labelledby={typeGroupId}>
         <h3
           id={typeGroupId}
-          className="text-sm font-semibold uppercase tracking-wide text-foreground"
+          className="text-foreground text-sm font-semibold tracking-wide uppercase"
         >
           {t('type')}
         </h3>
@@ -123,7 +124,7 @@ export function ProductFilters() {
       <section aria-labelledby={colorGroupId}>
         <h3
           id={colorGroupId}
-          className="text-sm font-semibold uppercase tracking-wide text-foreground"
+          className="text-foreground text-sm font-semibold tracking-wide uppercase"
         >
           {t('color')}
         </h3>
@@ -162,7 +163,7 @@ export function ProductFilters() {
       <section aria-labelledby={sizeGroupId}>
         <h3
           id={sizeGroupId}
-          className="text-sm font-semibold uppercase tracking-wide text-foreground"
+          className="text-foreground text-sm font-semibold tracking-wide uppercase"
         >
           {t('size')}
         </h3>
@@ -185,7 +186,7 @@ export function ProductFilters() {
                   isSelected
                     ? cn('bg-accent text-accent-foreground', SHOP_CHIP_SELECTED)
                     : cn(
-                        'bg-transparent text-muted-foreground border-border hover:text-foreground',
+                        'text-muted-foreground border-border hover:text-foreground bg-transparent',
                         SHOP_CHIP_HOVER,
                         SHOP_CHIP_BORDER_HOVER
                       )
diff --git a/frontend/components/shop/ProductSort.tsx b/frontend/components/shop/ProductSort.tsx
index 6476bc4c..ccf01fd4 100644
--- a/frontend/components/shop/ProductSort.tsx
+++ b/frontend/components/shop/ProductSort.tsx
@@ -1,18 +1,19 @@
 'use client';
 
-import { useId } from 'react';
-import { useRouter } from '@/i18n/routing';
+import { ChevronDown } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { ChevronDown } from 'lucide-react';
+import { useId } from 'react';
+
+import { useRouter } from '@/i18n/routing';
 import { SORT_OPTIONS } from '@/lib/config/catalog';
-import { cn } from '@/lib/utils';
 import {
   SHOP_DISABLED,
   SHOP_FOCUS,
   SHOP_SELECT_BASE,
   SHOP_SELECT_INTERACTIVE,
 } from '@/lib/shop/ui-classes';
+import { cn } from '@/lib/utils';
 
 type ProductSortProps = {
   className?: string;
@@ -63,7 +64,7 @@ export function ProductSort({ className }: ProductSortProps) {
       )}
       aria-label={t('label')}
     >
-      <label htmlFor={selectId} className="text-sm text-muted-foreground">
+      <label htmlFor={selectId} className="text-muted-foreground text-sm">
         {t('sortBy')}
       </label>
 
@@ -90,7 +91,7 @@ export function ProductSort({ className }: ProductSortProps) {
 
         <ChevronDown
           className={cn(
-            'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2',
+            'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2',
             'text-muted-foreground transition-colors',
             'peer-hover:text-foreground peer-focus-visible:text-foreground'
           )}
diff --git a/frontend/components/shop/ProductsToolbar.tsx b/frontend/components/shop/ProductsToolbar.tsx
index 2353d802..ff62d2e6 100644
--- a/frontend/components/shop/ProductsToolbar.tsx
+++ b/frontend/components/shop/ProductsToolbar.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import React from 'react';
 import { Filter, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import React from 'react';
 
-import { ProductSort } from '@/components/shop/ProductSort';
 import { ProductFilters } from '@/components/shop/ProductFilters';
+import { ProductSort } from '@/components/shop/ProductSort';
 
 export function ProductsToolbar() {
   const [open, setOpen] = React.useState(false);
@@ -132,7 +132,7 @@ export function ProductsToolbar() {
         aria-label={t('label')}
         className="flex flex-wrap items-end gap-3"
       >
-        <div className="min-w-0 flex-1 sm:flex-none sm:min-w-[260px]">
+        <div className="min-w-0 flex-1 sm:min-w-[260px] sm:flex-none">
           <ProductSort />
         </div>
 
@@ -140,7 +140,7 @@ export function ProductsToolbar() {
           ref={openBtnRef}
           type="button"
           onClick={() => setOpen(true)}
-          className="inline-flex h-10 shrink-0 items-center gap-2 rounded-md border border-border px-3 text-sm text-muted-foreground transition-colors hover:border-foreground hover:text-foreground lg:hidden"
+          className="border-border text-muted-foreground hover:border-foreground hover:text-foreground inline-flex h-10 shrink-0 items-center gap-2 rounded-md border px-3 text-sm transition-colors lg:hidden"
           aria-label={t('openFilters')}
           aria-controls={dialogId}
           aria-expanded={open}
@@ -166,12 +166,12 @@ export function ProductsToolbar() {
             aria-modal="true"
             tabIndex={-1}
             aria-labelledby={dialogTitleId}
-            className="absolute right-0 top-0 h-full w-full max-w-sm overflow-y-auto bg-background shadow-xl"
+            className="bg-background absolute top-0 right-0 h-full w-full max-w-sm overflow-y-auto shadow-xl"
           >
-            <div className="flex items-center justify-between border-b border-border px-4 py-4">
+            <div className="border-border flex items-center justify-between border-b px-4 py-4">
               <h2
                 id={dialogTitleId}
-                className="text-sm font-semibold text-foreground"
+                className="text-foreground text-sm font-semibold"
               >
                 {t('filters')}
               </h2>
@@ -180,7 +180,7 @@ export function ProductsToolbar() {
                 ref={closeBtnRef}
                 type="button"
                 onClick={close}
-                className="inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                className="text-muted-foreground hover:bg-secondary hover:text-foreground inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors"
                 aria-label={t('close')}
               >
                 <X className="h-5 w-5" aria-hidden="true" />
diff --git a/frontend/components/shop/ShopHero.tsx b/frontend/components/shop/ShopHero.tsx
index 6e18f9fe..f180c59b 100644
--- a/frontend/components/shop/ShopHero.tsx
+++ b/frontend/components/shop/ShopHero.tsx
@@ -16,40 +16,35 @@ import {
 export function Hero({ headline, subheadline, ctaText, ctaLink }: HeroProps) {
   return (
     <section
-      className="relative overflow-hidden bg-background"
+      className="bg-background relative overflow-hidden"
       aria-labelledby="shop-hero-title"
     >
       <div className="mx-auto max-w-7xl px-4 py-20 sm:px-6 sm:py-28 lg:px-8 lg:py-36">
         <div className="mx-auto max-w-3xl text-center">
           <h1
             id="shop-hero-title"
-            className="relative inline-block text-balance text-4xl font-black leading-[1.08] tracking-tight sm:text-5xl lg:text-6xl pb-2"
+            className="relative inline-block pb-2 text-4xl leading-[1.08] font-black tracking-tight text-balance sm:text-5xl lg:text-6xl"
           >
-            <span className="relative inline-block bg-gradient-to-r from-foreground/80 via-foreground to-foreground/80 bg-clip-text text-transparent dark:from-[var(--accent-primary)]/70 dark:via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 dark:to-[var(--accent-hover)]/70">
+            <span className="from-foreground/80 via-foreground to-foreground/80 relative inline-block bg-gradient-to-r bg-clip-text text-transparent dark:from-[var(--accent-primary)]/70 dark:via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 dark:to-[var(--accent-hover)]/70">
               {headline}
             </span>
 
             <span
-              className="pointer-events-none absolute inset-0 inline-block bg-gradient-to-r from-foreground via-foreground to-foreground bg-clip-text text-transparent wave-text-gradient dark:from-[var(--accent-primary)] dark:via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] dark:to-[var(--accent-hover)]"
+              className="from-foreground via-foreground to-foreground wave-text-gradient pointer-events-none absolute inset-0 inline-block bg-gradient-to-r bg-clip-text text-transparent dark:from-[var(--accent-primary)] dark:via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] dark:to-[var(--accent-hover)]"
               aria-hidden="true"
             >
               {headline}
             </span>
           </h1>
 
-          <p className="mx-auto mt-6 max-w-xl text-pretty text-sm sm:text-base md:text-lg text-muted-foreground font-light">
+          <p className="text-muted-foreground mx-auto mt-6 max-w-xl text-sm font-light text-pretty sm:text-base md:text-lg">
             {subheadline}
           </p>
 
           <div className="mt-10">
             <Link
               href={ctaLink}
-              className={`
-    ${SHOP_CTA_BASE} ${SHOP_FOCUS}
-    px-8 sm:px-10 md:px-12 py-3 md:py-3.5 lg:py-4
-    text-white
-    shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)]
-  `}
+              className={` ${SHOP_CTA_BASE} ${SHOP_FOCUS} px-8 py-3 text-white shadow-[var(--shop-hero-btn-shadow)] hover:shadow-[var(--shop-hero-btn-shadow-hover)] sm:px-10 md:px-12 md:py-3.5 lg:py-4`}
             >
               <span
                 className="absolute inset-0"
diff --git a/frontend/components/shop/admin/AdminPagination.tsx b/frontend/components/shop/admin/AdminPagination.tsx
index a929f440..6fdd6b54 100644
--- a/frontend/components/shop/admin/AdminPagination.tsx
+++ b/frontend/components/shop/admin/AdminPagination.tsx
@@ -1,6 +1,7 @@
+import { getTranslations } from 'next-intl/server';
+
 import { Link } from '@/i18n/routing';
 import { cn } from '@/lib/utils';
-import { getTranslations } from 'next-intl/server';
 
 type AdminPaginationProps = {
   basePath: string;
@@ -49,7 +50,7 @@ export async function AdminPagination({
         </li>
 
         <li>
-          <span aria-current="page" className="text-sm text-muted-foreground">
+          <span aria-current="page" className="text-muted-foreground text-sm">
             {t('page', { page })}
           </span>
         </li>
diff --git a/frontend/components/shop/admin/AdminProductDeleteButton.tsx b/frontend/components/shop/admin/AdminProductDeleteButton.tsx
index a71d220a..005a5586 100644
--- a/frontend/components/shop/admin/AdminProductDeleteButton.tsx
+++ b/frontend/components/shop/admin/AdminProductDeleteButton.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { useId, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { useId, useState } from 'react';
 
 interface AdminProductDeleteButtonProps {
   id: string;
@@ -91,7 +91,7 @@ export function AdminProductDeleteButton({
         disabled={isLoading}
         aria-busy={isLoading}
         aria-describedby={error ? errorId : undefined}
-        className="w-full max-w-full whitespace-normal break-words leading-tight rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50 text-center"
+        className="border-border text-foreground hover:bg-secondary w-full max-w-full rounded-md border px-2 py-1 text-center text-xs leading-tight font-medium break-words whitespace-normal transition-colors disabled:cursor-not-allowed disabled:opacity-50"
       >
         {isLoading ? t('deleting') : t('delete')}
       </button>
diff --git a/frontend/components/shop/admin/AdminProductStatusToggle.tsx b/frontend/components/shop/admin/AdminProductStatusToggle.tsx
index 48ab1edf..df07b02e 100644
--- a/frontend/components/shop/admin/AdminProductStatusToggle.tsx
+++ b/frontend/components/shop/admin/AdminProductStatusToggle.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useId, useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { useId, useState } from 'react';
 
 interface AdminProductStatusToggleProps {
   id: string;
@@ -86,7 +86,7 @@ export function AdminProductStatusToggle({
         aria-busy={isLoading}
         aria-pressed={isActive}
         aria-describedby={error ? errorId : undefined}
-        className="w-full max-w-full whitespace-normal break-words leading-tight rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50 text-center"
+        className="border-border text-foreground hover:bg-secondary w-full max-w-full rounded-md border px-2 py-1 text-center text-xs leading-tight font-medium break-words whitespace-normal transition-colors disabled:cursor-not-allowed disabled:opacity-50"
       >
         {buttonLabel}
       </button>
diff --git a/frontend/components/shop/admin/ShopAdminTopbar.tsx b/frontend/components/shop/admin/ShopAdminTopbar.tsx
index 2b04f168..ae4ba5a2 100644
--- a/frontend/components/shop/admin/ShopAdminTopbar.tsx
+++ b/frontend/components/shop/admin/ShopAdminTopbar.tsx
@@ -1,11 +1,12 @@
-import { Link } from '@/i18n/routing';
 import { getTranslations } from 'next-intl/server';
 
+import { Link } from '@/i18n/routing';
+
 export async function ShopAdminTopbar() {
   const t = await getTranslations('shop.admin.topbar');
 
   return (
-    <header className="border-b border-border bg-background">
+    <header className="border-border bg-background border-b">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <nav
           aria-label={t('label')}
@@ -15,7 +16,7 @@ export async function ShopAdminTopbar() {
             <li>
               <Link
                 href="/shop/admin"
-                className="text-sm font-semibold text-foreground hover:underline"
+                className="text-foreground text-sm font-semibold hover:underline"
               >
                 {t('admin')}
               </Link>
@@ -28,7 +29,7 @@ export async function ShopAdminTopbar() {
             <li>
               <Link
                 href="/shop/admin/products"
-                className="text-sm font-medium text-muted-foreground hover:text-foreground"
+                className="text-muted-foreground hover:text-foreground text-sm font-medium"
               >
                 {t('products')}
               </Link>
@@ -37,7 +38,7 @@ export async function ShopAdminTopbar() {
             <li>
               <Link
                 href="/shop/admin/orders"
-                className="text-sm font-medium text-muted-foreground hover:text-foreground"
+                className="text-muted-foreground hover:text-foreground text-sm font-medium"
               >
                 {t('orders')}
               </Link>
@@ -47,7 +48,7 @@ export async function ShopAdminTopbar() {
           <div className="shrink-0 whitespace-nowrap">
             <Link
               href="/shop"
-              className="inline-flex items-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
+              className="border-border text-foreground hover:bg-secondary inline-flex items-center rounded-md border px-3 py-1.5 text-sm font-medium transition-colors"
             >
               {t('backToShop')}
             </Link>
diff --git a/frontend/components/shop/header/CartButton.tsx b/frontend/components/shop/header/CartButton.tsx
index fdb15f31..07042123 100644
--- a/frontend/components/shop/header/CartButton.tsx
+++ b/frontend/components/shop/header/CartButton.tsx
@@ -3,8 +3,8 @@
 import { ShoppingBag } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
-import { useMounted } from '@/hooks/use-mounted';
 import { HeaderButton } from '@/components/shared/HeaderButton';
+import { useMounted } from '@/hooks/use-mounted';
 
 import { useCart } from '../CartProvider';
 
@@ -17,7 +17,9 @@ export function CartButton() {
   const showCount = itemCount > 0;
 
   const badgeText = itemCount > 99 ? '99+' : itemCount;
-  const label = showCount ? t('cartWithItems', { count: itemCount }) : t('cart');
+  const label = showCount
+    ? t('cartWithItems', { count: itemCount })
+    : t('cart');
 
   return (
     <HeaderButton
diff --git a/frontend/components/shop/header/NavLinks.tsx b/frontend/components/shop/header/NavLinks.tsx
index f86fe203..5811ce29 100644
--- a/frontend/components/shop/header/NavLinks.tsx
+++ b/frontend/components/shop/header/NavLinks.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import { useMemo } from 'react';
-import { useSearchParams } from 'next/navigation';
 import { Home } from 'lucide-react';
+import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { useMemo } from 'react';
 
-import { usePathname } from '@/i18n/routing';
-import { cn } from '@/lib/utils';
 import { AnimatedNavLink } from '@/components/shared/AnimatedNavLink';
 import { HeaderButton } from '@/components/shared/HeaderButton';
+import { usePathname } from '@/i18n/routing';
+import { cn } from '@/lib/utils';
 
 interface NavLinksProps {
   className?: string;
@@ -36,12 +36,27 @@ export function NavLinks({
   const tProducts = useTranslations('shop.products');
   const tNav = useTranslations('shop.admin.navigation');
 
-  const navLinks = useMemo(() => [
-    { href: '/shop/products', label: tProducts('title'), slug: 'all' },
-    { href: '/shop/products?category=apparel', label: t('apparel'), slug: 'apparel' },
-    { href: '/shop/products?category=lifestyle', label: t('lifestyle'), slug: 'lifestyle' },
-    { href: '/shop/products?category=collectibles', label: t('collectibles'), slug: 'collectibles' },
-  ], [t, tProducts]);
+  const navLinks = useMemo(
+    () => [
+      { href: '/shop/products', label: tProducts('title'), slug: 'all' },
+      {
+        href: '/shop/products?category=apparel',
+        label: t('apparel'),
+        slug: 'apparel',
+      },
+      {
+        href: '/shop/products?category=lifestyle',
+        label: t('lifestyle'),
+        slug: 'lifestyle',
+      },
+      {
+        href: '/shop/products?category=collectibles',
+        label: t('collectibles'),
+        slug: 'collectibles',
+      },
+    ],
+    [t, tProducts]
+  );
 
   const computed = useMemo(() => {
     return navLinks.map(link => {
diff --git a/frontend/components/tests/CookieBanner.test.tsx b/frontend/components/tests/CookieBanner.test.tsx
index 998509b5..c964e659 100644
--- a/frontend/components/tests/CookieBanner.test.tsx
+++ b/frontend/components/tests/CookieBanner.test.tsx
@@ -1,8 +1,9 @@
 /**
  * @vitest-environment jsdom
  */
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, act, fireEvent } from '@testing-library/react';
+import { act, fireEvent,render, screen } from '@testing-library/react';
+import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { CookieBanner } from '@/components/shared/CookieBanner';
 
 vi.mock('next-intl', () => ({
diff --git a/frontend/components/tests/blog/blog-card.test.tsx b/frontend/components/tests/blog/blog-card.test.tsx
index 29ec1a99..809b098f 100644
--- a/frontend/components/tests/blog/blog-card.test.tsx
+++ b/frontend/components/tests/blog/blog-card.test.tsx
@@ -1,8 +1,9 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import type { Author, Post } from '@/components/blog/BlogFilters';
+import { fireEvent,render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
 import BlogCard from '@/components/blog/BlogCard';
+import type { Author, Post } from '@/components/blog/BlogFilters';
 
 vi.mock('next/image', () => ({
   __esModule: true,
@@ -11,9 +12,13 @@ vi.mock('next/image', () => ({
 
 vi.mock('next/link', () => ({
   __esModule: true,
-  default: ({ href, children }: { href: string; children: React.ReactNode }) => (
-    <a href={href}>{children}</a>
-  ),
+  default: ({
+    href,
+    children,
+  }: {
+    href: string;
+    children: React.ReactNode;
+  }) => <a href={href}>{children}</a>,
 }));
 
 vi.mock('next-intl', () => ({
@@ -48,9 +53,7 @@ describe('BlogCard', () => {
 
     const onAuthorSelect = vi.fn();
 
-    render(
-      <BlogCard post={post} onAuthorSelect={onAuthorSelect} />
-    );
+    render(<BlogCard post={post} onAuthorSelect={onAuthorSelect} />);
 
     expect(screen.getByText('Пост про співбесіду')).toBeInTheDocument();
     expect(screen.getByText('Опис поста')).toBeInTheDocument();
@@ -70,9 +73,7 @@ describe('BlogCard', () => {
 
     const onAuthorSelect = vi.fn();
 
-    render(
-      <BlogCard post={post} onAuthorSelect={onAuthorSelect} />
-    );
+    render(<BlogCard post={post} onAuthorSelect={onAuthorSelect} />);
 
     fireEvent.click(screen.getByRole('button', { name: 'Анна' }));
     expect(onAuthorSelect).toHaveBeenCalledWith(author);
diff --git a/frontend/components/tests/blog/blog-category-grid.test.tsx b/frontend/components/tests/blog/blog-category-grid.test.tsx
index ec9e4bb3..4f42df71 100644
--- a/frontend/components/tests/blog/blog-category-grid.test.tsx
+++ b/frontend/components/tests/blog/blog-category-grid.test.tsx
@@ -1,8 +1,9 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import type { Author, Post } from '@/components/blog/BlogFilters';
+import { fireEvent,render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
 import { BlogCategoryGrid } from '@/components/blog/BlogCategoryGrid';
+import type { Author, Post } from '@/components/blog/BlogFilters';
 
 const pushMock = vi.fn();
 
@@ -14,11 +15,12 @@ vi.mock('@/i18n/routing', () => ({
 
 vi.mock('@/components/blog/BlogGrid', () => ({
   __esModule: true,
-  default: ({ onAuthorSelect }: { onAuthorSelect: (author: Author) => void }) => (
-    <button
-      type="button"
-      onClick={() => onAuthorSelect({ name: 'Анна' })}
-    >
+  default: ({
+    onAuthorSelect,
+  }: {
+    onAuthorSelect: (author: Author) => void;
+  }) => (
+    <button type="button" onClick={() => onAuthorSelect({ name: 'Анна' })}>
       select-author
     </button>
   ),
@@ -33,6 +35,8 @@ describe('BlogCategoryGrid', () => {
     render(<BlogCategoryGrid posts={posts} />);
 
     fireEvent.click(screen.getByText('select-author'));
-    expect(pushMock).toHaveBeenCalledWith('/blog?author=%D0%90%D0%BD%D0%BD%D0%B0');
+    expect(pushMock).toHaveBeenCalledWith(
+      '/blog?author=%D0%90%D0%BD%D0%BD%D0%B0'
+    );
   });
 });
diff --git a/frontend/components/tests/blog/blog-category-links.test.tsx b/frontend/components/tests/blog/blog-category-links.test.tsx
index fff8f846..3fdafe8d 100644
--- a/frontend/components/tests/blog/blog-category-links.test.tsx
+++ b/frontend/components/tests/blog/blog-category-links.test.tsx
@@ -1,16 +1,17 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
 import { BlogCategoryLinks } from '@/components/blog/BlogCategoryLinks';
 
 vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => {
     const map: Record<string, string> = {
       'categories.tech': 'Технології',
-      'categories.career': 'Кар\'єра',
+      'categories.career': "Кар'єра",
       'categories.insights': 'Інсайти',
       'categories.news': 'Новини',
-      'categories.growth': 'Кар\'єра',
+      'categories.growth': "Кар'єра",
       home: 'Головна',
     };
     return map[key] || key;
diff --git a/frontend/components/tests/blog/blog-filters.test.tsx b/frontend/components/tests/blog/blog-filters.test.tsx
index cd340651..9a0ee016 100644
--- a/frontend/components/tests/blog/blog-filters.test.tsx
+++ b/frontend/components/tests/blog/blog-filters.test.tsx
@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
+import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+
 import type { Author, Post } from '@/components/blog/BlogFilters';
 import BlogFilters from '@/components/blog/BlogFilters';
 
@@ -25,7 +26,7 @@ vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => {
     const map: Record<string, string> = {
       'categories.tech': 'Технології',
-      'categories.career': 'Кар\'єра',
+      'categories.career': "Кар'єра",
       'categories.insights': 'Інсайти',
       'categories.news': 'Новини',
       author: 'Автор',
@@ -126,9 +127,7 @@ describe('BlogFilters', () => {
       expect(fetchMock).toHaveBeenCalled();
     });
 
-    expect(
-      screen.getByRole('heading', { name: 'Анна' })
-    ).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Анна' })).toBeInTheDocument();
 
     const grid = screen.getByTestId('blog-grid');
     expect(grid).toHaveTextContent('Пост Анни');
diff --git a/frontend/components/tests/blog/blog-grid.test.tsx b/frontend/components/tests/blog/blog-grid.test.tsx
index 105844e3..ae6ef423 100644
--- a/frontend/components/tests/blog/blog-grid.test.tsx
+++ b/frontend/components/tests/blog/blog-grid.test.tsx
@@ -1,11 +1,13 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
 import type { Post } from '@/components/blog/BlogFilters';
 import BlogGrid from '@/components/blog/BlogGrid';
 
 vi.mock('next-intl', () => ({
-  useTranslations: () => (key: string) => (key === 'noPosts' ? 'Статей не знайдено' : key),
+  useTranslations: () => (key: string) =>
+    key === 'noPosts' ? 'Статей не знайдено' : key,
 }));
 
 vi.mock('@/components/blog/BlogCard', () => ({
diff --git a/frontend/components/tests/blog/blog-header-search.test.tsx b/frontend/components/tests/blog/blog-header-search.test.tsx
index f8689757..0d2d9e68 100644
--- a/frontend/components/tests/blog/blog-header-search.test.tsx
+++ b/frontend/components/tests/blog/blog-header-search.test.tsx
@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
 
 const pushMock = vi.fn();
diff --git a/frontend/components/tests/blog/blog-nav-links.test.tsx b/frontend/components/tests/blog/blog-nav-links.test.tsx
index 40f8acbb..c9b5f513 100644
--- a/frontend/components/tests/blog/blog-nav-links.test.tsx
+++ b/frontend/components/tests/blog/blog-nav-links.test.tsx
@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi, afterEach } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
+import { afterEach,describe, expect, it, vi } from 'vitest';
+
 import { BlogNavLinks } from '@/components/blog/BlogNavLinks';
 
 const fetchMock = vi.fn();
diff --git a/frontend/components/tests/q&a/accordion-list.test.tsx b/frontend/components/tests/q&a/accordion-list.test.tsx
index f4e95abf..9c690316 100644
--- a/frontend/components/tests/q&a/accordion-list.test.tsx
+++ b/frontend/components/tests/q&a/accordion-list.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent,render, screen } from '@testing-library/react';
+import { beforeEach,describe, expect, it, vi } from 'vitest';
 
 const getCachedTermsMock = vi.fn();
 
@@ -25,13 +25,9 @@ vi.mock('@/components/ui/accordion', () => ({
 
 vi.mock('@/components/q&a/CodeBlock', () => ({
   __esModule: true,
-  default: ({
-    code,
-    content,
-  }: {
-    code?: string;
-    content?: string;
-  }) => <pre data-testid="code-block">{content ?? code}</pre>,
+  default: ({ code, content }: { code?: string; content?: string }) => (
+    <pre data-testid="code-block">{content ?? code}</pre>
+  ),
 }));
 
 vi.mock('@/components/q&a/SelectableText', () => ({
@@ -82,16 +78,8 @@ vi.mock('@/components/q&a/FloatingExplainButton', () => ({
 
 vi.mock('@/components/q&a/AIWordHelper', () => ({
   __esModule: true,
-  default: ({
-    term,
-    isOpen,
-  }: {
-    term: string;
-    isOpen: boolean;
-  }) => (
-    <div data-testid="ai-helper">
-      {isOpen ? `open:${term}` : 'closed'}
-    </div>
+  default: ({ term, isOpen }: { term: string; isOpen: boolean }) => (
+    <div data-testid="ai-helper">{isOpen ? `open:${term}` : 'closed'}</div>
   ),
 }));
 
diff --git a/frontend/components/tests/q&a/ai-word-helper.test.tsx b/frontend/components/tests/q&a/ai-word-helper.test.tsx
index 130610f7..7b4d082a 100644
--- a/frontend/components/tests/q&a/ai-word-helper.test.tsx
+++ b/frontend/components/tests/q&a/ai-word-helper.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, act } from '@testing-library/react';
+import { act,render, screen } from '@testing-library/react';
 import type React from 'react';
+import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
 
 const getCachedExplanationMock = vi.fn();
 const setCachedExplanationMock = vi.fn();
@@ -28,7 +28,13 @@ vi.mock('@/i18n/routing', () => ({
 
 import AIWordHelper from '@/components/q&a/AIWordHelper';
 
-function mockFetchSequence(responses: Array<{ ok: boolean; status: number; json: () => Promise<unknown> }>) {
+function mockFetchSequence(
+  responses: Array<{
+    ok: boolean;
+    status: number;
+    json: () => Promise<unknown>;
+  }>
+) {
   const fetchMock = vi.fn();
   responses.forEach(response => {
     fetchMock.mockResolvedValueOnce(response);
@@ -56,13 +62,7 @@ describe('AIWordHelper', () => {
       },
     ]);
 
-    render(
-      <AIWordHelper
-        term="CSS"
-        isOpen
-        onClose={vi.fn()}
-      />
-    );
+    render(<AIWordHelper term="CSS" isOpen onClose={vi.fn()} />);
 
     expect(await screen.findByText('guest.title')).toBeTruthy();
   });
@@ -82,13 +82,7 @@ describe('AIWordHelper', () => {
       },
     ]);
 
-    render(
-      <AIWordHelper
-        term="Git"
-        isOpen
-        onClose={vi.fn()}
-      />
-    );
+    render(<AIWordHelper term="Git" isOpen onClose={vi.fn()} />);
 
     expect(await screen.findByText('Cached')).toBeTruthy();
     expect(fetchMock).toHaveBeenCalledTimes(1);
@@ -112,13 +106,7 @@ describe('AIWordHelper', () => {
       },
     ]);
 
-    render(
-      <AIWordHelper
-        term="Git"
-        isOpen
-        onClose={vi.fn()}
-      />
-    );
+    render(<AIWordHelper term="Git" isOpen onClose={vi.fn()} />);
 
     expect(await screen.findByText('Hello')).toBeTruthy();
     expect(setCachedExplanationMock).toHaveBeenCalled();
@@ -138,13 +126,7 @@ describe('AIWordHelper', () => {
       },
     ]);
 
-    render(
-      <AIWordHelper
-        term="Git"
-        isOpen
-        onClose={vi.fn()}
-      />
-    );
+    render(<AIWordHelper term="Git" isOpen onClose={vi.fn()} />);
 
     expect(await screen.findByText('Give it a moment')).toBeTruthy();
   });
@@ -163,13 +145,7 @@ describe('AIWordHelper', () => {
       },
     ]);
 
-    render(
-      <AIWordHelper
-        term="Git"
-        isOpen
-        onClose={vi.fn()}
-      />
-    );
+    render(<AIWordHelper term="Git" isOpen onClose={vi.fn()} />);
 
     expect(await screen.findByText('AI is taking a nap')).toBeTruthy();
   });
@@ -197,13 +173,7 @@ describe('AIWordHelper', () => {
       },
     ]);
 
-    render(
-      <AIWordHelper
-        term="Git"
-        isOpen
-        onClose={vi.fn()}
-      />
-    );
+    render(<AIWordHelper term="Git" isOpen onClose={vi.fn()} />);
 
     expect(await screen.findByText('Give it a moment')).toBeTruthy();
 
@@ -234,13 +204,7 @@ describe('AIWordHelper', () => {
       },
     ]);
 
-    render(
-      <AIWordHelper
-        term="Git"
-        isOpen
-        onClose={vi.fn()}
-      />
-    );
+    render(<AIWordHelper term="Git" isOpen onClose={vi.fn()} />);
 
     expect(await screen.findByText('loading')).toBeTruthy();
     expect(fetchMock).toHaveBeenCalled();
@@ -268,13 +232,7 @@ describe('AIWordHelper', () => {
       },
     ]);
 
-    render(
-      <AIWordHelper
-        term="Git"
-        isOpen
-        onClose={vi.fn()}
-      />
-    );
+    render(<AIWordHelper term="Git" isOpen onClose={vi.fn()} />);
 
     expect(await screen.findByText('Missing locales')).toBeTruthy();
   });
diff --git a/frontend/components/tests/q&a/code-block.test.tsx b/frontend/components/tests/q&a/code-block.test.tsx
index a1627410..54eba04e 100644
--- a/frontend/components/tests/q&a/code-block.test.tsx
+++ b/frontend/components/tests/q&a/code-block.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, fireEvent, act } from '@testing-library/react';
+import { act,fireEvent, render, screen } from '@testing-library/react';
+import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('next-themes', () => ({
   useTheme: () => ({ resolvedTheme: 'light' }),
@@ -16,8 +16,12 @@ vi.mock('prism-react-renderer', () => ({
       className: string;
       style: Record<string, unknown>;
       tokens: Array<Array<{ content: string; types: string[] }>>;
-      getLineProps: (args: { line: { content: string }[] }) => Record<string, unknown>;
-      getTokenProps: (args: { token: { content: string } }) => Record<string, unknown>;
+      getLineProps: (args: {
+        line: { content: string }[];
+      }) => Record<string, unknown>;
+      getTokenProps: (args: {
+        token: { content: string };
+      }) => Record<string, unknown>;
     }) => unknown;
   }) =>
     children({
@@ -57,7 +61,9 @@ describe('CodeBlock', () => {
       await Promise.resolve();
     });
 
-    const writeText = navigator.clipboard.writeText as unknown as ReturnType<typeof vi.fn>;
+    const writeText = navigator.clipboard.writeText as unknown as ReturnType<
+      typeof vi.fn
+    >;
     expect(writeText).toHaveBeenCalledWith('const a = 1;');
 
     expect(screen.getByText('Copied')).toBeTruthy();
diff --git a/frontend/components/tests/q&a/floating-explain-button.test.tsx b/frontend/components/tests/q&a/floating-explain-button.test.tsx
index 6fad0620..d3660a16 100644
--- a/frontend/components/tests/q&a/floating-explain-button.test.tsx
+++ b/frontend/components/tests/q&a/floating-explain-button.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent,render, screen } from '@testing-library/react';
+import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => key,
diff --git a/frontend/components/tests/q&a/highlight-cached-terms.test.tsx b/frontend/components/tests/q&a/highlight-cached-terms.test.tsx
index fa4a142d..239f8c80 100644
--- a/frontend/components/tests/q&a/highlight-cached-terms.test.tsx
+++ b/frontend/components/tests/q&a/highlight-cached-terms.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent,render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
 
 import HighlightCachedTerms from '@/components/q&a/HighlightCachedTerms';
 
diff --git a/frontend/components/tests/q&a/pagination.test.tsx b/frontend/components/tests/q&a/pagination.test.tsx
index 9b4d4f0c..aa239ab5 100644
--- a/frontend/components/tests/q&a/pagination.test.tsx
+++ b/frontend/components/tests/q&a/pagination.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent,render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('next-intl', () => ({
   useTranslations: () => (key: string, values?: { page?: number }) =>
diff --git a/frontend/components/tests/q&a/qa-section.test.tsx b/frontend/components/tests/q&a/qa-section.test.tsx
index 1ae52c2f..60faa0d7 100644
--- a/frontend/components/tests/q&a/qa-section.test.tsx
+++ b/frontend/components/tests/q&a/qa-section.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import type React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
 vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => key,
@@ -31,7 +31,9 @@ vi.mock('@/components/q&a/AccordionList', () => ({
 
 vi.mock('@/components/ui/tabs', () => ({
   Tabs: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  TabsList: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  TabsList: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
   TabsContent: ({ children }: { children: React.ReactNode }) => (
     <div>{children}</div>
   ),
diff --git a/frontend/components/tests/q&a/selectable-text.test.tsx b/frontend/components/tests/q&a/selectable-text.test.tsx
index 6b08933f..c4b56555 100644
--- a/frontend/components/tests/q&a/selectable-text.test.tsx
+++ b/frontend/components/tests/q&a/selectable-text.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
+import { fireEvent,render } from '@testing-library/react';
+import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
 
 import SelectableText from '@/components/q&a/SelectableText';
 
diff --git a/frontend/components/tests/q&a/types.test.ts b/frontend/components/tests/q&a/types.test.ts
index 4d84d368..54c72ec6 100644
--- a/frontend/components/tests/q&a/types.test.ts
+++ b/frontend/components/tests/q&a/types.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect,it } from 'vitest';
 
 import { qaConstants } from '@/components/q&a/types';
 
diff --git a/frontend/components/tests/q&a/use-qa-tabs.test.tsx b/frontend/components/tests/q&a/use-qa-tabs.test.tsx
index 285c76c6..da82fe87 100644
--- a/frontend/components/tests/q&a/use-qa-tabs.test.tsx
+++ b/frontend/components/tests/q&a/use-qa-tabs.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { renderHook, act, waitFor } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const routerReplace = vi.fn();
 let searchParamsValue = new URLSearchParams();
diff --git a/frontend/components/theme/ThemeProvider.tsx b/frontend/components/theme/ThemeProvider.tsx
index 1b23b473..be8ff7d1 100644
--- a/frontend/components/theme/ThemeProvider.tsx
+++ b/frontend/components/theme/ThemeProvider.tsx
@@ -1,11 +1,11 @@
-'use client'
+'use client';
 
-import * as React from 'react'
 import {
   ThemeProvider as NextThemesProvider,
   type ThemeProviderProps,
-} from 'next-themes'
+} from 'next-themes';
+import * as React from 'react';
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}
\ No newline at end of file
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/frontend/components/theme/ThemeToggle.tsx b/frontend/components/theme/ThemeToggle.tsx
index 770586b0..460ebc6c 100644
--- a/frontend/components/theme/ThemeToggle.tsx
+++ b/frontend/components/theme/ThemeToggle.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useTheme } from 'next-themes';
-import { useTranslations } from 'next-intl';
-import { Monitor, Sun, Moon } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { Monitor, Moon,Sun } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 
 const themes = [
@@ -52,7 +52,7 @@ export function ThemeToggle() {
               transition={{ type: 'spring', stiffness: 400, damping: 30 }}
             />
           )}
-          <Icon className="relative z-10 h-4 w-4 text-neutral-500 dark:text-neutral-400 transition-colors" />
+          <Icon className="relative z-10 h-4 w-4 text-neutral-500 transition-colors dark:text-neutral-400" />
         </button>
       ))}
 
diff --git a/frontend/components/ui/accordion.tsx b/frontend/components/ui/accordion.tsx
index 4a8cca46..aad668b6 100644
--- a/frontend/components/ui/accordion.tsx
+++ b/frontend/components/ui/accordion.tsx
@@ -1,15 +1,15 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 function Accordion({
   ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 
 function AccordionItem({
@@ -19,10 +19,10 @@ function AccordionItem({
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
+      className={cn('border-b last:border-b-0', className)}
       {...props}
     />
-  )
+  );
 }
 
 function AccordionTrigger({
@@ -35,7 +35,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
           className
         )}
         {...props}
@@ -44,7 +44,7 @@ function AccordionTrigger({
         <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
-  )
+  );
 }
 
 function AccordionContent({
@@ -58,9 +58,9 @@ function AccordionContent({
       className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
       {...props}
     >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
     </AccordionPrimitive.Content>
-  )
+  );
 }
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionContent,AccordionItem, AccordionTrigger };
diff --git a/frontend/components/ui/badge.tsx b/frontend/components/ui/badge.tsx
index d2816d47..3b96841b 100644
--- a/frontend/components/ui/badge.tsx
+++ b/frontend/components/ui/badge.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { cn } from '@/lib/utils';
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -11,18 +12,18 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
       <span
         className={cn(
           'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium',
-          
+
           variant === 'default' &&
-            'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300',
+            'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
           variant === 'success' &&
-            'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400',
+            'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
           variant === 'blue' &&
-            'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
+            'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
           variant === 'purple' &&
-            'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400',
+            'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
           variant === 'gray' &&
-            'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400',
-          
+            'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
+
           className
         )}
         ref={ref}
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index 18117a5e..40cccaef 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { cn } from '@/lib/utils';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -12,16 +13,16 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <button
         className={cn(
           'inline-flex items-center justify-center rounded-xl font-medium transition-colors',
-          'disabled:opacity-50 disabled:pointer-events-none',
+          'disabled:pointer-events-none disabled:opacity-50',
 
           variant === 'accent' &&
             'bg-accent text-accent-foreground hover:bg-accent/90',
           variant === 'primary' &&
             'bg-[var(--accent-primary)] text-white hover:bg-[var(--accent-hover)] active:brightness-90',
           variant === 'secondary' &&
-            'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-700',
+            'bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700',
           variant === 'outline' &&
-            'border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800',
+            'border border-gray-300 hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-800',
 
           size === 'sm' && 'px-4 py-2 text-sm',
           size === 'md' && 'px-6 py-3 text-base',
diff --git a/frontend/components/ui/confirm-modal.tsx b/frontend/components/ui/confirm-modal.tsx
index 655d37ed..8a9770fb 100644
--- a/frontend/components/ui/confirm-modal.tsx
+++ b/frontend/components/ui/confirm-modal.tsx
@@ -33,26 +33,17 @@ export function ConfirmModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div 
-        className="absolute inset-0 bg-black/50" 
-        onClick={onCancel}
-      />
-      <div className="relative bg-white dark:bg-neutral-900 rounded-xl p-6 max-w-sm mx-4 shadow-xl border border-gray-200 dark:border-neutral-800">
-        <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+      <div className="absolute inset-0 bg-black/50" onClick={onCancel} />
+      <div className="relative mx-4 max-w-sm rounded-xl border border-gray-200 bg-white p-6 shadow-xl dark:border-neutral-800 dark:bg-neutral-900">
+        <h3 className="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">
           {title}
         </h3>
-        <p className="text-gray-600 dark:text-gray-400 mb-6">
-          {message}
-        </p>
+        <p className="mb-6 text-gray-600 dark:text-gray-400">{message}</p>
         <div className="flex gap-3">
-          <Button 
-            variant="outline" 
-            onClick={onCancel}
-            className="flex-1"
-          >
+          <Button variant="outline" onClick={onCancel} className="flex-1">
             {cancelText}
           </Button>
-          <Button 
+          <Button
             onClick={onConfirm}
             className={`flex-1 ${confirmButtonClass}`}
           >
diff --git a/frontend/components/ui/gradient-badge.tsx b/frontend/components/ui/gradient-badge.tsx
index 8780c377..91daa68a 100644
--- a/frontend/components/ui/gradient-badge.tsx
+++ b/frontend/components/ui/gradient-badge.tsx
@@ -1,22 +1,22 @@
-import { LucideIcon } from "lucide-react"
+import { LucideIcon } from 'lucide-react';
 
 interface GradientBadgeProps {
-  icon?: LucideIcon
-  text: string
-  className?: string
+  icon?: LucideIcon;
+  text: string;
+  className?: string;
 }
 
-export function GradientBadge({ icon: Icon, text, className = "" }: GradientBadgeProps) {
+export function GradientBadge({
+  icon: Icon,
+  text,
+  className = '',
+}: GradientBadgeProps) {
   return (
-    <div 
-      className={`inline-flex items-center gap-2 px-3 py-1 rounded-full 
-        border border-[#1e5eff]/20 dark:border-[#ff2d55]/20 
-        bg-[#1e5eff]/10 dark:bg-[#ff2d55]/10 
-        text-[#1e5eff] dark:text-[#ff2d55] 
-        text-[10px] font-bold uppercase tracking-widest ${className}`}
+    <div
+      className={`inline-flex items-center gap-2 rounded-full border border-[#1e5eff]/20 bg-[#1e5eff]/10 px-3 py-1 text-[10px] font-bold tracking-widest text-[#1e5eff] uppercase dark:border-[#ff2d55]/20 dark:bg-[#ff2d55]/10 dark:text-[#ff2d55] ${className}`}
     >
       {Icon && <Icon size={12} aria-hidden="true" />}
       {text}
     </div>
-  )
+  );
 }
diff --git a/frontend/components/ui/radio-group.tsx b/frontend/components/ui/radio-group.tsx
index 8f441460..1585def6 100644
--- a/frontend/components/ui/radio-group.tsx
+++ b/frontend/components/ui/radio-group.tsx
@@ -1,46 +1,46 @@
- 'use client';
+'use client';
 
-  import * as React from 'react';
-  import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as React from 'react';
 
-  import { cn } from '@/lib/utils';
+import { cn } from '@/lib/utils';
 
-  const RadioGroup = React.forwardRef<
-    React.ElementRef<typeof RadioGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
-  >(({ className, ...props }, ref) => {
-    return (
-      <RadioGroupPrimitive.Root
-        className={cn('flex flex-col gap-2', className)}
-        {...props}
-        ref={ref}
-      />
-    );
-  });
-  RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
-  const RadioGroupItem = React.forwardRef<
-    React.ElementRef<typeof RadioGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
-  >(({ className, ...props }, ref) => {
-    return (
-      <RadioGroupPrimitive.Item
-        ref={ref}
-        className={cn(
-          'aspect-square h-5 w-5 rounded-full border border-gray-300',
-          'focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          'data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600',
-          className
-        )}
-        {...props}
-      >
-        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-          <div className="h-2 w-2 rounded-full bg-white" />
-        </RadioGroupPrimitive.Indicator>
-      </RadioGroupPrimitive.Item>
-    );
-  });
-  RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'aspect-square h-5 w-5 rounded-full border border-gray-300',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <div className="h-2 w-2 rounded-full bg-white" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-  export { RadioGroup, RadioGroupItem };
\ No newline at end of file
+export { RadioGroup, RadioGroupItem };
diff --git a/frontend/components/ui/section-heading.tsx b/frontend/components/ui/section-heading.tsx
index c3719324..36af776d 100644
--- a/frontend/components/ui/section-heading.tsx
+++ b/frontend/components/ui/section-heading.tsx
@@ -1,25 +1,38 @@
 interface SectionHeadingProps {
-  title: string
-  highlight?: string
-  subtitle?: string
-  align?: "left" | "center"
-  className?: string
+  title: string;
+  highlight?: string;
+  subtitle?: string;
+  align?: 'left' | 'center';
+  className?: string;
 }
 
-export function SectionHeading({ title, highlight, subtitle, align = "center", className = "" }: SectionHeadingProps) {
+export function SectionHeading({
+  title,
+  highlight,
+  subtitle,
+  align = 'center',
+  className = '',
+}: SectionHeadingProps) {
   return (
-    <div className={`mb-12 ${align === "center" ? "text-center mx-auto" : ""} max-w-3xl ${className}`}>
-      <h2 className="text-4xl md:text-5xl lg:text-6xl font-black mb-6 tracking-tight text-gray-900 dark:text-white leading-[1.1]">
-        {title} 
+    <div
+      className={`mb-12 ${align === 'center' ? 'mx-auto text-center' : ''} max-w-3xl ${className}`}
+    >
+      <h2 className="mb-6 text-4xl leading-[1.1] font-black tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
+        {title}
         {highlight && (
-          <> <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] via-[#1e5eff]/70 to-[#1e5eff] dark:from-[#ff2d55] dark:via-[#ff2d55]/70 dark:to-[#ff2d55] bg-[length:200%_auto] animate-gradient">{highlight}</span></>
+          <>
+            {' '}
+            <span className="animate-gradient bg-gradient-to-r from-[#1e5eff] via-[#1e5eff]/70 to-[#1e5eff] bg-[length:200%_auto] bg-clip-text text-transparent dark:from-[#ff2d55] dark:via-[#ff2d55]/70 dark:to-[#ff2d55]">
+              {highlight}
+            </span>
+          </>
         )}
       </h2>
       {subtitle && (
-        <p className="text-lg md:text-xl text-gray-700 dark:text-neutral-300 font-light leading-relaxed max-w-2xl mx-auto">
+        <p className="mx-auto max-w-2xl text-lg leading-relaxed font-light text-gray-700 md:text-xl dark:text-neutral-300">
           {subtitle}
         </p>
       )}
     </div>
-  )
+  );
 }
diff --git a/frontend/components/ui/tabs.tsx b/frontend/components/ui/tabs.tsx
index 497ba5ea..2135ebb9 100644
--- a/frontend/components/ui/tabs.tsx
+++ b/frontend/components/ui/tabs.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 function Tabs({
   className,
@@ -12,10 +12,10 @@ function Tabs({
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
+      className={cn('flex flex-col gap-2', className)}
       {...props}
     />
-  )
+  );
 }
 
 function TabsList({
@@ -26,12 +26,12 @@ function TabsList({
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsTrigger({
@@ -47,7 +47,7 @@ function TabsTrigger({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsContent({
@@ -57,10 +57,10 @@ function TabsContent({
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
+      className={cn('flex-1 outline-none', className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsContent,TabsList, TabsTrigger };
diff --git a/frontend/data/about.ts b/frontend/data/about.ts
index 3f4ed008..7e39a5fa 100644
--- a/frontend/data/about.ts
+++ b/frontend/data/about.ts
@@ -1,145 +1,158 @@
-import { Twitter, Linkedin, Github } from "lucide-react"
+import { Github,Linkedin, Twitter } from 'lucide-react';
 
 export const TESTIMONIALS = [
-    {
-        name: "Alex Chen",
-        role: "Frontend @ Meta",
-        avatar: "AC",
-        content: "Cheap therapy for React devs.",
-        platform: "Twitter",
-        icon: Twitter,
-        color: "text-sky-500 bg-sky-500/10"
-    },
-    {
-        name: "Sarah J.",
-        role: "Senior SWE @ Google",
-        avatar: "SJ",
-        content: "Harder than my actual interview. 10/10.",
-        platform: "LinkedIn",
-        icon: Linkedin,
-        color: "text-blue-600 bg-blue-600/10"
-    },
-    {
-        name: "git_push_force",
-        role: "Open Source Contributor",
-        avatar: "GP",
-        content: "Found a bug in the quiz, reported it, got points. Now I'm addicted to fixing your typos.",
-        platform: "GitHub",
-        icon: Github,
-        color: "text-gray-900 dark:text-white bg-gray-500/10"
-    },
-    {
-        name: "Emily Park",
-        role: "Full Stack @ Vercel",
-        avatar: "EP",
-        content: "This is the only place where 'centering a div' is explained like I'm 5. Bless you.",
-        platform: "Twitter",
-        icon: Twitter,
-        color: "text-sky-500 bg-sky-500/10"
-    },
-    {
-        name: "David Kim",
-        role: "Staff Engineer @ Netflix",
-        avatar: "DK",
-        content: "I use the Q&A section to win arguments with my juniors. Don't tell them.",
-        platform: "LinkedIn",
-        icon: Linkedin,
-        color: "text-blue-600 bg-blue-600/10"
-    },
-]
+  {
+    name: 'Alex Chen',
+    role: 'Frontend @ Meta',
+    avatar: 'AC',
+    content: 'Cheap therapy for React devs.',
+    platform: 'Twitter',
+    icon: Twitter,
+    color: 'text-sky-500 bg-sky-500/10',
+  },
+  {
+    name: 'Sarah J.',
+    role: 'Senior SWE @ Google',
+    avatar: 'SJ',
+    content: 'Harder than my actual interview. 10/10.',
+    platform: 'LinkedIn',
+    icon: Linkedin,
+    color: 'text-blue-600 bg-blue-600/10',
+  },
+  {
+    name: 'git_push_force',
+    role: 'Open Source Contributor',
+    avatar: 'GP',
+    content:
+      "Found a bug in the quiz, reported it, got points. Now I'm addicted to fixing your typos.",
+    platform: 'GitHub',
+    icon: Github,
+    color: 'text-gray-900 dark:text-white bg-gray-500/10',
+  },
+  {
+    name: 'Emily Park',
+    role: 'Full Stack @ Vercel',
+    avatar: 'EP',
+    content:
+      "This is the only place where 'centering a div' is explained like I'm 5. Bless you.",
+    platform: 'Twitter',
+    icon: Twitter,
+    color: 'text-sky-500 bg-sky-500/10',
+  },
+  {
+    name: 'David Kim',
+    role: 'Staff Engineer @ Netflix',
+    avatar: 'DK',
+    content:
+      "I use the Q&A section to win arguments with my juniors. Don't tell them.",
+    platform: 'LinkedIn',
+    icon: Linkedin,
+    color: 'text-blue-600 bg-blue-600/10',
+  },
+];
 
 export const TOPICS = [
-    {
-        id: "git",
-        name: "Git & Version Control",
-        questions: "90+ Questions",
-        icon: "/icons/git.svg",
-        color: "group-hover:border-[#F05032]/50 dark:group-hover:border-[#F05032]/50 group-hover:bg-[#F05032]/10",
-        glow: "bg-[#F05032]",
-        href: "/q&a"
-    },
-    {
-        id: "html",
-        name: "HTML5 & Semantic",
-        questions: "120+ Questions",
-        icon: "/icons/html5.svg",
-        color: "group-hover:border-[#E34F26]/50 dark:group-hover:border-[#E34F26]/50 group-hover:bg-[#E34F26]/10",
-        glow: "bg-[#E34F26]",
-        href: "/q&a/?category=html"
-    },
-    {
-        id: "css",
-        name: "CSS3 & Responsive",
-        questions: "180+ Questions",
-        icon: "/icons/css3.svg",
-        color: "group-hover:border-[#663399]/50 dark:group-hover:border-[#663399]/50 group-hover:bg-[#663399]/10",
-        glow: "bg-[#663399]",
-        href: "/q&a/?category=css"
-    },
-    {
-        id: "js",
-        name: "JavaScript (ES6+)",
-        questions: "450+ Questions",
-        icon: "/icons/javascript.svg",
-        color: "group-hover:border-[#F7DF1E]/50 dark:group-hover:border-[#F7DF1E]/50 group-hover:bg-[#F7DF1E]/10",
-        glow: "bg-[#F7DF1E]",
-        href: "/q&a/?category=javascript"
-    },
-    {
-        id: "ts",
-        name: "TypeScript",
-        questions: "210+ Questions",
-        icon: "/icons/typescript.svg",
-        color: "group-hover:border-[#3178C6]/50 dark:group-hover:border-[#3178C6]/50 group-hover:bg-[#3178C6]/10",
-        glow: "bg-[#3178C6]",
-        href: "/q&a/?category=typescript"
-    },
-    {
-        id: "react",
-        name: "React.js Ecosystem",
-        questions: "320+ Questions",
-        icon: "/icons/react.svg",
-        color: "group-hover:border-[#61DAFB]/50 dark:group-hover:border-[#61DAFB]/50 group-hover:bg-[#61DAFB]/10",
-        glow: "bg-[#61DAFB]",
-        href: "/q&a/?category=react"
-    },
-    {
-        id: "next",
-        name: "Next.js & SSR",
-        questions: "140+ Questions",
-        icon: "/icons/nextjs.svg",
-        color: "group-hover:border-black/50 dark:group-hover:border-white/50 group-hover:bg-black/5 dark:group-hover:bg-white/10",
-        glow: "bg-black dark:bg-white",
-        href: "/q&a/?category=next"
-    },
-    {
-        id: "vue",
-        name: "Vue.js",
-        questions: "110+ Questions",
-        icon: "/icons/vuejs.svg",
-        color: "group-hover:border-[#4FC08D]/50 dark:group-hover:border-[#4FC08D]/50 group-hover:bg-[#4FC08D]/10",
-        glow: "bg-[#4FC08D]",
-        href: "/q&a/?category=vue"
-    },
-    {
-        id: "angular",
-        name: "Angular",
-        questions: "95+ Questions",
-        icon: "/icons/angular.svg",
-        color: "group-hover:border-[#DD0031]/50 dark:group-hover:border-[#DD0031]/50 group-hover:bg-[#DD0031]/10",
-        glow: "bg-[#DD0031]",
-        href: "/q&a/?category=angular"
-    },
-    {
-        id: "node",
-        name: "Node.js & Backend",
-        questions: "150+ Questions",
-        icon: "/icons/nodejs.svg",
-        color: "group-hover:border-[#339933]/50 dark:group-hover:border-[#339933]/50 group-hover:bg-[#339933]/10",
-        glow: "bg-[#339933]",
-        href: "/q&a/?category=node"
-    },
-]
+  {
+    id: 'git',
+    name: 'Git & Version Control',
+    questions: '90+ Questions',
+    icon: '/icons/git.svg',
+    color:
+      'group-hover:border-[#F05032]/50 dark:group-hover:border-[#F05032]/50 group-hover:bg-[#F05032]/10',
+    glow: 'bg-[#F05032]',
+    href: '/q&a',
+  },
+  {
+    id: 'html',
+    name: 'HTML5 & Semantic',
+    questions: '120+ Questions',
+    icon: '/icons/html5.svg',
+    color:
+      'group-hover:border-[#E34F26]/50 dark:group-hover:border-[#E34F26]/50 group-hover:bg-[#E34F26]/10',
+    glow: 'bg-[#E34F26]',
+    href: '/q&a/?category=html',
+  },
+  {
+    id: 'css',
+    name: 'CSS3 & Responsive',
+    questions: '180+ Questions',
+    icon: '/icons/css3.svg',
+    color:
+      'group-hover:border-[#663399]/50 dark:group-hover:border-[#663399]/50 group-hover:bg-[#663399]/10',
+    glow: 'bg-[#663399]',
+    href: '/q&a/?category=css',
+  },
+  {
+    id: 'js',
+    name: 'JavaScript (ES6+)',
+    questions: '450+ Questions',
+    icon: '/icons/javascript.svg',
+    color:
+      'group-hover:border-[#F7DF1E]/50 dark:group-hover:border-[#F7DF1E]/50 group-hover:bg-[#F7DF1E]/10',
+    glow: 'bg-[#F7DF1E]',
+    href: '/q&a/?category=javascript',
+  },
+  {
+    id: 'ts',
+    name: 'TypeScript',
+    questions: '210+ Questions',
+    icon: '/icons/typescript.svg',
+    color:
+      'group-hover:border-[#3178C6]/50 dark:group-hover:border-[#3178C6]/50 group-hover:bg-[#3178C6]/10',
+    glow: 'bg-[#3178C6]',
+    href: '/q&a/?category=typescript',
+  },
+  {
+    id: 'react',
+    name: 'React.js Ecosystem',
+    questions: '320+ Questions',
+    icon: '/icons/react.svg',
+    color:
+      'group-hover:border-[#61DAFB]/50 dark:group-hover:border-[#61DAFB]/50 group-hover:bg-[#61DAFB]/10',
+    glow: 'bg-[#61DAFB]',
+    href: '/q&a/?category=react',
+  },
+  {
+    id: 'next',
+    name: 'Next.js & SSR',
+    questions: '140+ Questions',
+    icon: '/icons/nextjs.svg',
+    color:
+      'group-hover:border-black/50 dark:group-hover:border-white/50 group-hover:bg-black/5 dark:group-hover:bg-white/10',
+    glow: 'bg-black dark:bg-white',
+    href: '/q&a/?category=next',
+  },
+  {
+    id: 'vue',
+    name: 'Vue.js',
+    questions: '110+ Questions',
+    icon: '/icons/vuejs.svg',
+    color:
+      'group-hover:border-[#4FC08D]/50 dark:group-hover:border-[#4FC08D]/50 group-hover:bg-[#4FC08D]/10',
+    glow: 'bg-[#4FC08D]',
+    href: '/q&a/?category=vue',
+  },
+  {
+    id: 'angular',
+    name: 'Angular',
+    questions: '95+ Questions',
+    icon: '/icons/angular.svg',
+    color:
+      'group-hover:border-[#DD0031]/50 dark:group-hover:border-[#DD0031]/50 group-hover:bg-[#DD0031]/10',
+    glow: 'bg-[#DD0031]',
+    href: '/q&a/?category=angular',
+  },
+  {
+    id: 'node',
+    name: 'Node.js & Backend',
+    questions: '150+ Questions',
+    icon: '/icons/nodejs.svg',
+    color:
+      'group-hover:border-[#339933]/50 dark:group-hover:border-[#339933]/50 group-hover:bg-[#339933]/10',
+    glow: 'bg-[#339933]',
+    href: '/q&a/?category=node',
+  },
+];
 
-export type Topic = typeof TOPICS[number];
-export type Testimonial = typeof TESTIMONIALS[number];
\ No newline at end of file
+export type Topic = (typeof TOPICS)[number];
+export type Testimonial = (typeof TESTIMONIALS)[number];
diff --git a/frontend/db/index.ts b/frontend/db/index.ts
index d65a6114..40058b68 100644
--- a/frontend/db/index.ts
+++ b/frontend/db/index.ts
@@ -1,15 +1,15 @@
-import { Pool } from 'pg';
 import { neon } from '@neondatabase/serverless';
-import { drizzle as drizzlePg } from 'drizzle-orm/node-postgres';
+import * as dotenv from 'dotenv';
 import { drizzle as drizzleNeon } from 'drizzle-orm/neon-http';
+import { drizzle as drizzlePg } from 'drizzle-orm/node-postgres';
 import type { PgDatabase, PgQueryResultHKT } from 'drizzle-orm/pg-core';
-import * as dotenv from 'dotenv';
+import { Pool } from 'pg';
 
 import * as schema from './schema';
 
 dotenv.config();
 
-type AppDatabase = PgDatabase<PgQueryResultHKT, typeof schema>
+type AppDatabase = PgDatabase<PgQueryResultHKT, typeof schema>;
 
 const APP_ENV = process.env.APP_ENV ?? 'local';
 
@@ -19,9 +19,7 @@ if (APP_ENV === 'local') {
   const url = process.env.DATABASE_URL_LOCAL;
 
   if (!url) {
-    throw new Error(
-      '[db] APP_ENV=local requires DATABASE_URL_LOCAL to be set'
-    );
+    throw new Error('[db] APP_ENV=local requires DATABASE_URL_LOCAL to be set');
   }
 
   const pool = new Pool({
@@ -37,9 +35,7 @@ if (APP_ENV === 'local') {
   const url = process.env.DATABASE_URL;
 
   if (!url) {
-    throw new Error(
-      `[db] APP_ENV=${APP_ENV} requires DATABASE_URL to be set`
-    );
+    throw new Error(`[db] APP_ENV=${APP_ENV} requires DATABASE_URL to be set`);
   }
 
   const sql = neon(url);
@@ -51,4 +47,4 @@ if (APP_ENV === 'local') {
   }
 }
 
-export { db };
\ No newline at end of file
+export { db };
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0000_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0000_snapshot.json
index ed149c60..e944da8f 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0000_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0000_snapshot.json
@@ -28,9 +28,7 @@
         "categories_name_unique": {
           "name": "categories_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -72,12 +70,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -117,12 +111,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -130,10 +120,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -200,12 +187,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -281,12 +264,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -294,12 +273,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -307,12 +282,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -475,12 +446,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -526,12 +493,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -539,10 +502,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -622,12 +582,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -673,12 +629,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -686,10 +638,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -769,10 +718,7 @@
         "quizzes_topic_id_slug_unique": {
           "name": "quizzes_topic_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "topic_id",
-            "slug"
-          ]
+          "columns": ["topic_id", "slug"]
         }
       },
       "policies": {},
@@ -849,9 +795,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -916,12 +860,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -944,4 +884,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0001_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0001_snapshot.json
index da453ae3..aca5a592 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0001_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0001_snapshot.json
@@ -28,9 +28,7 @@
         "categories_name_unique": {
           "name": "categories_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -72,12 +70,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -117,12 +111,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -130,10 +120,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -200,12 +187,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -281,12 +264,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -294,12 +273,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -307,12 +282,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -475,12 +446,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -526,12 +493,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -539,10 +502,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -622,12 +582,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -673,12 +629,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -686,10 +638,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -769,10 +718,7 @@
         "quizzes_topic_id_slug_unique": {
           "name": "quizzes_topic_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "topic_id",
-            "slug"
-          ]
+          "columns": ["topic_id", "slug"]
         }
       },
       "policies": {},
@@ -849,9 +795,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -916,12 +860,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -998,12 +938,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1011,12 +947,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1161,9 +1093,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1419,12 +1349,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1440,29 +1366,17 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD"
-      ]
+      "values": ["USD"]
     },
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -1475,4 +1389,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0002_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0002_snapshot.json
index b13a1b1d..c002e157 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0002_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0002_snapshot.json
@@ -28,9 +28,7 @@
         "categories_name_unique": {
           "name": "categories_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -72,12 +70,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -117,12 +111,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -130,10 +120,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -200,12 +187,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -281,12 +264,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -294,12 +273,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -307,12 +282,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -475,12 +446,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -526,12 +493,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -539,10 +502,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -622,12 +582,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -673,12 +629,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -686,10 +638,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -769,10 +718,7 @@
         "quizzes_topic_id_slug_unique": {
           "name": "quizzes_topic_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "topic_id",
-            "slug"
-          ]
+          "columns": ["topic_id", "slug"]
         }
       },
       "policies": {},
@@ -849,9 +795,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -916,12 +860,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -998,12 +938,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1011,12 +947,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1161,9 +1093,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1419,12 +1349,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1440,29 +1366,17 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD"
-      ]
+      "values": ["USD"]
     },
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -1475,4 +1389,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0003_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0003_snapshot.json
index 528dd51d..ac15afe5 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0003_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0003_snapshot.json
@@ -28,9 +28,7 @@
         "categories_name_unique": {
           "name": "categories_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -72,12 +70,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -117,12 +111,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -130,10 +120,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -200,12 +187,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -281,12 +264,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -294,12 +273,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -307,12 +282,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -475,12 +446,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -526,12 +493,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -539,10 +502,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -622,12 +582,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -673,12 +629,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -686,10 +638,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -769,10 +718,7 @@
         "quizzes_topic_id_slug_unique": {
           "name": "quizzes_topic_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "topic_id",
-            "slug"
-          ]
+          "columns": ["topic_id", "slug"]
         }
       },
       "policies": {},
@@ -849,9 +795,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -916,12 +860,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -998,12 +938,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1011,12 +947,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1144,12 +1076,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1159,9 +1087,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1417,12 +1343,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1438,29 +1360,17 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD"
-      ]
+      "values": ["USD"]
     },
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -1473,4 +1383,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0004_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0004_snapshot.json
index 660937d8..677435a1 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0004_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0004_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -216,12 +200,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -261,12 +241,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -274,10 +250,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -344,12 +317,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -425,12 +394,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -438,12 +403,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -451,12 +412,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -619,12 +576,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -670,12 +623,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -683,10 +632,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -766,12 +712,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -817,12 +759,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -830,10 +768,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -913,10 +848,7 @@
         "quizzes_topic_id_slug_unique": {
           "name": "quizzes_topic_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "topic_id",
-            "slug"
-          ]
+          "columns": ["topic_id", "slug"]
         }
       },
       "policies": {},
@@ -993,9 +925,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1060,12 +990,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1142,12 +1068,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1155,12 +1077,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1288,12 +1206,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1303,9 +1217,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1561,12 +1473,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1582,29 +1490,17 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD"
-      ]
+      "values": ["USD"]
     },
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -1617,4 +1513,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0005_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0005_snapshot.json
index fd616c60..04f2ca2f 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0005_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0005_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -216,12 +200,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -261,12 +241,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -274,10 +250,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -344,12 +317,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -425,12 +394,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -438,12 +403,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -451,12 +412,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -619,12 +576,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -670,12 +623,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -683,10 +632,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -766,12 +712,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -817,12 +759,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -830,10 +768,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -912,12 +847,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -927,10 +858,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1007,9 +935,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1074,12 +1000,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1156,12 +1078,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1169,12 +1087,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1302,12 +1216,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1317,9 +1227,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1575,12 +1483,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1596,29 +1500,17 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD"
-      ]
+      "values": ["USD"]
     },
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -1631,4 +1523,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0006_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0006_snapshot.json
index fa070a9c..484026eb 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0006_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0006_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -216,12 +200,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -261,12 +241,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -274,10 +250,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -344,12 +317,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -425,12 +394,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -438,12 +403,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -451,12 +412,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -619,12 +576,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -670,12 +623,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -683,10 +632,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -766,12 +712,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -817,12 +759,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -830,10 +768,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -912,12 +847,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -927,10 +858,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1007,9 +935,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1074,12 +1000,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1168,12 +1090,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1181,12 +1099,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1320,12 +1234,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1335,9 +1245,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1444,12 +1352,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1713,12 +1617,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1734,30 +1634,17 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -1770,4 +1657,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0007_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0007_snapshot.json
index 40c6db14..4ee10ec3 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0007_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0007_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -216,12 +200,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -261,12 +241,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -274,10 +250,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -344,12 +317,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -425,12 +394,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -438,12 +403,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -451,12 +412,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -619,12 +576,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -670,12 +623,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -683,10 +632,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -766,12 +712,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -817,12 +759,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -830,10 +768,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -912,12 +847,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -927,10 +858,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1007,9 +935,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1074,12 +1000,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1168,12 +1090,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1181,12 +1099,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1337,12 +1251,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1352,9 +1262,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1465,12 +1373,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1734,12 +1638,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1755,30 +1655,17 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -1791,4 +1678,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0008_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0008_snapshot.json
index a44bfd4c..5920f951 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0008_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0008_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -216,12 +200,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -261,12 +241,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -274,10 +250,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -344,12 +317,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -425,12 +394,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -438,12 +403,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -451,12 +412,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -619,12 +576,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -670,12 +623,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -683,10 +632,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -766,12 +712,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -817,12 +759,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -830,10 +768,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -912,12 +847,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -927,10 +858,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1020,9 +948,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1087,12 +1013,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1181,12 +1103,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1194,12 +1112,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1350,12 +1264,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1365,9 +1275,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1478,12 +1386,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1747,12 +1651,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1768,30 +1668,17 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -1804,4 +1691,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0009_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0009_snapshot.json
index 263bc713..7cedd36b 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0009_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0009_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -238,12 +222,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -671,12 +628,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -722,12 +675,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -735,10 +684,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -818,12 +764,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -869,12 +811,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -882,10 +820,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -980,12 +915,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -995,10 +926,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1110,9 +1038,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1177,12 +1103,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1287,12 +1209,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1300,12 +1218,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1464,12 +1378,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1479,9 +1389,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1615,12 +1523,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1908,12 +1812,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1929,30 +1829,17 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -1965,4 +1852,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0010_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0010_snapshot.json
index 1822de6a..89514e67 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0010_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0010_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -238,12 +222,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -648,12 +605,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -699,12 +652,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -712,10 +661,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -795,12 +741,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -846,12 +788,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -859,10 +797,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -957,12 +892,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -972,10 +903,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1080,9 +1008,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1163,12 +1089,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1273,12 +1195,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1286,12 +1204,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1450,12 +1364,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1465,9 +1375,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1601,12 +1509,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1894,12 +1798,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1915,30 +1815,17 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -1951,4 +1838,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0012_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0012_snapshot.json
index 810e0aa1..15d962e7 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0012_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0012_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -238,12 +222,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -648,12 +605,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -699,12 +652,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -712,10 +661,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -795,12 +741,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -846,12 +788,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -859,10 +797,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -957,12 +892,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -972,10 +903,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1080,9 +1008,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1163,12 +1089,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1281,12 +1203,8 @@
           "name": "inventory_moves_order_id_orders_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1294,12 +1212,8 @@
           "name": "inventory_moves_product_id_products_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1456,12 +1370,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1469,12 +1379,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1707,12 +1613,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1722,9 +1624,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1862,12 +1762,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2155,12 +2051,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -2176,18 +2068,12 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.inventory_move_type": {
       "name": "inventory_move_type",
       "schema": "public",
-      "values": [
-        "reserve",
-        "release"
-      ]
+      "values": ["reserve", "release"]
     },
     "public.inventory_status": {
       "name": "inventory_status",
@@ -2215,22 +2101,12 @@
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -2243,4 +2119,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0013_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0013_snapshot.json
index 2b0a460f..6a4826e2 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0013_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0013_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -238,12 +222,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -678,12 +635,8 @@
           "name": "quiz_attempts_user_id_users_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -691,12 +644,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -742,12 +691,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -755,10 +700,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -838,12 +780,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -889,12 +827,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -902,10 +836,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -1000,12 +931,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -1015,10 +942,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1123,9 +1047,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1206,12 +1128,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1362,12 +1280,8 @@
           "name": "inventory_moves_order_id_orders_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1375,12 +1289,8 @@
           "name": "inventory_moves_product_id_products_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1537,12 +1447,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1550,12 +1456,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1788,12 +1690,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1803,9 +1701,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1943,12 +1839,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2242,12 +2134,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -2317,18 +2205,12 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.inventory_move_type": {
       "name": "inventory_move_type",
       "schema": "public",
-      "values": [
-        "reserve",
-        "release"
-      ]
+      "values": ["reserve", "release"]
     },
     "public.inventory_status": {
       "name": "inventory_status",
@@ -2356,22 +2238,12 @@
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -2384,4 +2256,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0014_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0014_snapshot.json
index 80625ee3..e76583f5 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0014_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0014_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -238,12 +222,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -678,12 +635,8 @@
           "name": "quiz_attempts_user_id_users_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -691,12 +644,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -742,12 +691,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -755,10 +700,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -838,12 +780,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -889,12 +827,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -902,10 +836,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -1000,12 +931,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -1015,10 +942,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1123,9 +1047,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1206,12 +1128,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1362,12 +1280,8 @@
           "name": "inventory_moves_order_id_orders_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1375,12 +1289,8 @@
           "name": "inventory_moves_product_id_products_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1537,12 +1447,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1550,12 +1456,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1788,12 +1690,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1803,9 +1701,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1943,12 +1839,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2242,12 +2134,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -2263,18 +2151,12 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.inventory_move_type": {
       "name": "inventory_move_type",
       "schema": "public",
-      "values": [
-        "reserve",
-        "release"
-      ]
+      "values": ["reserve", "release"]
     },
     "public.inventory_status": {
       "name": "inventory_status",
@@ -2302,22 +2184,12 @@
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -2330,4 +2202,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/0015_snapshot.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/0015_snapshot.json
index e54330d5..c987ed46 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/0015_snapshot.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/0015_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -80,13 +78,9 @@
         "category_translations_category_id_categories_id_fk": {
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
-          "columnsFrom": [
-            "category_id"
-          ],
+          "columnsFrom": ["category_id"],
           "tableTo": "categories",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -139,13 +130,9 @@
         "question_translations_question_id_questions_id_fk": {
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
-          "columnsFrom": [
-            "question_id"
-          ],
+          "columnsFrom": ["question_id"],
           "tableTo": "questions",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -237,13 +221,9 @@
         "questions_category_id_categories_id_fk": {
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
-          "columnsFrom": [
-            "category_id"
-          ],
+          "columnsFrom": ["category_id"],
           "tableTo": "categories",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "restrict"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -648,12 +605,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -699,12 +652,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -712,10 +661,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -795,12 +741,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -846,12 +788,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -859,10 +797,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -957,12 +892,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -972,10 +903,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1080,9 +1008,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1163,12 +1089,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1319,12 +1241,8 @@
           "name": "inventory_moves_order_id_orders_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1332,12 +1250,8 @@
           "name": "inventory_moves_product_id_products_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1494,12 +1408,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1507,12 +1417,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1745,12 +1651,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1760,9 +1662,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1900,12 +1800,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2199,12 +2095,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -2328,18 +2220,12 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.inventory_move_type": {
       "name": "inventory_move_type",
       "schema": "public",
-      "values": [
-        "reserve",
-        "release"
-      ]
+      "values": ["reserve", "release"]
     },
     "public.inventory_status": {
       "name": "inventory_status",
@@ -2367,22 +2253,12 @@
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -2395,4 +2271,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/meta/_journal.json b/frontend/db/legacy-migrations/drizzle_legacy/meta/_journal.json
index 11bef9c3..50917f5c 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/meta/_journal.json
+++ b/frontend/db/legacy-migrations/drizzle_legacy/meta/_journal.json
@@ -96,27 +96,8 @@
     {
       "idx": 13,
       "version": "7",
-<<<<<<< HEAD
       "when": 1768162667947,
       "tag": "0013_brown_gamora",
-=======
-      "when": 1767697281389,
-      "tag": "0013_low_roughhouse",
-      "breakpoints": true
-    },
-    {
-      "idx": 14,
-      "version": "7",
-      "when": 1768045270184,
-      "tag": "0014_dapper_kang",
-      "breakpoints": true
-    },
-    {
-      "idx": 15,
-      "version": "7",
-      "when": 1768166276337,
-      "tag": "0015_glamorous_eternity",
->>>>>>> b30415e (feat(auth): add email verification, password reset, and improved auth UX)
       "breakpoints": true
     },
     {
@@ -127,4 +108,4 @@
       "breakpoints": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/relations.ts b/frontend/db/legacy-migrations/drizzle_legacy/relations.ts
index 8733c36a..48e7b5f1 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/relations.ts
+++ b/frontend/db/legacy-migrations/drizzle_legacy/relations.ts
@@ -1,162 +1,207 @@
-import { relations } from "drizzle-orm/relations";
-import { users, orders, quizzes, quizQuestions, pointTransactions, products, productPrices, categories, questions, quizAnswers, orderItems, quizAttempts, quizAttemptAnswers, stripeEvents, quizAnswerTranslations, categoryTranslations, questionTranslations, quizTranslations, quizQuestionContent } from "./schema";
+import { relations } from 'drizzle-orm/relations';
+
+import {
+  categories,
+  categoryTranslations,
+  orderItems,
+  orders,
+  pointTransactions,
+  productPrices,
+  products,
+  questions,
+  questionTranslations,
+  quizAnswers,
+  quizAnswerTranslations,
+  quizAttemptAnswers,
+  quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
+  stripeEvents,
+  users,
+} from './schema';
 
 export const ordersRelations = relations(orders, ({ one, many }) => ({
-	user: one(users, {
-		fields: [orders.userId],
-		references: [users.id]
-	}),
-	orderItems: many(orderItems),
-	stripeEvents: many(stripeEvents),
+  user: one(users, {
+    fields: [orders.userId],
+    references: [users.id],
+  }),
+  orderItems: many(orderItems),
+  stripeEvents: many(stripeEvents),
 }));
 
 export const usersRelations = relations(users, ({ many }) => ({
-	orders: many(orders),
-	pointTransactions: many(pointTransactions),
-	quizAttempts: many(quizAttempts),
-}));
-
-export const quizQuestionsRelations = relations(quizQuestions, ({ one, many }) => ({
-	quiz: one(quizzes, {
-		fields: [quizQuestions.quizId],
-		references: [quizzes.id]
-	}),
-	quizAnswers: many(quizAnswers),
-	quizAttemptAnswers: many(quizAttemptAnswers),
-	quizQuestionContents: many(quizQuestionContent),
-}));
+  orders: many(orders),
+  pointTransactions: many(pointTransactions),
+  quizAttempts: many(quizAttempts),
+}));
+
+export const quizQuestionsRelations = relations(
+  quizQuestions,
+  ({ one, many }) => ({
+    quiz: one(quizzes, {
+      fields: [quizQuestions.quizId],
+      references: [quizzes.id],
+    }),
+    quizAnswers: many(quizAnswers),
+    quizAttemptAnswers: many(quizAttemptAnswers),
+    quizQuestionContents: many(quizQuestionContent),
+  })
+);
 
 export const quizzesRelations = relations(quizzes, ({ one, many }) => ({
-	quizQuestions: many(quizQuestions),
-	category: one(categories, {
-		fields: [quizzes.categoryId],
-		references: [categories.id]
-	}),
-	quizAttempts: many(quizAttempts),
-	quizTranslations: many(quizTranslations),
-}));
-
-export const pointTransactionsRelations = relations(pointTransactions, ({ one }) => ({
-	user: one(users, {
-		fields: [pointTransactions.userId],
-		references: [users.id]
-	}),
-}));
+  quizQuestions: many(quizQuestions),
+  category: one(categories, {
+    fields: [quizzes.categoryId],
+    references: [categories.id],
+  }),
+  quizAttempts: many(quizAttempts),
+  quizTranslations: many(quizTranslations),
+}));
+
+export const pointTransactionsRelations = relations(
+  pointTransactions,
+  ({ one }) => ({
+    user: one(users, {
+      fields: [pointTransactions.userId],
+      references: [users.id],
+    }),
+  })
+);
 
 export const productPricesRelations = relations(productPrices, ({ one }) => ({
-	product: one(products, {
-		fields: [productPrices.productId],
-		references: [products.id]
-	}),
+  product: one(products, {
+    fields: [productPrices.productId],
+    references: [products.id],
+  }),
 }));
 
 export const productsRelations = relations(products, ({ many }) => ({
-	productPrices: many(productPrices),
-	orderItems: many(orderItems),
+  productPrices: many(productPrices),
+  orderItems: many(orderItems),
 }));
 
 export const questionsRelations = relations(questions, ({ one, many }) => ({
-	category: one(categories, {
-		fields: [questions.categoryId],
-		references: [categories.id]
-	}),
-	questionTranslations: many(questionTranslations),
+  category: one(categories, {
+    fields: [questions.categoryId],
+    references: [categories.id],
+  }),
+  questionTranslations: many(questionTranslations),
 }));
 
 export const categoriesRelations = relations(categories, ({ many }) => ({
-	questions: many(questions),
-	quizzes: many(quizzes),
-	categoryTranslations: many(categoryTranslations),
+  questions: many(questions),
+  quizzes: many(quizzes),
+  categoryTranslations: many(categoryTranslations),
 }));
 
 export const quizAnswersRelations = relations(quizAnswers, ({ one, many }) => ({
-	quizQuestion: one(quizQuestions, {
-		fields: [quizAnswers.quizQuestionId],
-		references: [quizQuestions.id]
-	}),
-	quizAttemptAnswers: many(quizAttemptAnswers),
-	quizAnswerTranslations: many(quizAnswerTranslations),
+  quizQuestion: one(quizQuestions, {
+    fields: [quizAnswers.quizQuestionId],
+    references: [quizQuestions.id],
+  }),
+  quizAttemptAnswers: many(quizAttemptAnswers),
+  quizAnswerTranslations: many(quizAnswerTranslations),
 }));
 
 export const orderItemsRelations = relations(orderItems, ({ one }) => ({
-	order: one(orders, {
-		fields: [orderItems.orderId],
-		references: [orders.id]
-	}),
-	product: one(products, {
-		fields: [orderItems.productId],
-		references: [products.id]
-	}),
+  order: one(orders, {
+    fields: [orderItems.orderId],
+    references: [orders.id],
+  }),
+  product: one(products, {
+    fields: [orderItems.productId],
+    references: [products.id],
+  }),
 }));
 
 export const quizAttemptsRelations = relations(
-	quizAttempts,
-	({ one, many }) => ({
-		user: one(users, {
-			fields: [quizAttempts.userId],
-			references: [users.id],
-		}),
-		quiz: one(quizzes, {
-			fields: [quizAttempts.quizId],
-			references: [quizzes.id],
-		}),
-		answers: many(quizAttemptAnswers),
-	})
+  quizAttempts,
+  ({ one, many }) => ({
+    user: one(users, {
+      fields: [quizAttempts.userId],
+      references: [users.id],
+    }),
+    quiz: one(quizzes, {
+      fields: [quizAttempts.quizId],
+      references: [quizzes.id],
+    }),
+    answers: many(quizAttemptAnswers),
+  })
 );
 
-export const quizAttemptAnswersRelations = relations(quizAttemptAnswers, ({ one }) => ({
-	quizAttempt: one(quizAttempts, {
-		fields: [quizAttemptAnswers.attemptId],
-		references: [quizAttempts.id]
-	}),
-	quizQuestion: one(quizQuestions, {
-		fields: [quizAttemptAnswers.quizQuestionId],
-		references: [quizQuestions.id]
-	}),
-	quizAnswer: one(quizAnswers, {
-		fields: [quizAttemptAnswers.selectedAnswerId],
-		references: [quizAnswers.id]
-	}),
-}));
+export const quizAttemptAnswersRelations = relations(
+  quizAttemptAnswers,
+  ({ one }) => ({
+    quizAttempt: one(quizAttempts, {
+      fields: [quizAttemptAnswers.attemptId],
+      references: [quizAttempts.id],
+    }),
+    quizQuestion: one(quizQuestions, {
+      fields: [quizAttemptAnswers.quizQuestionId],
+      references: [quizQuestions.id],
+    }),
+    quizAnswer: one(quizAnswers, {
+      fields: [quizAttemptAnswers.selectedAnswerId],
+      references: [quizAnswers.id],
+    }),
+  })
+);
 
 export const stripeEventsRelations = relations(stripeEvents, ({ one }) => ({
-	order: one(orders, {
-		fields: [stripeEvents.orderId],
-		references: [orders.id]
-	}),
-}));
-
-export const quizAnswerTranslationsRelations = relations(quizAnswerTranslations, ({ one }) => ({
-	quizAnswer: one(quizAnswers, {
-		fields: [quizAnswerTranslations.quizAnswerId],
-		references: [quizAnswers.id]
-	}),
-}));
+  order: one(orders, {
+    fields: [stripeEvents.orderId],
+    references: [orders.id],
+  }),
+}));
+
+export const quizAnswerTranslationsRelations = relations(
+  quizAnswerTranslations,
+  ({ one }) => ({
+    quizAnswer: one(quizAnswers, {
+      fields: [quizAnswerTranslations.quizAnswerId],
+      references: [quizAnswers.id],
+    }),
+  })
+);
 
-export const categoryTranslationsRelations = relations(categoryTranslations, ({ one }) => ({
-	category: one(categories, {
-		fields: [categoryTranslations.categoryId],
-		references: [categories.id]
-	}),
-}));
+export const categoryTranslationsRelations = relations(
+  categoryTranslations,
+  ({ one }) => ({
+    category: one(categories, {
+      fields: [categoryTranslations.categoryId],
+      references: [categories.id],
+    }),
+  })
+);
 
-export const questionTranslationsRelations = relations(questionTranslations, ({ one }) => ({
-	question: one(questions, {
-		fields: [questionTranslations.questionId],
-		references: [questions.id]
-	}),
-}));
+export const questionTranslationsRelations = relations(
+  questionTranslations,
+  ({ one }) => ({
+    question: one(questions, {
+      fields: [questionTranslations.questionId],
+      references: [questions.id],
+    }),
+  })
+);
 
-export const quizTranslationsRelations = relations(quizTranslations, ({ one }) => ({
-	quiz: one(quizzes, {
-		fields: [quizTranslations.quizId],
-		references: [quizzes.id]
-	}),
-}));
+export const quizTranslationsRelations = relations(
+  quizTranslations,
+  ({ one }) => ({
+    quiz: one(quizzes, {
+      fields: [quizTranslations.quizId],
+      references: [quizzes.id],
+    }),
+  })
+);
 
-export const quizQuestionContentRelations = relations(quizQuestionContent, ({ one }) => ({
-	quizQuestion: one(quizQuestions, {
-		fields: [quizQuestionContent.quizQuestionId],
-		references: [quizQuestions.id]
-	}),
-}));
\ No newline at end of file
+export const quizQuestionContentRelations = relations(
+  quizQuestionContent,
+  ({ one }) => ({
+    quizQuestion: one(quizQuestions, {
+      fields: [quizQuestionContent.quizQuestionId],
+      references: [quizQuestions.id],
+    }),
+  })
+);
diff --git a/frontend/db/legacy-migrations/drizzle_legacy/schema.ts b/frontend/db/legacy-migrations/drizzle_legacy/schema.ts
index b13c31c7..6aa9ddd2 100644
--- a/frontend/db/legacy-migrations/drizzle_legacy/schema.ts
+++ b/frontend/db/legacy-migrations/drizzle_legacy/schema.ts
@@ -1,359 +1,553 @@
 // ⚠️ Legacy file — not used by drizzle or runtime.
 // Canonical schemas live in frontend/db/schema/*
 
-import { pgTable, foreignKey, unique, check, uuid, text, numeric, jsonb, boolean, timestamp, varchar, integer, index, uniqueIndex, primaryKey, pgEnum } from "drizzle-orm/pg-core"
-import { sql } from "drizzle-orm"
+import { sql } from 'drizzle-orm';
+import {
+  boolean,
+  check,
+  foreignKey,
+  index,
+  integer,
+  jsonb,
+  numeric,
+  pgEnum,
+  pgTable,
+  primaryKey,
+  text,
+  timestamp,
+  unique,
+  uniqueIndex,
+  uuid,
+  varchar,
+} from 'drizzle-orm/pg-core';
 
-export const currency = pgEnum("currency", ['USD', 'UAH'])
-export const paymentStatus = pgEnum("payment_status", ['pending', 'requires_payment', 'paid', 'failed', 'refunded'])
-export const productBadge = pgEnum("product_badge", ['NEW', 'SALE', 'NONE'])
-
-export const users = pgTable("users", {
-	id: text().default(sql`gen_random_uuid()`).primaryKey().notNull(),
-	name: text(),
-	email: text().notNull(),
-	passwordHash: text("password_hash"),
-	provider: text().default('credentials').notNull(),
-	providerId: text("provider_id"),
-	emailVerified: timestamp("email_verified", { mode: 'date' }),
-	image: text(),
-	role: text().default("user").notNull(),
-	points: integer().default(0).notNull(),
-	createdAt: timestamp("created_at", { mode: 'date' }).defaultNow().notNull(),
-}, (table) => [
-	unique("users_email_unique").on(table.email),
-	unique("users_provider_provider_id_unique").on(table.provider, table.providerId),
+export const currency = pgEnum('currency', ['USD', 'UAH']);
+export const paymentStatus = pgEnum('payment_status', [
+  'pending',
+  'requires_payment',
+  'paid',
+  'failed',
+  'refunded',
 ]);
+export const productBadge = pgEnum('product_badge', ['NEW', 'SALE', 'NONE']);
 
-export const orders = pgTable("orders", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	userId: text("user_id"),
-	totalAmount: numeric("total_amount", { precision: 10, scale: 2 }).notNull(),
-	currency: currency().default('USD').notNull(),
-	paymentStatus: paymentStatus("payment_status").default('pending').notNull(),
-	paymentProvider: text("payment_provider").default('stripe').notNull(),
-	paymentIntentId: text("payment_intent_id"),
-	pspChargeId: text("psp_charge_id"),
-	pspPaymentMethod: text("psp_payment_method"),
-	pspStatusReason: text("psp_status_reason"),
-	pspMetadata: jsonb("psp_metadata").default({}),
-	stockRestored: boolean("stock_restored").default(false).notNull(),
-	restockedAt: timestamp("restocked_at", { mode: 'date' }),
-	idempotencyKey: varchar("idempotency_key", { length: 128 }).notNull(),
-	createdAt: timestamp("created_at", { mode: 'date' }).defaultNow().notNull(),
-	updatedAt: timestamp("updated_at", { mode: 'date' }).defaultNow().notNull(),
-	totalAmountMinor: integer("total_amount_minor").notNull(),
-}, (table) => [
-	foreignKey({
-		columns: [table.userId],
-		foreignColumns: [users.id],
-		name: "orders_user_id_users_id_fk"
-	}).onDelete("set null"),
-	unique("orders_idempotency_key_unique").on(table.idempotencyKey),
-	check("orders_payment_intent_id_null_when_none", sql`(payment_provider <> 'none'::text) OR (payment_intent_id IS NULL)`),
-	check("orders_payment_provider_valid", sql`payment_provider = ANY (ARRAY['stripe'::text, 'none'::text])`),
-	check("orders_total_amount_minor_non_negative", sql`total_amount_minor >= 0`)
-]);
+export const users = pgTable(
+  'users',
+  {
+    id: text()
+      .default(sql`gen_random_uuid()`)
+      .primaryKey()
+      .notNull(),
+    name: text(),
+    email: text().notNull(),
+    passwordHash: text('password_hash'),
+    provider: text().default('credentials').notNull(),
+    providerId: text('provider_id'),
+    emailVerified: timestamp('email_verified', { mode: 'date' }),
+    image: text(),
+    role: text().default('user').notNull(),
+    points: integer().default(0).notNull(),
+    createdAt: timestamp('created_at', { mode: 'date' }).defaultNow().notNull(),
+  },
+  table => [
+    unique('users_email_unique').on(table.email),
+    unique('users_provider_provider_id_unique').on(
+      table.provider,
+      table.providerId
+    ),
+  ]
+);
 
-export const categories = pgTable("categories", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	slug: varchar({ length: 50 }).notNull(),
-	displayOrder: integer("display_order").default(0).notNull(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
-}, (table) => [
-	unique("categories_slug_unique").on(table.slug),
-]);
-
-export const quizzes = pgTable("quizzes", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	categoryId: uuid("category_id").notNull(),
-	slug: varchar({ length: 100 }).notNull(),
-	displayOrder: integer("display_order").default(0).notNull(),
-	questionsCount: integer("questions_count").default(10).notNull(),
-	timeLimitSeconds: integer("time_limit_seconds"),
-	isActive: boolean("is_active").default(true).notNull(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
-	updatedAt: timestamp("updated_at", { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
-}, (table) => [
-	foreignKey({
-		columns: [table.categoryId],
-		foreignColumns: [categories.id],
-		name: "quizzes_category_id_categories_id_fk"
-	}).onDelete("restrict"),
-	unique("quizzes_category_id_slug_unique").on(table.categoryId, table.slug),
-]);
+export const orders = pgTable(
+  'orders',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    userId: text('user_id'),
+    totalAmount: numeric('total_amount', { precision: 10, scale: 2 }).notNull(),
+    currency: currency().default('USD').notNull(),
+    paymentStatus: paymentStatus('payment_status').default('pending').notNull(),
+    paymentProvider: text('payment_provider').default('stripe').notNull(),
+    paymentIntentId: text('payment_intent_id'),
+    pspChargeId: text('psp_charge_id'),
+    pspPaymentMethod: text('psp_payment_method'),
+    pspStatusReason: text('psp_status_reason'),
+    pspMetadata: jsonb('psp_metadata').default({}),
+    stockRestored: boolean('stock_restored').default(false).notNull(),
+    restockedAt: timestamp('restocked_at', { mode: 'date' }),
+    idempotencyKey: varchar('idempotency_key', { length: 128 }).notNull(),
+    createdAt: timestamp('created_at', { mode: 'date' }).defaultNow().notNull(),
+    updatedAt: timestamp('updated_at', { mode: 'date' }).defaultNow().notNull(),
+    totalAmountMinor: integer('total_amount_minor').notNull(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.userId],
+      foreignColumns: [users.id],
+      name: 'orders_user_id_users_id_fk',
+    }).onDelete('set null'),
+    unique('orders_idempotency_key_unique').on(table.idempotencyKey),
+    check(
+      'orders_payment_intent_id_null_when_none',
+      sql`(payment_provider <> 'none'::text) OR (payment_intent_id IS NULL)`
+    ),
+    check(
+      'orders_payment_provider_valid',
+      sql`payment_provider = ANY (ARRAY['stripe'::text, 'none'::text])`
+    ),
+    check(
+      'orders_total_amount_minor_non_negative',
+      sql`total_amount_minor >= 0`
+    ),
+  ]
+);
 
-export const quizQuestions = pgTable("quiz_questions", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	quizId: uuid("quiz_id").notNull(),
-	displayOrder: integer("display_order").notNull(),
-	sourceQuestionId: uuid("source_question_id"),
-	difficulty: varchar({ length: 20 }).default('medium'),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
-}, (table) => [
-	index("quiz_questions_quiz_display_order_idx").using("btree", table.quizId.asc().nullsLast().op("int4_ops"), table.displayOrder.asc().nullsLast().op("int4_ops")),
-	foreignKey({
-		columns: [table.quizId],
-		foreignColumns: [quizzes.id],
-		name: "quiz_questions_quiz_id_quizzes_id_fk"
-	}).onDelete("cascade"),
-]);
+export const categories = pgTable(
+  'categories',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    slug: varchar({ length: 50 }).notNull(),
+    displayOrder: integer('display_order').default(0).notNull(),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [unique('categories_slug_unique').on(table.slug)]
+);
 
-export const products = pgTable("products", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	slug: varchar({ length: 255 }).notNull(),
-	title: text().notNull(),
-	description: text(),
-	imageUrl: text("image_url").notNull(),
-	imagePublicId: text("image_public_id"),
-	price: numeric({ precision: 10, scale: 2 }).notNull(),
-	originalPrice: numeric("original_price", { precision: 10, scale: 2 }),
-	currency: currency().default('USD').notNull(),
-	category: text(),
-	type: text(),
-	colors: text().array().default([""]).notNull(),
-	sizes: text().array().default([""]).notNull(),
-	badge: productBadge().default('NONE').notNull(),
-	isActive: boolean("is_active").default(true).notNull(),
-	isFeatured: boolean("is_featured").default(false).notNull(),
-	stock: integer().default(0).notNull(),
-	sku: text(),
-	createdAt: timestamp("created_at", { mode: 'date' }).defaultNow().notNull(),
-	updatedAt: timestamp("updated_at", { mode: 'date' }).defaultNow().notNull(),
-}, (table) => [
-	uniqueIndex("products_slug_unique").using("btree", table.slug.asc().nullsLast().op("text_ops")),
-	check("products_stock_non_negative", sql`stock >= 0`),
-]);
+export const quizzes = pgTable(
+  'quizzes',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    categoryId: uuid('category_id').notNull(),
+    slug: varchar({ length: 100 }).notNull(),
+    displayOrder: integer('display_order').default(0).notNull(),
+    questionsCount: integer('questions_count').default(10).notNull(),
+    timeLimitSeconds: integer('time_limit_seconds'),
+    isActive: boolean('is_active').default(true).notNull(),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
+      .defaultNow()
+      .notNull(),
+    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'date' })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.categoryId],
+      foreignColumns: [categories.id],
+      name: 'quizzes_category_id_categories_id_fk',
+    }).onDelete('restrict'),
+    unique('quizzes_category_id_slug_unique').on(table.categoryId, table.slug),
+  ]
+);
 
-export const pointTransactions = pgTable("point_transactions", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	userId: text("user_id").notNull(),
-	points: integer().default(0).notNull(),
-	source: varchar({ length: 50 }).default('quiz').notNull(),
-	sourceId: uuid("source_id"),
-	metadata: jsonb().default({}),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
-}, (table) => [
-	foreignKey({
-		columns: [table.userId],
-		foreignColumns: [users.id],
-		name: "point_transactions_user_id_users_id_fk"
-	}).onDelete("cascade"),
-]);
+export const quizQuestions = pgTable(
+  'quiz_questions',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    quizId: uuid('quiz_id').notNull(),
+    displayOrder: integer('display_order').notNull(),
+    sourceQuestionId: uuid('source_question_id'),
+    difficulty: varchar({ length: 20 }).default('medium'),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [
+    index('quiz_questions_quiz_display_order_idx').using(
+      'btree',
+      table.quizId.asc().nullsLast().op('int4_ops'),
+      table.displayOrder.asc().nullsLast().op('int4_ops')
+    ),
+    foreignKey({
+      columns: [table.quizId],
+      foreignColumns: [quizzes.id],
+      name: 'quiz_questions_quiz_id_quizzes_id_fk',
+    }).onDelete('cascade'),
+  ]
+);
 
-export const productPrices = pgTable("product_prices", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	productId: uuid("product_id").notNull(),
-	currency: currency().notNull(),
-	price: numeric({ precision: 10, scale: 2 }).notNull(),
-	originalPrice: numeric("original_price", { precision: 10, scale: 2 }),
-	createdAt: timestamp("created_at", { mode: 'date' }).defaultNow().notNull(),
-	updatedAt: timestamp("updated_at", { mode: 'date' }).defaultNow().notNull(),
-	priceMinor: integer("price_minor").notNull(),
-	originalPriceMinor: integer("original_price_minor"),
-}, (table) => [
-	index("product_prices_currency_idx").using("btree", table.currency.asc().nullsLast().op("enum_ops")),
-	uniqueIndex("product_prices_product_currency_uq").using("btree", table.productId.asc().nullsLast().op("uuid_ops"), table.currency.asc().nullsLast().op("uuid_ops")),
-	foreignKey({
-		columns: [table.productId],
-		foreignColumns: [products.id],
-		name: "product_prices_product_id_fkey"
-	}).onDelete("cascade"),
-	check("product_prices_original_price_valid", sql`(original_price_minor IS NULL) OR (original_price_minor > price_minor)`),
-	check("product_prices_price_positive", sql`price_minor > 0`),
-]);
+export const products = pgTable(
+  'products',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    slug: varchar({ length: 255 }).notNull(),
+    title: text().notNull(),
+    description: text(),
+    imageUrl: text('image_url').notNull(),
+    imagePublicId: text('image_public_id'),
+    price: numeric({ precision: 10, scale: 2 }).notNull(),
+    originalPrice: numeric('original_price', { precision: 10, scale: 2 }),
+    currency: currency().default('USD').notNull(),
+    category: text(),
+    type: text(),
+    colors: text().array().default(['']).notNull(),
+    sizes: text().array().default(['']).notNull(),
+    badge: productBadge().default('NONE').notNull(),
+    isActive: boolean('is_active').default(true).notNull(),
+    isFeatured: boolean('is_featured').default(false).notNull(),
+    stock: integer().default(0).notNull(),
+    sku: text(),
+    createdAt: timestamp('created_at', { mode: 'date' }).defaultNow().notNull(),
+    updatedAt: timestamp('updated_at', { mode: 'date' }).defaultNow().notNull(),
+  },
+  table => [
+    uniqueIndex('products_slug_unique').using(
+      'btree',
+      table.slug.asc().nullsLast().op('text_ops')
+    ),
+    check('products_stock_non_negative', sql`stock >= 0`),
+  ]
+);
 
-export const questions = pgTable("questions", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	sortOrder: integer("sort_order").default(0).notNull(),
-	categoryId: uuid("category_id").notNull(),
-	difficulty: varchar({ length: 20 }).default('medium'),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
-	updatedAt: timestamp("updated_at", { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
-}, (table) => [
-	foreignKey({
-		columns: [table.categoryId],
-		foreignColumns: [categories.id],
-		name: "questions_category_id_categories_id_fk"
-	}).onDelete("restrict"),
-]);
+export const pointTransactions = pgTable(
+  'point_transactions',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    userId: text('user_id').notNull(),
+    points: integer().default(0).notNull(),
+    source: varchar({ length: 50 }).default('quiz').notNull(),
+    sourceId: uuid('source_id'),
+    metadata: jsonb().default({}),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.userId],
+      foreignColumns: [users.id],
+      name: 'point_transactions_user_id_users_id_fk',
+    }).onDelete('cascade'),
+  ]
+);
 
-export const quizAnswers = pgTable("quiz_answers", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	quizQuestionId: uuid("quiz_question_id").notNull(),
-	displayOrder: integer("display_order").notNull(),
-	isCorrect: boolean("is_correct").default(false).notNull(),
-}, (table) => [
-	index("quiz_answers_question_display_order_idx").using("btree", table.quizQuestionId.asc().nullsLast().op("int4_ops"), table.displayOrder.asc().nullsLast().op("int4_ops")),
-	foreignKey({
-		columns: [table.quizQuestionId],
-		foreignColumns: [quizQuestions.id],
-		name: "quiz_answers_quiz_question_id_quiz_questions_id_fk"
-	}).onDelete("cascade"),
-]);
+export const productPrices = pgTable(
+  'product_prices',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    productId: uuid('product_id').notNull(),
+    currency: currency().notNull(),
+    price: numeric({ precision: 10, scale: 2 }).notNull(),
+    originalPrice: numeric('original_price', { precision: 10, scale: 2 }),
+    createdAt: timestamp('created_at', { mode: 'date' }).defaultNow().notNull(),
+    updatedAt: timestamp('updated_at', { mode: 'date' }).defaultNow().notNull(),
+    priceMinor: integer('price_minor').notNull(),
+    originalPriceMinor: integer('original_price_minor'),
+  },
+  table => [
+    index('product_prices_currency_idx').using(
+      'btree',
+      table.currency.asc().nullsLast().op('enum_ops')
+    ),
+    uniqueIndex('product_prices_product_currency_uq').using(
+      'btree',
+      table.productId.asc().nullsLast().op('uuid_ops'),
+      table.currency.asc().nullsLast().op('uuid_ops')
+    ),
+    foreignKey({
+      columns: [table.productId],
+      foreignColumns: [products.id],
+      name: 'product_prices_product_id_fkey',
+    }).onDelete('cascade'),
+    check(
+      'product_prices_original_price_valid',
+      sql`(original_price_minor IS NULL) OR (original_price_minor > price_minor)`
+    ),
+    check('product_prices_price_positive', sql`price_minor > 0`),
+  ]
+);
 
-export const orderItems = pgTable("order_items", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	orderId: uuid("order_id").notNull(),
-	productId: uuid("product_id").notNull(),
-	quantity: integer().notNull(),
-	unitPrice: numeric("unit_price", { precision: 10, scale: 2 }).notNull(),
-	lineTotal: numeric("line_total", { precision: 10, scale: 2 }).notNull(),
-	productTitle: text("product_title"),
-	productSlug: text("product_slug"),
-	productSku: text("product_sku"),
-	unitPriceMinor: integer("unit_price_minor").notNull(),
-	lineTotalMinor: integer("line_total_minor").notNull(),
-}, (table) => [
-	foreignKey({
-		columns: [table.orderId],
-		foreignColumns: [orders.id],
-		name: "order_items_order_id_orders_id_fk"
-	}).onDelete("cascade"),
-	foreignKey({
-		columns: [table.productId],
-		foreignColumns: [products.id],
-		name: "order_items_product_id_products_id_fk"
-	}),
-	check("order_items_line_total_consistent", sql`line_total_minor = (unit_price_minor * quantity)`),
-	check("order_items_line_total_minor_non_negative", sql`line_total_minor >= 0`),
-	check("order_items_quantity_positive", sql`quantity > 0`),
-	check("order_items_unit_price_minor_non_negative", sql`unit_price_minor >= 0`),
-]);
+export const questions = pgTable(
+  'questions',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    sortOrder: integer('sort_order').default(0).notNull(),
+    categoryId: uuid('category_id').notNull(),
+    difficulty: varchar({ length: 20 }).default('medium'),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
+      .defaultNow()
+      .notNull(),
+    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'date' })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.categoryId],
+      foreignColumns: [categories.id],
+      name: 'questions_category_id_categories_id_fk',
+    }).onDelete('restrict'),
+  ]
+);
 
-export const quizAttempts = pgTable("quiz_attempts", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	userId: text("user_id").notNull(),
-	quizId: uuid("quiz_id").notNull(),
-	score: integer().notNull(),
-	totalQuestions: integer("total_questions").notNull(),
-	percentage: numeric({ precision: 5, scale: 2 }).notNull(),
-	timeSpentSeconds: integer("time_spent_seconds"),
-	integrityScore: integer("integrity_score").default(100),
-	metadata: jsonb().default({}),
-	startedAt: timestamp("started_at", { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
-	completedAt: timestamp("completed_at", { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
-}, (table) => [
-	index("quiz_attempts_quiz_integrity_score_idx").using("btree", table.quizId.asc().nullsLast().op("int4_ops"), table.integrityScore.asc().nullsLast().op("int4_ops")),
-	index("quiz_attempts_quiz_percentage_completed_at_idx").using("btree", table.quizId.asc().nullsLast().op("uuid_ops"), table.percentage.asc().nullsLast().op("timestamptz_ops"), table.completedAt.asc().nullsLast().op("numeric_ops")),
-	index("quiz_attempts_user_completed_at_idx").using("btree", table.userId.asc().nullsLast().op("text_ops"), table.completedAt.asc().nullsLast().op("timestamptz_ops")),
-	foreignKey({
-		columns: [table.quizId],
-		foreignColumns: [quizzes.id],
-		name: "quiz_attempts_quiz_id_quizzes_id_fk"
-	}).onDelete("cascade"),
-]);
+export const quizAnswers = pgTable(
+  'quiz_answers',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    quizQuestionId: uuid('quiz_question_id').notNull(),
+    displayOrder: integer('display_order').notNull(),
+    isCorrect: boolean('is_correct').default(false).notNull(),
+  },
+  table => [
+    index('quiz_answers_question_display_order_idx').using(
+      'btree',
+      table.quizQuestionId.asc().nullsLast().op('int4_ops'),
+      table.displayOrder.asc().nullsLast().op('int4_ops')
+    ),
+    foreignKey({
+      columns: [table.quizQuestionId],
+      foreignColumns: [quizQuestions.id],
+      name: 'quiz_answers_quiz_question_id_quiz_questions_id_fk',
+    }).onDelete('cascade'),
+  ]
+);
 
-export const quizAttemptAnswers = pgTable("quiz_attempt_answers", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	attemptId: uuid("attempt_id").notNull(),
-	quizQuestionId: uuid("quiz_question_id").notNull(),
-	selectedAnswerId: uuid("selected_answer_id"),
-	isCorrect: boolean("is_correct").notNull(),
-	answeredAt: timestamp("answered_at", { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
-}, (table) => [
-	index("quiz_attempt_answers_attempt_idx").using("btree", table.attemptId.asc().nullsLast().op("uuid_ops")),
-	foreignKey({
-		columns: [table.attemptId],
-		foreignColumns: [quizAttempts.id],
-		name: "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk"
-	}).onDelete("cascade"),
-	foreignKey({
-		columns: [table.quizQuestionId],
-		foreignColumns: [quizQuestions.id],
-		name: "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk"
-	}).onDelete("cascade"),
-	foreignKey({
-		columns: [table.selectedAnswerId],
-		foreignColumns: [quizAnswers.id],
-		name: "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk"
-	}).onDelete("set null"),
-]);
+export const orderItems = pgTable(
+  'order_items',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    orderId: uuid('order_id').notNull(),
+    productId: uuid('product_id').notNull(),
+    quantity: integer().notNull(),
+    unitPrice: numeric('unit_price', { precision: 10, scale: 2 }).notNull(),
+    lineTotal: numeric('line_total', { precision: 10, scale: 2 }).notNull(),
+    productTitle: text('product_title'),
+    productSlug: text('product_slug'),
+    productSku: text('product_sku'),
+    unitPriceMinor: integer('unit_price_minor').notNull(),
+    lineTotalMinor: integer('line_total_minor').notNull(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.orderId],
+      foreignColumns: [orders.id],
+      name: 'order_items_order_id_orders_id_fk',
+    }).onDelete('cascade'),
+    foreignKey({
+      columns: [table.productId],
+      foreignColumns: [products.id],
+      name: 'order_items_product_id_products_id_fk',
+    }),
+    check(
+      'order_items_line_total_consistent',
+      sql`line_total_minor = (unit_price_minor * quantity)`
+    ),
+    check(
+      'order_items_line_total_minor_non_negative',
+      sql`line_total_minor >= 0`
+    ),
+    check('order_items_quantity_positive', sql`quantity > 0`),
+    check(
+      'order_items_unit_price_minor_non_negative',
+      sql`unit_price_minor >= 0`
+    ),
+  ]
+);
 
-export const stripeEvents = pgTable("stripe_events", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	provider: text().default('stripe').notNull(),
-	eventId: text("event_id").notNull(),
-	paymentIntentId: text("payment_intent_id"),
-	orderId: uuid("order_id"),
-	eventType: text("event_type").notNull(),
-	paymentStatus: text("payment_status"),
-	createdAt: timestamp("created_at", { mode: 'date' }).defaultNow().notNull(),
-}, (table) => [
-	uniqueIndex("stripe_events_event_id_idx").using("btree", table.eventId.asc().nullsLast().op("text_ops")),
-	foreignKey({
-		columns: [table.orderId],
-		foreignColumns: [orders.id],
-		name: "stripe_events_order_id_orders_id_fk"
-	}),
-]);
+export const quizAttempts = pgTable(
+  'quiz_attempts',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    userId: text('user_id').notNull(),
+    quizId: uuid('quiz_id').notNull(),
+    score: integer().notNull(),
+    totalQuestions: integer('total_questions').notNull(),
+    percentage: numeric({ precision: 5, scale: 2 }).notNull(),
+    timeSpentSeconds: integer('time_spent_seconds'),
+    integrityScore: integer('integrity_score').default(100),
+    metadata: jsonb().default({}),
+    startedAt: timestamp('started_at', { withTimezone: true, mode: 'date' })
+      .defaultNow()
+      .notNull(),
+    completedAt: timestamp('completed_at', { withTimezone: true, mode: 'date' })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [
+    index('quiz_attempts_quiz_integrity_score_idx').using(
+      'btree',
+      table.quizId.asc().nullsLast().op('int4_ops'),
+      table.integrityScore.asc().nullsLast().op('int4_ops')
+    ),
+    index('quiz_attempts_quiz_percentage_completed_at_idx').using(
+      'btree',
+      table.quizId.asc().nullsLast().op('uuid_ops'),
+      table.percentage.asc().nullsLast().op('timestamptz_ops'),
+      table.completedAt.asc().nullsLast().op('numeric_ops')
+    ),
+    index('quiz_attempts_user_completed_at_idx').using(
+      'btree',
+      table.userId.asc().nullsLast().op('text_ops'),
+      table.completedAt.asc().nullsLast().op('timestamptz_ops')
+    ),
+    foreignKey({
+      columns: [table.quizId],
+      foreignColumns: [quizzes.id],
+      name: 'quiz_attempts_quiz_id_quizzes_id_fk',
+    }).onDelete('cascade'),
+  ]
+);
 
+export const quizAttemptAnswers = pgTable(
+  'quiz_attempt_answers',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    attemptId: uuid('attempt_id').notNull(),
+    quizQuestionId: uuid('quiz_question_id').notNull(),
+    selectedAnswerId: uuid('selected_answer_id'),
+    isCorrect: boolean('is_correct').notNull(),
+    answeredAt: timestamp('answered_at', { withTimezone: true, mode: 'date' })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [
+    index('quiz_attempt_answers_attempt_idx').using(
+      'btree',
+      table.attemptId.asc().nullsLast().op('uuid_ops')
+    ),
+    foreignKey({
+      columns: [table.attemptId],
+      foreignColumns: [quizAttempts.id],
+      name: 'quiz_attempt_answers_attempt_id_quiz_attempts_id_fk',
+    }).onDelete('cascade'),
+    foreignKey({
+      columns: [table.quizQuestionId],
+      foreignColumns: [quizQuestions.id],
+      name: 'quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk',
+    }).onDelete('cascade'),
+    foreignKey({
+      columns: [table.selectedAnswerId],
+      foreignColumns: [quizAnswers.id],
+      name: 'quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk',
+    }).onDelete('set null'),
+  ]
+);
 
+export const stripeEvents = pgTable(
+  'stripe_events',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    provider: text().default('stripe').notNull(),
+    eventId: text('event_id').notNull(),
+    paymentIntentId: text('payment_intent_id'),
+    orderId: uuid('order_id'),
+    eventType: text('event_type').notNull(),
+    paymentStatus: text('payment_status'),
+    createdAt: timestamp('created_at', { mode: 'date' }).defaultNow().notNull(),
+  },
+  table => [
+    uniqueIndex('stripe_events_event_id_idx').using(
+      'btree',
+      table.eventId.asc().nullsLast().op('text_ops')
+    ),
+    foreignKey({
+      columns: [table.orderId],
+      foreignColumns: [orders.id],
+      name: 'stripe_events_order_id_orders_id_fk',
+    }),
+  ]
+);
 
-export const quizAnswerTranslations = pgTable("quiz_answer_translations", {
-	quizAnswerId: uuid("quiz_answer_id").notNull(),
-	locale: varchar({ length: 5 }).notNull(),
-	answerText: text("answer_text").notNull(),
-}, (table) => [
-	foreignKey({
-		columns: [table.quizAnswerId],
-		foreignColumns: [quizAnswers.id],
-		name: "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk"
-	}).onDelete("cascade"),
-	primaryKey({ columns: [table.quizAnswerId, table.locale], name: "quiz_answer_translations_quiz_answer_id_locale_pk" }),
-]);
+export const quizAnswerTranslations = pgTable(
+  'quiz_answer_translations',
+  {
+    quizAnswerId: uuid('quiz_answer_id').notNull(),
+    locale: varchar({ length: 5 }).notNull(),
+    answerText: text('answer_text').notNull(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.quizAnswerId],
+      foreignColumns: [quizAnswers.id],
+      name: 'quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk',
+    }).onDelete('cascade'),
+    primaryKey({
+      columns: [table.quizAnswerId, table.locale],
+      name: 'quiz_answer_translations_quiz_answer_id_locale_pk',
+    }),
+  ]
+);
 
-export const categoryTranslations = pgTable("category_translations", {
-	categoryId: uuid("category_id").notNull(),
-	locale: varchar({ length: 5 }).notNull(),
-	title: text().notNull(),
-}, (table) => [
-	foreignKey({
-		columns: [table.categoryId],
-		foreignColumns: [categories.id],
-		name: "category_translations_category_id_categories_id_fk"
-	}).onDelete("cascade"),
-	primaryKey({ columns: [table.categoryId, table.locale], name: "category_translations_category_id_locale_pk" }),
-]);
+export const categoryTranslations = pgTable(
+  'category_translations',
+  {
+    categoryId: uuid('category_id').notNull(),
+    locale: varchar({ length: 5 }).notNull(),
+    title: text().notNull(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.categoryId],
+      foreignColumns: [categories.id],
+      name: 'category_translations_category_id_categories_id_fk',
+    }).onDelete('cascade'),
+    primaryKey({
+      columns: [table.categoryId, table.locale],
+      name: 'category_translations_category_id_locale_pk',
+    }),
+  ]
+);
 
-export const questionTranslations = pgTable("question_translations", {
-	questionId: uuid("question_id").notNull(),
-	locale: varchar({ length: 5 }).notNull(),
-	question: text().notNull(),
-	answerBlocks: jsonb("answer_blocks").notNull(),
-}, (table) => [
-	foreignKey({
-		columns: [table.questionId],
-		foreignColumns: [questions.id],
-		name: "question_translations_question_id_questions_id_fk"
-	}).onDelete("cascade"),
-	primaryKey({ columns: [table.questionId, table.locale], name: "question_translations_question_id_locale_pk" }),
-]);
+export const questionTranslations = pgTable(
+  'question_translations',
+  {
+    questionId: uuid('question_id').notNull(),
+    locale: varchar({ length: 5 }).notNull(),
+    question: text().notNull(),
+    answerBlocks: jsonb('answer_blocks').notNull(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.questionId],
+      foreignColumns: [questions.id],
+      name: 'question_translations_question_id_questions_id_fk',
+    }).onDelete('cascade'),
+    primaryKey({
+      columns: [table.questionId, table.locale],
+      name: 'question_translations_question_id_locale_pk',
+    }),
+  ]
+);
 
-export const quizTranslations = pgTable("quiz_translations", {
-	quizId: uuid("quiz_id").notNull(),
-	locale: varchar({ length: 5 }).notNull(),
-	title: varchar({ length: 200 }).notNull(),
-	description: text(),
-}, (table) => [
-	foreignKey({
-		columns: [table.quizId],
-		foreignColumns: [quizzes.id],
-		name: "quiz_translations_quiz_id_quizzes_id_fk"
-	}).onDelete("cascade"),
-	primaryKey({ columns: [table.quizId, table.locale], name: "quiz_translations_quiz_id_locale_pk" }),
-]);
+export const quizTranslations = pgTable(
+  'quiz_translations',
+  {
+    quizId: uuid('quiz_id').notNull(),
+    locale: varchar({ length: 5 }).notNull(),
+    title: varchar({ length: 200 }).notNull(),
+    description: text(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.quizId],
+      foreignColumns: [quizzes.id],
+      name: 'quiz_translations_quiz_id_quizzes_id_fk',
+    }).onDelete('cascade'),
+    primaryKey({
+      columns: [table.quizId, table.locale],
+      name: 'quiz_translations_quiz_id_locale_pk',
+    }),
+  ]
+);
 
-export const quizQuestionContent = pgTable("quiz_question_content", {
-	quizQuestionId: uuid("quiz_question_id").notNull(),
-	locale: varchar({ length: 5 }).notNull(),
-	questionText: text("question_text").notNull(),
-	explanation: jsonb(),
-}, (table) => [
-	foreignKey({
-		columns: [table.quizQuestionId],
-		foreignColumns: [quizQuestions.id],
-		name: "quiz_question_content_quiz_question_id_quiz_questions_id_fk"
-	}).onDelete("cascade"),
-	primaryKey({ columns: [table.quizQuestionId, table.locale], name: "quiz_question_content_quiz_question_id_locale_pk" }),
-]);
+export const quizQuestionContent = pgTable(
+  'quiz_question_content',
+  {
+    quizQuestionId: uuid('quiz_question_id').notNull(),
+    locale: varchar({ length: 5 }).notNull(),
+    questionText: text('question_text').notNull(),
+    explanation: jsonb(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.quizQuestionId],
+      foreignColumns: [quizQuestions.id],
+      name: 'quiz_question_content_quiz_question_id_quiz_questions_id_fk',
+    }).onDelete('cascade'),
+    primaryKey({
+      columns: [table.quizQuestionId, table.locale],
+      name: 'quiz_question_content_quiz_question_id_locale_pk',
+    }),
+  ]
+);
diff --git a/frontend/db/queries/leaderboard.ts b/frontend/db/queries/leaderboard.ts
index a5288afb..4031adb4 100644
--- a/frontend/db/queries/leaderboard.ts
+++ b/frontend/db/queries/leaderboard.ts
@@ -1,10 +1,12 @@
-import { cache } from 'react';
+import { desc, eq,sql } from 'drizzle-orm';
 import { unstable_cache } from 'next/cache';
+import { cache } from 'react';
+
+import { User } from '@/components/leaderboard/types';
+
 import { db } from '../index';
-import { users } from '../schema/users';
 import { pointTransactions } from '../schema/points';
-import { desc, sql, eq } from 'drizzle-orm';
-import { User } from '@/components/leaderboard/types';
+import { users } from '../schema/users';
 
 const getLeaderboardDataCached = unstable_cache(
   async (): Promise<User[]> => {
diff --git a/frontend/db/queries/points.ts b/frontend/db/queries/points.ts
index c90abec7..e8f0c156 100644
--- a/frontend/db/queries/points.ts
+++ b/frontend/db/queries/points.ts
@@ -1,8 +1,9 @@
+import { and, eq, sql } from 'drizzle-orm';
 import { revalidateTag } from 'next/cache';
+
 import { db } from '../index';
 import { pointTransactions } from '../schema/points';
 import { quizAttempts } from '../schema/quiz';
-import { eq, and, sql } from 'drizzle-orm';
 
 export function calculateQuizPoints(params: {
   score: number;
@@ -52,9 +53,7 @@ export async function awardQuizPoints(params: {
     return 0;
   }
 
-  await db
-  .insert(pointTransactions)
-  .values({
+  await db.insert(pointTransactions).values({
     userId,
     points: pointsToAward,
     source: 'quiz',
@@ -71,4 +70,4 @@ export async function awardQuizPoints(params: {
   revalidateTag('leaderboard', 'default');
 
   return pointsToAward;
-}
\ No newline at end of file
+}
diff --git a/frontend/db/queries/quiz.ts b/frontend/db/queries/quiz.ts
index da70e6f6..c95dcc07 100644
--- a/frontend/db/queries/quiz.ts
+++ b/frontend/db/queries/quiz.ts
@@ -1,18 +1,19 @@
-import { cache } from 'react';
+import { and, desc, eq, inArray,sql } from 'drizzle-orm';
 import { unstable_cache } from 'next/cache';
+import { cache } from 'react';
+
 import { db } from '../index';
+import { categories, categoryTranslations } from '../schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
-  quizAttempts,
   quizAttemptAnswers,
+  quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from '../schema/quiz';
-import { categories, categoryTranslations } from '../schema/categories';
-import { eq, and, desc, sql, inArray } from 'drizzle-orm';
 
 export interface Quiz {
   id: string;
diff --git a/frontend/db/queries/shop/admin-orders.ts b/frontend/db/queries/shop/admin-orders.ts
index 72c08d0d..8d0e5e90 100644
--- a/frontend/db/queries/shop/admin-orders.ts
+++ b/frontend/db/queries/shop/admin-orders.ts
@@ -1,11 +1,12 @@
 import 'server-only';
 
 import { count, desc, eq, sql } from 'drizzle-orm';
+
 import { db } from '@/db';
 import { orderItems, orders } from '@/db/schema';
 import type { CurrencyCode } from '@/lib/shop/currency';
-import type { PaymentProvider, PaymentStatus } from '@/lib/shop/payments';
 import { toDbMoney } from '@/lib/shop/money';
+import type { PaymentProvider, PaymentStatus } from '@/lib/shop/payments';
 
 export type AdminOrderListItem = {
   id: string;
diff --git a/frontend/db/queries/shop/orders.ts b/frontend/db/queries/shop/orders.ts
index 641c8972..9fc7812b 100644
--- a/frontend/db/queries/shop/orders.ts
+++ b/frontend/db/queries/shop/orders.ts
@@ -1,93 +1,117 @@
-import { and, eq, inArray } from "drizzle-orm"
-import { products } from "@/db/schema"
-import { db } from "@/db"
-
-import { type OrderSummary as ValidationOrderSummary } from "@/lib/validation/shop"
-import { InsufficientStockError } from "@/lib/services/errors"
-import { MoneyCents, fromCents, fromDbMoney, sumLineTotals, toCents } from "@/lib/shop/money"
-export { InsufficientStockError } from "@/lib/services/errors"
+import { and, eq, inArray } from 'drizzle-orm';
+
+import { db } from '@/db';
+import { products } from '@/db/schema';
+import { InsufficientStockError } from '@/lib/services/errors';
+import {
+  fromCents,
+  fromDbMoney,
+  MoneyCents,
+  sumLineTotals,
+  toCents,
+} from '@/lib/shop/money';
+import { type OrderSummary as ValidationOrderSummary } from '@/lib/validation/shop';
+export { InsufficientStockError } from '@/lib/services/errors';
 
 export class MoneyValueError extends Error {
-  field?: string
-  rawValue: unknown
-  productId?: string
-
-  constructor({ field, rawValue, productId }: { field?: string; rawValue: unknown; productId?: string }) {
-    super(`Invalid monetary value for ${field ?? "price"}`)
-    this.name = "MoneyValueError"
-    this.field = field
-    this.rawValue = rawValue
-    this.productId = productId
+  field?: string;
+  rawValue: unknown;
+  productId?: string;
+
+  constructor({
+    field,
+    rawValue,
+    productId,
+  }: {
+    field?: string;
+    rawValue: unknown;
+    productId?: string;
+  }) {
+    super(`Invalid monetary value for ${field ?? 'price'}`);
+    this.name = 'MoneyValueError';
+    this.field = field;
+    this.rawValue = rawValue;
+    this.productId = productId;
   }
 }
 
 export interface OrderItemSummary {
-  productId: string
-  productTitle: string
-  productSlug: string
-  quantity: number
-  unitPrice: number
-  lineTotal: number
+  productId: string;
+  productTitle: string;
+  productSlug: string;
+  quantity: number;
+  unitPrice: number;
+  lineTotal: number;
 }
 
-export type OrderSummary = ValidationOrderSummary
+export type OrderSummary = ValidationOrderSummary;
 
-export function coercePriceFromDb(price: unknown, context?: { field?: string; productId?: string }): number {
+export function coercePriceFromDb(
+  price: unknown,
+  context?: { field?: string; productId?: string }
+): number {
   if (price === null || price === undefined) {
     throw new MoneyValueError({
       field: context?.field,
       rawValue: price,
       productId: context?.productId,
-    })
+    });
   }
 
   try {
-    return fromCents(fromDbMoney(price))
+    return fromCents(fromDbMoney(price));
   } catch {
     throw new MoneyValueError({
       field: context?.field,
       rawValue: price,
       productId: context?.productId,
-    })
+    });
   }
 }
 
+export function calculateOrderTotal(
+  items: Array<{ lineTotal: number; lineTotalCents?: MoneyCents }>
+): number {
+  const normalized = items.map(
+    item => item.lineTotalCents ?? toCents(item.lineTotal)
+  );
 
-export function calculateOrderTotal(items: Array<{ lineTotal: number; lineTotalCents?: MoneyCents }>): number {
-  const normalized = items.map((item) => item.lineTotalCents ?? toCents(item.lineTotal))
-
-  return fromCents(sumLineTotals(normalized))
+  return fromCents(sumLineTotals(normalized));
 }
 
 export interface PricedItemInput {
-  productId: string
-  stock: number
-  requestedQty: number
+  productId: string;
+  stock: number;
+  requestedQty: number;
 }
 
 export function ensureSufficientStock(items: PricedItemInput[]) {
   for (const item of items) {
     if (item.stock < 0) {
-      throw new Error(`Invalid stock configuration for product ${item.productId}`)
+      throw new Error(
+        `Invalid stock configuration for product ${item.productId}`
+      );
     }
 
     if (item.stock <= 0 && item.requestedQty > 0) {
-      throw new InsufficientStockError(`Product ${item.productId} is out of stock`)
+      throw new InsufficientStockError(
+        `Product ${item.productId} is out of stock`
+      );
     }
 
     if (item.requestedQty > item.stock) {
       throw new InsufficientStockError(
-        `Requested quantity exceeds stock for product ${item.productId}`,
-      )
+        `Requested quantity exceeds stock for product ${item.productId}`
+      );
     }
   }
 }
 
 export async function getActiveProductsWithIds(ids: string[]) {
-  if (ids.length === 0) return []
+  if (ids.length === 0) return [];
 
   return db
     .select()
     .from(products)
-    .where(and(eq(products.isActive, true), inArray(products.id, ids)))
+    .where(and(eq(products.isActive, true), inArray(products.id, ids)));
 }
diff --git a/frontend/db/queries/shop/products.ts b/frontend/db/queries/shop/products.ts
index b473be5f..1a5f2009 100644
--- a/frontend/db/queries/shop/products.ts
+++ b/frontend/db/queries/shop/products.ts
@@ -4,16 +4,17 @@ import {
   count,
   desc,
   eq,
-  or,
   inArray,
-  sql,
+  or,
   type SQL,
+  sql,
 } from 'drizzle-orm';
+
 import { db } from '@/db';
+import { productPrices,products } from '@/db/schema';
 import type { CatalogSort } from '@/lib/config/catalog';
-import { products, productPrices } from '@/db/schema';
-import { dbProductSchema, type DbProduct } from '@/lib/validation/shop';
 import type { CurrencyCode } from '@/lib/shop/currency';
+import { type DbProduct,dbProductSchema } from '@/lib/validation/shop';
 
 const publicProductBaseSelect = {
   id: products.id,
diff --git a/frontend/db/queries/users.ts b/frontend/db/queries/users.ts
index 4eee8841..d9370a1b 100644
--- a/frontend/db/queries/users.ts
+++ b/frontend/db/queries/users.ts
@@ -1,9 +1,11 @@
 import 'server-only';
-import { cache } from 'react';
+
 import { eq, sql } from 'drizzle-orm';
+import { cache } from 'react';
+
 import { db } from '@/db';
-import { users } from '@/db/schema/users';
 import { pointTransactions } from '@/db/schema/points';
+import { users } from '@/db/schema/users';
 
 export const getUserProfile = cache(async (userId: string) => {
   const user = await db.query.users.findFirst({
diff --git a/frontend/db/schema/categories.ts b/frontend/db/schema/categories.ts
index bf42b7c8..f60d83fd 100644
--- a/frontend/db/schema/categories.ts
+++ b/frontend/db/schema/categories.ts
@@ -1,13 +1,13 @@
+import { relations } from 'drizzle-orm';
 import {
+  integer,
   pgTable,
-  uuid,
-  varchar,
+  primaryKey,
   text,
-  integer,
   timestamp,
-  primaryKey,
+  uuid,
+  varchar,
 } from 'drizzle-orm/pg-core';
-import { relations } from 'drizzle-orm';
 
 export const categories = pgTable('categories', {
   id: uuid('id').defaultRandom().primaryKey(),
@@ -44,4 +44,4 @@ export const categoryTranslationsRelations = relations(
       references: [categories.id],
     }),
   })
-);
\ No newline at end of file
+);
diff --git a/frontend/db/schema/emailVerificationTokens.ts b/frontend/db/schema/emailVerificationTokens.ts
index 28620b04..db8f7ab6 100644
--- a/frontend/db/schema/emailVerificationTokens.ts
+++ b/frontend/db/schema/emailVerificationTokens.ts
@@ -1,18 +1,14 @@
-import { pgTable, text, timestamp, index } from "drizzle-orm/pg-core";
+import { index,pgTable, text, timestamp } from 'drizzle-orm/pg-core';
 
 export const emailVerificationTokens = pgTable(
-    "email_verification_tokens",
-    {
-        token: text("token").primaryKey(),
-        userId: text("user_id").notNull(),
-        expiresAt: timestamp("expires_at", { mode: "date" }).notNull(),
-        createdAt: timestamp("created_at", { mode: "date" })
-            .notNull()
-            .defaultNow(),
-    },
-    table => ({
-        userIdIdx: index("email_verification_tokens_user_id_idx").on(
-            table.userId
-        ),
-    })
-);
\ No newline at end of file
+  'email_verification_tokens',
+  {
+    token: text('token').primaryKey(),
+    userId: text('user_id').notNull(),
+    expiresAt: timestamp('expires_at', { mode: 'date' }).notNull(),
+    createdAt: timestamp('created_at', { mode: 'date' }).notNull().defaultNow(),
+  },
+  table => ({
+    userIdIdx: index('email_verification_tokens_user_id_idx').on(table.userId),
+  })
+);
diff --git a/frontend/db/schema/index.ts b/frontend/db/schema/index.ts
index d249498f..765dd210 100644
--- a/frontend/db/schema/index.ts
+++ b/frontend/db/schema/index.ts
@@ -1,9 +1,9 @@
 export * from './categories';
-export * from './questions';
-export * from './quiz';
-export * from './users';
-export * from './points';
-export * from './shop';
 export * from './emailVerificationTokens';
 export * from './passwordResetTokens';
+export * from './points';
+export * from './questions';
+export * from './quiz';
 export * from './sessions';
+export * from './shop';
+export * from './users';
diff --git a/frontend/db/schema/passwordResetTokens.ts b/frontend/db/schema/passwordResetTokens.ts
index aef507fc..c0bdda77 100644
--- a/frontend/db/schema/passwordResetTokens.ts
+++ b/frontend/db/schema/passwordResetTokens.ts
@@ -1,18 +1,14 @@
-import { pgTable, text, timestamp, index } from "drizzle-orm/pg-core";
+import { index,pgTable, text, timestamp } from 'drizzle-orm/pg-core';
 
 export const passwordResetTokens = pgTable(
-    "password_reset_tokens",
-    {
-        token: text("token").primaryKey(),
-        userId: text("user_id").notNull(),
-        expiresAt: timestamp("expires_at", { mode: "date" }).notNull(),
-        createdAt: timestamp("created_at", { mode: "date" })
-            .notNull()
-            .defaultNow(),
-    },
-    table => ({
-        userIdIdx: index("password_reset_tokens_user_id_idx").on(
-            table.userId
-        ),
-    })
-);
\ No newline at end of file
+  'password_reset_tokens',
+  {
+    token: text('token').primaryKey(),
+    userId: text('user_id').notNull(),
+    expiresAt: timestamp('expires_at', { mode: 'date' }).notNull(),
+    createdAt: timestamp('created_at', { mode: 'date' }).notNull().defaultNow(),
+  },
+  table => ({
+    userIdIdx: index('password_reset_tokens_user_id_idx').on(table.userId),
+  })
+);
diff --git a/frontend/db/schema/points.ts b/frontend/db/schema/points.ts
index 93fee0d4..150a576f 100644
--- a/frontend/db/schema/points.ts
+++ b/frontend/db/schema/points.ts
@@ -1,27 +1,32 @@
 import {
-  pgTable,
-  uuid,
-  text,
+  index,
   integer,
-  varchar,
   jsonb,
+  pgTable,
+  text,
   timestamp,
-  index
+  uuid,
+  varchar,
 } from 'drizzle-orm/pg-core';
+
 import { users } from './users';
 
-export const pointTransactions = pgTable('point_transactions', {
-  id: uuid('id').defaultRandom().primaryKey(),
-  userId: text('user_id')
-    .notNull()
-    .references(() => users.id, { onDelete: 'cascade' }),
-  points: integer('points').notNull().default(0),
-  source: varchar('source', { length: 50 }).notNull().default('quiz'),
-  sourceId: uuid('source_id'),
-  metadata: jsonb('metadata').default({}),
-  createdAt: timestamp('created_at', { withTimezone: true })
-    .notNull()
-    .defaultNow(),
-}, (table) => ({
-  userIdIdx: index('point_transactions_user_id_idx').on(table.userId),
-}));
\ No newline at end of file
+export const pointTransactions = pgTable(
+  'point_transactions',
+  {
+    id: uuid('id').defaultRandom().primaryKey(),
+    userId: text('user_id')
+      .notNull()
+      .references(() => users.id, { onDelete: 'cascade' }),
+    points: integer('points').notNull().default(0),
+    source: varchar('source', { length: 50 }).notNull().default('quiz'),
+    sourceId: uuid('source_id'),
+    metadata: jsonb('metadata').default({}),
+    createdAt: timestamp('created_at', { withTimezone: true })
+      .notNull()
+      .defaultNow(),
+  },
+  table => ({
+    userIdIdx: index('point_transactions_user_id_idx').on(table.userId),
+  })
+);
diff --git a/frontend/db/schema/questions.ts b/frontend/db/schema/questions.ts
index 6512e087..d8ec185a 100644
--- a/frontend/db/schema/questions.ts
+++ b/frontend/db/schema/questions.ts
@@ -1,15 +1,16 @@
+import { relations } from 'drizzle-orm';
 import {
+  index,
+  integer,
+  jsonb,
   pgTable,
-  uuid,
-  varchar,
+  primaryKey,
   text,
-  integer,
   timestamp,
-  primaryKey,
-  jsonb,
-  index,
+  uuid,
+  varchar,
 } from 'drizzle-orm/pg-core';
-import { relations } from 'drizzle-orm';
+
 import { categories } from './categories';
 
 export const questions = pgTable(
diff --git a/frontend/db/schema/quiz.ts b/frontend/db/schema/quiz.ts
index 8bf1569a..52e9b4ff 100644
--- a/frontend/db/schema/quiz.ts
+++ b/frontend/db/schema/quiz.ts
@@ -1,20 +1,21 @@
+import { relations } from 'drizzle-orm';
 import {
-  pgTable,
-  uuid,
-  varchar,
-  text,
-  integer,
   boolean,
-  timestamp,
   decimal,
+  index,
+  integer,
   jsonb,
+  pgTable,
   primaryKey,
-  index,
+  text,
+  timestamp,
   unique,
+  uuid,
+  varchar,
 } from 'drizzle-orm/pg-core';
-import { relations } from 'drizzle-orm';
-import { users } from './users';
+
 import { categories } from './categories';
+import { users } from './users';
 
 export const quizzes = pgTable(
   'quizzes',
@@ -151,7 +152,7 @@ export const quizAttempts = pgTable(
       .defaultNow(),
   },
   table => ({
-    userIdIdx: index('quiz_attempts_user_id_idx').on(table.userId),       // ← NEW
+    userIdIdx: index('quiz_attempts_user_id_idx').on(table.userId), // ← NEW
     quizIdIdx: index('quiz_attempts_quiz_id_idx').on(table.quizId),
     userCompletedAtIdx: index('quiz_attempts_user_completed_at_idx').on(
       table.userId,
diff --git a/frontend/db/schema/sessions.ts b/frontend/db/schema/sessions.ts
index 9d010dc8..18b7d0b6 100644
--- a/frontend/db/schema/sessions.ts
+++ b/frontend/db/schema/sessions.ts
@@ -1,4 +1,4 @@
-import { pgTable, text, timestamp, index } from 'drizzle-orm/pg-core';
+import { index,pgTable, text, timestamp } from 'drizzle-orm/pg-core';
 
 export const activeSessions = pgTable(
   'active_sessions',
@@ -6,7 +6,9 @@ export const activeSessions = pgTable(
     sessionId: text('session_id').primaryKey(),
     lastActivity: timestamp('last_activity').notNull().defaultNow(),
   },
-  (table) => ({
-    lastActivityIdx: index('active_sessions_last_activity_idx').on(table.lastActivity),
+  table => ({
+    lastActivityIdx: index('active_sessions_last_activity_idx').on(
+      table.lastActivity
+    ),
   })
-);
\ No newline at end of file
+);
diff --git a/frontend/db/schema/shop.ts b/frontend/db/schema/shop.ts
index 1f726234..e14f00db 100644
--- a/frontend/db/schema/shop.ts
+++ b/frontend/db/schema/shop.ts
@@ -2,9 +2,9 @@ import { sql } from 'drizzle-orm';
 import {
   boolean,
   check,
+  index,
   integer,
   jsonb,
-  index,
   numeric,
   pgEnum,
   pgTable,
@@ -14,6 +14,7 @@ import {
   uuid,
   varchar,
 } from 'drizzle-orm/pg-core';
+
 import { users } from '@/db/schema/users';
 import type { PaymentProvider, PaymentStatus } from '@/lib/shop/payments';
 
@@ -262,7 +263,9 @@ export const stripeEvents = pgTable(
     provider: text('provider').notNull().default('stripe'),
     eventId: text('event_id').notNull(),
     paymentIntentId: text('payment_intent_id'),
-    orderId: uuid('order_id').references(() => orders.id, { onDelete: 'cascade' }),
+    orderId: uuid('order_id').references(() => orders.id, {
+      onDelete: 'cascade',
+    }),
     eventType: text('event_type').notNull(),
     paymentStatus: text('payment_status'),
     claimedAt: timestamp('claimed_at', { withTimezone: true }),
diff --git a/frontend/db/schema/users.ts b/frontend/db/schema/users.ts
index 208e9bc7..0c530b6d 100644
--- a/frontend/db/schema/users.ts
+++ b/frontend/db/schema/users.ts
@@ -1,42 +1,39 @@
-import {
-  pgTable,
-  text,
-  timestamp,
-  uniqueIndex,
-} from "drizzle-orm/pg-core";
-import { relations, sql } from "drizzle-orm";
-import { quizAttempts } from "./quiz";
+import { relations, sql } from 'drizzle-orm';
+import { pgTable, text, timestamp, uniqueIndex } from 'drizzle-orm/pg-core';
+
+import { quizAttempts } from './quiz';
 
 export const users = pgTable(
-  "users",
+  'users',
   {
-    id: text("id")
+    id: text('id')
       .primaryKey()
       .notNull()
       .default(sql`gen_random_uuid()`),
 
-    name: text("name"),
+    name: text('name'),
 
-    email: text("email").notNull().unique(),
+    email: text('email').notNull().unique(),
 
-    passwordHash: text("password_hash"),
+    passwordHash: text('password_hash'),
 
-    provider: text("provider").notNull().default("credentials"),
+    provider: text('provider').notNull().default('credentials'),
 
-    providerId: text("provider_id"),
+    providerId: text('provider_id'),
 
-    emailVerified: timestamp("email_verified", { mode: "date" }),
+    emailVerified: timestamp('email_verified', { mode: 'date' }),
 
-    image: text("image"),
+    image: text('image'),
 
-    role: text("role").notNull().default("user"),
+    role: text('role').notNull().default('user'),
 
-    createdAt: timestamp("created_at").notNull().defaultNow(),
+    createdAt: timestamp('created_at').notNull().defaultNow(),
   },
   table => ({
-    providerProviderIdUq: uniqueIndex(
-      "users_provider_provider_id_unique"
-    ).on(table.provider, table.providerId),
+    providerProviderIdUq: uniqueIndex('users_provider_provider_id_unique').on(
+      table.provider,
+      table.providerId
+    ),
   })
 );
 
diff --git a/frontend/db/seed-categories.ts b/frontend/db/seed-categories.ts
index 1067f03e..c1cf2936 100644
--- a/frontend/db/seed-categories.ts
+++ b/frontend/db/seed-categories.ts
@@ -1,7 +1,8 @@
 import 'dotenv/config';
+
+import { categoryData } from '../data/category';
 import { db } from './index';
 import { categories, categoryTranslations } from './schema';
-import { categoryData } from '../data/category';
 
 const LOCALES = ['uk', 'en', 'pl'] as const;
 
diff --git a/frontend/db/seed-demo-leaderboard.ts b/frontend/db/seed-demo-leaderboard.ts
index 3ed5e6e6..ca8568cd 100644
--- a/frontend/db/seed-demo-leaderboard.ts
+++ b/frontend/db/seed-demo-leaderboard.ts
@@ -1,7 +1,8 @@
+import { and, eq, inArray } from 'drizzle-orm';
+
 import { db } from './index';
-import { users } from './schema/users';
 import { pointTransactions } from './schema/points';
-import { and, eq, inArray } from 'drizzle-orm';
+import { users } from './schema/users';
 
 async function main() {
   console.log('Seeding demo leaderboard users...');
diff --git a/frontend/db/seed-questions.ts b/frontend/db/seed-questions.ts
index 52fa7d38..2c86ce17 100644
--- a/frontend/db/seed-questions.ts
+++ b/frontend/db/seed-questions.ts
@@ -1,8 +1,10 @@
 import 'dotenv/config';
+
 import { eq } from 'drizzle-orm';
+
+import rawData from '../parse/questions.json';
 import { db } from './index';
 import { categories, questions, questionTranslations } from './schema';
-import rawData from '../parse/questions.json';
 
 type RawQuestion = {
   category: string;
diff --git a/frontend/db/seed-quiz-angular-advanced.ts b/frontend/db/seed-quiz-angular-advanced.ts
index 42045220..93e6626c 100644
--- a/frontend/db/seed-quiz-angular-advanced.ts
+++ b/frontend/db/seed-quiz-angular-advanced.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
-import { readFileSync, existsSync } from 'fs';
+import { existsSync,readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-angular.ts b/frontend/db/seed-quiz-angular.ts
index 2af5a7c4..1310f7a4 100644
--- a/frontend/db/seed-quiz-angular.ts
+++ b/frontend/db/seed-quiz-angular.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
-import { readFileSync, existsSync } from 'fs';
+import { existsSync,readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-css-advanced.ts b/frontend/db/seed-quiz-css-advanced.ts
index 735bfc56..51da4e3e 100644
--- a/frontend/db/seed-quiz-css-advanced.ts
+++ b/frontend/db/seed-quiz-css-advanced.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
 import { readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-css.ts b/frontend/db/seed-quiz-css.ts
index a3c2e583..32cbaf20 100644
--- a/frontend/db/seed-quiz-css.ts
+++ b/frontend/db/seed-quiz-css.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
 import { readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-from-json.ts b/frontend/db/seed-quiz-from-json.ts
index 6ff75be0..865fa29c 100644
--- a/frontend/db/seed-quiz-from-json.ts
+++ b/frontend/db/seed-quiz-from-json.ts
@@ -1,18 +1,20 @@
 import 'dotenv/config';
+
+import { eq } from 'drizzle-orm';
 import { readFileSync } from 'fs';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
-import { eq } from 'drizzle-orm';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-git.ts b/frontend/db/seed-quiz-git.ts
index 3a11013b..0fbe1893 100644
--- a/frontend/db/seed-quiz-git.ts
+++ b/frontend/db/seed-quiz-git.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
 import { readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
@@ -44,15 +45,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'Основи Git',
-      description: 'Перевірте свої знання системи контролю версій Git: команди, гілки, злиття, workflows та найкращі практики.',
+      description:
+        'Перевірте свої знання системи контролю версій Git: команди, гілки, злиття, workflows та найкращі практики.',
     },
     en: {
       title: 'Git Fundamentals',
-      description: 'Test your knowledge of Git version control: commands, branches, merging, workflows and best practices.',
+      description:
+        'Test your knowledge of Git version control: commands, branches, merging, workflows and best practices.',
     },
     pl: {
       title: 'Podstawy Git',
-      description: 'Sprawdź swoją wiedzę o systemie kontroli wersji Git: polecenia, gałęzie, scalanie, workflows i najlepsze praktyki.',
+      description:
+        'Sprawdź swoją wiedzę o systemie kontroli wersji Git: polecenia, gałęzie, scalanie, workflows i najlepsze praktyki.',
     },
   },
 };
@@ -62,7 +66,12 @@ function createExplanation(text: string) {
 }
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'parse', 'git', `git-quiz-part${partNumber}.json`);
+  const partPath = join(
+    process.cwd(),
+    'parse',
+    'git',
+    `git-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -77,7 +86,9 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
   const existing = await db.query.quizzes.findFirst({
@@ -88,19 +99,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 1,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 1,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -115,14 +133,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 1,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 1,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -136,15 +157,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -157,12 +187,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -207,7 +240,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -222,7 +257,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -232,7 +269,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-quiz-html-advanced.ts b/frontend/db/seed-quiz-html-advanced.ts
index fac7337f..a3d22456 100644
--- a/frontend/db/seed-quiz-html-advanced.ts
+++ b/frontend/db/seed-quiz-html-advanced.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
 import { readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-html.ts b/frontend/db/seed-quiz-html.ts
index 4847f686..de29fc1d 100644
--- a/frontend/db/seed-quiz-html.ts
+++ b/frontend/db/seed-quiz-html.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
 import { readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-javascript-advanced.ts b/frontend/db/seed-quiz-javascript-advanced.ts
index 8854549a..904521ee 100644
--- a/frontend/db/seed-quiz-javascript-advanced.ts
+++ b/frontend/db/seed-quiz-javascript-advanced.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
 import { readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-javascript.ts b/frontend/db/seed-quiz-javascript.ts
index 74ed960d..540ae82c 100644
--- a/frontend/db/seed-quiz-javascript.ts
+++ b/frontend/db/seed-quiz-javascript.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
 import { readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-nodejs-advanced.ts b/frontend/db/seed-quiz-nodejs-advanced.ts
index e3241f36..f40a76c1 100644
--- a/frontend/db/seed-quiz-nodejs-advanced.ts
+++ b/frontend/db/seed-quiz-nodejs-advanced.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
-import { readFileSync, existsSync } from 'fs';
+import { existsSync,readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-nodejs.ts b/frontend/db/seed-quiz-nodejs.ts
index 4f393930..0ca99c3e 100644
--- a/frontend/db/seed-quiz-nodejs.ts
+++ b/frontend/db/seed-quiz-nodejs.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
-import { readFileSync, existsSync } from 'fs';
+import { existsSync,readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-react.ts b/frontend/db/seed-quiz-react.ts
index 39931d82..b51bd4b2 100644
--- a/frontend/db/seed-quiz-react.ts
+++ b/frontend/db/seed-quiz-react.ts
@@ -1,16 +1,18 @@
 import 'dotenv/config';
+
+import { randomUUID } from 'crypto';
 import { eq } from 'drizzle-orm';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
-import { randomUUID } from 'crypto';
 
 type Locale = 'uk' | 'en' | 'pl';
 
diff --git a/frontend/db/seed-quiz-typescript-advanced.ts b/frontend/db/seed-quiz-typescript-advanced.ts
index 80783a11..0c7573d9 100644
--- a/frontend/db/seed-quiz-typescript-advanced.ts
+++ b/frontend/db/seed-quiz-typescript-advanced.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
 import { readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
@@ -44,15 +45,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'TypeScript Advanced',
-      description: 'Поглиблений квіз з TypeScript: декоратори, рефлексія, утилітні типи, infer, template literal types, патерни проектування та інтеграція з фреймворками.',
+      description:
+        'Поглиблений квіз з TypeScript: декоратори, рефлексія, утилітні типи, infer, template literal types, патерни проектування та інтеграція з фреймворками.',
     },
     en: {
       title: 'TypeScript Advanced',
-      description: 'Advanced TypeScript quiz: decorators, reflection, utility types, infer, template literal types, design patterns and framework integration.',
+      description:
+        'Advanced TypeScript quiz: decorators, reflection, utility types, infer, template literal types, design patterns and framework integration.',
     },
     pl: {
       title: 'TypeScript Advanced',
-      description: 'Zaawansowany quiz z TypeScript: dekoratory, refleksja, typy narzędziowe, infer, template literal types, wzorce projektowe i integracja z frameworkami.',
+      description:
+        'Zaawansowany quiz z TypeScript: dekoratory, refleksja, typy narzędziowe, infer, template literal types, wzorce projektowe i integracja z frameworkami.',
     },
   },
 };
@@ -62,7 +66,13 @@ function createExplanation(text: string) {
 }
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(process.cwd(), 'parse', 'typescript', 'advanced', `typescript-advanced-quiz-part${partNumber}.json`);
+  const partPath = join(
+    process.cwd(),
+    'parse',
+    'typescript',
+    'advanced',
+    `typescript-advanced-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -77,7 +87,9 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
   const existing = await db.query.quizzes.findFirst({
@@ -88,19 +100,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 2,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 2,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -115,14 +134,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 2,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 2,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -136,15 +158,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -157,12 +188,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -183,9 +217,13 @@ async function seedQuizFromJson() {
 
   if (!partArg) {
     console.error('Error: Please specify which part to upload');
-    console.log('Usage: npx tsx db/seeds/seed-quiz-typescript-advanced.ts <part-number>');
+    console.log(
+      'Usage: npx tsx db/seeds/seed-quiz-typescript-advanced.ts <part-number>'
+    );
     console.log('Example: npx tsx db/seeds/seed-quiz-typescript-advanced.ts 1');
-    console.log('Or upload all: npx tsx db/seeds/seed-quiz-typescript-advanced.ts all');
+    console.log(
+      'Or upload all: npx tsx db/seeds/seed-quiz-typescript-advanced.ts all'
+    );
     process.exit(1);
   }
 
@@ -207,7 +245,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -222,7 +262,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -232,7 +274,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-quiz-typescript.ts b/frontend/db/seed-quiz-typescript.ts
index bd46baf9..614ebeee 100644
--- a/frontend/db/seed-quiz-typescript.ts
+++ b/frontend/db/seed-quiz-typescript.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
 import { readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
diff --git a/frontend/db/seed-quiz-verify.ts b/frontend/db/seed-quiz-verify.ts
index 650a4fca..bd24e457 100644
--- a/frontend/db/seed-quiz-verify.ts
+++ b/frontend/db/seed-quiz-verify.ts
@@ -1,13 +1,15 @@
-import { db } from './index';
+import { eq, sql } from 'drizzle-orm';
+
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from '@/db/schema/quiz';
-import { eq, sql } from 'drizzle-orm';
+
+import { db } from './index';
 
 async function verifyQuizSeed() {
   console.log('Verifying quiz seed data...\n');
diff --git a/frontend/db/seed-quiz-vue.ts b/frontend/db/seed-quiz-vue.ts
index ac260d00..5a7fea87 100644
--- a/frontend/db/seed-quiz-vue.ts
+++ b/frontend/db/seed-quiz-vue.ts
@@ -1,16 +1,17 @@
 import { eq } from 'drizzle-orm';
-import { readFileSync, existsSync } from 'fs';
+import { existsSync,readFileSync } from 'fs';
 import { join } from 'path';
+
 import { db } from './index';
 import { categories } from './schema/categories';
 import {
-  quizzes,
-  quizTranslations,
-  quizQuestions,
-  quizQuestionContent,
   quizAnswers,
   quizAnswerTranslations,
   quizAttempts,
+  quizQuestionContent,
+  quizQuestions,
+  quizTranslations,
+  quizzes,
 } from './schema/quiz';
 
 type Locale = 'uk' | 'en' | 'pl';
@@ -44,15 +45,18 @@ const QUIZ_METADATA = {
   translations: {
     uk: {
       title: 'Основи Vue.js',
-      description: 'Перевірте свої знання базових концепцій Vue.js: компоненти, реактивність, директиви, Composition API, Vue Router, Pinia та життєвий цикл.',
+      description:
+        'Перевірте свої знання базових концепцій Vue.js: компоненти, реактивність, директиви, Composition API, Vue Router, Pinia та життєвий цикл.',
     },
     en: {
       title: 'Vue.js Fundamentals',
-      description: 'Test your knowledge of Vue.js basics: components, reactivity, directives, Composition API, Vue Router, Pinia, and lifecycle.',
+      description:
+        'Test your knowledge of Vue.js basics: components, reactivity, directives, Composition API, Vue Router, Pinia, and lifecycle.',
     },
     pl: {
       title: 'Podstawy Vue.js',
-      description: 'Sprawdź swoją wiedzę o podstawach Vue.js: komponenty, reaktywność, dyrektywy, Composition API, Vue Router, Pinia i cykl życia.',
+      description:
+        'Sprawdź swoją wiedzę o podstawach Vue.js: komponenty, reaktywność, dyrektywy, Composition API, Vue Router, Pinia i cykl życia.',
     },
   },
 };
@@ -66,7 +70,14 @@ const projectRoot = existsSync(join(process.cwd(), 'json'))
   : join(process.cwd(), '..');
 
 async function loadQuestions(partNumber: number): Promise<QuestionData[]> {
-  const partPath = join(projectRoot, 'json', 'quizzes', 'vue', 'beginner_medium', `vue-quiz-part${partNumber}.json`);
+  const partPath = join(
+    projectRoot,
+    'json',
+    'quizzes',
+    'vue',
+    'beginner_medium',
+    `vue-quiz-part${partNumber}.json`
+  );
   const partData: QuizPartData = JSON.parse(readFileSync(partPath, 'utf-8'));
   return partData.questions;
 }
@@ -81,7 +92,9 @@ async function ensureQuizExists(): Promise<string> {
     .limit(1);
 
   if (!category) {
-    throw new Error(`Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`);
+    throw new Error(
+      `Category "${CATEGORY_SLUG}" not found. Run seed:categories first.`
+    );
   }
 
   const existing = await db.query.quizzes.findFirst({
@@ -93,19 +106,26 @@ async function ensureQuizExists(): Promise<string> {
       where: eq(quizAttempts.quizId, existing.id),
     });
     if (existingAttempt) {
-      throw new Error(`Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`);
+      throw new Error(
+        `Quiz ${QUIZ_METADATA.slug} has existing attempts. Aborting to avoid data loss.`
+      );
     }
 
     await db.delete(quizQuestions).where(eq(quizQuestions.quizId, existing.id));
-    await db.delete(quizTranslations).where(eq(quizTranslations.quizId, existing.id));
-    await db.update(quizzes).set({
-      categoryId: category.id,
-      slug: QUIZ_METADATA.slug,
-      displayOrder: 1,
-      questionsCount: QUIZ_METADATA.questionsCount,
-      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-      isActive: true,
-    }).where(eq(quizzes.id, existing.id));
+    await db
+      .delete(quizTranslations)
+      .where(eq(quizTranslations.quizId, existing.id));
+    await db
+      .update(quizzes)
+      .set({
+        categoryId: category.id,
+        slug: QUIZ_METADATA.slug,
+        displayOrder: 1,
+        questionsCount: QUIZ_METADATA.questionsCount,
+        timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+        isActive: true,
+      })
+      .where(eq(quizzes.id, existing.id));
 
     const quizId = existing.id;
     for (const locale of LOCALES) {
@@ -120,14 +140,17 @@ async function ensureQuizExists(): Promise<string> {
     return quizId;
   }
 
-  const [quiz] = await db.insert(quizzes).values({
-    categoryId: category.id,
-    slug: QUIZ_METADATA.slug,
-    displayOrder: 1,
-    questionsCount: QUIZ_METADATA.questionsCount,
-    timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
-    isActive: true,
-  }).returning();
+  const [quiz] = await db
+    .insert(quizzes)
+    .values({
+      categoryId: category.id,
+      slug: QUIZ_METADATA.slug,
+      displayOrder: 1,
+      questionsCount: QUIZ_METADATA.questionsCount,
+      timeLimitSeconds: QUIZ_METADATA.timeLimitSeconds,
+      isActive: true,
+    })
+    .returning();
 
   for (const locale of LOCALES) {
     await db.insert(quizTranslations).values({
@@ -141,15 +164,24 @@ async function ensureQuizExists(): Promise<string> {
   return quiz.id;
 }
 
-async function seedQuestions(questions: QuestionData[], quizId: string, partNumber: number) {
-  console.log(`Seeding ${questions.length} questions from part ${partNumber}...`);
+async function seedQuestions(
+  questions: QuestionData[],
+  quizId: string,
+  partNumber: number
+) {
+  console.log(
+    `Seeding ${questions.length} questions from part ${partNumber}...`
+  );
 
   for (const question of questions) {
-    const [q] = await db.insert(quizQuestions).values({
-      quizId,
-      displayOrder: question.order,
-      difficulty: question.difficulty,
-    }).returning();
+    const [q] = await db
+      .insert(quizQuestions)
+      .values({
+        quizId,
+        displayOrder: question.order,
+        difficulty: question.difficulty,
+      })
+      .returning();
 
     for (const locale of LOCALES) {
       await db.insert(quizQuestionContent).values({
@@ -162,12 +194,15 @@ async function seedQuestions(questions: QuestionData[], quizId: string, partNumb
 
     for (let i = 0; i < question.answers.length; i++) {
       const answer = question.answers[i];
-      
-      const [a] = await db.insert(quizAnswers).values({
-        quizQuestionId: q.id,
-        displayOrder: i + 1,
-        isCorrect: answer.correct,
-      }).returning();
+
+      const [a] = await db
+        .insert(quizAnswers)
+        .values({
+          quizQuestionId: q.id,
+          displayOrder: i + 1,
+          isCorrect: answer.correct,
+        })
+        .returning();
 
       for (const locale of LOCALES) {
         await db.insert(quizAnswerTranslations).values({
@@ -212,7 +247,9 @@ async function seedQuizFromJson() {
       console.log('\nAll parts seeded successfully!');
       console.log(`   - 1 quiz with ${LOCALES.length} translations`);
       console.log(`   - ${totalQuestions} questions total`);
-      console.log(`   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${totalQuestions * 4} answers with ${LOCALES.length} translations each`
+      );
     } else {
       const partNumber = parseInt(partArg, 10);
 
@@ -227,7 +264,9 @@ async function seedQuizFromJson() {
       console.log('\nPart seeded successfully!');
       console.log(`   - Quiz: ${QUIZ_METADATA.translations.en.title}`);
       console.log(`   - Part ${partNumber}: ${questions.length} questions`);
-      console.log(`   - ${questions.length * 4} answers with ${LOCALES.length} translations each`);
+      console.log(
+        `   - ${questions.length * 4} answers with ${LOCALES.length} translations each`
+      );
     }
   } catch (error) {
     console.error('\nError seeding quiz:', error);
@@ -237,7 +276,7 @@ async function seedQuizFromJson() {
 
 seedQuizFromJson()
   .then(() => process.exit(0))
-  .catch((error) => {
+  .catch(error => {
     console.error(error);
     process.exit(1);
   });
diff --git a/frontend/db/seed-users.ts b/frontend/db/seed-users.ts
index 2f6d0165..5dfd7dc5 100644
--- a/frontend/db/seed-users.ts
+++ b/frontend/db/seed-users.ts
@@ -1,40 +1,41 @@
-import "dotenv/config";
-import bcrypt from "bcryptjs";
+import 'dotenv/config';
 
-import { db } from "./index";
-import { users } from "./schema";
-import { eq } from "drizzle-orm";
+import bcrypt from 'bcryptjs';
+import { eq } from 'drizzle-orm';
+
+import { db } from './index';
+import { users } from './schema';
 
 if (!process.env.DATABASE_URL) {
-  throw new Error("DATABASE_URL is missing");
+  throw new Error('DATABASE_URL is missing');
 }
 
 async function main() {
-  console.log("[seed] Seeding users...");
+  console.log('[seed] Seeding users...');
 
-  const passwordHash = await bcrypt.hash("password123", 10);
+  const passwordHash = await bcrypt.hash('password123', 10);
 
   const seedUsers = [
     {
-      name: "Admin User",
-      email: "admin@example.com",
+      name: 'Admin User',
+      email: 'admin@example.com',
       passwordHash,
       emailVerified: new Date(),
-      role: "admin",
+      role: 'admin',
     },
     {
-      name: "Test User",
-      email: "user@example.com",
+      name: 'Test User',
+      email: 'user@example.com',
       passwordHash,
       emailVerified: null,
-      role: "user",
+      role: 'user',
     },
     {
-      name: "Google User",
-      email: "google@example.com",
+      name: 'Google User',
+      email: 'google@example.com',
       passwordHash: null,
       emailVerified: new Date(),
-      role: "user",
+      role: 'user',
     },
   ] as const;
 
@@ -54,12 +55,12 @@ async function main() {
     console.log(`[seed] Inserted user: ${user.email}`);
   }
 
-  console.log("[seed] Users seeding completed");
+  console.log('[seed] Users seeding completed');
 }
 
 main()
   .then(() => process.exit(0))
-  .catch((err) => {
-    console.error("[seed] Failed:", err);
+  .catch(err => {
+    console.error('[seed] Failed:', err);
     process.exit(1);
   });
diff --git a/frontend/drizzle/meta/0000_snapshot.json b/frontend/drizzle/meta/0000_snapshot.json
index 086f0216..0aa88c18 100644
--- a/frontend/drizzle/meta/0000_snapshot.json
+++ b/frontend/drizzle/meta/0000_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -238,12 +222,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -678,12 +635,8 @@
           "name": "quiz_attempts_user_id_users_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -691,12 +644,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -742,12 +691,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -755,10 +700,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -838,12 +780,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -889,12 +827,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -902,10 +836,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -1000,12 +931,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -1015,10 +942,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1123,9 +1047,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1206,12 +1128,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1362,12 +1280,8 @@
           "name": "inventory_moves_order_id_orders_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1375,12 +1289,8 @@
           "name": "inventory_moves_product_id_products_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1537,12 +1447,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1550,12 +1456,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1788,12 +1690,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1803,9 +1701,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -1943,12 +1839,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2242,12 +2134,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -2371,18 +2259,12 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.inventory_move_type": {
       "name": "inventory_move_type",
       "schema": "public",
-      "values": [
-        "reserve",
-        "release"
-      ]
+      "values": ["reserve", "release"]
     },
     "public.inventory_status": {
       "name": "inventory_status",
@@ -2410,22 +2292,12 @@
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -2438,4 +2310,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/drizzle/meta/0001_snapshot.json b/frontend/drizzle/meta/0001_snapshot.json
index 50cd427b..3c61d472 100644
--- a/frontend/drizzle/meta/0001_snapshot.json
+++ b/frontend/drizzle/meta/0001_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -238,12 +222,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -678,12 +635,8 @@
           "name": "quiz_attempts_user_id_users_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -691,12 +644,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -742,12 +691,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -755,10 +700,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -838,12 +780,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -889,12 +827,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -902,10 +836,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -1000,12 +931,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -1015,10 +942,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1123,9 +1047,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1206,12 +1128,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1362,12 +1280,8 @@
           "name": "inventory_moves_order_id_orders_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1375,12 +1289,8 @@
           "name": "inventory_moves_product_id_products_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1537,12 +1447,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1550,12 +1456,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1788,12 +1690,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1803,9 +1701,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -2038,12 +1934,8 @@
           "name": "payment_attempts_order_id_orders_id_fk",
           "tableFrom": "payment_attempts",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2169,12 +2061,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2468,12 +2356,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -2597,18 +2481,12 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.inventory_move_type": {
       "name": "inventory_move_type",
       "schema": "public",
-      "values": [
-        "reserve",
-        "release"
-      ]
+      "values": ["reserve", "release"]
     },
     "public.inventory_status": {
       "name": "inventory_status",
@@ -2636,22 +2514,12 @@
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -2664,4 +2532,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/drizzle/meta/0002_snapshot.json b/frontend/drizzle/meta/0002_snapshot.json
index fd0c1606..6e2c17f3 100644
--- a/frontend/drizzle/meta/0002_snapshot.json
+++ b/frontend/drizzle/meta/0002_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -238,12 +222,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -678,12 +635,8 @@
           "name": "quiz_attempts_user_id_users_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -691,12 +644,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -742,12 +691,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -755,10 +700,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -838,12 +780,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -889,12 +827,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -902,10 +836,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -1000,12 +931,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -1015,10 +942,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1123,9 +1047,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1206,12 +1128,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1362,12 +1280,8 @@
           "name": "inventory_moves_order_id_orders_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1375,12 +1289,8 @@
           "name": "inventory_moves_product_id_products_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1537,12 +1447,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1550,12 +1456,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1788,12 +1690,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1803,9 +1701,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -2038,12 +1934,8 @@
           "name": "payment_attempts_order_id_orders_id_fk",
           "tableFrom": "payment_attempts",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2169,12 +2061,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2468,12 +2356,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -2639,18 +2523,12 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.inventory_move_type": {
       "name": "inventory_move_type",
       "schema": "public",
-      "values": [
-        "reserve",
-        "release"
-      ]
+      "values": ["reserve", "release"]
     },
     "public.inventory_status": {
       "name": "inventory_status",
@@ -2678,22 +2556,12 @@
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -2706,4 +2574,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/drizzle/meta/0003_snapshot.json b/frontend/drizzle/meta/0003_snapshot.json
index 4150d714..e581a44e 100644
--- a/frontend/drizzle/meta/0003_snapshot.json
+++ b/frontend/drizzle/meta/0003_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -238,12 +222,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -678,12 +635,8 @@
           "name": "quiz_attempts_user_id_users_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -691,12 +644,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -742,12 +691,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -755,10 +700,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -838,12 +780,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -889,12 +827,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -902,10 +836,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -1000,12 +931,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -1015,10 +942,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1123,9 +1047,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1206,12 +1128,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1362,12 +1280,8 @@
           "name": "inventory_moves_order_id_orders_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1375,12 +1289,8 @@
           "name": "inventory_moves_product_id_products_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1537,12 +1447,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1550,12 +1456,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1788,12 +1690,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1803,9 +1701,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -2038,12 +1934,8 @@
           "name": "payment_attempts_order_id_orders_id_fk",
           "tableFrom": "payment_attempts",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2169,12 +2061,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2501,12 +2389,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -2672,18 +2556,12 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.inventory_move_type": {
       "name": "inventory_move_type",
       "schema": "public",
-      "values": [
-        "reserve",
-        "release"
-      ]
+      "values": ["reserve", "release"]
     },
     "public.inventory_status": {
       "name": "inventory_status",
@@ -2711,22 +2589,12 @@
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -2739,4 +2607,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/drizzle/meta/0004_snapshot.json b/frontend/drizzle/meta/0004_snapshot.json
index fb3c0b67..5cca1738 100644
--- a/frontend/drizzle/meta/0004_snapshot.json
+++ b/frontend/drizzle/meta/0004_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -238,12 +222,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -678,12 +635,8 @@
           "name": "quiz_attempts_user_id_users_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -691,12 +644,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -742,12 +691,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -755,10 +700,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -838,12 +780,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -889,12 +827,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -902,10 +836,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -1000,12 +931,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -1015,10 +942,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1123,9 +1047,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1206,12 +1128,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1421,12 +1339,8 @@
           "name": "inventory_moves_order_id_orders_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1434,12 +1348,8 @@
           "name": "inventory_moves_product_id_products_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1596,12 +1506,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1609,12 +1515,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1847,12 +1749,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1862,9 +1760,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -2097,12 +1993,8 @@
           "name": "payment_attempts_order_id_orders_id_fk",
           "tableFrom": "payment_attempts",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2232,12 +2124,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2564,12 +2452,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -2735,18 +2619,12 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.inventory_move_type": {
       "name": "inventory_move_type",
       "schema": "public",
-      "values": [
-        "reserve",
-        "release"
-      ]
+      "values": ["reserve", "release"]
     },
     "public.inventory_status": {
       "name": "inventory_status",
@@ -2774,22 +2652,12 @@
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -2802,4 +2670,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/drizzle/meta/0005_snapshot.json b/frontend/drizzle/meta/0005_snapshot.json
index 7e8abb4f..a1f68e72 100644
--- a/frontend/drizzle/meta/0005_snapshot.json
+++ b/frontend/drizzle/meta/0005_snapshot.json
@@ -43,9 +43,7 @@
         "categories_slug_unique": {
           "name": "categories_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "slug"
-          ]
+          "columns": ["slug"]
         }
       },
       "policies": {},
@@ -81,12 +79,8 @@
           "name": "category_translations_category_id_categories_id_fk",
           "tableFrom": "category_translations",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -94,10 +88,7 @@
       "compositePrimaryKeys": {
         "category_translations_category_id_locale_pk": {
           "name": "category_translations_category_id_locale_pk",
-          "columns": [
-            "category_id",
-            "locale"
-          ]
+          "columns": ["category_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -140,12 +131,8 @@
           "name": "question_translations_question_id_questions_id_fk",
           "tableFrom": "question_translations",
           "tableTo": "questions",
-          "columnsFrom": [
-            "question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -153,10 +140,7 @@
       "compositePrimaryKeys": {
         "question_translations_question_id_locale_pk": {
           "name": "question_translations_question_id_locale_pk",
-          "columns": [
-            "question_id",
-            "locale"
-          ]
+          "columns": ["question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -238,12 +222,8 @@
           "name": "questions_category_id_categories_id_fk",
           "tableFrom": "questions",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -283,12 +263,8 @@
           "name": "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_answer_translations",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "quiz_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -296,10 +272,7 @@
       "compositePrimaryKeys": {
         "quiz_answer_translations_quiz_answer_id_locale_pk": {
           "name": "quiz_answer_translations_quiz_answer_id_locale_pk",
-          "columns": [
-            "quiz_answer_id",
-            "locale"
-          ]
+          "columns": ["quiz_answer_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -366,12 +339,8 @@
           "name": "quiz_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -447,12 +416,8 @@
           "name": "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_attempts",
-          "columnsFrom": [
-            "attempt_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["attempt_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -460,12 +425,8 @@
           "name": "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -473,12 +434,8 @@
           "name": "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk",
           "tableFrom": "quiz_attempt_answers",
           "tableTo": "quiz_answers",
-          "columnsFrom": [
-            "selected_answer_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["selected_answer_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -678,12 +635,8 @@
           "name": "quiz_attempts_user_id_users_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -691,12 +644,8 @@
           "name": "quiz_attempts_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_attempts",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -742,12 +691,8 @@
           "name": "quiz_question_content_quiz_question_id_quiz_questions_id_fk",
           "tableFrom": "quiz_question_content",
           "tableTo": "quiz_questions",
-          "columnsFrom": [
-            "quiz_question_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_question_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -755,10 +700,7 @@
       "compositePrimaryKeys": {
         "quiz_question_content_quiz_question_id_locale_pk": {
           "name": "quiz_question_content_quiz_question_id_locale_pk",
-          "columns": [
-            "quiz_question_id",
-            "locale"
-          ]
+          "columns": ["quiz_question_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -838,12 +780,8 @@
           "name": "quiz_questions_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_questions",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -889,12 +827,8 @@
           "name": "quiz_translations_quiz_id_quizzes_id_fk",
           "tableFrom": "quiz_translations",
           "tableTo": "quizzes",
-          "columnsFrom": [
-            "quiz_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["quiz_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -902,10 +836,7 @@
       "compositePrimaryKeys": {
         "quiz_translations_quiz_id_locale_pk": {
           "name": "quiz_translations_quiz_id_locale_pk",
-          "columns": [
-            "quiz_id",
-            "locale"
-          ]
+          "columns": ["quiz_id", "locale"]
         }
       },
       "uniqueConstraints": {},
@@ -1000,12 +931,8 @@
           "name": "quizzes_category_id_categories_id_fk",
           "tableFrom": "quizzes",
           "tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["category_id"],
+          "columnsTo": ["id"],
           "onDelete": "restrict",
           "onUpdate": "no action"
         }
@@ -1015,10 +942,7 @@
         "quizzes_category_id_slug_unique": {
           "name": "quizzes_category_id_slug_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "category_id",
-            "slug"
-          ]
+          "columns": ["category_id", "slug"]
         }
       },
       "policies": {},
@@ -1123,9 +1047,7 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
+          "columns": ["email"]
         }
       },
       "policies": {},
@@ -1206,12 +1128,8 @@
           "name": "point_transactions_user_id_users_id_fk",
           "tableFrom": "point_transactions",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1421,12 +1339,8 @@
           "name": "inventory_moves_order_id_orders_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1434,12 +1348,8 @@
           "name": "inventory_moves_product_id_products_id_fk",
           "tableFrom": "inventory_moves",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1596,12 +1506,8 @@
           "name": "order_items_order_id_orders_id_fk",
           "tableFrom": "order_items",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1609,12 +1515,8 @@
           "name": "order_items_product_id_products_id_fk",
           "tableFrom": "order_items",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -1847,12 +1749,8 @@
           "name": "orders_user_id_users_id_fk",
           "tableFrom": "orders",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1862,9 +1760,7 @@
         "orders_idempotency_key_unique": {
           "name": "orders_idempotency_key_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
+          "columns": ["idempotency_key"]
         }
       },
       "policies": {},
@@ -2097,12 +1993,8 @@
           "name": "payment_attempts_order_id_orders_id_fk",
           "tableFrom": "payment_attempts",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2232,12 +2124,8 @@
           "name": "product_prices_product_id_products_id_fk",
           "tableFrom": "product_prices",
           "tableTo": "products",
-          "columnsFrom": [
-            "product_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["product_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2564,12 +2452,8 @@
           "name": "stripe_events_order_id_orders_id_fk",
           "tableFrom": "stripe_events",
           "tableTo": "orders",
-          "columnsFrom": [
-            "order_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["order_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2735,18 +2619,12 @@
     "public.currency": {
       "name": "currency",
       "schema": "public",
-      "values": [
-        "USD",
-        "UAH"
-      ]
+      "values": ["USD", "UAH"]
     },
     "public.inventory_move_type": {
       "name": "inventory_move_type",
       "schema": "public",
-      "values": [
-        "reserve",
-        "release"
-      ]
+      "values": ["reserve", "release"]
     },
     "public.inventory_status": {
       "name": "inventory_status",
@@ -2774,22 +2652,12 @@
     "public.payment_status": {
       "name": "payment_status",
       "schema": "public",
-      "values": [
-        "pending",
-        "requires_payment",
-        "paid",
-        "failed",
-        "refunded"
-      ]
+      "values": ["pending", "requires_payment", "paid", "failed", "refunded"]
     },
     "public.product_badge": {
       "name": "product_badge",
       "schema": "public",
-      "values": [
-        "NEW",
-        "SALE",
-        "NONE"
-      ]
+      "values": ["NEW", "SALE", "NONE"]
     }
   },
   "schemas": {},
@@ -2802,4 +2670,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/drizzle/meta/_journal.json b/frontend/drizzle/meta/_journal.json
index fc375b9f..177e50c8 100644
--- a/frontend/drizzle/meta/_journal.json
+++ b/frontend/drizzle/meta/_journal.json
@@ -45,4 +45,4 @@
       "breakpoints": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index 220a4ec3..1062340c 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -1,24 +1,43 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
+import { defineConfig, globalIgnores } from 'eslint/config';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import nextTs from 'eslint-config-next/typescript';
+import reactHooks from 'eslint-plugin-react-hooks';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
 
-const eslintConfig = defineConfig([
+export default defineConfig([
   ...nextVitals,
   ...nextTs,
 
-  globalIgnores([
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-  ]),
+  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
 
-  // Allow explicit any
   {
+    plugins: {
+      'react-hooks': reactHooks,
+      'simple-import-sort': simpleImportSort,
+    },
+
     rules: {
-      "@typescript-eslint/no-explicit-any": "off",
+      /**
+       * React hooks — must have
+       */
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+
+      /**
+       * Import sorting (auto-fix)
+       */
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+
+      /**
+       * TS relax
+       */
+      '@typescript-eslint/no-explicit-any': 'off',
+
+      /**
+       * Let Prettier handle formatting
+       */
+      'react/jsx-curly-newline': 'off',
     },
   },
 ]);
-
-export default eslintConfig;
diff --git a/frontend/hooks/use-mounted.ts b/frontend/hooks/use-mounted.ts
index 9834ef48..6d82fe64 100644
--- a/frontend/hooks/use-mounted.ts
+++ b/frontend/hooks/use-mounted.ts
@@ -1,19 +1,19 @@
-"use client"
+'use client';
 
-import { useSyncExternalStore } from "react"
+import { useSyncExternalStore } from 'react';
 
 function subscribe() {
-  return () => {}
+  return () => {};
 }
 
 function getSnapshot() {
-  return true
+  return true;
 }
 
 function getServerSnapshot() {
-  return false
+  return false;
 }
 
 export function useMounted(): boolean {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
diff --git a/frontend/hooks/useAntiCheat.ts b/frontend/hooks/useAntiCheat.ts
index 2922d000..752e898f 100644
--- a/frontend/hooks/useAntiCheat.ts
+++ b/frontend/hooks/useAntiCheat.ts
@@ -1,7 +1,7 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 
 export type AntiCheatViolation = {
diff --git a/frontend/hooks/useQuizGuards.ts b/frontend/hooks/useQuizGuards.ts
index 70203bd0..aa54e404 100644
--- a/frontend/hooks/useQuizGuards.ts
+++ b/frontend/hooks/useQuizGuards.ts
@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react';
+
 import { clearQuizSession } from '@/lib/quiz/quiz-session';
 import { getQuizReloadKey } from '@/lib/quiz/quiz-storage-keys';
 
@@ -9,14 +10,19 @@ type UseQuizGuardsParams = {
   resetViolations: () => void;
 };
 
-export function useQuizGuards({ quizId, status, onExit, resetViolations }: UseQuizGuardsParams): { markQuitting: () => void } {
+export function useQuizGuards({
+  quizId,
+  status,
+  onExit,
+  resetViolations,
+}: UseQuizGuardsParams): { markQuitting: () => void } {
   const isReloadingRef = useRef(false);
   const statusRef = useRef(status);
   const reloadKey = getQuizReloadKey(quizId);
   const isQuittingRef = useRef(false);
   const markQuitting = () => {
-  isQuittingRef.current = true;
-};
+    isQuittingRef.current = true;
+  };
 
   useEffect(() => {
     statusRef.current = status;
@@ -73,7 +79,11 @@ export function useQuizGuards({ quizId, status, onExit, resetViolations }: UseQu
       const link = target.closest('a');
       if (!link?.href) return;
 
-      if (link.href.includes(window.location.pathname.replace(/^\/(uk|en|pl)/, ''))) {
+      if (
+        link.href.includes(
+          window.location.pathname.replace(/^\/(uk|en|pl)/, '')
+        )
+      ) {
         return;
       }
 
diff --git a/frontend/hooks/useQuizSession.ts b/frontend/hooks/useQuizSession.ts
index ac7a3042..aa417699 100644
--- a/frontend/hooks/useQuizSession.ts
+++ b/frontend/hooks/useQuizSession.ts
@@ -1,11 +1,15 @@
 import { useEffect } from 'react';
+
 import {
-  saveQuizSession,
-  loadQuizSession,
   clearQuizSession,
+  loadQuizSession,
   type QuizSessionData,
+  saveQuizSession,
 } from '@/lib/quiz/quiz-session';
-import { QUIZ_ALLOW_RESTORE_KEY, getQuizReloadKey } from '@/lib/quiz/quiz-storage-keys';
+import {
+  getQuizReloadKey,
+  QUIZ_ALLOW_RESTORE_KEY,
+} from '@/lib/quiz/quiz-storage-keys';
 
 type Answer = {
   questionId: string;
@@ -29,7 +33,11 @@ type UseQuizSessionParams = {
   onRestore: (data: QuizSessionData) => void;
 };
 
-export function useQuizSession({ quizId, state, onRestore }: UseQuizSessionParams): void {
+export function useQuizSession({
+  quizId,
+  state,
+  onRestore,
+}: UseQuizSessionParams): void {
   const reloadKey = getQuizReloadKey(quizId);
 
   useEffect(() => {
diff --git a/frontend/i18n/request.ts b/frontend/i18n/request.ts
index 282e4d99..b4de421d 100644
--- a/frontend/i18n/request.ts
+++ b/frontend/i18n/request.ts
@@ -1,5 +1,6 @@
 import { getRequestConfig } from 'next-intl/server';
-import { locales, defaultLocale } from './config';
+
+import { defaultLocale,locales } from './config';
 
 export default getRequestConfig(async ({ requestLocale }) => {
   let locale = await requestLocale;
diff --git a/frontend/i18n/routing.ts b/frontend/i18n/routing.ts
index ea82ca24..9636ef56 100644
--- a/frontend/i18n/routing.ts
+++ b/frontend/i18n/routing.ts
@@ -1,6 +1,7 @@
 import { createNavigation } from 'next-intl/navigation';
 import { defineRouting } from 'next-intl/routing';
-import { locales, defaultLocale } from './config';
+
+import { defaultLocale,locales } from './config';
 
 export const routing = defineRouting({
   locales,
diff --git a/frontend/lib/about/github-sponsors.ts b/frontend/lib/about/github-sponsors.ts
index be263e4c..9db2ece3 100644
--- a/frontend/lib/about/github-sponsors.ts
+++ b/frontend/lib/about/github-sponsors.ts
@@ -1,28 +1,31 @@
-import "server-only"
+import 'server-only';
 
 export interface Sponsor {
-  login: string
-  name: string
-  avatarUrl: string
-  tierName: string
-  tierColor: "gold" | "silver" | "bronze"
-  monthlyPrice: number
+  login: string;
+  name: string;
+  avatarUrl: string;
+  tierName: string;
+  tierColor: 'gold' | 'silver' | 'bronze';
+  monthlyPrice: number;
 }
 
-function getTierDetails(amount: number): { name: string; color: "gold" | "silver" | "bronze" } {
-  if (amount >= 100) return { name: "🏆 Core Supporter", color: "gold" }
-  if (amount >= 50) return { name: "🎓 Impact Support", color: "silver" }
-  if (amount >= 25) return { name: "🧠 Community Support", color: "silver" }
-  if (amount >= 10) return { name: "🚀 Early Support", color: "bronze" }
-  return { name: "☕ Coffee Support", color: "bronze" }
+function getTierDetails(amount: number): {
+  name: string;
+  color: 'gold' | 'silver' | 'bronze';
+} {
+  if (amount >= 100) return { name: '🏆 Core Supporter', color: 'gold' };
+  if (amount >= 50) return { name: '🎓 Impact Support', color: 'silver' };
+  if (amount >= 25) return { name: '🧠 Community Support', color: 'silver' };
+  if (amount >= 10) return { name: '🚀 Early Support', color: 'bronze' };
+  return { name: '☕ Coffee Support', color: 'bronze' };
 }
 
 export async function getSponsors(): Promise<Sponsor[]> {
-  const token = process.env.GITHUB_SPONSORS_TOKEN
+  const token = process.env.GITHUB_SPONSORS_TOKEN;
 
   if (!token) {
-    console.warn("⚠️ GITHUB_SPONSORS_TOKEN is missing.")
-    return []
+    console.warn('⚠️ GITHUB_SPONSORS_TOKEN is missing.');
+    return [];
   }
 
   const query = `
@@ -39,50 +42,54 @@ export async function getSponsors(): Promise<Sponsor[]> {
         }
       }
     }
-  `
+  `;
 
   try {
-    const res = await fetch("https://api.github.com/graphql", {
-      method: "POST",
+    const res = await fetch('https://api.github.com/graphql', {
+      method: 'POST',
       headers: {
         Authorization: `Bearer ${token}`,
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({ query }),
-      cache: "no-store" // Завжди свіжі дані
-    })
+      cache: 'no-store', // Завжди свіжі дані
+    });
 
-    const json = await res.json()
+    const json = await res.json();
 
     if (json.errors) {
-      console.error("❌ GitHub API Error:", json.errors[0].message)
-      return []
+      console.error('❌ GitHub API Error:', json.errors[0].message);
+      return [];
     }
 
-    const rawNodes = json.data?.organization?.sponsorshipsAsMaintainer?.nodes || []
-    
-    console.log(`✅ GitHub: Found ${rawNodes.length} sponsors for Organization`)
+    const rawNodes =
+      json.data?.organization?.sponsorshipsAsMaintainer?.nodes || [];
 
-    const sponsors: Sponsor[] = rawNodes.map((node: any) => {
-      const price = node.tier?.monthlyPriceInDollars || 0
-      const { name, color } = getTierDetails(price)
+    console.log(
+      `✅ GitHub: Found ${rawNodes.length} sponsors for Organization`
+    );
 
-      if (!node.sponsorEntity) return null
+    const sponsors: Sponsor[] = rawNodes
+      .map((node: any) => {
+        const price = node.tier?.monthlyPriceInDollars || 0;
+        const { name, color } = getTierDetails(price);
 
-      return {
-        login: node.sponsorEntity.login,
-        name: node.sponsorEntity.name || node.sponsorEntity.login,
-        avatarUrl: node.sponsorEntity.avatarUrl,
-        monthlyPrice: price,
-        tierName: name,
-        tierColor: color,
-      }
-    }).filter(Boolean) as Sponsor[]
+        if (!node.sponsorEntity) return null;
 
-    return sponsors
+        return {
+          login: node.sponsorEntity.login,
+          name: node.sponsorEntity.name || node.sponsorEntity.login,
+          avatarUrl: node.sponsorEntity.avatarUrl,
+          monthlyPrice: price,
+          tierName: name,
+          tierColor: color,
+        };
+      })
+      .filter(Boolean) as Sponsor[];
 
+    return sponsors;
   } catch (error) {
-    console.error("❌ Failed to fetch sponsors:", error)
-    return []
+    console.error('❌ Failed to fetch sponsors:', error);
+    return [];
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/lib/about/stats.ts b/frontend/lib/about/stats.ts
index 683ab6d4..3bf3a171 100644
--- a/frontend/lib/about/stats.ts
+++ b/frontend/lib/about/stats.ts
@@ -1,64 +1,71 @@
-import { db } from '@/db'
-import { users } from '@/db/schema/users'
-import { quizAttempts } from '@/db/schema/quiz'
-import { count } from 'drizzle-orm'
-import { unstable_cache } from 'next/cache'
+import { count } from 'drizzle-orm';
+import { unstable_cache } from 'next/cache';
+
+import { db } from '@/db';
+import { quizAttempts } from '@/db/schema/quiz';
+import { users } from '@/db/schema/users';
 
 export interface PlatformStats {
-  githubStars: string
-  linkedinFollowers: string
-  activeUsers: string
-  questionsSolved: string
+  githubStars: string;
+  linkedinFollowers: string;
+  activeUsers: string;
+  questionsSolved: string;
 }
 
 const formatMetric = (n: number) => {
-  if (n >= 1000) return (n / 1000).toFixed(1) + 'k+'
-  return n.toString()
-}
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'k+';
+  return n.toString();
+};
 
 export const getPlatformStats = unstable_cache(
   async (): Promise<PlatformStats> => {
-    let stars = 125
+    let stars = 125;
     try {
-        const headers: HeadersInit = {}
-        if (process.env.GITHUB_TOKEN) headers.Authorization = `Bearer ${process.env.GITHUB_TOKEN}`
-        
-        const res = await fetch('https://api.github.com/repos/DevLoversTeam/devlovers.net', { 
-            headers,
-            cache: 'no-store'
-        })
-        
-        if (res.ok) {
-            const data = await res.json()
-            stars = data.stargazers_count
+      const headers: HeadersInit = {};
+      if (process.env.GITHUB_TOKEN)
+        headers.Authorization = `Bearer ${process.env.GITHUB_TOKEN}`;
+
+      const res = await fetch(
+        'https://api.github.com/repos/DevLoversTeam/devlovers.net',
+        {
+          headers,
+          cache: 'no-store',
         }
-    } catch (e) { 
-        console.error("GitHub Fetch Error:", e) 
+      );
+
+      if (res.ok) {
+        const data = await res.json();
+        stars = data.stargazers_count;
+      }
+    } catch (e) {
+      console.error('GitHub Fetch Error:', e);
     }
 
-    const linkedinCount = process.env.LINKEDIN_FOLLOWER_COUNT ? parseInt(process.env.LINKEDIN_FOLLOWER_COUNT) : 1342
+    const linkedinCount = process.env.LINKEDIN_FOLLOWER_COUNT
+      ? parseInt(process.env.LINKEDIN_FOLLOWER_COUNT)
+      : 1342;
 
-    let totalUsers = 243
-    let solvedTests = 1890
+    let totalUsers = 243;
+    let solvedTests = 1890;
     try {
       const [[u], [q]] = await Promise.all([
         db.select({ value: count() }).from(users),
-        db.select({ value: count() }).from(quizAttempts)
-      ])
-      
-      if (u) totalUsers = u.value
-      if (q) solvedTests = q.value
-    } catch (e) { 
-        console.error("DB Fetch Error:", e) 
+        db.select({ value: count() }).from(quizAttempts),
+      ]);
+
+      if (u) totalUsers = u.value;
+      if (q) solvedTests = q.value;
+    } catch (e) {
+      console.error('DB Fetch Error:', e);
     }
 
     return {
       githubStars: formatMetric(stars),
       linkedinFollowers: formatMetric(linkedinCount),
       activeUsers: formatMetric(totalUsers),
-      questionsSolved: formatMetric(solvedTests)
-    }
+      questionsSolved: formatMetric(solvedTests),
+    };
   },
   ['platform-stats'],
   { revalidate: 3600 }
-)
\ No newline at end of file
+);
diff --git a/frontend/lib/admin/parseAdminProductForm.ts b/frontend/lib/admin/parseAdminProductForm.ts
index fa365899..c95637c0 100644
--- a/frontend/lib/admin/parseAdminProductForm.ts
+++ b/frontend/lib/admin/parseAdminProductForm.ts
@@ -1,10 +1,11 @@
 import { z } from 'zod';
+
+import { type CurrencyCode,currencyValues } from '@/lib/shop/currency';
+import { toCents } from '@/lib/shop/money';
 import {
   productAdminSchema,
   productAdminUpdateSchema,
 } from '@/lib/validation/shop';
-import { currencyValues, type CurrencyCode } from '@/lib/shop/currency';
-import { toCents } from '@/lib/shop/money';
 
 type ParsedResult<T> =
   | { ok: true; data: T }
diff --git a/frontend/lib/ai/prompts.ts b/frontend/lib/ai/prompts.ts
index 1010a736..b408f63f 100644
--- a/frontend/lib/ai/prompts.ts
+++ b/frontend/lib/ai/prompts.ts
@@ -118,7 +118,6 @@ CRITICAL JSON RULES:
 `;
 }
 
-
 export interface ExplanationResponse {
   uk: string;
   en: string;
diff --git a/frontend/lib/auth.ts b/frontend/lib/auth.ts
index c73230bf..c413d181 100644
--- a/frontend/lib/auth.ts
+++ b/frontend/lib/auth.ts
@@ -1,8 +1,8 @@
 import 'server-only';
 
-import { cookies } from 'next/headers';
-import jwt from 'jsonwebtoken';
 import { eq } from 'drizzle-orm';
+import jwt from 'jsonwebtoken';
+import { cookies } from 'next/headers';
 
 import { db } from '@/db';
 import { users } from '@/db/schema/users';
diff --git a/frontend/lib/auth/email-verification.ts b/frontend/lib/auth/email-verification.ts
index d1abc84d..1adb411c 100644
--- a/frontend/lib/auth/email-verification.ts
+++ b/frontend/lib/auth/email-verification.ts
@@ -1,21 +1,22 @@
 import crypto from 'crypto';
+
 import { db } from '@/db';
 import { emailVerificationTokens } from '@/db/schema/emailVerificationTokens';
 
 export function addHours(date: Date, hours: number): Date {
-    const result = new Date(date.getTime());
-    result.setHours(result.getHours() + hours);
-    return result;
+  const result = new Date(date.getTime());
+  result.setHours(result.getHours() + hours);
+  return result;
 }
 
 export async function createEmailVerificationToken(userId: string) {
-    const token = crypto.randomUUID();
+  const token = crypto.randomUUID();
 
-    await db.insert(emailVerificationTokens).values({
-        token,
-        userId,
-        expiresAt: addHours(new Date(), 24),
-    });
+  await db.insert(emailVerificationTokens).values({
+    token,
+    userId,
+    expiresAt: addHours(new Date(), 24),
+  });
 
-    return token;
+  return token;
 }
diff --git a/frontend/lib/auth/guard-shop-admin-page.ts b/frontend/lib/auth/guard-shop-admin-page.ts
index 05d426b3..7d6a7473 100644
--- a/frontend/lib/auth/guard-shop-admin-page.ts
+++ b/frontend/lib/auth/guard-shop-admin-page.ts
@@ -1,4 +1,5 @@
 import { notFound, redirect } from 'next/navigation';
+
 import {
   AdminApiDisabledError,
   AdminForbiddenError,
diff --git a/frontend/lib/auth/internal-janitor.ts b/frontend/lib/auth/internal-janitor.ts
index a44163b4..d118dea8 100644
--- a/frontend/lib/auth/internal-janitor.ts
+++ b/frontend/lib/auth/internal-janitor.ts
@@ -1,5 +1,5 @@
-import { NextRequest, NextResponse } from 'next/server';
 import crypto from 'crypto';
+import { NextRequest, NextResponse } from 'next/server';
 
 function timingSafeEqual(a: string, b: string) {
   const aBuf = Buffer.from(a, 'utf8');
diff --git a/frontend/lib/auth/oauth-state.ts b/frontend/lib/auth/oauth-state.ts
index e0e75da2..fec7bf5d 100644
--- a/frontend/lib/auth/oauth-state.ts
+++ b/frontend/lib/auth/oauth-state.ts
@@ -1,34 +1,33 @@
-import { cookies } from "next/headers";
-import crypto from "crypto";
+import crypto from 'crypto';
+import { cookies } from 'next/headers';
 
-const STATE_COOKIE = "oauth_state";
+const STATE_COOKIE = 'oauth_state';
 const STATE_TTL_SECONDS = 10 * 60;
 
 export function generateOAuthState(): string {
-    return crypto.randomBytes(32).toString("hex");
+  return crypto.randomBytes(32).toString('hex');
 }
 
 export async function setOAuthStateCookie(state: string) {
-    const store = await cookies();
-    store.set(STATE_COOKIE, state, {
-        httpOnly: true,
-        sameSite: "lax",
-        secure: process.env.NODE_ENV === "production",
-        path: "/",
-        maxAge: STATE_TTL_SECONDS,
-    });
+  const store = await cookies();
+  store.set(STATE_COOKIE, state, {
+    httpOnly: true,
+    sameSite: 'lax',
+    secure: process.env.NODE_ENV === 'production',
+    path: '/',
+    maxAge: STATE_TTL_SECONDS,
+  });
 }
 
-export async function consumeOAuthState(expected: string | null): Promise<boolean> {
-    const store = await cookies();
-    const actual = store.get(STATE_COOKIE)?.value;
+export async function consumeOAuthState(
+  expected: string | null
+): Promise<boolean> {
+  const store = await cookies();
+  const actual = store.get(STATE_COOKIE)?.value;
 
-    store.delete(STATE_COOKIE);
+  store.delete(STATE_COOKIE);
 
-    if (!expected || !actual) return false;
-    if (actual.length !== expected.length) return false;
-    return crypto.timingSafeEqual(
-        Buffer.from(actual),
-        Buffer.from(expected)
-    );
-}
\ No newline at end of file
+  if (!expected || !actual) return false;
+  if (actual.length !== expected.length) return false;
+  return crypto.timingSafeEqual(Buffer.from(actual), Buffer.from(expected));
+}
diff --git a/frontend/lib/auth/password-reset.ts b/frontend/lib/auth/password-reset.ts
index cb5bc87e..e4415682 100644
--- a/frontend/lib/auth/password-reset.ts
+++ b/frontend/lib/auth/password-reset.ts
@@ -1,23 +1,22 @@
-import crypto from "crypto";
-import { db } from "@/db";
-import { passwordResetTokens } from "@/db/schema/passwordResetTokens";
+import crypto from 'crypto';
+
+import { db } from '@/db';
+import { passwordResetTokens } from '@/db/schema/passwordResetTokens';
 
 export function addHours(date: Date, hours: number): Date {
-    const result = new Date(date.getTime());
-    result.setHours(result.getHours() + hours);
-    return result;
+  const result = new Date(date.getTime());
+  result.setHours(result.getHours() + hours);
+  return result;
 }
 
-export async function createPasswordResetToken(
-    userId: string
-) {
-    const token = crypto.randomUUID();
+export async function createPasswordResetToken(userId: string) {
+  const token = crypto.randomUUID();
 
-    await db.insert(passwordResetTokens).values({
-        token,
-        userId,
-        expiresAt: addHours(new Date(), 1),
-    });
+  await db.insert(passwordResetTokens).values({
+    token,
+    userId,
+    expiresAt: addHours(new Date(), 1),
+  });
 
-    return token;
-}
\ No newline at end of file
+  return token;
+}
diff --git a/frontend/lib/auth/safe-redirect.ts b/frontend/lib/auth/safe-redirect.ts
index e23a8b11..10b170b7 100644
--- a/frontend/lib/auth/safe-redirect.ts
+++ b/frontend/lib/auth/safe-redirect.ts
@@ -1,13 +1,11 @@
-export function getSafeRedirect(
-    raw: string | null | undefined
-): string {
-    if (!raw) return "";
+export function getSafeRedirect(raw: string | null | undefined): string {
+  if (!raw) return '';
 
-    if (raw.includes("\\")) return "";
+  if (raw.includes('\\')) return '';
 
-    if (!raw.startsWith("/")) return "";
-    if (raw.startsWith("//")) return "";
-    if (raw.includes("://")) return "";
+  if (!raw.startsWith('/')) return '';
+  if (raw.startsWith('//')) return '';
+  if (raw.includes('://')) return '';
 
-    return raw;
-}
\ No newline at end of file
+  return raw;
+}
diff --git a/frontend/lib/cart.ts b/frontend/lib/cart.ts
index b1285aa5..f275d320 100644
--- a/frontend/lib/cart.ts
+++ b/frontend/lib/cart.ts
@@ -1,17 +1,17 @@
 import { z } from 'zod';
 
+import { logWarn } from '@/lib/logging';
+import { createCartItemKey } from '@/lib/shop/cart-item-key';
+import { fromCents } from '@/lib/shop/money';
 import {
-  cartClientItemSchema,
-  cartRehydrateResultSchema,
-  MAX_QUANTITY_PER_LINE,
   type CartClientItem as ValidationCartClientItem,
+  cartClientItemSchema,
   type CartRehydrateItem,
   type CartRehydrateResult,
+  cartRehydrateResultSchema,
   type CartRemovedItem,
+  MAX_QUANTITY_PER_LINE,
 } from '@/lib/validation/shop';
-import { fromCents } from '@/lib/shop/money';
-import { createCartItemKey } from '@/lib/shop/cart-item-key';
-import { logWarn } from '@/lib/logging';
 
 const CART_KEY = 'devlovers-cart';
 
diff --git a/frontend/lib/config/catalog.ts b/frontend/lib/config/catalog.ts
index e15b0eb1..a979c810 100644
--- a/frontend/lib/config/catalog.ts
+++ b/frontend/lib/config/catalog.ts
@@ -1,48 +1,57 @@
 export const CATEGORIES = [
-  { slug: "all", label: "All Products" },
-  { slug: "new-arrivals", label: "New Arrivals" },
-  { slug: "best-sellers", label: "Best Sellers" },
-  { slug: "apparel", label: "Apparel" },
-  { slug: "lifestyle", label: "Lifestyle" },
-  { slug: "collectibles", label: "Collectibles" },
-  { slug: "sale", label: "Sale" },
-] as const
+  { slug: 'all', label: 'All Products' },
+  { slug: 'new-arrivals', label: 'New Arrivals' },
+  { slug: 'best-sellers', label: 'Best Sellers' },
+  { slug: 'apparel', label: 'Apparel' },
+  { slug: 'lifestyle', label: 'Lifestyle' },
+  { slug: 'collectibles', label: 'Collectibles' },
+  { slug: 'sale', label: 'Sale' },
+] as const;
 
 export const PRODUCT_TYPES = [
-  { slug: "accessories", label: "Accessories" },
-  { slug: "shirts", label: "Shirts" },
-  { slug: "drinkware", label: "Drinkware" },
-  { slug: "technology", label: "Technology" },
-] as const
+  { slug: 'accessories', label: 'Accessories' },
+  { slug: 'shirts', label: 'Shirts' },
+  { slug: 'drinkware', label: 'Drinkware' },
+  { slug: 'technology', label: 'Technology' },
+] as const;
 
 export const COLORS = [
-  { slug: "black", label: "Black", hex: "#000000" },
-  { slug: "white", label: "White", hex: "#ffffff" },
-  { slug: "grey", label: "Grey", hex: "#6b7280" },
-  { slug: "navy", label: "Navy", hex: "#1e3a5f" },
+  { slug: 'black', label: 'Black', hex: '#000000' },
+  { slug: 'white', label: 'White', hex: '#ffffff' },
+  { slug: 'grey', label: 'Grey', hex: '#6b7280' },
+  { slug: 'navy', label: 'Navy', hex: '#1e3a5f' },
   {
-    slug: "multicolor",
-    label: "Multicolor",
-    hex: "linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff)",
+    slug: 'multicolor',
+    label: 'Multicolor',
+    hex: 'linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff)',
   },
-] as const
+] as const;
 
-export const SIZES = ["XS", "S", "M", "L", "XL", "XXL"] as const
+export const SIZES = ['XS', 'S', 'M', 'L', 'XL', 'XXL'] as const;
 
 export const SORT_OPTIONS = [
-  { value: "featured", label: "Featured" },
-  { value: "price-asc", label: "Price: Low to High" },
-  { value: "price-desc", label: "Price: High to Low" },
-  { value: "newest", label: "Newest" },
-] as const
+  { value: 'featured', label: 'Featured' },
+  { value: 'price-asc', label: 'Price: Low to High' },
+  { value: 'price-desc', label: 'Price: High to Low' },
+  { value: 'newest', label: 'Newest' },
+] as const;
 
-export const CATALOG_PAGE_SIZE = 12
+export const CATALOG_PAGE_SIZE = 12;
 
 export const CATEGORY_TILES = [
-  { id: "apparel", name: "Apparel", slug: "apparel", image: "/apparel.jpg" },
-  { id: "collectibles", name: "Collectibles", slug: "collectibles", image: "/collectibles.jpg" },
-  { id: "lifestyle", name: "Lifestyle", slug: "lifestyle", image: "/lifestyle.jpg" },
-] as const
-
+  { id: 'apparel', name: 'Apparel', slug: 'apparel', image: '/apparel.jpg' },
+  {
+    id: 'collectibles',
+    name: 'Collectibles',
+    slug: 'collectibles',
+    image: '/collectibles.jpg',
+  },
+  {
+    id: 'lifestyle',
+    name: 'Lifestyle',
+    slug: 'lifestyle',
+    image: '/lifestyle.jpg',
+  },
+] as const;
 
-export type CatalogSort = (typeof SORT_OPTIONS)[number]["value"]
+export type CatalogSort = (typeof SORT_OPTIONS)[number]['value'];
diff --git a/frontend/lib/email/sendPasswordResetEmail.ts b/frontend/lib/email/sendPasswordResetEmail.ts
index c9a99860..36138b71 100644
--- a/frontend/lib/email/sendPasswordResetEmail.ts
+++ b/frontend/lib/email/sendPasswordResetEmail.ts
@@ -1,26 +1,23 @@
-import { mailer } from "./transporter";
-import { resetPasswordTemplate } from "./templates/reset-password";
+import { resetPasswordTemplate } from './templates/reset-password';
+import { mailer } from './transporter';
 
 type Params = {
-    to: string;
-    resetUrl: string;
-}
+  to: string;
+  resetUrl: string;
+};
 
-export async function sendPasswordResetEmail({
-    to,
-    resetUrl,
-}: Params) {
-    const from = process.env.EMAIL_FROM;
+export async function sendPasswordResetEmail({ to, resetUrl }: Params) {
+  const from = process.env.EMAIL_FROM;
 
-    if (!from) {
-        throw new Error("EMAIL_FROM is not configured")
-    }
+  if (!from) {
+    throw new Error('EMAIL_FROM is not configured');
+  }
 
-    await mailer.sendMail({
-        from,
-        to,
-        subject: "DevLovers - Reset your password",
-        text: `Reset your password: ${resetUrl}`,
-        html: resetPasswordTemplate(resetUrl),
-    })
-}
\ No newline at end of file
+  await mailer.sendMail({
+    from,
+    to,
+    subject: 'DevLovers - Reset your password',
+    text: `Reset your password: ${resetUrl}`,
+    html: resetPasswordTemplate(resetUrl),
+  });
+}
diff --git a/frontend/lib/email/sendVerificationEmail.ts b/frontend/lib/email/sendVerificationEmail.ts
index 085a9023..f867ee81 100644
--- a/frontend/lib/email/sendVerificationEmail.ts
+++ b/frontend/lib/email/sendVerificationEmail.ts
@@ -1,25 +1,23 @@
-import { mailer } from "./transporter";
-import { verifyEmailTemplate } from "./templates/verify-email";
+import { verifyEmailTemplate } from './templates/verify-email';
+import { mailer } from './transporter';
 
 type Params = {
   to: string;
   verifyUrl: string;
-}
+};
 
-export async function sendVerificationEmail({
-  to,
-  verifyUrl, }: Params) {
+export async function sendVerificationEmail({ to, verifyUrl }: Params) {
   const from = process.env.EMAIL_FROM;
 
   if (!from) {
-    throw new Error("EMAIL_FROM is not configured")
+    throw new Error('EMAIL_FROM is not configured');
   }
 
   await mailer.sendMail({
     from,
     to,
-    subject: "DevLovers - Verify your email address",
+    subject: 'DevLovers - Verify your email address',
     text: `Verify your email address: ${verifyUrl}`,
     html: verifyEmailTemplate(verifyUrl),
-  })
-}
\ No newline at end of file
+  });
+}
diff --git a/frontend/lib/email/templates/base-layout.ts b/frontend/lib/email/templates/base-layout.ts
index 1d5e5c22..5ec6f624 100644
--- a/frontend/lib/email/templates/base-layout.ts
+++ b/frontend/lib/email/templates/base-layout.ts
@@ -1,13 +1,10 @@
 type BaseEmailLayoutParams = {
-    title: string;
-    content: string;
+  title: string;
+  content: string;
 };
 
-export function baseEmailLayout({
-    title,
-    content,
-}: BaseEmailLayoutParams) {
-    return `
+export function baseEmailLayout({ title, content }: BaseEmailLayoutParams) {
+  return `
 <!DOCTYPE html>
 <html>
   <head>
@@ -100,4 +97,4 @@ export function baseEmailLayout({
   </body>
 </html>
 `;
-}
\ No newline at end of file
+}
diff --git a/frontend/lib/email/templates/reset-password.ts b/frontend/lib/email/templates/reset-password.ts
index fe21b342..86612756 100644
--- a/frontend/lib/email/templates/reset-password.ts
+++ b/frontend/lib/email/templates/reset-password.ts
@@ -1,9 +1,9 @@
-import { baseEmailLayout } from "./base-layout";
+import { baseEmailLayout } from './base-layout';
 
 export function resetPasswordTemplate(resetUrl: string) {
-    return baseEmailLayout({
-        title: "Reset your password",
-        content: `
+  return baseEmailLayout({
+    title: 'Reset your password',
+    content: `
 <p class="text-secondary" style="margin:0 0 16px; font-size:14px; color:#374151; line-height:1.5;">
   We received a request to reset your password.
 </p>
@@ -43,5 +43,5 @@ export function resetPasswordTemplate(resetUrl: string) {
   If you didn’t request this, you can safely ignore this email.
 </p>
 `,
-    });
-}
\ No newline at end of file
+  });
+}
diff --git a/frontend/lib/email/templates/verify-email.ts b/frontend/lib/email/templates/verify-email.ts
index 25bc472c..b0efcdf8 100644
--- a/frontend/lib/email/templates/verify-email.ts
+++ b/frontend/lib/email/templates/verify-email.ts
@@ -1,9 +1,9 @@
-import { baseEmailLayout } from "./base-layout";
+import { baseEmailLayout } from './base-layout';
 
 export function verifyEmailTemplate(verifyUrl: string) {
-    return baseEmailLayout({
-        title: "Verify your email",
-        content: `
+  return baseEmailLayout({
+    title: 'Verify your email',
+    content: `
 <p class="text-secondary" style="margin:0 0 16px; font-size:14px; color:#374151; line-height:1.5;">
   Welcome to <strong>DevLovers</strong> 👋
 </p>
@@ -43,5 +43,5 @@ export function verifyEmailTemplate(verifyUrl: string) {
   If you didn’t create an account, you can safely ignore this email.
 </p>
 `,
-    });
-}
\ No newline at end of file
+  });
+}
diff --git a/frontend/lib/email/transporter.ts b/frontend/lib/email/transporter.ts
index de252dcf..2de3c0e1 100644
--- a/frontend/lib/email/transporter.ts
+++ b/frontend/lib/email/transporter.ts
@@ -1,16 +1,16 @@
-import nodemailer from "nodemailer";
+import nodemailer from 'nodemailer';
 
 const user = process.env.GMAIL_USER;
 const pass = process.env.GMAIL_APP_PASSWORD;
 
 if (!user || !pass) {
-    throw new Error("Missing Gmail SMTP credentials");
+  throw new Error('Missing Gmail SMTP credentials');
 }
 
 export const mailer = nodemailer.createTransport({
-    service: "gmail",
-    auth: {
-        user,
-        pass,
-    },
-});
\ No newline at end of file
+  service: 'gmail',
+  auth: {
+    user,
+    pass,
+  },
+});
diff --git a/frontend/lib/env/auth.ts b/frontend/lib/env/auth.ts
index 59eb8f1a..f20d2c39 100644
--- a/frontend/lib/env/auth.ts
+++ b/frontend/lib/env/auth.ts
@@ -1,56 +1,58 @@
-type AppEnv = "local" | "develop" | "production";
+type AppEnv = 'local' | 'develop' | 'production';
 
-const validAppEnvs = ["local", "develop", "production"]
-const rawAppEnv = process.env.APP_ENV
+const validAppEnvs = ['local', 'develop', 'production'];
+const rawAppEnv = process.env.APP_ENV;
 
 if (!rawAppEnv) {
-    throw new Error("APP_ENV is not defined");
+  throw new Error('APP_ENV is not defined');
 }
 
 if (!validAppEnvs.includes(rawAppEnv as AppEnv)) {
-    throw new Error(`Invalid APP_ENV: ${rawAppEnv}. Must be one of: ${validAppEnvs.join(", ")}`);
+  throw new Error(
+    `Invalid APP_ENV: ${rawAppEnv}. Must be one of: ${validAppEnvs.join(', ')}`
+  );
 }
 
-const APP_ENV = rawAppEnv as AppEnv
+const APP_ENV = rawAppEnv as AppEnv;
 
 function requireEnv(name: string): string {
-    const value = process.env[name];
-    if (!value) {
-        throw new Error(`Missing env var: ${name}`);
-    }
-    return value;
+  const value = process.env[name];
+  if (!value) {
+    throw new Error(`Missing env var: ${name}`);
+  }
+  return value;
 }
 
 export const authEnv = {
-    appEnv: APP_ENV,
-
-    google: {
-        clientId: requireEnv("GOOGLE_CLIENT_ID"),
-        clientSecret: requireEnv("GOOGLE_CLIENT_SECRET"),
-        redirectUri:
-            APP_ENV === "local"
-                ? requireEnv("GOOGLE_CLIENT_REDIRECT_URI_LOCAL")
-                : APP_ENV === "develop"
-                    ? requireEnv("GOOGLE_CLIENT_REDIRECT_URI_DEVELOP")
-                    : requireEnv("GOOGLE_CLIENT_REDIRECT_URI_PROD"),
-    },
-
-    github:
-        APP_ENV === "local"
-            ? {
-                clientId: requireEnv("GITHUB_CLIENT_ID_LOCAL"),
-                clientSecret: requireEnv("GITHUB_CLIENT_SECRET_LOCAL"),
-                redirectUri: requireEnv("GITHUB_CLIENT_REDIRECT_URI_LOCAL"),
-            }
-            : APP_ENV === "develop"
-                ? {
-                    clientId: requireEnv("GITHUB_CLIENT_ID_DEVELOP"),
-                    clientSecret: requireEnv("GITHUB_CLIENT_SECRET_DEVELOP"),
-                    redirectUri: requireEnv("GITHUB_CLIENT_REDIRECT_URI_DEVELOP"),
-                }
-                : {
-                    clientId: requireEnv("GITHUB_CLIENT_ID_PROD"),
-                    clientSecret: requireEnv("GITHUB_CLIENT_SECRET_PROD"),
-                    redirectUri: requireEnv("GITHUB_CLIENT_REDIRECT_URI_PROD"),
-                },
-};
\ No newline at end of file
+  appEnv: APP_ENV,
+
+  google: {
+    clientId: requireEnv('GOOGLE_CLIENT_ID'),
+    clientSecret: requireEnv('GOOGLE_CLIENT_SECRET'),
+    redirectUri:
+      APP_ENV === 'local'
+        ? requireEnv('GOOGLE_CLIENT_REDIRECT_URI_LOCAL')
+        : APP_ENV === 'develop'
+          ? requireEnv('GOOGLE_CLIENT_REDIRECT_URI_DEVELOP')
+          : requireEnv('GOOGLE_CLIENT_REDIRECT_URI_PROD'),
+  },
+
+  github:
+    APP_ENV === 'local'
+      ? {
+          clientId: requireEnv('GITHUB_CLIENT_ID_LOCAL'),
+          clientSecret: requireEnv('GITHUB_CLIENT_SECRET_LOCAL'),
+          redirectUri: requireEnv('GITHUB_CLIENT_REDIRECT_URI_LOCAL'),
+        }
+      : APP_ENV === 'develop'
+        ? {
+            clientId: requireEnv('GITHUB_CLIENT_ID_DEVELOP'),
+            clientSecret: requireEnv('GITHUB_CLIENT_SECRET_DEVELOP'),
+            redirectUri: requireEnv('GITHUB_CLIENT_REDIRECT_URI_DEVELOP'),
+          }
+        : {
+            clientId: requireEnv('GITHUB_CLIENT_ID_PROD'),
+            clientSecret: requireEnv('GITHUB_CLIENT_SECRET_PROD'),
+            redirectUri: requireEnv('GITHUB_CLIENT_REDIRECT_URI_PROD'),
+          },
+};
diff --git a/frontend/lib/env/stripe.ts b/frontend/lib/env/stripe.ts
index 6c9238f4..2c9390c9 100644
--- a/frontend/lib/env/stripe.ts
+++ b/frontend/lib/env/stripe.ts
@@ -1,33 +1,36 @@
-import { getClientEnv, getRuntimeEnv } from "@/lib/env"
+import { getClientEnv, getRuntimeEnv } from '@/lib/env';
 
 export type StripeEnv = {
-  secretKey: string | null
-  webhookSecret: string | null
-  publishableKey: string | null
-  paymentsEnabled: boolean
-  mode: "test" | "live"
-}
+  secretKey: string | null;
+  webhookSecret: string | null;
+  publishableKey: string | null;
+  paymentsEnabled: boolean;
+  mode: 'test' | 'live';
+};
 
 function nonEmpty(v: string | undefined): string | null {
-  if (!v) return null
-  const t = v.trim()
-  return t.length > 0 ? t : null
+  if (!v) return null;
+  const t = v.trim();
+  return t.length > 0 ? t : null;
 }
 
 export function getStripeEnv(): StripeEnv {
-  const runtimeEnv = getRuntimeEnv()
-  const clientEnv = getClientEnv()
+  const runtimeEnv = getRuntimeEnv();
+  const clientEnv = getClientEnv();
 
-  const paymentsFlag = process.env.PAYMENTS_ENABLED ?? "false"
-  const secretKey = nonEmpty(process.env.STRIPE_SECRET_KEY)
-  const webhookSecret = nonEmpty(process.env.STRIPE_WEBHOOK_SECRET)
-  const publishableKey = nonEmpty(clientEnv.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY ?? undefined)
+  const paymentsFlag = process.env.PAYMENTS_ENABLED ?? 'false';
+  const secretKey = nonEmpty(process.env.STRIPE_SECRET_KEY);
+  const webhookSecret = nonEmpty(process.env.STRIPE_WEBHOOK_SECRET);
+  const publishableKey = nonEmpty(
+    clientEnv.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY ?? undefined
+  );
 
   const mode =
-    (nonEmpty(process.env.STRIPE_MODE) as "test" | "live" | null) ??
-    (runtimeEnv.NODE_ENV === "production" ? "live" : "test")
+    (nonEmpty(process.env.STRIPE_MODE) as 'test' | 'live' | null) ??
+    (runtimeEnv.NODE_ENV === 'production' ? 'live' : 'test');
 
-  const paymentsEnabled = paymentsFlag === "true" && !!secretKey && !!webhookSecret
+  const paymentsEnabled =
+    paymentsFlag === 'true' && !!secretKey && !!webhookSecret;
 
   if (!paymentsEnabled) {
     return {
@@ -36,7 +39,7 @@ export function getStripeEnv(): StripeEnv {
       publishableKey: null,
       paymentsEnabled: false,
       mode,
-    }
+    };
   }
 
   return {
@@ -45,9 +48,9 @@ export function getStripeEnv(): StripeEnv {
     publishableKey,
     paymentsEnabled: true,
     mode,
-  }
+  };
 }
 
 export function isPaymentsEnabled(): boolean {
-  return getStripeEnv().paymentsEnabled
+  return getStripeEnv().paymentsEnabled;
 }
diff --git a/frontend/lib/http/getBaseUrl.ts b/frontend/lib/http/getBaseUrl.ts
index 73306a00..13b89c38 100644
--- a/frontend/lib/http/getBaseUrl.ts
+++ b/frontend/lib/http/getBaseUrl.ts
@@ -1,15 +1,15 @@
 export function resolveBaseUrl(options: {
-    origin?: string | null;
-    host?: string | null;
+  origin?: string | null;
+  host?: string | null;
 }): string {
-    const base =
-        options.origin ||
-        process.env.NEXT_PUBLIC_SITE_URL ||
-        (options.host ? `https://${options.host}` : null);
+  const base =
+    options.origin ||
+    process.env.NEXT_PUBLIC_SITE_URL ||
+    (options.host ? `https://${options.host}` : null);
 
-    if (!base) {
-        throw new Error("Unable to determine base URL");
-    }
+  if (!base) {
+    throw new Error('Unable to determine base URL');
+  }
 
-    return base.replace(/\/$/, "");
-}
\ No newline at end of file
+  return base.replace(/\/$/, '');
+}
diff --git a/frontend/lib/logout.ts b/frontend/lib/logout.ts
index 061de614..50373e2a 100644
--- a/frontend/lib/logout.ts
+++ b/frontend/lib/logout.ts
@@ -1,9 +1,8 @@
-"use client";
+'use client';
 
 export async function logout() {
-  await fetch("/api/auth/logout", {
-    method: "POST",
-    credentials: "same-origin",
+  await fetch('/api/auth/logout', {
+    method: 'POST',
+    credentials: 'same-origin',
   });
-
-}  
\ No newline at end of file
+}
diff --git a/frontend/lib/psp/stripe.ts b/frontend/lib/psp/stripe.ts
index c37d92c7..f471286d 100644
--- a/frontend/lib/psp/stripe.ts
+++ b/frontend/lib/psp/stripe.ts
@@ -1,4 +1,5 @@
 import Stripe from 'stripe';
+
 import { getStripeEnv } from '@/lib/env/stripe';
 import { logError } from '@/lib/logging';
 
diff --git a/frontend/lib/quiz/guest-quiz.ts b/frontend/lib/quiz/guest-quiz.ts
index 148fd52b..27612856 100644
--- a/frontend/lib/quiz/guest-quiz.ts
+++ b/frontend/lib/quiz/guest-quiz.ts
@@ -28,19 +28,19 @@ export function getPendingQuizResult(): PendingQuizResult | null {
   if (typeof window === 'undefined') {
     return null;
   }
-  
+
   const stored = localStorage.getItem(STORAGE_KEY);
   if (!stored) return null;
-  
+
   try {
     const result: PendingQuizResult = JSON.parse(stored);
     const expiryTime = result.savedAt + EXPIRY_HOURS * 60 * 60 * 1000;
-    
+
     if (Date.now() > expiryTime) {
       clearPendingQuizResult();
       return null;
     }
-    
+
     return result;
   } catch {
     clearPendingQuizResult();
@@ -51,4 +51,4 @@ export function getPendingQuizResult(): PendingQuizResult | null {
 export function clearPendingQuizResult(): void {
   if (typeof window === 'undefined') return;
   localStorage.removeItem(STORAGE_KEY);
-}
\ No newline at end of file
+}
diff --git a/frontend/lib/quiz/quiz-crypto.ts b/frontend/lib/quiz/quiz-crypto.ts
index d6b3c283..b7f84c9e 100644
--- a/frontend/lib/quiz/quiz-crypto.ts
+++ b/frontend/lib/quiz/quiz-crypto.ts
@@ -39,7 +39,9 @@ export function encryptAnswers(answers: CorrectAnswersMap): string {
 /**
  * Decrypts blob. Returns null if tampered or wrong key.
  */
-export function decryptAnswers(encryptedBlob: string): CorrectAnswersMap | null {
+export function decryptAnswers(
+  encryptedBlob: string
+): CorrectAnswersMap | null {
   try {
     const key = getEncryptionKey();
     const data = Buffer.from(encryptedBlob, 'base64');
@@ -67,7 +69,10 @@ export function decryptAnswers(encryptedBlob: string): CorrectAnswersMap | null
  * Creates encrypted blob from quiz questions
  */
 export function createEncryptedAnswersBlob(
-  questions: Array<{ id: string; answers: Array<{ id: string; isCorrect: boolean }> }>
+  questions: Array<{
+    id: string;
+    answers: Array<{ id: string; isCorrect: boolean }>;
+  }>
 ): string {
   const answersMap: CorrectAnswersMap = {};
 
diff --git a/frontend/lib/quiz/quiz-session.ts b/frontend/lib/quiz/quiz-session.ts
index 04f30f9b..422cd0c1 100644
--- a/frontend/lib/quiz/quiz-session.ts
+++ b/frontend/lib/quiz/quiz-session.ts
@@ -21,7 +21,10 @@ export function saveQuizSession(quizId: string, state: QuizSessionData): void {
 
   try {
     const data = { ...state, savedAt: Date.now() };
-    localStorage.setItem(`${STORAGE_KEY_PREFIX}${quizId}`, JSON.stringify(data));
+    localStorage.setItem(
+      `${STORAGE_KEY_PREFIX}${quizId}`,
+      JSON.stringify(data)
+    );
   } catch (e) {
     console.error('Failed to save quiz session:', e);
   }
diff --git a/frontend/lib/redis.ts b/frontend/lib/redis.ts
index d25b651c..960298b1 100644
--- a/frontend/lib/redis.ts
+++ b/frontend/lib/redis.ts
@@ -1,4 +1,5 @@
 import { Redis } from '@upstash/redis';
+
 import { getServerEnv } from '@/lib/env';
 
 let cachedRedis: Redis | null = null;
diff --git a/frontend/lib/security/client-ip.ts b/frontend/lib/security/client-ip.ts
index 3505d759..a3bc09bb 100644
--- a/frontend/lib/security/client-ip.ts
+++ b/frontend/lib/security/client-ip.ts
@@ -1,8 +1,9 @@
 import 'server-only';
 
-import type { NextRequest } from 'next/server';
 import { isIP } from 'node:net';
 
+import type { NextRequest } from 'next/server';
+
 function envBool(name: string, fallback: boolean): boolean {
   const raw = (process.env[name] ?? '').trim().toLowerCase();
   if (!raw) return fallback;
diff --git a/frontend/lib/security/csrf.ts b/frontend/lib/security/csrf.ts
index cb23be93..cfb6e481 100644
--- a/frontend/lib/security/csrf.ts
+++ b/frontend/lib/security/csrf.ts
@@ -1,6 +1,7 @@
 import 'server-only';
 
 import crypto from 'node:crypto';
+
 import type { NextRequest } from 'next/server';
 
 export const CSRF_FORM_FIELD = 'csrfToken' as const;
diff --git a/frontend/lib/security/rate-limit.ts b/frontend/lib/security/rate-limit.ts
index 08b53f22..7c60f0b3 100644
--- a/frontend/lib/security/rate-limit.ts
+++ b/frontend/lib/security/rate-limit.ts
@@ -1,10 +1,11 @@
 import 'server-only';
 
-import type { NextRequest } from 'next/server';
-import { NextResponse } from 'next/server';
-import { isIP } from 'node:net';
 import { createHash } from 'node:crypto';
+import { isIP } from 'node:net';
+
 import { sql } from 'drizzle-orm';
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
 
 import { db } from '@/db';
 
diff --git a/frontend/lib/services/inventory.ts b/frontend/lib/services/inventory.ts
index e19947d4..fae284d2 100644
--- a/frontend/lib/services/inventory.ts
+++ b/frontend/lib/services/inventory.ts
@@ -1,4 +1,5 @@
 import { sql } from 'drizzle-orm';
+
 import { db } from '@/db';
 
 type ReserveResult =
diff --git a/frontend/lib/services/orders.ts b/frontend/lib/services/orders.ts
index 348b6a31..d614f0dd 100644
--- a/frontend/lib/services/orders.ts
+++ b/frontend/lib/services/orders.ts
@@ -1,12 +1,10 @@
 export { createOrderWithItems } from './orders/checkout';
-export { getOrderById, getOrderSummary } from './orders/summary';
 export { setOrderPaymentIntent } from './orders/payment-intent';
-
-export { restockOrder, restockOrder as restock } from './orders/restock';
+export { refundOrder } from './orders/refund';
+export { restockOrder as restock,restockOrder } from './orders/restock';
+export { getOrderById, getOrderSummary } from './orders/summary';
 export {
+  restockStaleNoPaymentOrders,
   restockStalePendingOrders,
   restockStuckReservingOrders,
-  restockStaleNoPaymentOrders,
 } from './orders/sweeps';
-
-export { refundOrder } from './orders/refund';
diff --git a/frontend/lib/services/orders/_shared.ts b/frontend/lib/services/orders/_shared.ts
index a82055f5..cfe5add1 100644
--- a/frontend/lib/services/orders/_shared.ts
+++ b/frontend/lib/services/orders/_shared.ts
@@ -1,15 +1,15 @@
 import crypto from 'crypto';
 
+import { db } from '@/db';
+import { orders } from '@/db/schema/shop';
 import { createCartItemKey } from '@/lib/shop/cart-item-key';
-import { type PaymentProvider } from '@/lib/shop/payments';
 import { type CurrencyCode } from '@/lib/shop/currency';
-import { MAX_QUANTITY_PER_LINE } from '@/lib/validation/shop';
+import { type PaymentProvider } from '@/lib/shop/payments';
 import {
   type CheckoutItem,
   type OrderSummaryWithMinor,
 } from '@/lib/types/shop';
-import { orders } from '@/db/schema/shop';
-import { db } from '@/db';
+import { MAX_QUANTITY_PER_LINE } from '@/lib/validation/shop';
 
 import { InvalidPayloadError, OrderStateInvalidError } from '../errors';
 
diff --git a/frontend/lib/services/orders/checkout.ts b/frontend/lib/services/orders/checkout.ts
index acecc5a2..adcafc03 100644
--- a/frontend/lib/services/orders/checkout.ts
+++ b/frontend/lib/services/orders/checkout.ts
@@ -1,10 +1,10 @@
 import { and, eq, inArray, ne, sql } from 'drizzle-orm';
 
-import { applyReserveMove } from '../inventory';
-import { logError, logWarn } from '@/lib/logging';
-import { isPaymentsEnabled } from '@/lib/env/stripe';
 import { db } from '@/db';
+import { coercePriceFromDb } from '@/db/queries/shop/orders';
 import { orderItems, orders, productPrices, products } from '@/db/schema/shop';
+import { isPaymentsEnabled } from '@/lib/env/stripe';
+import { logError, logWarn } from '@/lib/logging';
 import { resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import {
   calculateLineTotal,
@@ -12,28 +12,27 @@ import {
   sumLineTotals,
   toDbMoney,
 } from '@/lib/shop/money';
+import { type PaymentProvider, type PaymentStatus } from '@/lib/shop/payments';
 import {
   type CheckoutItem,
   type CheckoutResult,
   type OrderSummaryWithMinor,
 } from '@/lib/types/shop';
-import { coercePriceFromDb } from '@/db/queries/shop/orders';
-import { type PaymentProvider, type PaymentStatus } from '@/lib/shop/payments';
 
 import {
-  InsufficientStockError,
   IdempotencyConflictError,
+  InsufficientStockError,
   InvalidPayloadError,
   InvalidVariantError,
   OrderNotFoundError,
-  PriceConfigError,
   OrderStateInvalidError,
+  PriceConfigError,
 } from '../errors';
-
+import { applyReserveMove } from '../inventory';
 import {
-  type Currency,
-  type CheckoutItemWithVariant,
   aggregateReserveByProductId,
+  type CheckoutItemWithVariant,
+  type Currency,
   hashIdempotencyRequest,
   isStrictNonNegativeInt,
   mergeCheckoutItems,
@@ -41,10 +40,9 @@ import {
   requireTotalCents,
   resolvePaymentProvider,
 } from './_shared';
-
-import { getOrderById, getOrderByIdempotencyKey } from './summary';
-import { restockOrder } from './restock';
 import { guardedPaymentStatusUpdate } from './payment-state';
+import { restockOrder } from './restock';
+import { getOrderById, getOrderByIdempotencyKey } from './summary';
 
 async function reconcileNoPaymentOrder(
   orderId: string
diff --git a/frontend/lib/services/orders/payment-attempts.ts b/frontend/lib/services/orders/payment-attempts.ts
index f0f81bde..a6ab6f69 100644
--- a/frontend/lib/services/orders/payment-attempts.ts
+++ b/frontend/lib/services/orders/payment-attempts.ts
@@ -4,11 +4,11 @@ import { and, eq, sql } from 'drizzle-orm';
 
 import { db } from '@/db';
 import { paymentAttempts } from '@/db/schema';
-import { readStripePaymentIntentParams } from '@/lib/services/orders/payment-intent';
-import { createPaymentIntent, retrievePaymentIntent } from '@/lib/psp/stripe';
-import { setOrderPaymentIntent } from '@/lib/services/orders';
 import { logError } from '@/lib/logging';
+import { createPaymentIntent, retrievePaymentIntent } from '@/lib/psp/stripe';
 import { OrderStateInvalidError } from '@/lib/services/errors';
+import { setOrderPaymentIntent } from '@/lib/services/orders';
+import { readStripePaymentIntentParams } from '@/lib/services/orders/payment-intent';
 
 export type PaymentProvider = 'stripe';
 export type PaymentAttemptStatus =
diff --git a/frontend/lib/services/orders/payment-intent.ts b/frontend/lib/services/orders/payment-intent.ts
index b82f8120..5ab0113e 100644
--- a/frontend/lib/services/orders/payment-intent.ts
+++ b/frontend/lib/services/orders/payment-intent.ts
@@ -4,14 +4,15 @@ import { db } from '@/db';
 import { orders } from '@/db/schema/shop';
 import { type PaymentProvider, type PaymentStatus } from '@/lib/shop/payments';
 import { type OrderSummaryWithMinor } from '@/lib/types/shop';
+
 import {
   InvalidPayloadError,
   OrderNotFoundError,
   OrderStateInvalidError,
 } from '../errors';
 import { resolvePaymentProvider } from './_shared';
-import { getOrderItems, parseOrderSummary } from './summary';
 import { guardedPaymentStatusUpdate } from './payment-state';
+import { getOrderItems, parseOrderSummary } from './summary';
 
 export async function setOrderPaymentIntent({
   orderId,
diff --git a/frontend/lib/services/orders/payment-state.ts b/frontend/lib/services/orders/payment-state.ts
index 703a4b34..4f6edcca 100644
--- a/frontend/lib/services/orders/payment-state.ts
+++ b/frontend/lib/services/orders/payment-state.ts
@@ -1,4 +1,5 @@
 import { and, eq, inArray, type SQL } from 'drizzle-orm';
+
 import { db } from '@/db';
 import { orders } from '@/db/schema/shop';
 import { logWarn } from '@/lib/logging';
diff --git a/frontend/lib/services/orders/refund.ts b/frontend/lib/services/orders/refund.ts
index f4dcbf6d..f83f43d7 100644
--- a/frontend/lib/services/orders/refund.ts
+++ b/frontend/lib/services/orders/refund.ts
@@ -3,12 +3,13 @@ import { eq } from 'drizzle-orm';
 import { db } from '@/db';
 import { orders } from '@/db/schema/shop';
 import { createRefund } from '@/lib/psp/stripe';
+
 import { InvalidPayloadError, OrderNotFoundError } from '../errors';
-import { getOrderById } from './summary';
 import {
   appendRefundToMeta,
   normalizeRefundsFromMeta,
 } from './psp-metadata/refunds';
+import { getOrderById } from './summary';
 
 function invalid(code: string, message: string): InvalidPayloadError {
   return new InvalidPayloadError(message, { code });
diff --git a/frontend/lib/services/orders/restock.ts b/frontend/lib/services/orders/restock.ts
index a92f7d1a..1a37c3cd 100644
--- a/frontend/lib/services/orders/restock.ts
+++ b/frontend/lib/services/orders/restock.ts
@@ -1,14 +1,16 @@
 import crypto from 'node:crypto';
+
 import { and, eq, isNull, lt, ne, or } from 'drizzle-orm';
 
-import { applyReleaseMove } from '../inventory';
 import { db } from '@/db';
 import { inventoryMoves, orders } from '@/db/schema/shop';
+import { logWarn } from '@/lib/logging';
 import { type PaymentStatus } from '@/lib/shop/payments';
-import { guardedPaymentStatusUpdate } from './payment-state';
+
 import { OrderNotFoundError, OrderStateInvalidError } from '../errors';
+import { applyReleaseMove } from '../inventory';
 import { resolvePaymentProvider } from './_shared';
-import { logWarn } from '@/lib/logging';
+import { guardedPaymentStatusUpdate } from './payment-state';
 
 const PAYMENT_STATUS_KEY = 'paymentStatus' as const;
 
diff --git a/frontend/lib/services/orders/summary.ts b/frontend/lib/services/orders/summary.ts
index 1327b220..246115e4 100644
--- a/frontend/lib/services/orders/summary.ts
+++ b/frontend/lib/services/orders/summary.ts
@@ -6,7 +6,6 @@ import { fromCents, fromDbMoney } from '@/lib/shop/money';
 import { type OrderDetail, type OrderSummaryWithMinor } from '@/lib/types/shop';
 
 import { OrderNotFoundError, OrderStateInvalidError } from '../errors';
-
 import {
   type DbClient,
   type OrderRow,
diff --git a/frontend/lib/services/orders/sweeps.ts b/frontend/lib/services/orders/sweeps.ts
index d07ba19e..35b8c18b 100644
--- a/frontend/lib/services/orders/sweeps.ts
+++ b/frontend/lib/services/orders/sweeps.ts
@@ -1,5 +1,5 @@
 import crypto from 'crypto';
-import { and, eq, inArray, isNull, lt, or, sql, ne } from 'drizzle-orm';
+import { and, eq, inArray, isNull, lt, ne,or, sql } from 'drizzle-orm';
 
 import { db } from '@/db';
 import { orders } from '@/db/schema/shop';
diff --git a/frontend/lib/services/products.ts b/frontend/lib/services/products.ts
index 0c4528a0..422ed4e6 100644
--- a/frontend/lib/services/products.ts
+++ b/frontend/lib/services/products.ts
@@ -1,17 +1,14 @@
-export { createProduct } from './products/mutations/create';
-export { updateProduct } from './products/mutations/update';
-export { deleteProduct } from './products/mutations/delete';
-export { toggleProductStatus } from './products/mutations/toggle';
-
 export {
   getAdminProductById,
-  getAdminProductPrices,
   getAdminProductByIdWithPrices,
+  getAdminProductPrices,
   getAdminProductsList,
 } from './products/admin/queries';
-
 export { rehydrateCartItems } from './products/cart/rehydrate';
-
+export { createProduct } from './products/mutations/create';
+export { deleteProduct } from './products/mutations/delete';
+export { toggleProductStatus } from './products/mutations/toggle';
+export { updateProduct } from './products/mutations/update';
 export type {
   AdminProductPriceRow,
   AdminProductsFilter,
diff --git a/frontend/lib/services/products/admin/queries.ts b/frontend/lib/services/products/admin/queries.ts
index ba1d219d..0d992ad8 100644
--- a/frontend/lib/services/products/admin/queries.ts
+++ b/frontend/lib/services/products/admin/queries.ts
@@ -1,13 +1,13 @@
 import { and, eq, type SQL } from 'drizzle-orm';
 
 import { db } from '@/db';
-import { products, productPrices } from '@/db/schema';
+import { productPrices,products } from '@/db/schema';
+import { ProductNotFoundError } from '@/lib/errors/products';
 import type { CurrencyCode } from '@/lib/shop/currency';
 import type { DbProduct } from '@/lib/types/shop';
-import { ProductNotFoundError } from '@/lib/errors/products';
 
-import { assertMoneyMinorInt } from '../prices';
 import { mapRowToProduct } from '../mapping';
+import { assertMoneyMinorInt } from '../prices';
 import type { AdminProductPriceRow, AdminProductsFilter } from '../types';
 
 export async function getAdminProductById(id: string): Promise<DbProduct> {
diff --git a/frontend/lib/services/products/cart/rehydrate.ts b/frontend/lib/services/products/cart/rehydrate.ts
index 61830b30..51ec1975 100644
--- a/frontend/lib/services/products/cart/rehydrate.ts
+++ b/frontend/lib/services/products/cart/rehydrate.ts
@@ -1,22 +1,22 @@
 import { and, eq, inArray } from 'drizzle-orm';
 
 import { db } from '@/db';
-import { products, productPrices } from '@/db/schema';
 import { coercePriceFromDb } from '@/db/queries/shop/orders';
+import { productPrices,products } from '@/db/schema';
+import { logWarn } from '@/lib/logging';
+import { createCartItemKey } from '@/lib/shop/cart-item-key';
+import { type CurrencyCode,isTwoDecimalCurrency } from '@/lib/shop/currency';
 import { calculateLineTotal, fromCents, toCents } from '@/lib/shop/money';
-import {
-  MAX_QUANTITY_PER_LINE,
-  cartRehydrateResultSchema,
-} from '@/lib/validation/shop';
 import type {
   CartClientItem,
   CartRehydrateItem,
   CartRehydrateResult,
   CartRemovedItem,
 } from '@/lib/validation/shop';
-import { isTwoDecimalCurrency, type CurrencyCode } from '@/lib/shop/currency';
-import { createCartItemKey } from '@/lib/shop/cart-item-key';
-import { logWarn } from '@/lib/logging';
+import {
+  cartRehydrateResultSchema,
+  MAX_QUANTITY_PER_LINE,
+} from '@/lib/validation/shop';
 
 import { PriceConfigError } from '../../errors';
 
diff --git a/frontend/lib/services/products/mapping.ts b/frontend/lib/services/products/mapping.ts
index a7a8257c..fb461c6a 100644
--- a/frontend/lib/services/products/mapping.ts
+++ b/frontend/lib/services/products/mapping.ts
@@ -1,5 +1,6 @@
 import { fromCents, fromDbMoney } from '@/lib/shop/money';
 import type { DbProduct } from '@/lib/types/shop';
+
 import type { ProductRow } from './types';
 
 export function mapRowToProduct(row: ProductRow): DbProduct {
diff --git a/frontend/lib/services/products/mutations/create.ts b/frontend/lib/services/products/mutations/create.ts
index 5e570a71..e8a99e9a 100644
--- a/frontend/lib/services/products/mutations/create.ts
+++ b/frontend/lib/services/products/mutations/create.ts
@@ -1,14 +1,13 @@
 import { eq } from 'drizzle-orm';
 
-import { uploadProductImageFromFile } from '@/lib/cloudinary';
 import { db } from '@/db';
-import { products, productPrices } from '@/db/schema';
+import { productPrices,products } from '@/db/schema';
+import { uploadProductImageFromFile } from '@/lib/cloudinary';
 import { logError } from '@/lib/logging';
 import { toDbMoney } from '@/lib/shop/money';
 import type { DbProduct, ProductInput } from '@/lib/types/shop';
 
-import { SlugConflictError, InvalidPayloadError } from '../../errors';
-import { normalizeSlug } from '../slug';
+import { InvalidPayloadError,SlugConflictError } from '../../errors';
 import { mapRowToProduct } from '../mapping';
 import {
   enforceSaleBadgeRequiresOriginal,
@@ -16,6 +15,7 @@ import {
   requireUsd,
   validatePriceRows,
 } from '../prices';
+import { normalizeSlug } from '../slug';
 
 export async function createProduct(input: ProductInput): Promise<DbProduct> {
   const slug = await normalizeSlug(
diff --git a/frontend/lib/services/products/mutations/delete.ts b/frontend/lib/services/products/mutations/delete.ts
index e1590715..31194834 100644
--- a/frontend/lib/services/products/mutations/delete.ts
+++ b/frontend/lib/services/products/mutations/delete.ts
@@ -1,10 +1,10 @@
 import { sql } from 'drizzle-orm';
 
-import { destroyProductImage } from '@/lib/cloudinary';
 import { db } from '@/db';
-import { products, productPrices } from '@/db/schema';
-import { logError } from '@/lib/logging';
+import { productPrices,products } from '@/db/schema';
+import { destroyProductImage } from '@/lib/cloudinary';
 import { ProductNotFoundError } from '@/lib/errors/products';
+import { logError } from '@/lib/logging';
 
 export async function deleteProduct(id: string): Promise<void> {
   const result = await db.execute(sql`
diff --git a/frontend/lib/services/products/mutations/toggle.ts b/frontend/lib/services/products/mutations/toggle.ts
index 7a430c3a..8bde76d1 100644
--- a/frontend/lib/services/products/mutations/toggle.ts
+++ b/frontend/lib/services/products/mutations/toggle.ts
@@ -2,10 +2,10 @@ import { eq } from 'drizzle-orm';
 
 import { db } from '@/db';
 import { products } from '@/db/schema';
+import { ProductNotFoundError } from '@/lib/errors/products';
 import type { DbProduct } from '@/lib/types/shop';
 
 import { mapRowToProduct } from '../mapping';
-import { ProductNotFoundError } from '@/lib/errors/products';
 
 export async function toggleProductStatus(id: string): Promise<DbProduct> {
   const [current] = await db
diff --git a/frontend/lib/services/products/mutations/update.ts b/frontend/lib/services/products/mutations/update.ts
index 4c9f444e..b3dbd935 100644
--- a/frontend/lib/services/products/mutations/update.ts
+++ b/frontend/lib/services/products/mutations/update.ts
@@ -1,26 +1,27 @@
 import { eq, sql } from 'drizzle-orm';
+
+import { db } from '@/db';
+import { productPrices,products } from '@/db/schema';
 import {
   destroyProductImage,
   uploadProductImageFromFile,
 } from '@/lib/cloudinary';
-import { db } from '@/db';
-import { products, productPrices } from '@/db/schema';
+import { ProductNotFoundError } from '@/lib/errors/products';
 import { logError } from '@/lib/logging';
-import { toDbMoney } from '@/lib/shop/money';
 import type { CurrencyCode } from '@/lib/shop/currency';
+import { toDbMoney } from '@/lib/shop/money';
 import type { DbProduct, ProductUpdateInput } from '@/lib/types/shop';
+
 import { SlugConflictError } from '../../errors';
-import { ProductNotFoundError } from '@/lib/errors/products';
 import { mapRowToProduct } from '../mapping';
-
-import { normalizeSlug } from '../slug';
 import {
-  assertMoneyMinorInt,
   assertMergedPricesPolicy,
+  assertMoneyMinorInt,
   enforceSaleBadgeRequiresOriginal,
   normalizePricesFromInput,
   validatePriceRows,
 } from '../prices';
+import { normalizeSlug } from '../slug';
 import type { NormalizedPriceRow, ProductsTable } from '../types';
 
 export async function updateProduct(
diff --git a/frontend/lib/services/products/prices.ts b/frontend/lib/services/products/prices.ts
index 260d0914..ad0aefc4 100644
--- a/frontend/lib/services/products/prices.ts
+++ b/frontend/lib/services/products/prices.ts
@@ -1,6 +1,7 @@
-import { toCents } from '@/lib/shop/money';
-import { currencyValues } from '@/lib/shop/currency';
 import type { CurrencyCode } from '@/lib/shop/currency';
+import { currencyValues } from '@/lib/shop/currency';
+import { toCents } from '@/lib/shop/money';
+
 import { InvalidPayloadError, PriceConfigError } from '../errors';
 import type { NormalizedPriceRow } from './types';
 
diff --git a/frontend/lib/services/products/slug.ts b/frontend/lib/services/products/slug.ts
index efad626f..a7d90253 100644
--- a/frontend/lib/services/products/slug.ts
+++ b/frontend/lib/services/products/slug.ts
@@ -2,6 +2,7 @@ import { and, eq, ne } from 'drizzle-orm';
 
 import { products } from '@/db/schema';
 import { slugify } from '@/lib/shop/slug';
+
 import { SlugConflictError } from '../errors';
 import type { DbClient } from './types';
 
diff --git a/frontend/lib/shop/data.ts b/frontend/lib/shop/data.ts
index 855b54b8..120553ae 100644
--- a/frontend/lib/shop/data.ts
+++ b/frontend/lib/shop/data.ts
@@ -1,27 +1,28 @@
+import {
+  getActiveProductsPage,
+  getFeaturedProducts,
+  getPublicProductBySlug,
+} from '@/db/queries/shop/products';
+import { getPublicProductBaseBySlug } from '@/db/queries/shop/products';
 import {
   CATALOG_PAGE_SIZE,
-  CATEGORY_TILES,
   type CatalogSort,
+  CATEGORY_TILES,
 } from '@/lib/config/catalog';
+import { logError } from '@/lib/logging';
 import {
-  catalogFilterSchema,
-  dbProductSchema,
-  productBadgeValues,
-  shopProductSchema,
   type CatalogFilters,
+  catalogFilterSchema,
   type DbProduct,
+  dbProductSchema,
   type ProductBadge,
+  productBadgeValues,
   type ShopProduct as ValidationShopProduct,
+  shopProductSchema,
 } from '@/lib/validation/shop';
-import {
-  getActiveProductsPage,
-  getFeaturedProducts,
-  getPublicProductBySlug,
-} from '@/db/queries/shop/products';
-import { fromDbMoney } from './money';
+
 import { resolveCurrencyFromLocale } from './currency';
-import { getPublicProductBaseBySlug } from '@/db/queries/shop/products';
-import { logError } from '@/lib/logging';
+import { fromDbMoney } from './money';
 
 export type ShopProduct = ValidationShopProduct;
 
diff --git a/frontend/lib/shop/idempotency.ts b/frontend/lib/shop/idempotency.ts
index 4a2a4c41..1d4a40e7 100644
--- a/frontend/lib/shop/idempotency.ts
+++ b/frontend/lib/shop/idempotency.ts
@@ -1,18 +1,23 @@
-const IDEMPOTENCY_MAX_LENGTH = 128
+const IDEMPOTENCY_MAX_LENGTH = 128;
 
 function fallbackKey(): string {
-  const random = Math.random().toString(36).slice(2)
-  const timestamp = Date.now().toString(36)
-  return `${timestamp}_${random}`.slice(0, IDEMPOTENCY_MAX_LENGTH)
+  const random = Math.random().toString(36).slice(2);
+  const timestamp = Date.now().toString(36);
+  return `${timestamp}_${random}`.slice(0, IDEMPOTENCY_MAX_LENGTH);
 }
 
 export function generateIdempotencyKey(): string {
   try {
-    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
-      return crypto.randomUUID().replace(/[^A-Za-z0-9_-]/g, "").slice(0, IDEMPOTENCY_MAX_LENGTH)
+    if (
+      typeof crypto !== 'undefined' &&
+      typeof crypto.randomUUID === 'function'
+    ) {
+      return crypto
+        .randomUUID()
+        .replace(/[^A-Za-z0-9_-]/g, '')
+        .slice(0, IDEMPOTENCY_MAX_LENGTH);
     }
-  } catch {
-  }
+  } catch {}
 
-  return fallbackKey()
+  return fallbackKey();
 }
diff --git a/frontend/lib/shop/payments.ts b/frontend/lib/shop/payments.ts
index f3734639..1f8fbe71 100644
--- a/frontend/lib/shop/payments.ts
+++ b/frontend/lib/shop/payments.ts
@@ -1,13 +1,13 @@
 export const paymentStatusValues = [
-  "pending",
-  "requires_payment",
-  "paid",
-  "failed",
-  "refunded",
+  'pending',
+  'requires_payment',
+  'paid',
+  'failed',
+  'refunded',
 ] as const;
 
 export type PaymentStatus = (typeof paymentStatusValues)[number];
 
-export const paymentProviderValues = ["stripe", "none"] as const;
+export const paymentProviderValues = ['stripe', 'none'] as const;
 
 export type PaymentProvider = (typeof paymentProviderValues)[number];
diff --git a/frontend/lib/shop/request-locale.ts b/frontend/lib/shop/request-locale.ts
index fd37b1a7..515b32ea 100644
--- a/frontend/lib/shop/request-locale.ts
+++ b/frontend/lib/shop/request-locale.ts
@@ -1,30 +1,30 @@
-import "server-only";
+import 'server-only';
 
-import type { NextRequest } from "next/server";
+import type { NextRequest } from 'next/server';
 
 import {
+  type CurrencyCode,
   parsePrimaryLocaleFromAcceptLanguage,
   resolveCurrencyFromLocale,
-  type CurrencyCode,
-} from "@/lib/shop/currency";
+} from '@/lib/shop/currency';
 
 export function resolveRequestLocale(request: NextRequest): string | null {
   const headerLocale =
-    request.headers.get("x-next-intl-locale") ??
-    request.headers.get("x-locale") ??
+    request.headers.get('x-next-intl-locale') ??
+    request.headers.get('x-locale') ??
     null;
 
   if (headerLocale && headerLocale.trim()) return headerLocale.trim();
 
   const cookieLocale =
-    request.cookies.get("NEXT_LOCALE")?.value ??
-    request.cookies.get("locale")?.value ??
+    request.cookies.get('NEXT_LOCALE')?.value ??
+    request.cookies.get('locale')?.value ??
     null;
 
   if (cookieLocale && cookieLocale.trim()) return cookieLocale.trim();
 
   return parsePrimaryLocaleFromAcceptLanguage(
-    request.headers.get("accept-language")
+    request.headers.get('accept-language')
   );
 }
 
diff --git a/frontend/lib/shop/slug.ts b/frontend/lib/shop/slug.ts
index 61bfa0c1..14e5a5dd 100644
--- a/frontend/lib/shop/slug.ts
+++ b/frontend/lib/shop/slug.ts
@@ -1,9 +1,9 @@
 export function slugify(input: string): string {
   return input
     .toLowerCase()
-    .normalize("NFKD")
-    .replace(/[\u0300-\u036f]/g, "")
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .replace(/-{2,}/g, "-")
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .replace(/-{2,}/g, '-');
 }
diff --git a/frontend/lib/tests/blog/blog-author-route.test.ts b/frontend/lib/tests/blog/blog-author-route.test.ts
index af84420e..4f8cc34f 100644
--- a/frontend/lib/tests/blog/blog-author-route.test.ts
+++ b/frontend/lib/tests/blog/blog-author-route.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
+import { afterEach,describe, expect, it, vi } from 'vitest';
 
 const fetchMock = vi.fn();
 
@@ -29,7 +29,9 @@ describe('GET /api/blog-author', () => {
     fetchMock.mockResolvedValueOnce({ name: 'Анна' });
 
     const response = await GET(
-      new Request('http://localhost/api/blog-author?name=%D0%90%D0%BD%D0%BD%D0%B0&locale=uk')
+      new Request(
+        'http://localhost/api/blog-author?name=%D0%90%D0%BD%D0%BD%D0%B0&locale=uk'
+      )
     );
     const data = await response.json();
 
diff --git a/frontend/lib/tests/blog/blog-search-route.test.ts b/frontend/lib/tests/blog/blog-search-route.test.ts
index 06eda6a8..c40441c9 100644
--- a/frontend/lib/tests/blog/blog-search-route.test.ts
+++ b/frontend/lib/tests/blog/blog-search-route.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
+import { afterEach,describe, expect, it, vi } from 'vitest';
 
 const fetchMock = vi.fn();
 
@@ -27,7 +27,9 @@ describe('GET /api/blog-search', () => {
     );
     const data = await response.json();
 
-    expect(fetchMock).toHaveBeenCalledWith(expect.any(String), { locale: 'uk' });
+    expect(fetchMock).toHaveBeenCalledWith(expect.any(String), {
+      locale: 'uk',
+    });
     expect(data).toHaveLength(1);
     expect(data[0].title).toBe('Post');
   });
diff --git a/frontend/lib/tests/factories/quiz/quiz.ts b/frontend/lib/tests/factories/quiz/quiz.ts
index d83d7e8b..82752552 100644
--- a/frontend/lib/tests/factories/quiz/quiz.ts
+++ b/frontend/lib/tests/factories/quiz/quiz.ts
@@ -32,7 +32,9 @@ let questionCounter = 0;
 /**
  * Creates a mock question with one correct answer
  */
-export function createMockQuestion(overrides?: Partial<MockQuestion>): MockQuestion {
+export function createMockQuestion(
+  overrides?: Partial<MockQuestion>
+): MockQuestion {
   questionCounter++;
   const qId = `q-${questionCounter}`;
 
diff --git a/frontend/lib/tests/helpers/makeCheckoutReq.ts b/frontend/lib/tests/helpers/makeCheckoutReq.ts
index 72abb811..76493b5c 100644
--- a/frontend/lib/tests/helpers/makeCheckoutReq.ts
+++ b/frontend/lib/tests/helpers/makeCheckoutReq.ts
@@ -1,4 +1,5 @@
 import { NextRequest } from 'next/server';
+
 import { deriveTestIpFromIdemKey } from '@/lib/tests/helpers/ip';
 
 export type CheckoutItemInput = {
diff --git a/frontend/lib/tests/q&a/questions-route.test.ts b/frontend/lib/tests/q&a/questions-route.test.ts
index fae43044..ec21e5df 100644
--- a/frontend/lib/tests/q&a/questions-route.test.ts
+++ b/frontend/lib/tests/q&a/questions-route.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('@/db', () => ({
   db: {
@@ -6,8 +6,8 @@ vi.mock('@/db', () => ({
   },
 }));
 
-import { db } from '@/db';
 import { GET } from '@/app/api/questions/[category]/route';
+import { db } from '@/db';
 
 type Builder = {
   from: ReturnType<typeof vi.fn>;
diff --git a/frontend/lib/tests/quiz/guest-quiz.test.ts b/frontend/lib/tests/quiz/guest-quiz.test.ts
index ae225595..ce310677 100644
--- a/frontend/lib/tests/quiz/guest-quiz.test.ts
+++ b/frontend/lib/tests/quiz/guest-quiz.test.ts
@@ -1,9 +1,10 @@
 // @vitest-environment jsdom
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import {
-  savePendingQuizResult,
-  getPendingQuizResult,
   clearPendingQuizResult,
+  getPendingQuizResult,
+  savePendingQuizResult,
 } from '@/lib/quiz/guest-quiz';
 
 describe('guest-quiz storage', () => {
@@ -92,7 +93,10 @@ describe('guest-quiz storage', () => {
   });
 
   it('clears pending quiz result', () => {
-    localStorage.setItem('devlovers_pending_quiz', JSON.stringify({ quizId: 'q1' }));
+    localStorage.setItem(
+      'devlovers_pending_quiz',
+      JSON.stringify({ quizId: 'q1' })
+    );
 
     clearPendingQuizResult();
 
diff --git a/frontend/lib/tests/quiz/guest-result-route.test.ts b/frontend/lib/tests/quiz/guest-result-route.test.ts
index 45296717..ad92d7e1 100644
--- a/frontend/lib/tests/quiz/guest-result-route.test.ts
+++ b/frontend/lib/tests/quiz/guest-result-route.test.ts
@@ -1,4 +1,5 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { POST } from '@/app/api/quiz/guest-result/route';
 
 vi.mock('@/lib/auth', () => ({
@@ -17,9 +18,9 @@ vi.mock('@/db', () => ({
   },
 }));
 
-import { getCurrentUser } from '@/lib/auth';
-import { calculateQuizPoints, awardQuizPoints } from '@/db/queries/points';
 import { db } from '@/db';
+import { awardQuizPoints,calculateQuizPoints } from '@/db/queries/points';
+import { getCurrentUser } from '@/lib/auth';
 
 const getCurrentUserMock = getCurrentUser as ReturnType<typeof vi.fn>;
 const calculateQuizPointsMock = calculateQuizPoints as ReturnType<typeof vi.fn>;
@@ -135,7 +136,9 @@ describe('POST /api/quiz/guest-result', () => {
     awardQuizPointsMock.mockResolvedValue(7);
 
     selectMock
-      .mockImplementationOnce(() => makeSelectChain([{ id: 'q1' }, { id: 'q2' }]))
+      .mockImplementationOnce(() =>
+        makeSelectChain([{ id: 'q1' }, { id: 'q2' }])
+      )
       .mockImplementationOnce(() =>
         makeSelectChain([
           { id: 'a1', quizQuestionId: 'q1', isCorrect: true },
diff --git a/frontend/lib/tests/quiz/quiz-anticheat.test.ts b/frontend/lib/tests/quiz/quiz-anticheat.test.ts
index ea5967df..2e1351ff 100644
--- a/frontend/lib/tests/quiz/quiz-anticheat.test.ts
+++ b/frontend/lib/tests/quiz/quiz-anticheat.test.ts
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
+import { act,renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 // Mock next-intl before importing the hook
 vi.mock('next-intl', () => ({
@@ -14,9 +14,10 @@ vi.mock('sonner', () => ({
   },
 }));
 
-import { useAntiCheat } from '@/hooks/useAntiCheat';
 import { toast } from 'sonner';
 
+import { useAntiCheat } from '@/hooks/useAntiCheat';
+
 describe('useAntiCheat', () => {
   beforeEach(() => {
     vi.useFakeTimers();
@@ -45,7 +46,9 @@ describe('useAntiCheat', () => {
 
       expect(result.current.violationsCount).toBe(1);
       expect(result.current.violations[0].type).toBe('copy');
-      expect(toast.warning).toHaveBeenCalledWith('translated:copy', { duration: 3000 });
+      expect(toast.warning).toHaveBeenCalledWith('translated:copy', {
+        duration: 3000,
+      });
     });
 
     it('detects paste event and adds violation', () => {
@@ -64,7 +67,10 @@ describe('useAntiCheat', () => {
       const { result } = renderHook(() => useAntiCheat(true));
 
       act(() => {
-        const event = new Event('contextmenu', { bubbles: true, cancelable: true });
+        const event = new Event('contextmenu', {
+          bubbles: true,
+          cancelable: true,
+        });
         document.dispatchEvent(event);
       });
 
@@ -111,18 +117,17 @@ describe('useAntiCheat', () => {
     });
 
     it('sets showWarning to true when violation occurs', () => {
-        const { result } = renderHook(() => useAntiCheat(true));
+      const { result } = renderHook(() => useAntiCheat(true));
 
-        expect(result.current.showWarning).toBe(false);
+      expect(result.current.showWarning).toBe(false);
 
-        act(() => {
-            document.dispatchEvent(new Event('copy'));
-        });
+      act(() => {
+        document.dispatchEvent(new Event('copy'));
+      });
 
-        expect(result.current.showWarning).toBe(true);
+      expect(result.current.showWarning).toBe(true);
     });
 
-
     it('resetViolations clears all violations', () => {
       const { result } = renderHook(() => useAntiCheat(true));
 
@@ -165,10 +170,22 @@ describe('useAntiCheat', () => {
 
       unmount();
 
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('copy', expect.any(Function));
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('paste', expect.any(Function));
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('contextmenu', expect.any(Function));
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('visibilitychange', expect.any(Function));
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'copy',
+        expect.any(Function)
+      );
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'paste',
+        expect.any(Function)
+      );
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'contextmenu',
+        expect.any(Function)
+      );
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'visibilitychange',
+        expect.any(Function)
+      );
 
       removeEventListenerSpy.mockRestore();
     });
diff --git a/frontend/lib/tests/quiz/quiz-crypto.test.ts b/frontend/lib/tests/quiz/quiz-crypto.test.ts
index 84370f6b..5c414b9a 100644
--- a/frontend/lib/tests/quiz/quiz-crypto.test.ts
+++ b/frontend/lib/tests/quiz/quiz-crypto.test.ts
@@ -1,15 +1,17 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { afterEach,beforeEach, describe, expect, it } from 'vitest';
+
 import {
-  encryptAnswers,
-  decryptAnswers,
   createEncryptedAnswersBlob,
+  decryptAnswers,
+  encryptAnswers,
 } from '@/lib/quiz/quiz-crypto';
-import { setupQuizTestEnv, cleanupQuizTestEnv } from './setup';
+
 import {
-  createMockQuestions,
   createCorrectAnswersMap,
+  createMockQuestions,
   resetFactoryCounters,
 } from '../factories/quiz/quiz';
+import { cleanupQuizTestEnv,setupQuizTestEnv } from './setup';
 
 describe('quiz-crypto', () => {
   // Setup: set encryption key before each test
diff --git a/frontend/lib/tests/quiz/quiz-session.test.ts b/frontend/lib/tests/quiz/quiz-session.test.ts
index 8b204578..476544de 100644
--- a/frontend/lib/tests/quiz/quiz-session.test.ts
+++ b/frontend/lib/tests/quiz/quiz-session.test.ts
@@ -1,11 +1,16 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import {
-  saveQuizSession,
-  loadQuizSession,
   clearQuizSession,
+  loadQuizSession,
+  saveQuizSession,
 } from '@/lib/quiz/quiz-session';
+
+import {
+  createMockQuizSession,
+  resetFactoryCounters,
+} from '../factories/quiz/quiz';
 import { installMockLocalStorage } from './setup';
-import { createMockQuizSession, resetFactoryCounters } from '../factories/quiz/quiz';
 
 describe('quiz-session', () => {
   beforeEach(() => {
@@ -71,12 +76,9 @@ describe('quiz-session', () => {
         savedAt: thirtyOneMinutesAgo,
         status: 'in_progress',
       });
-      
+
       // Directly set localStorage to bypass saveQuizSession's timestamp update
-      localStorage.setItem(
-        'quiz_session_quiz-123',
-        JSON.stringify(session)
-      );
+      localStorage.setItem('quiz_session_quiz-123', JSON.stringify(session));
 
       const loaded = loadQuizSession('quiz-123');
 
@@ -89,11 +91,8 @@ describe('quiz-session', () => {
         savedAt: twentyMinutesAgo,
         status: 'in_progress',
       });
-      
-      localStorage.setItem(
-        'quiz_session_quiz-123',
-        JSON.stringify(session)
-      );
+
+      localStorage.setItem('quiz_session_quiz-123', JSON.stringify(session));
 
       const loaded = loadQuizSession('quiz-123');
 
@@ -127,10 +126,7 @@ describe('quiz-session', () => {
     it('clears expired session from storage', () => {
       const thirtyOneMinutesAgo = Date.now() - 31 * 60 * 1000;
       const session = createMockQuizSession({ savedAt: thirtyOneMinutesAgo });
-      localStorage.setItem(
-        'quiz_session_quiz-123',
-        JSON.stringify(session)
-      );
+      localStorage.setItem('quiz_session_quiz-123', JSON.stringify(session));
 
       loadQuizSession('quiz-123');
 
diff --git a/frontend/lib/tests/quiz/quiz-setup.test.ts b/frontend/lib/tests/quiz/quiz-setup.test.ts
index 3f4b1004..c96245b7 100644
--- a/frontend/lib/tests/quiz/quiz-setup.test.ts
+++ b/frontend/lib/tests/quiz/quiz-setup.test.ts
@@ -1,15 +1,16 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { afterEach,beforeEach, describe, expect, it } from 'vitest';
+
 import {
+  createCorrectAnswersMap,
   createMockQuestion,
   createMockQuestions,
   createMockQuizSession,
-  createCorrectAnswersMap,
   resetFactoryCounters,
 } from '../factories/quiz/quiz';
 import {
-  setupQuizTestEnv,
   cleanupQuizTestEnv,
   installMockLocalStorage,
+  setupQuizTestEnv,
   TEST_ENCRYPTION_KEY,
 } from './setup';
 
diff --git a/frontend/lib/tests/quiz/quiz-slug-route.test.ts b/frontend/lib/tests/quiz/quiz-slug-route.test.ts
index 23e814a7..c41e64c7 100644
--- a/frontend/lib/tests/quiz/quiz-slug-route.test.ts
+++ b/frontend/lib/tests/quiz/quiz-slug-route.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { NextRequest } from 'next/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('@/db/queries/quiz', () => ({
   getQuizBySlug: vi.fn(),
@@ -10,7 +10,9 @@ import { GET } from '@/app/api/quiz/[slug]/route';
 import { getQuizBySlug, getQuizQuestionsRandomized } from '@/db/queries/quiz';
 
 const getQuizBySlugMock = getQuizBySlug as ReturnType<typeof vi.fn>;
-const getQuizQuestionsRandomizedMock = getQuizQuestionsRandomized as ReturnType<typeof vi.fn>;
+const getQuizQuestionsRandomizedMock = getQuizQuestionsRandomized as ReturnType<
+  typeof vi.fn
+>;
 
 describe('GET /api/quiz/[slug]', () => {
   beforeEach(() => {
@@ -20,8 +22,12 @@ describe('GET /api/quiz/[slug]', () => {
   it('returns 404 when quiz not found', async () => {
     getQuizBySlugMock.mockResolvedValue(null);
 
-    const request = new NextRequest('http://localhost/api/quiz/react?locale=en');
-    const response = await GET(request, { params: Promise.resolve({ slug: 'react' }) });
+    const request = new NextRequest(
+      'http://localhost/api/quiz/react?locale=en'
+    );
+    const response = await GET(request, {
+      params: Promise.resolve({ slug: 'react' }),
+    });
 
     const data = await response.json();
 
@@ -47,13 +53,22 @@ describe('GET /api/quiz/[slug]', () => {
         questionText: 'Question 1',
         explanation: null,
         answers: [
-          { id: 'a1', displayOrder: 1, isCorrect: true, answerText: 'Answer 1' },
+          {
+            id: 'a1',
+            displayOrder: 1,
+            isCorrect: true,
+            answerText: 'Answer 1',
+          },
         ],
       },
     ]);
 
-    const request = new NextRequest('http://localhost/api/quiz/react?locale=en');
-    const response = await GET(request, { params: Promise.resolve({ slug: 'react' }) });
+    const request = new NextRequest(
+      'http://localhost/api/quiz/react?locale=en'
+    );
+    const response = await GET(request, {
+      params: Promise.resolve({ slug: 'react' }),
+    });
 
     const data = await response.json();
 
@@ -83,8 +98,12 @@ describe('GET /api/quiz/[slug]', () => {
   it('returns 500 on unexpected error', async () => {
     getQuizBySlugMock.mockRejectedValue(new Error('db error'));
     const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    const request = new NextRequest('http://localhost/api/quiz/react?locale=en');
-    const response = await GET(request, { params: Promise.resolve({ slug: 'react' }) });
+    const request = new NextRequest(
+      'http://localhost/api/quiz/react?locale=en'
+    );
+    const response = await GET(request, {
+      params: Promise.resolve({ slug: 'react' }),
+    });
 
     const data = await response.json();
 
diff --git a/frontend/lib/tests/quiz/setup.ts b/frontend/lib/tests/quiz/setup.ts
index 237e1b38..22ac7a72 100644
--- a/frontend/lib/tests/quiz/setup.ts
+++ b/frontend/lib/tests/quiz/setup.ts
@@ -1,4 +1,4 @@
-import { vi, beforeEach, afterEach } from 'vitest';
+import { afterEach,beforeEach, vi } from 'vitest';
 
 /**
  * 32-byte hex key for AES-256 (64 hex characters)
diff --git a/frontend/lib/tests/quiz/use-quiz-guards.test.ts b/frontend/lib/tests/quiz/use-quiz-guards.test.ts
index 62fe0763..b101ff6c 100644
--- a/frontend/lib/tests/quiz/use-quiz-guards.test.ts
+++ b/frontend/lib/tests/quiz/use-quiz-guards.test.ts
@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
+import { act,renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { useQuizGuards } from '@/hooks/useQuizGuards';
 import { getQuizReloadKey } from '@/lib/quiz/quiz-storage-keys';
 
@@ -10,12 +11,14 @@ vi.mock('@/lib/quiz/quiz-session', () => ({
 
 import { clearQuizSession } from '@/lib/quiz/quiz-session';
 
-const createParams = (overrides: Partial<{
-  quizId: string;
-  status: 'rules' | 'in_progress' | 'completed';
-  onExit: () => void;
-  resetViolations: () => void;
-}> = {}) => ({
+const createParams = (
+  overrides: Partial<{
+    quizId: string;
+    status: 'rules' | 'in_progress' | 'completed';
+    onExit: () => void;
+    resetViolations: () => void;
+  }> = {}
+) => ({
   quizId: 'quiz-1',
   status: 'in_progress' as const,
   onExit: vi.fn(),
@@ -41,9 +44,7 @@ describe('useQuizGuards', () => {
   });
 
   it('does not push guard when status is not in_progress', () => {
-    renderHook(() =>
-      useQuizGuards(createParams({ status: 'rules' }))
-    );
+    renderHook(() => useQuizGuards(createParams({ status: 'rules' })));
 
     expect(window.history.state?.quizGuard).toBeUndefined();
   });
@@ -66,7 +67,7 @@ describe('useQuizGuards', () => {
     const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
 
     renderHook(() => useQuizGuards(params));
-    
+
     window.history.pushState({}, '', '/en/quizzes');
     const link = document.createElement('a');
     link.setAttribute('href', 'javascript:void(0)');
diff --git a/frontend/lib/tests/quiz/use-quiz-session.test.ts b/frontend/lib/tests/quiz/use-quiz-session.test.ts
index 9d91a904..2a2b7dc3 100644
--- a/frontend/lib/tests/quiz/use-quiz-session.test.ts
+++ b/frontend/lib/tests/quiz/use-quiz-session.test.ts
@@ -1,8 +1,12 @@
 // @vitest-environment jsdom
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { renderHook, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { useQuizSession } from '@/hooks/useQuizSession';
-import { QUIZ_ALLOW_RESTORE_KEY, getQuizReloadKey } from '@/lib/quiz/quiz-storage-keys';
+import {
+  getQuizReloadKey,
+  QUIZ_ALLOW_RESTORE_KEY,
+} from '@/lib/quiz/quiz-storage-keys';
 
 vi.mock('@/lib/quiz/quiz-session', () => ({
   saveQuizSession: vi.fn(),
@@ -10,7 +14,11 @@ vi.mock('@/lib/quiz/quiz-session', () => ({
   clearQuizSession: vi.fn(),
 }));
 
-import { saveQuizSession, loadQuizSession, clearQuizSession } from '@/lib/quiz/quiz-session';
+import {
+  clearQuizSession,
+  loadQuizSession,
+  saveQuizSession,
+} from '@/lib/quiz/quiz-session';
 
 type QuizState = {
   status: 'rules' | 'in_progress' | 'completed';
@@ -48,7 +56,6 @@ describe('useQuizSession', () => {
     vi.clearAllMocks();
   });
 
-
   it('restores session on reload', async () => {
     const onRestore = vi.fn();
     const reloadKey = getQuizReloadKey(quizId);
@@ -64,7 +71,9 @@ describe('useQuizSession', () => {
       savedAt: Date.now(),
     });
 
-    renderHook(() => useQuizSession({ quizId, state: createState(), onRestore }));
+    renderHook(() =>
+      useQuizSession({ quizId, state: createState(), onRestore })
+    );
 
     await waitFor(() => expect(onRestore).toHaveBeenCalledTimes(1));
     expect(clearMock).not.toHaveBeenCalled();
@@ -85,7 +94,9 @@ describe('useQuizSession', () => {
       savedAt: Date.now(),
     });
 
-    renderHook(() => useQuizSession({ quizId, state: createState(), onRestore }));
+    renderHook(() =>
+      useQuizSession({ quizId, state: createState(), onRestore })
+    );
 
     await waitFor(() => expect(onRestore).toHaveBeenCalledTimes(1));
     expect(clearMock).not.toHaveBeenCalled();
@@ -105,7 +116,9 @@ describe('useQuizSession', () => {
       savedAt: Date.now(),
     });
 
-    renderHook(() => useQuizSession({ quizId, state: createState(), onRestore }));
+    renderHook(() =>
+      useQuizSession({ quizId, state: createState(), onRestore })
+    );
 
     await waitFor(() => expect(clearMock).toHaveBeenCalledWith(quizId));
     expect(onRestore).not.toHaveBeenCalled();
@@ -116,7 +129,9 @@ describe('useQuizSession', () => {
 
     loadMock.mockReturnValue(null);
 
-    renderHook(() => useQuizSession({ quizId, state: createState(), onRestore }));
+    renderHook(() =>
+      useQuizSession({ quizId, state: createState(), onRestore })
+    );
 
     await waitFor(() => {
       expect(onRestore).not.toHaveBeenCalled();
@@ -175,7 +190,9 @@ describe('useQuizSession', () => {
   it('does not save session when status is not in_progress', async () => {
     const onRestore = vi.fn();
 
-    renderHook(() => useQuizSession({ quizId, state: createState(), onRestore }));
+    renderHook(() =>
+      useQuizSession({ quizId, state: createState(), onRestore })
+    );
 
     await waitFor(() => expect(saveMock).not.toHaveBeenCalled());
   });
diff --git a/frontend/lib/tests/quiz/verify-answer.test.ts b/frontend/lib/tests/quiz/verify-answer.test.ts
index 8bccbd60..2b8f380e 100644
--- a/frontend/lib/tests/quiz/verify-answer.test.ts
+++ b/frontend/lib/tests/quiz/verify-answer.test.ts
@@ -1,13 +1,15 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { NextRequest } from 'next/server';
+import { afterEach,beforeEach, describe, expect, it } from 'vitest';
+
 import { POST } from '@/app/api/quiz/verify-answer/route';
 import { encryptAnswers } from '@/lib/quiz/quiz-crypto';
-import { setupQuizTestEnv, cleanupQuizTestEnv } from './setup';
+
 import {
-  createMockQuestions,
   createCorrectAnswersMap,
+  createMockQuestions,
   resetFactoryCounters,
 } from '../factories/quiz/quiz';
+import { cleanupQuizTestEnv,setupQuizTestEnv } from './setup';
 
 /**
  * Creates a mock NextRequest for POST /api/quiz/verify-answer
diff --git a/frontend/lib/tests/shop/admin-api-killswitch.test.ts b/frontend/lib/tests/shop/admin-api-killswitch.test.ts
index 63afdaad..9e030ad7 100644
--- a/frontend/lib/tests/shop/admin-api-killswitch.test.ts
+++ b/frontend/lib/tests/shop/admin-api-killswitch.test.ts
@@ -1,6 +1,6 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { vi } from 'vitest';
 import { NextRequest } from 'next/server';
+import { afterEach,beforeEach, describe, expect, it } from 'vitest';
+import { vi } from 'vitest';
 
 const BASE_URL = 'http://localhost';
 
diff --git a/frontend/lib/tests/shop/admin-csrf-contract.test.ts b/frontend/lib/tests/shop/admin-csrf-contract.test.ts
index fd920796..3312e906 100644
--- a/frontend/lib/tests/shop/admin-csrf-contract.test.ts
+++ b/frontend/lib/tests/shop/admin-csrf-contract.test.ts
@@ -1,5 +1,5 @@
-import { describe, expect, it, vi } from 'vitest';
 import { NextRequest } from 'next/server';
+import { describe, expect, it, vi } from 'vitest';
 
 vi.mock('@/lib/auth/admin', () => {
   class AdminApiDisabledError extends Error {
diff --git a/frontend/lib/tests/shop/admin-product-patch-price-config-error-contract.test.ts b/frontend/lib/tests/shop/admin-product-patch-price-config-error-contract.test.ts
index edd6bffe..785ff55e 100644
--- a/frontend/lib/tests/shop/admin-product-patch-price-config-error-contract.test.ts
+++ b/frontend/lib/tests/shop/admin-product-patch-price-config-error-contract.test.ts
@@ -1,5 +1,6 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { NextRequest } from 'next/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { PriceConfigError } from '@/lib/services/errors';
 
 vi.mock('@/lib/auth/admin', () => ({
diff --git a/frontend/lib/tests/shop/admin-product-sale-contract.test.ts b/frontend/lib/tests/shop/admin-product-sale-contract.test.ts
index 4887bc1b..716b8660 100644
--- a/frontend/lib/tests/shop/admin-product-sale-contract.test.ts
+++ b/frontend/lib/tests/shop/admin-product-sale-contract.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { NextRequest } from 'next/server';
+import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
 
 const { getCurrentUserMock, parseAdminProductFormMock } = vi.hoisted(() => ({
   getCurrentUserMock: vi.fn(async () => ({
diff --git a/frontend/lib/tests/shop/cart-rehydrate-variant-sanitize.test.ts b/frontend/lib/tests/shop/cart-rehydrate-variant-sanitize.test.ts
index 112134d0..49e933d7 100644
--- a/frontend/lib/tests/shop/cart-rehydrate-variant-sanitize.test.ts
+++ b/frontend/lib/tests/shop/cart-rehydrate-variant-sanitize.test.ts
@@ -1,9 +1,10 @@
-import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 import crypto from 'node:crypto';
+
 import { eq } from 'drizzle-orm';
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 
 import { db } from '@/db';
-import { products, productPrices } from '@/db/schema';
+import { productPrices,products } from '@/db/schema';
 import { rehydrateCartItems } from '@/lib/services/products';
 
 let productId: string;
diff --git a/frontend/lib/tests/shop/checkout-concurrency-stock1.test.ts b/frontend/lib/tests/shop/checkout-concurrency-stock1.test.ts
index 8bfdb1a4..ead8ad5f 100644
--- a/frontend/lib/tests/shop/checkout-concurrency-stock1.test.ts
+++ b/frontend/lib/tests/shop/checkout-concurrency-stock1.test.ts
@@ -1,15 +1,15 @@
-import { describe, it, expect, beforeAll, afterAll, vi } from 'vitest';
 import crypto from 'crypto';
-import { NextRequest } from 'next/server';
 import { eq, inArray } from 'drizzle-orm';
+import { NextRequest } from 'next/server';
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
 
 import { db } from '@/db';
 import {
-  products,
-  productPrices,
-  orders,
-  orderItems,
   inventoryMoves,
+  orderItems,
+  orders,
+  productPrices,
+  products,
 } from '@/db/schema/shop';
 
 vi.mock('@/lib/auth', async () => {
@@ -252,7 +252,7 @@ describe('P0-8.10.1 checkout concurrency: stock=1, two parallel checkouts', () =
       // In CI we fail fast so flakes are visible.
       if (process.env.CI) throw err;
 
-      // eslint-disable-next-line no-console
+       
       console.warn('checkout concurrency cleanup failed', err);
     }
   }, 30000);
diff --git a/frontend/lib/tests/shop/checkout-currency-policy.test.ts b/frontend/lib/tests/shop/checkout-currency-policy.test.ts
index 0af8357c..f9ad2394 100644
--- a/frontend/lib/tests/shop/checkout-currency-policy.test.ts
+++ b/frontend/lib/tests/shop/checkout-currency-policy.test.ts
@@ -1,7 +1,7 @@
-import { describe, it, expect, beforeAll, afterAll, vi } from 'vitest';
+import crypto from 'crypto';
 import { inArray } from 'drizzle-orm';
 import { NextRequest } from 'next/server';
-import crypto from 'crypto';
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
 
 process.env.STRIPE_PAYMENTS_ENABLED = 'false';
 process.env.STRIPE_SECRET_KEY = '';
@@ -51,7 +51,7 @@ vi.mock('@/lib/logging', async () => {
 });
 
 import { db } from '@/db';
-import { products, productPrices, orders } from '@/db/schema';
+import { orders,productPrices, products } from '@/db/schema';
 
 let POST: (req: NextRequest) => Promise<Response>;
 
diff --git a/frontend/lib/tests/shop/checkout-no-payments.test.ts b/frontend/lib/tests/shop/checkout-no-payments.test.ts
index a0648620..46c938cd 100644
--- a/frontend/lib/tests/shop/checkout-no-payments.test.ts
+++ b/frontend/lib/tests/shop/checkout-no-payments.test.ts
@@ -2,11 +2,12 @@
 import crypto from 'crypto';
 import { eq, sql } from 'drizzle-orm';
 import { NextRequest } from 'next/server';
-import { deriveTestIpFromIdemKey } from '@/lib/tests/helpers/ip';
+import { afterAll,beforeAll, describe, expect, it, vi } from 'vitest';
+
 import { db } from '@/db';
-import { orders, products, productPrices } from '@/db/schema';
+import { orders, productPrices,products } from '@/db/schema';
 import { toDbMoney } from '@/lib/shop/money';
-import { describe, it, expect, vi, beforeAll, afterAll } from 'vitest';
+import { deriveTestIpFromIdemKey } from '@/lib/tests/helpers/ip';
 
 const __prevRateLimitDisabled = process.env.RATE_LIMIT_DISABLED;
 
diff --git a/frontend/lib/tests/shop/checkout-origin-posture-contract.test.ts b/frontend/lib/tests/shop/checkout-origin-posture-contract.test.ts
index df22d2b8..5c1464b8 100644
--- a/frontend/lib/tests/shop/checkout-origin-posture-contract.test.ts
+++ b/frontend/lib/tests/shop/checkout-origin-posture-contract.test.ts
@@ -1,4 +1,5 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect,it } from 'vitest';
+
 import { POST } from '@/app/api/shop/checkout/route';
 import { makeCheckoutReq } from '@/lib/tests/helpers/makeCheckoutReq';
 
diff --git a/frontend/lib/tests/shop/checkout-set-payment-intent-reject-contract.test.ts b/frontend/lib/tests/shop/checkout-set-payment-intent-reject-contract.test.ts
index a77bbaf5..be239eaf 100644
--- a/frontend/lib/tests/shop/checkout-set-payment-intent-reject-contract.test.ts
+++ b/frontend/lib/tests/shop/checkout-set-payment-intent-reject-contract.test.ts
@@ -1,15 +1,16 @@
 import {
+  afterAll,
+  beforeAll,
+  beforeEach,
   describe,
-  it,
   expect,
+  it,
   vi,
-  beforeEach,
-  beforeAll,
-  afterAll,
 } from 'vitest';
-import { makeCheckoutReq } from '@/lib/tests/helpers/makeCheckoutReq';
+
 import { InvalidPayloadError } from '@/lib/services/errors';
 import { ensureStripePaymentIntentForOrder } from '@/lib/services/orders/payment-attempts';
+import { makeCheckoutReq } from '@/lib/tests/helpers/makeCheckoutReq';
 
 vi.mock('@/lib/env/stripe', () => ({
   getStripeEnv: () => ({
@@ -63,8 +64,8 @@ vi.mock('@/lib/services/orders/payment-attempts', async () => {
 import { POST } from '@/app/api/shop/checkout/route';
 import {
   createOrderWithItems,
-  setOrderPaymentIntent,
   restockOrder,
+  setOrderPaymentIntent,
 } from '@/lib/services/orders';
 
 type MockedFn = ReturnType<typeof vi.fn>;
diff --git a/frontend/lib/tests/shop/checkout-stripe-error-contract.test.ts b/frontend/lib/tests/shop/checkout-stripe-error-contract.test.ts
index 5f6bb582..e897fced 100644
--- a/frontend/lib/tests/shop/checkout-stripe-error-contract.test.ts
+++ b/frontend/lib/tests/shop/checkout-stripe-error-contract.test.ts
@@ -1,12 +1,13 @@
 import {
+  afterAll,
+  beforeAll,
+  beforeEach,
   describe,
-  it,
   expect,
+  it,
   vi,
-  beforeEach,
-  beforeAll,
-  afterAll,
 } from 'vitest';
+
 import { makeCheckoutReq } from '@/lib/tests/helpers/makeCheckoutReq';
 
 vi.mock('@/lib/env/stripe', () => ({
diff --git a/frontend/lib/tests/shop/currency.test.ts b/frontend/lib/tests/shop/currency.test.ts
index 990df2e8..be16e77b 100644
--- a/frontend/lib/tests/shop/currency.test.ts
+++ b/frontend/lib/tests/shop/currency.test.ts
@@ -1,45 +1,46 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from 'vitest';
+
 import {
   parsePrimaryLocaleFromAcceptLanguage,
   resolveCurrencyFromHeaders,
   resolveCurrencyFromLocale,
-} from "../../shop/currency";
+} from '../../shop/currency';
 
-describe("currency policy (CUR-0 / D1)", () => {
-  it("uk -> UAH", () => {
-    expect(resolveCurrencyFromLocale("uk")).toBe("UAH");
-    expect(resolveCurrencyFromLocale("uk-UA")).toBe("UAH");
-    expect(resolveCurrencyFromLocale("uk_UA")).toBe("UAH");
-    expect(resolveCurrencyFromLocale("UK-ua")).toBe("UAH");
+describe('currency policy (CUR-0 / D1)', () => {
+  it('uk -> UAH', () => {
+    expect(resolveCurrencyFromLocale('uk')).toBe('UAH');
+    expect(resolveCurrencyFromLocale('uk-UA')).toBe('UAH');
+    expect(resolveCurrencyFromLocale('uk_UA')).toBe('UAH');
+    expect(resolveCurrencyFromLocale('UK-ua')).toBe('UAH');
   });
 
-  it("non-uk -> USD", () => {
-    expect(resolveCurrencyFromLocale("en")).toBe("USD");
-    expect(resolveCurrencyFromLocale("pl-PL")).toBe("USD");
-    expect(resolveCurrencyFromLocale(null)).toBe("USD");
-    expect(resolveCurrencyFromLocale(undefined)).toBe("USD");
-    expect(resolveCurrencyFromLocale("")).toBe("USD");
+  it('non-uk -> USD', () => {
+    expect(resolveCurrencyFromLocale('en')).toBe('USD');
+    expect(resolveCurrencyFromLocale('pl-PL')).toBe('USD');
+    expect(resolveCurrencyFromLocale(null)).toBe('USD');
+    expect(resolveCurrencyFromLocale(undefined)).toBe('USD');
+    expect(resolveCurrencyFromLocale('')).toBe('USD');
   });
 
-  it("parses primary locale from Accept-Language", () => {
+  it('parses primary locale from Accept-Language', () => {
     expect(
-      parsePrimaryLocaleFromAcceptLanguage("uk-UA,uk;q=0.9,en-US;q=0.8")
-    ).toBe("uk-UA");
-    expect(parsePrimaryLocaleFromAcceptLanguage("en-US")).toBe("en-US");
-    expect(parsePrimaryLocaleFromAcceptLanguage("")).toBe(null);
+      parsePrimaryLocaleFromAcceptLanguage('uk-UA,uk;q=0.9,en-US;q=0.8')
+    ).toBe('uk-UA');
+    expect(parsePrimaryLocaleFromAcceptLanguage('en-US')).toBe('en-US');
+    expect(parsePrimaryLocaleFromAcceptLanguage('')).toBe(null);
     expect(parsePrimaryLocaleFromAcceptLanguage(null)).toBe(null);
   });
 
-  it("resolves from headers only (Accept-Language)", () => {
+  it('resolves from headers only (Accept-Language)', () => {
     const h1 = new Headers({
-      "accept-language": "uk-UA,uk;q=0.9,en-US;q=0.8",
+      'accept-language': 'uk-UA,uk;q=0.9,en-US;q=0.8',
     });
-    expect(resolveCurrencyFromHeaders(h1)).toBe("UAH");
+    expect(resolveCurrencyFromHeaders(h1)).toBe('UAH');
 
-    const h2 = new Headers({ "accept-language": "en-US,en;q=0.9" });
-    expect(resolveCurrencyFromHeaders(h2)).toBe("USD");
+    const h2 = new Headers({ 'accept-language': 'en-US,en;q=0.9' });
+    expect(resolveCurrencyFromHeaders(h2)).toBe('USD');
 
     const h3 = new Headers();
-    expect(resolveCurrencyFromHeaders(h3)).toBe("USD");
+    expect(resolveCurrencyFromHeaders(h3)).toBe('USD');
   });
 });
diff --git a/frontend/lib/tests/shop/format-money.test.ts b/frontend/lib/tests/shop/format-money.test.ts
index f76bbc1f..57d81ea2 100644
--- a/frontend/lib/tests/shop/format-money.test.ts
+++ b/frontend/lib/tests/shop/format-money.test.ts
@@ -1,14 +1,15 @@
-import { describe, expect, it } from "vitest";
-import { formatMoney } from "@/lib/shop/currency";
+import { describe, expect, it } from 'vitest';
 
-describe("formatMoney", () => {
-  it("formats USD with $ for en", () => {
-    const s = formatMoney(1999, "USD", "en");
-    expect(s).toContain("$");
+import { formatMoney } from '@/lib/shop/currency';
+
+describe('formatMoney', () => {
+  it('formats USD with $ for en', () => {
+    const s = formatMoney(1999, 'USD', 'en');
+    expect(s).toContain('$');
   });
 
-  it("formats UAH with ₴ for uk", () => {
-    const s = formatMoney(1999, "UAH", "uk");
-    expect(s).toContain("₴");
+  it('formats UAH with ₴ for uk', () => {
+    const s = formatMoney(1999, 'UAH', 'uk');
+    expect(s).toContain('₴');
   });
 });
diff --git a/frontend/lib/tests/shop/order-items-variants.test.ts b/frontend/lib/tests/shop/order-items-variants.test.ts
index be5f5d4b..3a891a19 100644
--- a/frontend/lib/tests/shop/order-items-variants.test.ts
+++ b/frontend/lib/tests/shop/order-items-variants.test.ts
@@ -1,9 +1,9 @@
-import { describe, it, expect } from 'vitest';
 import crypto from 'crypto';
 import { eq, sql } from 'drizzle-orm';
+import { describe, expect,it } from 'vitest';
 
 import { db } from '@/db';
-import { products, productPrices, orders, orderItems } from '@/db/schema/shop';
+import { orderItems,orders, productPrices, products } from '@/db/schema/shop';
 import { createOrderWithItems } from '@/lib/services/orders';
 
 describe('order_items variants (selected_size/selected_color)', () => {
diff --git a/frontend/lib/tests/shop/orders-access.test.ts b/frontend/lib/tests/shop/orders-access.test.ts
index ba33e0e2..21bbd861 100644
--- a/frontend/lib/tests/shop/orders-access.test.ts
+++ b/frontend/lib/tests/shop/orders-access.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { NextRequest } from 'next/server';
+import { beforeEach,describe, expect, it, vi } from 'vitest';
 
 vi.mock('@/lib/auth', () => ({
   getCurrentUser: vi.fn(),
@@ -11,8 +11,8 @@ vi.mock('@/db', () => ({
   },
 }));
 
-import { getCurrentUser } from '@/lib/auth';
 import { db } from '@/db';
+import { getCurrentUser } from '@/lib/auth';
 
 type MockUser = { id: string; role: 'user' | 'admin' };
 
diff --git a/frontend/lib/tests/shop/origin-posture.test.ts b/frontend/lib/tests/shop/origin-posture.test.ts
index f6c7a7a4..d8d8f46e 100644
--- a/frontend/lib/tests/shop/origin-posture.test.ts
+++ b/frontend/lib/tests/shop/origin-posture.test.ts
@@ -1,9 +1,10 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { NextRequest } from 'next/server';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import {
-  normalizeOrigin,
   guardBrowserSameOrigin,
   guardNonBrowserOnly,
+  normalizeOrigin,
 } from '@/lib/security/origin';
 
 function makeReq(init: RequestInit) {
diff --git a/frontend/lib/tests/shop/payment-state-legacy-writers.test.ts b/frontend/lib/tests/shop/payment-state-legacy-writers.test.ts
index f6e109ad..95d2a343 100644
--- a/frontend/lib/tests/shop/payment-state-legacy-writers.test.ts
+++ b/frontend/lib/tests/shop/payment-state-legacy-writers.test.ts
@@ -2,8 +2,8 @@ import crypto from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
 
-import { describe, it, expect, afterEach } from 'vitest';
 import { eq } from 'drizzle-orm';
+import { afterEach,describe, expect, it } from 'vitest';
 
 import { db } from '@/db';
 import { orders } from '@/db/schema/shop';
@@ -18,7 +18,6 @@ async function seedOrder(args: SeedArgs): Promise<string> {
   const orderId = crypto.randomUUID();
   const now = new Date();
 
-
   const idempotencyKey = `test:${orderId}`;
 
   await db.insert(orders).values({
diff --git a/frontend/lib/tests/shop/payment-status-tripwire.test.ts b/frontend/lib/tests/shop/payment-status-tripwire.test.ts
index d9f76637..46a774c0 100644
--- a/frontend/lib/tests/shop/payment-status-tripwire.test.ts
+++ b/frontend/lib/tests/shop/payment-status-tripwire.test.ts
@@ -1,6 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { describe, it, expect } from 'vitest';
+
+import { describe, expect,it } from 'vitest';
 
 const REPO_ROOT = process.cwd();
 
diff --git a/frontend/lib/tests/shop/prices.test.ts b/frontend/lib/tests/shop/prices.test.ts
index 16db179f..8160e084 100644
--- a/frontend/lib/tests/shop/prices.test.ts
+++ b/frontend/lib/tests/shop/prices.test.ts
@@ -1,10 +1,11 @@
-import { describe, expect, it } from "vitest";
-import { adminPriceRowSchema } from "../../validation/shop";
+import { describe, expect, it } from 'vitest';
 
-describe("pricing validation", () => {
-  it("rejects originalPriceMinor == priceMinor (SALE must be strict)", () => {
+import { adminPriceRowSchema } from '../../validation/shop';
+
+describe('pricing validation', () => {
+  it('rejects originalPriceMinor == priceMinor (SALE must be strict)', () => {
     const r = adminPriceRowSchema.safeParse({
-      currency: "USD",
+      currency: 'USD',
       priceMinor: 1000,
       originalPriceMinor: 1000,
     });
@@ -12,9 +13,9 @@ describe("pricing validation", () => {
     expect(r.success).toBe(false);
   });
 
-  it("accepts originalPriceMinor > priceMinor", () => {
+  it('accepts originalPriceMinor > priceMinor', () => {
     const r = adminPriceRowSchema.safeParse({
-      currency: "USD",
+      currency: 'USD',
       priceMinor: 1000,
       originalPriceMinor: 1200,
     });
@@ -22,4 +23,3 @@ describe("pricing validation", () => {
     expect(r.success).toBe(true);
   });
 });
-
diff --git a/frontend/lib/tests/shop/product-admin-merged-prices-policy.test.ts b/frontend/lib/tests/shop/product-admin-merged-prices-policy.test.ts
index 3706ee43..9d788d7a 100644
--- a/frontend/lib/tests/shop/product-admin-merged-prices-policy.test.ts
+++ b/frontend/lib/tests/shop/product-admin-merged-prices-policy.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
-import { assertMergedPricesPolicy } from '@/lib/services/products/prices';
+
 import { PriceConfigError } from '@/lib/services/errors';
+import { assertMergedPricesPolicy } from '@/lib/services/products/prices';
 
 describe('assertMergedPricesPolicy (merged-state)', () => {
   it('throws PRICE_CONFIG_ERROR when USD is missing after merge', () => {
diff --git a/frontend/lib/tests/shop/product-admin-update-prices-patch-semantics.test.ts b/frontend/lib/tests/shop/product-admin-update-prices-patch-semantics.test.ts
index 3f5fa223..951ddd3d 100644
--- a/frontend/lib/tests/shop/product-admin-update-prices-patch-semantics.test.ts
+++ b/frontend/lib/tests/shop/product-admin-update-prices-patch-semantics.test.ts
@@ -1,12 +1,11 @@
 import { describe, expect, it } from 'vitest';
+
 import { productAdminUpdateSchema } from '@/lib/validation/shop';
 
 describe('productAdminUpdateSchema: prices PATCH semantics', () => {
   it('allows partial prices update without USD', () => {
     const res = productAdminUpdateSchema.safeParse({
-      prices: [
-        { currency: 'UAH', priceMinor: 1000, originalPriceMinor: 2000 },
-      ],
+      prices: [{ currency: 'UAH', priceMinor: 1000, originalPriceMinor: 2000 }],
     });
 
     expect(res.success).toBe(true);
diff --git a/frontend/lib/tests/shop/product-sale-invariant.test.ts b/frontend/lib/tests/shop/product-sale-invariant.test.ts
index 6c78cd0d..20b7f764 100644
--- a/frontend/lib/tests/shop/product-sale-invariant.test.ts
+++ b/frontend/lib/tests/shop/product-sale-invariant.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
 import { eq } from 'drizzle-orm';
+import { afterEach,describe, expect, it, vi } from 'vitest';
 
 vi.mock('@/lib/cloudinary', () => {
   return {
@@ -12,9 +12,9 @@ vi.mock('@/lib/cloudinary', () => {
 });
 
 import { db } from '@/db';
-import { products, productPrices } from '@/db/schema';
-import { toDbMoney } from '@/lib/shop/money';
+import { productPrices,products } from '@/db/schema';
 import { createProduct, updateProduct } from '@/lib/services/products';
+import { toDbMoney } from '@/lib/shop/money';
 
 function uniqueSlug(prefix = 'sale-invariant') {
   return `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
diff --git a/frontend/lib/tests/shop/public-product-visibility.test.ts b/frontend/lib/tests/shop/public-product-visibility.test.ts
index c1960ea0..25cbd8bb 100644
--- a/frontend/lib/tests/shop/public-product-visibility.test.ts
+++ b/frontend/lib/tests/shop/public-product-visibility.test.ts
@@ -1,10 +1,11 @@
-import { describe, it, expect } from 'vitest';
-import { eq } from 'drizzle-orm';
 import { randomUUID } from 'node:crypto';
 
+import { eq } from 'drizzle-orm';
+import { describe, expect,it } from 'vitest';
+
 import { db } from '@/db';
-import { products, productPrices } from '@/db/schema';
 import { getPublicProductBySlug } from '@/db/queries/shop/products';
+import { productPrices,products } from '@/db/schema';
 
 function logTestCleanupFailed(meta: Record<string, unknown>, error: unknown) {
   console.error('[test cleanup failed]', {
diff --git a/frontend/lib/tests/shop/rate-limit-subject.test.ts b/frontend/lib/tests/shop/rate-limit-subject.test.ts
index 8717b7c0..bb4a8a63 100644
--- a/frontend/lib/tests/shop/rate-limit-subject.test.ts
+++ b/frontend/lib/tests/shop/rate-limit-subject.test.ts
@@ -1,7 +1,8 @@
-import { describe, expect, it, vi, afterEach } from 'vitest';
+import { afterEach,describe, expect, it, vi } from 'vitest';
 vi.mock('@/db', () => ({ db: { execute: vi.fn() } }));
 
 import { NextRequest } from 'next/server';
+
 import {
   getClientIpFromHeaders,
   getRateLimitSubject,
diff --git a/frontend/lib/tests/shop/restock-order-only-once.test.ts b/frontend/lib/tests/shop/restock-order-only-once.test.ts
index a69993e4..ef1ba4bb 100644
--- a/frontend/lib/tests/shop/restock-order-only-once.test.ts
+++ b/frontend/lib/tests/shop/restock-order-only-once.test.ts
@@ -1,12 +1,12 @@
-import { describe, it, expect } from 'vitest';
 import crypto from 'crypto';
 import { eq, sql } from 'drizzle-orm';
+import { describe, expect,it } from 'vitest';
 
 import { db } from '@/db';
 import { orders, products } from '@/db/schema';
-import { toDbMoney } from '@/lib/shop/money';
 import { applyReserveMove } from '@/lib/services/inventory';
 import { restockOrder } from '@/lib/services/orders';
+import { toDbMoney } from '@/lib/shop/money';
 
 function readRows(res: any): any[] {
   if (Array.isArray(res)) return res;
diff --git a/frontend/lib/tests/shop/restock-release-failure-invariant.test.ts b/frontend/lib/tests/shop/restock-release-failure-invariant.test.ts
index 865c86de..fa786a85 100644
--- a/frontend/lib/tests/shop/restock-release-failure-invariant.test.ts
+++ b/frontend/lib/tests/shop/restock-release-failure-invariant.test.ts
@@ -1,18 +1,19 @@
 import crypto from 'node:crypto';
+
 import { eq } from 'drizzle-orm';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { db } from '@/db';
 import {
-  orders,
+  inventoryMoves,
   orderItems,
-  products,
+  orders,
   productPrices,
-  inventoryMoves,
+  products,
 } from '@/db/schema/shop';
-import { toDbMoney } from '@/lib/shop/money';
-import { restockOrder } from '@/lib/services/orders/restock';
 import * as inventory from '@/lib/services/inventory';
+import { restockOrder } from '@/lib/services/orders/restock';
+import { toDbMoney } from '@/lib/shop/money';
 
 describe('P0 Inventory release invariants', () => {
   it('must NOT mark released/stockRestored/restockedAt when applyReleaseMove fails (leave safe for janitor)', async () => {
diff --git a/frontend/lib/tests/shop/restock-stale-claim-gate.test.ts b/frontend/lib/tests/shop/restock-stale-claim-gate.test.ts
index 389c4b86..df71dbbd 100644
--- a/frontend/lib/tests/shop/restock-stale-claim-gate.test.ts
+++ b/frontend/lib/tests/shop/restock-stale-claim-gate.test.ts
@@ -1,11 +1,11 @@
-import { describe, it, expect } from 'vitest';
 import crypto from 'crypto';
 import { eq } from 'drizzle-orm';
+import { describe, expect,it } from 'vitest';
 
 import { db } from '@/db';
 import { orders } from '@/db/schema';
-import { toDbMoney } from '@/lib/shop/money';
 import { restockStalePendingOrders } from '@/lib/services/orders';
+import { toDbMoney } from '@/lib/shop/money';
 
 describe('restockStalePendingOrders claim gate', () => {
   it('must skip orders with an active (not expired) claim', async () => {
diff --git a/frontend/lib/tests/shop/restock-stale-stripe-orphan.test.ts b/frontend/lib/tests/shop/restock-stale-stripe-orphan.test.ts
index 36d3426c..345b284b 100644
--- a/frontend/lib/tests/shop/restock-stale-stripe-orphan.test.ts
+++ b/frontend/lib/tests/shop/restock-stale-stripe-orphan.test.ts
@@ -1,11 +1,11 @@
-import { describe, it, expect } from 'vitest';
 import crypto from 'crypto';
 import { eq } from 'drizzle-orm';
+import { describe, expect,it } from 'vitest';
 
 import { db } from '@/db';
 import { orders } from '@/db/schema';
-import { toDbMoney } from '@/lib/shop/money';
 import { restockStalePendingOrders } from '@/lib/services/orders';
+import { toDbMoney } from '@/lib/shop/money';
 
 describe('P0-3.x Restock stale pending orders: stripe orphan cleanup', () => {
   it('marks stale stripe orphan (no inventory_moves) as terminal failed and releases to avoid infinite sweep re-pick', async () => {
diff --git a/frontend/lib/tests/shop/restock-stuck-reserving-sweep.test.ts b/frontend/lib/tests/shop/restock-stuck-reserving-sweep.test.ts
index 5c368fc9..1aff157f 100644
--- a/frontend/lib/tests/shop/restock-stuck-reserving-sweep.test.ts
+++ b/frontend/lib/tests/shop/restock-stuck-reserving-sweep.test.ts
@@ -1,12 +1,12 @@
-import { describe, it, expect } from 'vitest';
 import crypto from 'crypto';
 import { eq, sql } from 'drizzle-orm';
+import { describe, expect,it } from 'vitest';
 
 import { db } from '@/db';
 import { orders, products } from '@/db/schema';
-import { toDbMoney } from '@/lib/shop/money';
 import { applyReserveMove } from '@/lib/services/inventory';
 import { restockStuckReservingOrders } from '@/lib/services/orders';
+import { toDbMoney } from '@/lib/shop/money';
 
 const TWO_HOURS_MS = 2 * 60 * 60 * 1000;
 
diff --git a/frontend/lib/tests/shop/restock-sweep-claim.test.ts b/frontend/lib/tests/shop/restock-sweep-claim.test.ts
index 8f53bd56..09fb2da1 100644
--- a/frontend/lib/tests/shop/restock-sweep-claim.test.ts
+++ b/frontend/lib/tests/shop/restock-sweep-claim.test.ts
@@ -1,11 +1,11 @@
-import { describe, it, expect } from 'vitest';
 import crypto from 'crypto';
 import { eq } from 'drizzle-orm';
+import { describe, expect,it } from 'vitest';
 
 import { db } from '@/db';
 import { orders } from '@/db/schema';
-import { toDbMoney } from '@/lib/shop/money';
 import { restockStalePendingOrders } from '@/lib/services/orders';
+import { toDbMoney } from '@/lib/shop/money';
 
 describe('restockStalePendingOrders claim', () => {
   it('two concurrent sweeps must not both process the same order', async () => {
diff --git a/frontend/lib/tests/shop/stripe-webhook-contract.test.ts b/frontend/lib/tests/shop/stripe-webhook-contract.test.ts
index 2be8c55e..10d8bd36 100644
--- a/frontend/lib/tests/shop/stripe-webhook-contract.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-contract.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { NextRequest } from 'next/server';
+import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('@/lib/logging', async () => {
   const actual = await vi.importActual<any>('@/lib/logging');
diff --git a/frontend/lib/tests/shop/stripe-webhook-mismatch.test.ts b/frontend/lib/tests/shop/stripe-webhook-mismatch.test.ts
index 6e76b483..1a9a75df 100644
--- a/frontend/lib/tests/shop/stripe-webhook-mismatch.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-mismatch.test.ts
@@ -1,6 +1,7 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { NextRequest } from 'next/server';
 import { sql } from 'drizzle-orm';
+import { NextRequest } from 'next/server';
+import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { db } from '@/db';
 
 const ORIG_ENV = process.env;
diff --git a/frontend/lib/tests/shop/stripe-webhook-paid-status-repair.test.ts b/frontend/lib/tests/shop/stripe-webhook-paid-status-repair.test.ts
index 188a6704..c2eaacef 100644
--- a/frontend/lib/tests/shop/stripe-webhook-paid-status-repair.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-paid-status-repair.test.ts
@@ -1,7 +1,8 @@
 import crypto from 'crypto';
+import { eq } from 'drizzle-orm';
 import { NextRequest } from 'next/server';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { eq } from 'drizzle-orm';
+
 import { db } from '@/db';
 import { orders, stripeEvents } from '@/db/schema';
 import { toDbMoney } from '@/lib/shop/money';
diff --git a/frontend/lib/tests/shop/stripe-webhook-psp-fields.test.ts b/frontend/lib/tests/shop/stripe-webhook-psp-fields.test.ts
index f5f61ab7..3334e5ef 100644
--- a/frontend/lib/tests/shop/stripe-webhook-psp-fields.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-psp-fields.test.ts
@@ -1,14 +1,14 @@
-import { describe, it, expect, vi } from 'vitest';
-import { NextRequest } from 'next/server';
-import { eq } from 'drizzle-orm';
 import { randomUUID } from 'crypto';
+import { eq } from 'drizzle-orm';
+import { NextRequest } from 'next/server';
+import { describe, expect, it, vi } from 'vitest';
 
 import { db } from '@/db';
 import {
-  products,
-  productPrices,
-  orders,
   orderItems,
+  orders,
+  productPrices,
+  products,
   stripeEvents,
 } from '@/db/schema';
 
@@ -21,8 +21,8 @@ vi.mock('@/lib/psp/stripe', async () => {
   };
 });
 
-import { verifyWebhookSignature } from '@/lib/psp/stripe';
 import { POST as webhookPOST } from '@/app/api/shop/webhooks/stripe/route';
+import { verifyWebhookSignature } from '@/lib/psp/stripe';
 
 function logTestCleanupFailed(meta: Record<string, unknown>, error: unknown) {
   console.error('[test cleanup failed]', {
diff --git a/frontend/lib/tests/shop/stripe-webhook-rate-limit-env.test.ts b/frontend/lib/tests/shop/stripe-webhook-rate-limit-env.test.ts
index 0c8251fa..c9f67980 100644
--- a/frontend/lib/tests/shop/stripe-webhook-rate-limit-env.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-rate-limit-env.test.ts
@@ -1,4 +1,5 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
+
 import { resolveStripeWebhookRateLimit } from '@/lib/security/stripe-webhook-rate-limit';
 
 describe('stripe webhook rate limit env precedence', () => {
diff --git a/frontend/lib/tests/shop/stripe-webhook-refund-full.test.ts b/frontend/lib/tests/shop/stripe-webhook-refund-full.test.ts
index 48fa6789..f7cfc247 100644
--- a/frontend/lib/tests/shop/stripe-webhook-refund-full.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-refund-full.test.ts
@@ -1,8 +1,9 @@
 import crypto from 'node:crypto';
+
 import { eq } from 'drizzle-orm';
 import { NextRequest } from 'next/server';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type Stripe from 'stripe';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('@/lib/psp/stripe', async () => {
   const actual =
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
index bd0c391d..1f5046c6 100644
--- a/frontend/lib/utils.ts
+++ b/frontend/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue,clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/frontend/lib/validation/checkout.ts b/frontend/lib/validation/checkout.ts
index cc8e94b6..57b1cd24 100644
--- a/frontend/lib/validation/checkout.ts
+++ b/frontend/lib/validation/checkout.ts
@@ -1,6 +1,6 @@
 export {
-  checkoutItemSchema,
-  checkoutPayloadSchema,
   type CheckoutItemInput,
+  checkoutItemSchema,
   type CheckoutPayload,
-} from "./shop"
+  checkoutPayloadSchema,
+} from './shop';
diff --git a/frontend/lib/validation/shop.ts b/frontend/lib/validation/shop.ts
index 9fd07e20..e578a599 100644
--- a/frontend/lib/validation/shop.ts
+++ b/frontend/lib/validation/shop.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod';
+
 import {
   CATALOG_PAGE_SIZE,
   CATEGORIES,
@@ -12,7 +13,7 @@ import {
   paymentProviderValues,
   paymentStatusValues,
 } from '@/lib/shop/payments';
-export type { PaymentStatus, PaymentProvider } from '@/lib/shop/payments';
+export type { PaymentProvider,PaymentStatus } from '@/lib/shop/payments';
 
 export const MAX_QUANTITY_PER_LINE = 20;
 
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index d41c0664..53dd4e7d 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -661,31 +661,64 @@
       },
       "bubbles": {
         "qa": {
-          "languages": { "label": "3 Languages", "desc": "EN, UK & PL supported" },
-          "aiHelper": { "label": "AI Helper", "desc": "Select text for AI explain" },
-          "smartCache": { "label": "Smart Cache", "desc": "Highlights learned terms" },
-          "techFilter": { "label": "Tech Filter", "desc": "React, Git, JS & more" }
+          "languages": {
+            "label": "3 Languages",
+            "desc": "EN, UK & PL supported"
+          },
+          "aiHelper": {
+            "label": "AI Helper",
+            "desc": "Select text for AI explain"
+          },
+          "smartCache": {
+            "label": "Smart Cache",
+            "desc": "Highlights learned terms"
+          },
+          "techFilter": {
+            "label": "Tech Filter",
+            "desc": "React, Git, JS & more"
+          }
         },
         "quiz": {
-          "smartTimer": { "label": "Smart Timer", "desc": "Race against the total time" },
-          "antiCheat": { "label": "Anti-Cheat", "desc": "Focus loss detection" },
-          "autoSync": { "label": "Auto Sync", "desc": "Saves progress post-login" },
+          "smartTimer": {
+            "label": "Smart Timer",
+            "desc": "Race against the total time"
+          },
+          "antiCheat": {
+            "label": "Anti-Cheat",
+            "desc": "Focus loss detection"
+          },
+          "autoSync": {
+            "label": "Auto Sync",
+            "desc": "Saves progress post-login"
+          },
           "tracking": { "label": "Tracking", "desc": "Best scores & attempts" }
         },
         "leaderboard": {
-          "podium": { "label": "The Podium", "desc": "Top 3 exclusive spotlight" },
+          "podium": {
+            "label": "The Podium",
+            "desc": "Top 3 exclusive spotlight"
+          },
           "globalRank": { "label": "Global Rank", "desc": "Compete worldwide" },
-          "xpSystem": { "label": "XP System", "desc": "Points for every answer" },
+          "xpSystem": {
+            "label": "XP System",
+            "desc": "Points for every answer"
+          },
           "liveFeed": { "label": "Live Feed", "desc": "Real-time rank updates" }
         },
         "profile": {
           "statsHub": { "label": "Stats Hub", "desc": "Visualize your growth" },
           "history": { "label": "History", "desc": "Track learning streaks" },
           "identity": { "label": "Identity", "desc": "Manage role & profile" },
-          "reminders": { "label": "Reminders", "desc": "Finish incomplete quizzes" }
+          "reminders": {
+            "label": "Reminders",
+            "desc": "Finish incomplete quizzes"
+          }
         },
         "blog": {
-          "techTrends": { "label": "Tech Trends", "desc": "Stay ahead of the curve" },
+          "techTrends": {
+            "label": "Tech Trends",
+            "desc": "Stay ahead of the curve"
+          },
           "tutorials": { "label": "Tutorials", "desc": "Step-by-step guides" },
           "deepDives": { "label": "Deep Dives", "desc": "In-depth analysis" },
           "community": { "label": "Community", "desc": "Written by developers" }
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
index f7aa383d..385af803 100644
--- a/frontend/messages/pl.json
+++ b/frontend/messages/pl.json
@@ -662,38 +662,98 @@
       "bubbles": {
         "qa": {
           "languages": { "label": "3 języki", "desc": "EN, UK i PL" },
-          "aiHelper": { "label": "Pomocnik AI", "desc": "Zaznacz tekst do wyjaśnienia" },
-          "smartCache": { "label": "Inteligentny cache", "desc": "Podświetla nauczone terminy" },
-          "techFilter": { "label": "Filtr tech", "desc": "React, Git, JS i więcej" }
+          "aiHelper": {
+            "label": "Pomocnik AI",
+            "desc": "Zaznacz tekst do wyjaśnienia"
+          },
+          "smartCache": {
+            "label": "Inteligentny cache",
+            "desc": "Podświetla nauczone terminy"
+          },
+          "techFilter": {
+            "label": "Filtr tech",
+            "desc": "React, Git, JS i więcej"
+          }
         },
         "quiz": {
-          "smartTimer": { "label": "Inteligentny timer", "desc": "Ścigaj się z czasem" },
-          "antiCheat": { "label": "Anti-Cheat", "desc": "Wykrywanie utraty fokusa" },
-          "autoSync": { "label": "Auto-synchronizacja", "desc": "Zapisuje postęp po logowaniu" },
-          "tracking": { "label": "Śledzenie", "desc": "Najlepsze wyniki i próby" }
+          "smartTimer": {
+            "label": "Inteligentny timer",
+            "desc": "Ścigaj się z czasem"
+          },
+          "antiCheat": {
+            "label": "Anti-Cheat",
+            "desc": "Wykrywanie utraty fokusa"
+          },
+          "autoSync": {
+            "label": "Auto-synchronizacja",
+            "desc": "Zapisuje postęp po logowaniu"
+          },
+          "tracking": {
+            "label": "Śledzenie",
+            "desc": "Najlepsze wyniki i próby"
+          }
         },
         "leaderboard": {
-          "podium": { "label": "Podium", "desc": "Ekskluzywny spotlight top 3" },
-          "globalRank": { "label": "Globalny ranking", "desc": "Rywalizuj na całym świecie" },
-          "xpSystem": { "label": "System XP", "desc": "Punkty za każdą odpowiedź" },
-          "liveFeed": { "label": "Live feed", "desc": "Aktualizacje rang w czasie rzeczywistym" }
+          "podium": {
+            "label": "Podium",
+            "desc": "Ekskluzywny spotlight top 3"
+          },
+          "globalRank": {
+            "label": "Globalny ranking",
+            "desc": "Rywalizuj na całym świecie"
+          },
+          "xpSystem": {
+            "label": "System XP",
+            "desc": "Punkty za każdą odpowiedź"
+          },
+          "liveFeed": {
+            "label": "Live feed",
+            "desc": "Aktualizacje rang w czasie rzeczywistym"
+          }
         },
         "profile": {
-          "statsHub": { "label": "Centrum statystyk", "desc": "Wizualizuj swój rozwój" },
+          "statsHub": {
+            "label": "Centrum statystyk",
+            "desc": "Wizualizuj swój rozwój"
+          },
           "history": { "label": "Historia", "desc": "Śledź serie nauki" },
-          "identity": { "label": "Tożsamość", "desc": "Zarządzaj rolą i profilem" },
-          "reminders": { "label": "Przypomnienia", "desc": "Dokończ niedokończone quizy" }
+          "identity": {
+            "label": "Tożsamość",
+            "desc": "Zarządzaj rolą i profilem"
+          },
+          "reminders": {
+            "label": "Przypomnienia",
+            "desc": "Dokończ niedokończone quizy"
+          }
         },
         "blog": {
-          "techTrends": { "label": "Trendy tech", "desc": "Bądź o krok przed innymi" },
-          "tutorials": { "label": "Tutoriale", "desc": "Przewodniki krok po kroku" },
-          "deepDives": { "label": "Głębokie analizy", "desc": "Szczegółowy rozbiór" },
-          "community": { "label": "Społeczność", "desc": "Pisane przez developerów" }
+          "techTrends": {
+            "label": "Trendy tech",
+            "desc": "Bądź o krok przed innymi"
+          },
+          "tutorials": {
+            "label": "Tutoriale",
+            "desc": "Przewodniki krok po kroku"
+          },
+          "deepDives": {
+            "label": "Głębokie analizy",
+            "desc": "Szczegółowy rozbiór"
+          },
+          "community": {
+            "label": "Społeczność",
+            "desc": "Pisane przez developerów"
+          }
         },
         "shop": {
           "newDrops": { "label": "Nowości", "desc": "Regularne aktualizacje" },
-          "curated": { "label": "Selekcja", "desc": "Kolekcje dla developerów" },
-          "checkout": { "label": "Płatność", "desc": "Płynny proces przez Stripe" },
+          "curated": {
+            "label": "Selekcja",
+            "desc": "Kolekcje dla developerów"
+          },
+          "checkout": {
+            "label": "Płatność",
+            "desc": "Płynny proces przez Stripe"
+          },
           "premium": { "label": "Premium", "desc": "Wysoka jakość materiałów" }
         }
       }
diff --git a/frontend/messages/uk.json b/frontend/messages/uk.json
index 28e844f1..9f141a38 100644
--- a/frontend/messages/uk.json
+++ b/frontend/messages/uk.json
@@ -662,32 +662,68 @@
       "bubbles": {
         "qa": {
           "languages": { "label": "3 мови", "desc": "EN, UK та PL" },
-          "aiHelper": { "label": "AI-помічник", "desc": "Виділи текст для пояснення" },
-          "smartCache": { "label": "Розумний кеш", "desc": "Підсвічує вивчені терміни" },
-          "techFilter": { "label": "Tech-фільтр", "desc": "React, Git, JS та інше" }
+          "aiHelper": {
+            "label": "AI-помічник",
+            "desc": "Виділи текст для пояснення"
+          },
+          "smartCache": {
+            "label": "Розумний кеш",
+            "desc": "Підсвічує вивчені терміни"
+          },
+          "techFilter": {
+            "label": "Tech-фільтр",
+            "desc": "React, Git, JS та інше"
+          }
         },
         "quiz": {
-          "smartTimer": { "label": "Розумний таймер", "desc": "Змагайся з часом" },
+          "smartTimer": {
+            "label": "Розумний таймер",
+            "desc": "Змагайся з часом"
+          },
           "antiCheat": { "label": "Античіт", "desc": "Детекція втрати фокусу" },
-          "autoSync": { "label": "Синхронізація", "desc": "Зберігає прогрес після входу" },
-          "tracking": { "label": "Відстеження", "desc": "Найкращі результати та спроби" }
+          "autoSync": {
+            "label": "Синхронізація",
+            "desc": "Зберігає прогрес після входу"
+          },
+          "tracking": {
+            "label": "Відстеження",
+            "desc": "Найкращі результати та спроби"
+          }
         },
         "leaderboard": {
           "podium": { "label": "Подіум", "desc": "Топ-3 в центрі уваги" },
-          "globalRank": { "label": "Глобальний рейтинг", "desc": "Змагайся зі світом" },
-          "xpSystem": { "label": "XP-система", "desc": "Бали за кожну відповідь" },
-          "liveFeed": { "label": "Live-стрічка", "desc": "Оновлення рангів в реальному часі" }
+          "globalRank": {
+            "label": "Глобальний рейтинг",
+            "desc": "Змагайся зі світом"
+          },
+          "xpSystem": {
+            "label": "XP-система",
+            "desc": "Бали за кожну відповідь"
+          },
+          "liveFeed": {
+            "label": "Live-стрічка",
+            "desc": "Оновлення рангів в реальному часі"
+          }
         },
         "profile": {
-          "statsHub": { "label": "Центр статистики", "desc": "Візуалізуй своє зростання" },
+          "statsHub": {
+            "label": "Центр статистики",
+            "desc": "Візуалізуй своє зростання"
+          },
           "history": { "label": "Історія", "desc": "Відстежуй серії навчання" },
           "identity": { "label": "Профіль", "desc": "Керуй роллю та даними" },
-          "reminders": { "label": "Нагадування", "desc": "Заверши незакінчені квізи" }
+          "reminders": {
+            "label": "Нагадування",
+            "desc": "Заверши незакінчені квізи"
+          }
         },
         "blog": {
           "techTrends": { "label": "Tech-тренди", "desc": "Будь попереду" },
           "tutorials": { "label": "Туторіали", "desc": "Покрокові гайди" },
-          "deepDives": { "label": "Глибокий аналіз", "desc": "Детальний розбір" },
+          "deepDives": {
+            "label": "Глибокий аналіз",
+            "desc": "Детальний розбір"
+          },
           "community": { "label": "Спільнота", "desc": "Написано розробниками" }
         },
         "shop": {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e1482495..ca3ca380 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -59,7 +59,11 @@
         "drizzle-kit": "^0.18.1",
         "eslint": "^9",
         "eslint-config-next": "16.0.1",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
         "jsdom": "^27.4.0",
+        "prettier-plugin-tailwindcss": "^0.7.2",
         "tailwindcss": "^4",
         "ts-node": "^1.7.1",
         "tsx": "^4.21.0",
@@ -181,7 +185,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -499,7 +502,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -540,7 +542,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -3269,7 +3270,6 @@
       "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.7.0.tgz",
       "integrity": "sha512-tNUerSstwNC1KuHgX4CASGO0Md3CB26IJzSXmVlSuFvhsBP4ZaEPpY4jxWOn9tfdDscuVT4Kqb8cZ2o9nLCgRQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12.16"
       }
@@ -3735,7 +3735,6 @@
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3967,7 +3966,6 @@
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3978,7 +3976,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -4028,7 +4025,6 @@
       "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.54.0",
         "@typescript-eslint/types": "8.54.0",
@@ -4517,7 +4513,6 @@
       "resolved": "https://registry.npmjs.org/@upstash/redis/-/redis-1.36.1.tgz",
       "integrity": "sha512-N6SjDcgXdOcTAF+7uNoY69o7hCspe9BcA7YjQdxVu5d25avljTwyLaHBW3krWjrP0FfocgMk94qyVtQbeDp39A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "uncrypto": "^0.1.3"
       }
@@ -4720,7 +4715,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5160,7 +5154,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -6215,7 +6208,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -6629,7 +6621,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6724,6 +6715,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -7036,6 +7043,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/eslint-plugin-simple-import-sort": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.1.tgz",
+      "integrity": "sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=5.0.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
@@ -8665,7 +8682,6 @@
       "integrity": "sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@acemir/cssom": "^0.9.28",
         "@asamuzakjp/dom-selector": "^6.7.6",
@@ -9546,7 +9562,6 @@
       "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
       "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@next/env": "16.1.6",
         "@swc/helpers": "0.5.15",
@@ -9671,17 +9686,6 @@
         }
       }
     },
-    "node_modules/next-intl/node_modules/@swc/helpers": {
-      "version": "0.5.18",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
-      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
     "node_modules/next-themes": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
@@ -10099,7 +10103,6 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.18.0.tgz",
       "integrity": "sha512-xqrUDL1b9MbkydY/s+VZ6v+xiMUmOUk7SS9d/1kpyQxoJ6U9AO1oIJyUWVZojbfe5Cc/oluutcgFG4L9RDP1iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.11.0",
         "pg-pool": "^3.11.0",
@@ -10263,7 +10266,6 @@
       "resolved": "https://registry.npmjs.org/postgres/-/postgres-3.4.8.tgz",
       "integrity": "sha512-d+JFcLM17njZaOLkv6SCev7uoLaBtfK86vMUXhW1Z4glPWh4jozno9APvW/XKFJ3CCxVoC7OL38BqRydtu5nGg==",
       "license": "Unlicense",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -10321,6 +10323,102 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.2.tgz",
+      "integrity": "sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-hermes": "*",
+        "@prettier/plugin-oxc": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-hermes": {
+          "optional": true
+        },
+        "@prettier/plugin-oxc": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -10417,7 +10515,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10427,7 +10524,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -11429,7 +11525,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11877,7 +11972,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12244,7 +12338,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12258,7 +12351,6 @@
       "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.0.18",
         "@vitest/mocker": "4.0.18",
@@ -12632,7 +12724,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/frontend/package.json b/frontend/package.json
index b1ab7cd2..0d466c7a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
     "seed:categories": "tsx db/seed-categories.ts",
     "seed:questions": "tsx db/seed-questions.ts",
     "seed:users": "tsx db/seed-users.ts",
@@ -72,7 +74,11 @@
     "drizzle-kit": "^0.18.1",
     "eslint": "^9",
     "eslint-config-next": "16.0.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "jsdom": "^27.4.0",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "tailwindcss": "^4",
     "ts-node": "^1.7.1",
     "tsx": "^4.21.0",
diff --git a/frontend/postcss.config.mjs b/frontend/postcss.config.mjs
index 61e36849..297374d8 100644
--- a/frontend/postcss.config.mjs
+++ b/frontend/postcss.config.mjs
@@ -1,6 +1,6 @@
 const config = {
   plugins: {
-    "@tailwindcss/postcss": {},
+    '@tailwindcss/postcss': {},
   },
 };
 
diff --git a/frontend/proxy.ts b/frontend/proxy.ts
index eeabc246..b53be269 100644
--- a/frontend/proxy.ts
+++ b/frontend/proxy.ts
@@ -1,8 +1,10 @@
 import { NextRequest, NextResponse } from 'next/server';
 import createIntlMiddleware from 'next-intl/middleware';
-import { routing } from './i18n/routing';
+
 import { AuthTokenPayload } from '@/lib/auth';
 
+import { routing } from './i18n/routing';
+
 const AUTH_COOKIE_NAME = 'auth_session';
 
 const AUTH_SECRET = process.env.AUTH_SECRET;
@@ -11,20 +13,23 @@ if (!AUTH_SECRET) {
 }
 
 function decodeAuthToken(token: string): AuthTokenPayload | null {
-  const parts = token.split(".");
+  const parts = token.split('.');
   if (parts.length < 2) return null;
 
-  const base64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
-  const padded = base64.padEnd(base64.length + (4 - (base64.length % 4)) % 4, "=");
+  const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
+  const padded = base64.padEnd(
+    base64.length + ((4 - (base64.length % 4)) % 4),
+    '='
+  );
 
   try {
     const json = atob(padded);
     const payload = JSON.parse(json) as Partial<AuthTokenPayload>;
     if (
-      typeof payload.userId !== "string" ||
-      (payload.role !== "user" && payload.role !== "admin") ||
-      typeof payload.email !== "string" ||
-      typeof payload.exp !== "number"
+      typeof payload.userId !== 'string' ||
+      (payload.role !== 'user' && payload.role !== 'admin') ||
+      typeof payload.email !== 'string' ||
+      typeof payload.exp !== 'number'
     ) {
       return null;
     }
@@ -55,11 +60,11 @@ function authMiddleware(req: NextRequest) {
     pathname.replace(/^\/(uk|en|pl)(?=\/|$)/, '') || '/';
 
   if (pathnameWithoutLocale.startsWith('/dashboard')) {
-  if (!authenticated) {
-    const locale = pathname.split('/')[1] || 'en';
-    return NextResponse.redirect(new URL(`/${locale}/login`, req.url));
+    if (!authenticated) {
+      const locale = pathname.split('/')[1] || 'en';
+      return NextResponse.redirect(new URL(`/${locale}/login`, req.url));
+    }
   }
-}
 
   return null;
 }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 6dfedf18..0ae2767f 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -17,19 +13,14 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "incremental": true,
-    "types": [
-      "vitest/globals",
-      "@testing-library/jest-dom"
-    ],
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     }
   },
   "include": [
@@ -41,7 +32,5 @@
     "**/*.mts",
     ".next/dev/dev/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index 385416f4..5c42afa4 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -1,6 +1,7 @@
-import { defineConfig } from 'vitest/config';
-import { fileURLToPath } from 'node:url';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -13,7 +14,11 @@ export default defineConfig({
   },
   test: {
     environment: 'node',
-    include: ['lib/tests/**/*.test.ts', 'components/tests/**/*.test.tsx', 'components/quiz/tests/**/*.test.tsx'],
+    include: [
+      'lib/tests/**/*.test.ts',
+      'components/tests/**/*.test.tsx',
+      'components/quiz/tests/**/*.test.tsx',
+    ],
     globals: true,
     setupFiles: ['./vitest.setup.ts'],
     coverage: {

From 601e032c399164dfc128ab2dee5fe52dd66d2caf Mon Sep 17 00:00:00 2001
From: AlinaRyabova <115992255+AlinaRyabova@users.noreply.github.com>
Date: Tue, 3 Feb 2026 15:14:59 +0200
Subject: [PATCH 20/24] feat(leaderboard): finalize components and fix lint
 errors (#259)

---
 .../components/dashboard/QuizSavedBanner.tsx  | 21 ++++++-------
 .../leaderboard/LeaderboardClient.tsx         |  2 +-
 .../leaderboard/LeaderboardTable.tsx          |  4 +--
 frontend/components/shared/CookieBanner.tsx   | 30 +++++++------------
 4 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/frontend/components/dashboard/QuizSavedBanner.tsx b/frontend/components/dashboard/QuizSavedBanner.tsx
index 8f7b95ff..4bae4a13 100644
--- a/frontend/components/dashboard/QuizSavedBanner.tsx
+++ b/frontend/components/dashboard/QuizSavedBanner.tsx
@@ -19,17 +19,18 @@ export function QuizSavedBanner() {
 
   useEffect(() => {
     const saved = sessionStorage.getItem('quiz_just_saved');
-    if (saved) {
-      try {
-        setInfo(JSON.parse(saved));
-        sessionStorage.removeItem('quiz_just_saved');
-      } catch (error) {
-        console.error(
-          'Failed to parse quiz_just_saved from sessionStorage:',
-          error
-        );
+    if (!saved) return;
+
+    try {
+      const parsed = JSON.parse(saved) as SavedQuizInfo;
+      const timer = setTimeout(() => {
+        setInfo(parsed);
         sessionStorage.removeItem('quiz_just_saved');
-      }
+      }, 0);
+      return () => clearTimeout(timer);
+    } catch (error) {
+      console.error('Failed to parse quiz info:', error);
+      sessionStorage.removeItem('quiz_just_saved');
     }
   }, []);
 
diff --git a/frontend/components/leaderboard/LeaderboardClient.tsx b/frontend/components/leaderboard/LeaderboardClient.tsx
index 99fccd7e..ac15ab8f 100644
--- a/frontend/components/leaderboard/LeaderboardClient.tsx
+++ b/frontend/components/leaderboard/LeaderboardClient.tsx
@@ -7,7 +7,7 @@ import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground
 
 import { LeaderboardPodium } from './LeaderboardPodium';
 import { LeaderboardTable } from './LeaderboardTable';
-import { CurrentUser,User } from './types';
+import { CurrentUser, User } from './types';
 
 interface LeaderboardClientProps {
   initialUsers: User[];
diff --git a/frontend/components/leaderboard/LeaderboardTable.tsx b/frontend/components/leaderboard/LeaderboardTable.tsx
index 0226f828..d4fbd92a 100644
--- a/frontend/components/leaderboard/LeaderboardTable.tsx
+++ b/frontend/components/leaderboard/LeaderboardTable.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { Medal,TrendingUp, Trophy } from 'lucide-react';
+import { Medal, TrendingUp, Trophy } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
 import { cn } from '@/lib/utils';
 
-import { CurrentUser,User } from './types';
+import { CurrentUser, User } from './types';
 
 interface LeaderboardTableProps {
   users: User[];
diff --git a/frontend/components/shared/CookieBanner.tsx b/frontend/components/shared/CookieBanner.tsx
index 473b560f..6bd15ae7 100644
--- a/frontend/components/shared/CookieBanner.tsx
+++ b/frontend/components/shared/CookieBanner.tsx
@@ -2,45 +2,37 @@
 
 import { X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect,useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Button } from '@/components/ui/button';
 import { Link } from '@/i18n/routing';
 
 export function CookieBanner() {
   const t = useTranslations('CookieBanner');
-  const [isVisible, setIsVisible] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
+  const [isVisible, setIsVisible] = useState<boolean | null>(null);
 
   useEffect(() => {
-    setIsMounted(true);
     const consent = localStorage.getItem('cookie-consent');
     if (!consent) {
       const timer = setTimeout(() => setIsVisible(true), 500);
       return () => clearTimeout(timer);
+    } else {
+      const timer = setTimeout(() => setIsVisible(false), 0);
+      return () => clearTimeout(timer);
     }
   }, []);
 
-  const handleAccept = () => {
-    try {
-      localStorage.setItem('cookie-consent', 'accepted');
-    } catch (error) {
-      console.error('Failed to save cookie consent:', error);
-    }
-    setIsVisible(false);
-  };
+  if (isVisible === null || !isVisible) return null;
 
-  const handleDecline = () => {
+  const handleAction = (type: 'accepted' | 'declined') => {
     try {
-      localStorage.setItem('cookie-consent', 'declined');
+      localStorage.setItem('cookie-consent', type);
     } catch (error) {
       console.error('Failed to save cookie consent:', error);
     }
     setIsVisible(false);
   };
 
-  if (!isMounted || !isVisible) return null;
-
   return (
     <div className="animate-in slide-in-from-bottom-full fade-in fixed right-0 bottom-0 left-0 z-[100] p-4 duration-700 md:p-6">
       <div className="mx-auto max-w-4xl rounded-2xl border border-gray-200 bg-white/90 p-5 shadow-2xl backdrop-blur-md md:flex md:items-center md:justify-between md:gap-6 dark:border-gray-800 dark:bg-gray-900/90">
@@ -64,7 +56,7 @@ export function CookieBanner() {
           <Button
             variant="outline"
             size="sm"
-            onClick={handleDecline}
+            onClick={() => handleAction('declined')}
             className="w-full sm:w-auto"
           >
             {t('decline')}
@@ -72,7 +64,7 @@ export function CookieBanner() {
           <Button
             variant="primary"
             size="sm"
-            onClick={handleAccept}
+            onClick={() => handleAction('accepted')}
             className="w-full shadow-lg shadow-blue-500/20 sm:w-auto"
           >
             {t('accept')}
@@ -80,7 +72,7 @@ export function CookieBanner() {
         </div>
 
         <button
-          onClick={handleDecline}
+          onClick={() => handleAction('declined')}
           className="absolute top-2 right-2 rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 md:hidden dark:hover:bg-gray-800 dark:hover:text-gray-300"
           aria-label={t('decline')}
         >

From 46944789686f55bdd5e0fde1ecf2962597497c38 Mon Sep 17 00:00:00 2001
From: liudmylasovetovs <127711697+liudmylasovetovs@users.noreply.github.com>
Date: Tue, 3 Feb 2026 10:12:28 -0800
Subject: [PATCH 21/24] (SP 1) [FIX] set up eslint/prettier + stabilize
 formatting workflow (own files only) (#264)

* (SP 2) [Shop UI] Unify storefront styles across components and interactions

* (SP 1) [Shop UI] Add page metadata across shop routes

* (SP 1) [FIX] names of components, replacing tests, clean code

* (SP 1) [FIX] remove magic constant and align restock sweep test typing

* (SP 1) [FIX] remove duplicate

* (SP 1) [FIX] set up eslint/prettier + stabilize formatting workflow (own files only)

* (SP 1) [FIX] Tailwind hints

* (SP 1) [FIX] Tailwind hints revert
---
 .../shop/admin/products/[id]/edit/page.tsx    |  2 +-
 .../app/[locale]/shop/admin/products/page.tsx |  4 ++--
 .../app/[locale]/shop/cart/CartPageClient.tsx |  4 ++--
 .../app/[locale]/shop/orders/[id]/page.tsx    |  2 +-
 .../shop/admin/orders/[id]/refund/route.ts    |  2 +-
 .../app/api/shop/webhooks/stripe/route.ts     |  4 ++--
 .../components/shop/CatalogProductsClient.tsx |  2 +-
 frontend/components/shop/header/NavLinks.tsx  |  2 +-
 frontend/db/queries/shop/products.ts          |  4 ++--
 frontend/lib/admin/parseAdminProductForm.ts   |  2 +-
 frontend/lib/services/orders.ts               |  2 +-
 frontend/lib/services/orders/sweeps.ts        |  2 +-
 .../lib/services/products/admin/queries.ts    |  2 +-
 .../lib/services/products/cart/rehydrate.ts   |  4 ++--
 .../lib/services/products/mutations/create.ts |  4 ++--
 .../lib/services/products/mutations/delete.ts |  2 +-
 .../lib/services/products/mutations/update.ts |  2 +-
 frontend/lib/tests/__mocks__/server-only.ts   |  2 --
 frontend/lib/tests/helpers/ip.ts              |  6 ------
 .../tests/shop/admin-api-killswitch.test.ts   |  2 +-
 .../shop/admin-product-sale-contract.test.ts  |  2 +-
 .../cart-rehydrate-variant-sanitize.test.ts   |  2 +-
 .../shop/checkout-concurrency-stock1.test.ts  |  1 -
 .../shop/checkout-currency-policy.test.ts     | 20 ++++++++++++-------
 .../tests/shop/checkout-no-payments.test.ts   |  4 ++--
 .../checkout-origin-posture-contract.test.ts  |  2 +-
 .../tests/shop/order-items-variants.test.ts   |  4 ++--
 frontend/lib/tests/shop/orders-access.test.ts |  2 +-
 .../shop/payment-state-legacy-writers.test.ts |  3 +--
 .../shop/payment-status-tripwire.test.ts      |  2 +-
 .../tests/shop/product-sale-invariant.test.ts |  4 ++--
 .../shop/public-product-visibility.test.ts    |  4 ++--
 .../lib/tests/shop/rate-limit-subject.test.ts |  2 +-
 .../shop/restock-order-only-once.test.ts      |  2 +-
 .../shop/restock-stale-claim-gate.test.ts     |  2 +-
 .../shop/restock-stale-stripe-orphan.test.ts  |  2 +-
 .../restock-stuck-reserving-sweep.test.ts     |  2 +-
 .../tests/shop/restock-sweep-claim.test.ts    |  2 +-
 .../shop/stripe-webhook-contract.test.ts      |  2 +-
 .../shop/stripe-webhook-mismatch.test.ts      |  2 +-
 frontend/lib/validation/shop.ts               |  2 +-
 frontend/package-lock.json                    | 11 ++++++++++
 42 files changed, 71 insertions(+), 64 deletions(-)

diff --git a/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx b/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
index 4ee06864..8d51f7c9 100644
--- a/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/[id]/edit/page.tsx
@@ -5,7 +5,7 @@ import { z } from 'zod';
 
 import { ShopAdminTopbar } from '@/components/shop/admin/ShopAdminTopbar';
 import { db } from '@/db';
-import { productPrices,products } from '@/db/schema';
+import { productPrices, products } from '@/db/schema';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
 import { issueCsrfToken } from '@/lib/security/csrf';
 import type { CurrencyCode } from '@/lib/shop/currency';
diff --git a/frontend/app/[locale]/shop/admin/products/page.tsx b/frontend/app/[locale]/shop/admin/products/page.tsx
index d74cb869..cbb2578f 100644
--- a/frontend/app/[locale]/shop/admin/products/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/page.tsx
@@ -399,7 +399,7 @@ export default async function AdminProductsPage({
                           <div className="grid grid-cols-2 gap-2">
                             <Link
                               href={`/shop/products/${row.slug}`}
-                              className="border-border text-foreground hover:bg-secondary inline-flex items-center justify-center rounded-md border px-2 py-1 text-center text-xs leading-tight font-medium break-words whitespace-normal transition-colors"
+                              className="border-border text-foreground hover:bg-secondary break-words inline-flex items-center justify-center rounded-md border px-2 py-1 text-center text-xs leading-tight font-medium whitespace-normal transition-colors"
                               aria-label={t('actions.viewProduct', {
                                 title: row.title,
                               })}
@@ -409,7 +409,7 @@ export default async function AdminProductsPage({
 
                             <Link
                               href={`/shop/admin/products/${row.id}/edit`}
-                              className="border-border text-foreground hover:bg-secondary inline-flex items-center justify-center rounded-md border px-2 py-1 text-center text-xs leading-tight font-medium break-words whitespace-normal transition-colors"
+                              className="border-border text-foreground hover:bg-secondary break-words inline-flex items-center justify-center rounded-md border px-2 py-1 text-center text-xs leading-tight font-medium whitespace-normal transition-colors"
                               aria-label={t('actions.editProduct', {
                                 title: row.title,
                               })}
diff --git a/frontend/app/[locale]/shop/cart/CartPageClient.tsx b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
index 99d30d28..525906d2 100644
--- a/frontend/app/[locale]/shop/cart/CartPageClient.tsx
+++ b/frontend/app/[locale]/shop/cart/CartPageClient.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { Minus, Plus, ShoppingBag,Trash2 } from 'lucide-react';
+import { Minus, Plus, ShoppingBag, Trash2 } from 'lucide-react';
 import Image from 'next/image';
 import { useParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
 import { useCart } from '@/components/shop/CartProvider';
-import { Link,useRouter } from '@/i18n/routing';
+import { Link, useRouter } from '@/i18n/routing';
 import { formatMoney } from '@/lib/shop/currency';
 import { generateIdempotencyKey } from '@/lib/shop/idempotency';
 import {
diff --git a/frontend/app/[locale]/shop/orders/[id]/page.tsx b/frontend/app/[locale]/shop/orders/[id]/page.tsx
index 31a744df..4a730309 100644
--- a/frontend/app/[locale]/shop/orders/[id]/page.tsx
+++ b/frontend/app/[locale]/shop/orders/[id]/page.tsx
@@ -11,7 +11,7 @@ import { orderItems, orders } from '@/db/schema';
 import { Link } from '@/i18n/routing';
 import { getCurrentUser } from '@/lib/auth';
 import { logError } from '@/lib/logging';
-import { type CurrencyCode,formatMoney } from '@/lib/shop/currency';
+import { type CurrencyCode, formatMoney } from '@/lib/shop/currency';
 import { fromDbMoney } from '@/lib/shop/money';
 import {
   SHOP_FOCUS,
diff --git a/frontend/app/api/shop/admin/orders/[id]/refund/route.ts b/frontend/app/api/shop/admin/orders/[id]/refund/route.ts
index 223d114f..0687fbd0 100644
--- a/frontend/app/api/shop/admin/orders/[id]/refund/route.ts
+++ b/frontend/app/api/shop/admin/orders/[id]/refund/route.ts
@@ -11,7 +11,7 @@ import {
 import { logError, logWarn } from '@/lib/logging';
 import { requireAdminCsrf } from '@/lib/security/admin-csrf';
 import { guardBrowserSameOrigin } from '@/lib/security/origin';
-import { InvalidPayloadError,OrderNotFoundError } from '@/lib/services/errors';
+import { InvalidPayloadError, OrderNotFoundError } from '@/lib/services/errors';
 import { refundOrder } from '@/lib/services/orders';
 import { orderIdParamSchema, orderSummarySchema } from '@/lib/validation/shop';
 
diff --git a/frontend/app/api/shop/webhooks/stripe/route.ts b/frontend/app/api/shop/webhooks/stripe/route.ts
index 2a0c8ae2..e8eaed02 100644
--- a/frontend/app/api/shop/webhooks/stripe/route.ts
+++ b/frontend/app/api/shop/webhooks/stripe/route.ts
@@ -1,13 +1,13 @@
 import crypto from 'node:crypto';
 
-import { and, eq, isNull, lt,ne, or } from 'drizzle-orm';
+import { and, eq, isNull, lt, ne, or } from 'drizzle-orm';
 import { NextRequest, NextResponse } from 'next/server';
 import Stripe from 'stripe';
 
 import { db } from '@/db';
 import { orders, stripeEvents } from '@/db/schema';
 import { logError, logInfo, logWarn } from '@/lib/logging';
-import { retrieveCharge,verifyWebhookSignature } from '@/lib/psp/stripe';
+import { retrieveCharge, verifyWebhookSignature } from '@/lib/psp/stripe';
 import { guardNonBrowserOnly } from '@/lib/security/origin';
 import {
   enforceRateLimit,
diff --git a/frontend/components/shop/CatalogProductsClient.tsx b/frontend/components/shop/CatalogProductsClient.tsx
index eaf054bc..66f3876c 100644
--- a/frontend/components/shop/CatalogProductsClient.tsx
+++ b/frontend/components/shop/CatalogProductsClient.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type ReadonlyURLSearchParams,useSearchParams } from 'next/navigation';
+import { type ReadonlyURLSearchParams, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import React from 'react';
 
diff --git a/frontend/components/shop/header/NavLinks.tsx b/frontend/components/shop/header/NavLinks.tsx
index 5811ce29..429b2c1f 100644
--- a/frontend/components/shop/header/NavLinks.tsx
+++ b/frontend/components/shop/header/NavLinks.tsx
@@ -83,7 +83,7 @@ export function NavLinks({
               href="/"
               onClick={onNavigate}
               icon={Home}
-              className={cn(isHomeActive && '[color:var(--accent-primary)]')}
+              className={cn(isHomeActive && 'text-(--accent-primary)')}
             >
               {tNav('home')}
             </HeaderButton>
diff --git a/frontend/db/queries/shop/products.ts b/frontend/db/queries/shop/products.ts
index 1a5f2009..7b3debe5 100644
--- a/frontend/db/queries/shop/products.ts
+++ b/frontend/db/queries/shop/products.ts
@@ -11,10 +11,10 @@ import {
 } from 'drizzle-orm';
 
 import { db } from '@/db';
-import { productPrices,products } from '@/db/schema';
+import { productPrices, products } from '@/db/schema';
 import type { CatalogSort } from '@/lib/config/catalog';
 import type { CurrencyCode } from '@/lib/shop/currency';
-import { type DbProduct,dbProductSchema } from '@/lib/validation/shop';
+import { type DbProduct, dbProductSchema } from '@/lib/validation/shop';
 
 const publicProductBaseSelect = {
   id: products.id,
diff --git a/frontend/lib/admin/parseAdminProductForm.ts b/frontend/lib/admin/parseAdminProductForm.ts
index c95637c0..4aa6604d 100644
--- a/frontend/lib/admin/parseAdminProductForm.ts
+++ b/frontend/lib/admin/parseAdminProductForm.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { type CurrencyCode,currencyValues } from '@/lib/shop/currency';
+import { type CurrencyCode, currencyValues } from '@/lib/shop/currency';
 import { toCents } from '@/lib/shop/money';
 import {
   productAdminSchema,
diff --git a/frontend/lib/services/orders.ts b/frontend/lib/services/orders.ts
index d614f0dd..d774d915 100644
--- a/frontend/lib/services/orders.ts
+++ b/frontend/lib/services/orders.ts
@@ -1,7 +1,7 @@
 export { createOrderWithItems } from './orders/checkout';
 export { setOrderPaymentIntent } from './orders/payment-intent';
 export { refundOrder } from './orders/refund';
-export { restockOrder as restock,restockOrder } from './orders/restock';
+export { restockOrder as restock, restockOrder } from './orders/restock';
 export { getOrderById, getOrderSummary } from './orders/summary';
 export {
   restockStaleNoPaymentOrders,
diff --git a/frontend/lib/services/orders/sweeps.ts b/frontend/lib/services/orders/sweeps.ts
index 35b8c18b..0d4732f2 100644
--- a/frontend/lib/services/orders/sweeps.ts
+++ b/frontend/lib/services/orders/sweeps.ts
@@ -1,5 +1,5 @@
 import crypto from 'crypto';
-import { and, eq, inArray, isNull, lt, ne,or, sql } from 'drizzle-orm';
+import { and, eq, inArray, isNull, lt, ne, or, sql } from 'drizzle-orm';
 
 import { db } from '@/db';
 import { orders } from '@/db/schema/shop';
diff --git a/frontend/lib/services/products/admin/queries.ts b/frontend/lib/services/products/admin/queries.ts
index 0d992ad8..eae146bd 100644
--- a/frontend/lib/services/products/admin/queries.ts
+++ b/frontend/lib/services/products/admin/queries.ts
@@ -1,7 +1,7 @@
 import { and, eq, type SQL } from 'drizzle-orm';
 
 import { db } from '@/db';
-import { productPrices,products } from '@/db/schema';
+import { productPrices, products } from '@/db/schema';
 import { ProductNotFoundError } from '@/lib/errors/products';
 import type { CurrencyCode } from '@/lib/shop/currency';
 import type { DbProduct } from '@/lib/types/shop';
diff --git a/frontend/lib/services/products/cart/rehydrate.ts b/frontend/lib/services/products/cart/rehydrate.ts
index 51ec1975..e36e861b 100644
--- a/frontend/lib/services/products/cart/rehydrate.ts
+++ b/frontend/lib/services/products/cart/rehydrate.ts
@@ -2,10 +2,10 @@ import { and, eq, inArray } from 'drizzle-orm';
 
 import { db } from '@/db';
 import { coercePriceFromDb } from '@/db/queries/shop/orders';
-import { productPrices,products } from '@/db/schema';
+import { productPrices, products } from '@/db/schema';
 import { logWarn } from '@/lib/logging';
 import { createCartItemKey } from '@/lib/shop/cart-item-key';
-import { type CurrencyCode,isTwoDecimalCurrency } from '@/lib/shop/currency';
+import { type CurrencyCode, isTwoDecimalCurrency } from '@/lib/shop/currency';
 import { calculateLineTotal, fromCents, toCents } from '@/lib/shop/money';
 import type {
   CartClientItem,
diff --git a/frontend/lib/services/products/mutations/create.ts b/frontend/lib/services/products/mutations/create.ts
index e8a99e9a..a25be302 100644
--- a/frontend/lib/services/products/mutations/create.ts
+++ b/frontend/lib/services/products/mutations/create.ts
@@ -1,13 +1,13 @@
 import { eq } from 'drizzle-orm';
 
 import { db } from '@/db';
-import { productPrices,products } from '@/db/schema';
+import { productPrices, products } from '@/db/schema';
 import { uploadProductImageFromFile } from '@/lib/cloudinary';
 import { logError } from '@/lib/logging';
 import { toDbMoney } from '@/lib/shop/money';
 import type { DbProduct, ProductInput } from '@/lib/types/shop';
 
-import { InvalidPayloadError,SlugConflictError } from '../../errors';
+import { InvalidPayloadError, SlugConflictError } from '../../errors';
 import { mapRowToProduct } from '../mapping';
 import {
   enforceSaleBadgeRequiresOriginal,
diff --git a/frontend/lib/services/products/mutations/delete.ts b/frontend/lib/services/products/mutations/delete.ts
index 31194834..c265d47e 100644
--- a/frontend/lib/services/products/mutations/delete.ts
+++ b/frontend/lib/services/products/mutations/delete.ts
@@ -1,7 +1,7 @@
 import { sql } from 'drizzle-orm';
 
 import { db } from '@/db';
-import { productPrices,products } from '@/db/schema';
+import { productPrices, products } from '@/db/schema';
 import { destroyProductImage } from '@/lib/cloudinary';
 import { ProductNotFoundError } from '@/lib/errors/products';
 import { logError } from '@/lib/logging';
diff --git a/frontend/lib/services/products/mutations/update.ts b/frontend/lib/services/products/mutations/update.ts
index b3dbd935..9c841563 100644
--- a/frontend/lib/services/products/mutations/update.ts
+++ b/frontend/lib/services/products/mutations/update.ts
@@ -1,7 +1,7 @@
 import { eq, sql } from 'drizzle-orm';
 
 import { db } from '@/db';
-import { productPrices,products } from '@/db/schema';
+import { productPrices, products } from '@/db/schema';
 import {
   destroyProductImage,
   uploadProductImageFromFile,
diff --git a/frontend/lib/tests/__mocks__/server-only.ts b/frontend/lib/tests/__mocks__/server-only.ts
index e1445347..cb0ff5c3 100644
--- a/frontend/lib/tests/__mocks__/server-only.ts
+++ b/frontend/lib/tests/__mocks__/server-only.ts
@@ -1,3 +1 @@
-// Vitest/Node stub for Next.js "server-only" marker import.
-// Next handles it at build time, but unit tests need a real module.
 export {};
diff --git a/frontend/lib/tests/helpers/ip.ts b/frontend/lib/tests/helpers/ip.ts
index e1781a57..e91ca2db 100644
--- a/frontend/lib/tests/helpers/ip.ts
+++ b/frontend/lib/tests/helpers/ip.ts
@@ -1,9 +1,3 @@
-/**
- * Derive a deterministic TEST IP from an idempotency key.
- * Used only in tests to make rate-limit keys stable per request.
- *
- * Produces a TEST-NET-3 IPv4 address: 203.0.113.1..250
- */
 export function deriveTestIpFromIdemKey(idemKey: string): string {
   const hex = idemKey.replace(/[^0-9a-f]/gi, '').slice(0, 2);
   const n = hex ? (parseInt(hex, 16) % 250) + 1 : 1;
diff --git a/frontend/lib/tests/shop/admin-api-killswitch.test.ts b/frontend/lib/tests/shop/admin-api-killswitch.test.ts
index 9e030ad7..ce7c3dbb 100644
--- a/frontend/lib/tests/shop/admin-api-killswitch.test.ts
+++ b/frontend/lib/tests/shop/admin-api-killswitch.test.ts
@@ -1,5 +1,5 @@
 import { NextRequest } from 'next/server';
-import { afterEach,beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { vi } from 'vitest';
 
 const BASE_URL = 'http://localhost';
diff --git a/frontend/lib/tests/shop/admin-product-sale-contract.test.ts b/frontend/lib/tests/shop/admin-product-sale-contract.test.ts
index 716b8660..4373603c 100644
--- a/frontend/lib/tests/shop/admin-product-sale-contract.test.ts
+++ b/frontend/lib/tests/shop/admin-product-sale-contract.test.ts
@@ -1,5 +1,5 @@
 import { NextRequest } from 'next/server';
-import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const { getCurrentUserMock, parseAdminProductFormMock } = vi.hoisted(() => ({
   getCurrentUserMock: vi.fn(async () => ({
diff --git a/frontend/lib/tests/shop/cart-rehydrate-variant-sanitize.test.ts b/frontend/lib/tests/shop/cart-rehydrate-variant-sanitize.test.ts
index 49e933d7..a3a356f3 100644
--- a/frontend/lib/tests/shop/cart-rehydrate-variant-sanitize.test.ts
+++ b/frontend/lib/tests/shop/cart-rehydrate-variant-sanitize.test.ts
@@ -4,7 +4,7 @@ import { eq } from 'drizzle-orm';
 import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 
 import { db } from '@/db';
-import { productPrices,products } from '@/db/schema';
+import { productPrices, products } from '@/db/schema';
 import { rehydrateCartItems } from '@/lib/services/products';
 
 let productId: string;
diff --git a/frontend/lib/tests/shop/checkout-concurrency-stock1.test.ts b/frontend/lib/tests/shop/checkout-concurrency-stock1.test.ts
index ead8ad5f..31f3d279 100644
--- a/frontend/lib/tests/shop/checkout-concurrency-stock1.test.ts
+++ b/frontend/lib/tests/shop/checkout-concurrency-stock1.test.ts
@@ -252,7 +252,6 @@ describe('P0-8.10.1 checkout concurrency: stock=1, two parallel checkouts', () =
       // In CI we fail fast so flakes are visible.
       if (process.env.CI) throw err;
 
-       
       console.warn('checkout concurrency cleanup failed', err);
     }
   }, 30000);
diff --git a/frontend/lib/tests/shop/checkout-currency-policy.test.ts b/frontend/lib/tests/shop/checkout-currency-policy.test.ts
index f9ad2394..56f2ebd8 100644
--- a/frontend/lib/tests/shop/checkout-currency-policy.test.ts
+++ b/frontend/lib/tests/shop/checkout-currency-policy.test.ts
@@ -20,7 +20,8 @@ vi.mock('@/lib/env/stripe', () => ({
   isPaymentsEnabled: () => false,
 }));
 
-const createPaymentIntentMock = vi.fn((..._args: any[]) => {
+const createPaymentIntentMock = vi.fn((...args: any[]) => {
+  void args;
   throw new Error(
     'Stripe should not be called in this test (payments disabled).'
   );
@@ -28,17 +29,22 @@ const createPaymentIntentMock = vi.fn((..._args: any[]) => {
 
 vi.mock('@/lib/psp/stripe', () => ({
   createPaymentIntent: (...args: any[]) => createPaymentIntentMock(...args),
-  retrievePaymentIntent: (..._args: any[]) => {
+  retrievePaymentIntent: (...args: any[]) => {
+    void args;
     throw new Error(
       'Stripe should not be called in this test (payments disabled).'
     );
   },
 }));
 
-// checkout-currency-policy.test.ts
-
-const logErrorMock = vi.fn((..._args: any[]) => undefined);
-const logWarnMock = vi.fn((..._args: any[]) => undefined);
+const logErrorMock = vi.fn((...args: any[]) => {
+  void args;
+  return undefined;
+});
+const logWarnMock = vi.fn((...args: any[]) => {
+  void args;
+  return undefined;
+});
 
 vi.mock('@/lib/logging', async () => {
   const actual =
@@ -51,7 +57,7 @@ vi.mock('@/lib/logging', async () => {
 });
 
 import { db } from '@/db';
-import { orders,productPrices, products } from '@/db/schema';
+import { orders, productPrices, products } from '@/db/schema';
 
 let POST: (req: NextRequest) => Promise<Response>;
 
diff --git a/frontend/lib/tests/shop/checkout-no-payments.test.ts b/frontend/lib/tests/shop/checkout-no-payments.test.ts
index 46c938cd..fe9747cc 100644
--- a/frontend/lib/tests/shop/checkout-no-payments.test.ts
+++ b/frontend/lib/tests/shop/checkout-no-payments.test.ts
@@ -2,10 +2,10 @@
 import crypto from 'crypto';
 import { eq, sql } from 'drizzle-orm';
 import { NextRequest } from 'next/server';
-import { afterAll,beforeAll, describe, expect, it, vi } from 'vitest';
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
 
 import { db } from '@/db';
-import { orders, productPrices,products } from '@/db/schema';
+import { orders, productPrices, products } from '@/db/schema';
 import { toDbMoney } from '@/lib/shop/money';
 import { deriveTestIpFromIdemKey } from '@/lib/tests/helpers/ip';
 
diff --git a/frontend/lib/tests/shop/checkout-origin-posture-contract.test.ts b/frontend/lib/tests/shop/checkout-origin-posture-contract.test.ts
index 5c1464b8..4515bc4e 100644
--- a/frontend/lib/tests/shop/checkout-origin-posture-contract.test.ts
+++ b/frontend/lib/tests/shop/checkout-origin-posture-contract.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect,it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { POST } from '@/app/api/shop/checkout/route';
 import { makeCheckoutReq } from '@/lib/tests/helpers/makeCheckoutReq';
diff --git a/frontend/lib/tests/shop/order-items-variants.test.ts b/frontend/lib/tests/shop/order-items-variants.test.ts
index 3a891a19..9dc09c54 100644
--- a/frontend/lib/tests/shop/order-items-variants.test.ts
+++ b/frontend/lib/tests/shop/order-items-variants.test.ts
@@ -1,9 +1,9 @@
 import crypto from 'crypto';
 import { eq, sql } from 'drizzle-orm';
-import { describe, expect,it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { db } from '@/db';
-import { orderItems,orders, productPrices, products } from '@/db/schema/shop';
+import { orderItems, orders, productPrices, products } from '@/db/schema/shop';
 import { createOrderWithItems } from '@/lib/services/orders';
 
 describe('order_items variants (selected_size/selected_color)', () => {
diff --git a/frontend/lib/tests/shop/orders-access.test.ts b/frontend/lib/tests/shop/orders-access.test.ts
index 21bbd861..209d53d9 100644
--- a/frontend/lib/tests/shop/orders-access.test.ts
+++ b/frontend/lib/tests/shop/orders-access.test.ts
@@ -1,5 +1,5 @@
 import { NextRequest } from 'next/server';
-import { beforeEach,describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('@/lib/auth', () => ({
   getCurrentUser: vi.fn(),
diff --git a/frontend/lib/tests/shop/payment-state-legacy-writers.test.ts b/frontend/lib/tests/shop/payment-state-legacy-writers.test.ts
index 95d2a343..93f8b393 100644
--- a/frontend/lib/tests/shop/payment-state-legacy-writers.test.ts
+++ b/frontend/lib/tests/shop/payment-state-legacy-writers.test.ts
@@ -3,7 +3,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 
 import { eq } from 'drizzle-orm';
-import { afterEach,describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 
 import { db } from '@/db';
 import { orders } from '@/db/schema/shop';
@@ -17,7 +17,6 @@ type SeedArgs = {
 async function seedOrder(args: SeedArgs): Promise<string> {
   const orderId = crypto.randomUUID();
   const now = new Date();
-
   const idempotencyKey = `test:${orderId}`;
 
   await db.insert(orders).values({
diff --git a/frontend/lib/tests/shop/payment-status-tripwire.test.ts b/frontend/lib/tests/shop/payment-status-tripwire.test.ts
index 46a774c0..6229572c 100644
--- a/frontend/lib/tests/shop/payment-status-tripwire.test.ts
+++ b/frontend/lib/tests/shop/payment-status-tripwire.test.ts
@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 
-import { describe, expect,it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 const REPO_ROOT = process.cwd();
 
diff --git a/frontend/lib/tests/shop/product-sale-invariant.test.ts b/frontend/lib/tests/shop/product-sale-invariant.test.ts
index 20b7f764..a2586c4f 100644
--- a/frontend/lib/tests/shop/product-sale-invariant.test.ts
+++ b/frontend/lib/tests/shop/product-sale-invariant.test.ts
@@ -1,5 +1,5 @@
 import { eq } from 'drizzle-orm';
-import { afterEach,describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('@/lib/cloudinary', () => {
   return {
@@ -12,7 +12,7 @@ vi.mock('@/lib/cloudinary', () => {
 });
 
 import { db } from '@/db';
-import { productPrices,products } from '@/db/schema';
+import { productPrices, products } from '@/db/schema';
 import { createProduct, updateProduct } from '@/lib/services/products';
 import { toDbMoney } from '@/lib/shop/money';
 
diff --git a/frontend/lib/tests/shop/public-product-visibility.test.ts b/frontend/lib/tests/shop/public-product-visibility.test.ts
index 25cbd8bb..6399b2d6 100644
--- a/frontend/lib/tests/shop/public-product-visibility.test.ts
+++ b/frontend/lib/tests/shop/public-product-visibility.test.ts
@@ -1,11 +1,11 @@
 import { randomUUID } from 'node:crypto';
 
 import { eq } from 'drizzle-orm';
-import { describe, expect,it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { db } from '@/db';
 import { getPublicProductBySlug } from '@/db/queries/shop/products';
-import { productPrices,products } from '@/db/schema';
+import { productPrices, products } from '@/db/schema';
 
 function logTestCleanupFailed(meta: Record<string, unknown>, error: unknown) {
   console.error('[test cleanup failed]', {
diff --git a/frontend/lib/tests/shop/rate-limit-subject.test.ts b/frontend/lib/tests/shop/rate-limit-subject.test.ts
index bb4a8a63..258a3ef5 100644
--- a/frontend/lib/tests/shop/rate-limit-subject.test.ts
+++ b/frontend/lib/tests/shop/rate-limit-subject.test.ts
@@ -1,4 +1,4 @@
-import { afterEach,describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 vi.mock('@/db', () => ({ db: { execute: vi.fn() } }));
 
 import { NextRequest } from 'next/server';
diff --git a/frontend/lib/tests/shop/restock-order-only-once.test.ts b/frontend/lib/tests/shop/restock-order-only-once.test.ts
index ef1ba4bb..0e0a37cc 100644
--- a/frontend/lib/tests/shop/restock-order-only-once.test.ts
+++ b/frontend/lib/tests/shop/restock-order-only-once.test.ts
@@ -1,6 +1,6 @@
 import crypto from 'crypto';
 import { eq, sql } from 'drizzle-orm';
-import { describe, expect,it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { db } from '@/db';
 import { orders, products } from '@/db/schema';
diff --git a/frontend/lib/tests/shop/restock-stale-claim-gate.test.ts b/frontend/lib/tests/shop/restock-stale-claim-gate.test.ts
index df71dbbd..01cc81d7 100644
--- a/frontend/lib/tests/shop/restock-stale-claim-gate.test.ts
+++ b/frontend/lib/tests/shop/restock-stale-claim-gate.test.ts
@@ -1,6 +1,6 @@
 import crypto from 'crypto';
 import { eq } from 'drizzle-orm';
-import { describe, expect,it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { db } from '@/db';
 import { orders } from '@/db/schema';
diff --git a/frontend/lib/tests/shop/restock-stale-stripe-orphan.test.ts b/frontend/lib/tests/shop/restock-stale-stripe-orphan.test.ts
index 345b284b..d12bca02 100644
--- a/frontend/lib/tests/shop/restock-stale-stripe-orphan.test.ts
+++ b/frontend/lib/tests/shop/restock-stale-stripe-orphan.test.ts
@@ -1,6 +1,6 @@
 import crypto from 'crypto';
 import { eq } from 'drizzle-orm';
-import { describe, expect,it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { db } from '@/db';
 import { orders } from '@/db/schema';
diff --git a/frontend/lib/tests/shop/restock-stuck-reserving-sweep.test.ts b/frontend/lib/tests/shop/restock-stuck-reserving-sweep.test.ts
index 1aff157f..1d3ff5b3 100644
--- a/frontend/lib/tests/shop/restock-stuck-reserving-sweep.test.ts
+++ b/frontend/lib/tests/shop/restock-stuck-reserving-sweep.test.ts
@@ -1,6 +1,6 @@
 import crypto from 'crypto';
 import { eq, sql } from 'drizzle-orm';
-import { describe, expect,it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { db } from '@/db';
 import { orders, products } from '@/db/schema';
diff --git a/frontend/lib/tests/shop/restock-sweep-claim.test.ts b/frontend/lib/tests/shop/restock-sweep-claim.test.ts
index 09fb2da1..b670c47b 100644
--- a/frontend/lib/tests/shop/restock-sweep-claim.test.ts
+++ b/frontend/lib/tests/shop/restock-sweep-claim.test.ts
@@ -1,6 +1,6 @@
 import crypto from 'crypto';
 import { eq } from 'drizzle-orm';
-import { describe, expect,it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { db } from '@/db';
 import { orders } from '@/db/schema';
diff --git a/frontend/lib/tests/shop/stripe-webhook-contract.test.ts b/frontend/lib/tests/shop/stripe-webhook-contract.test.ts
index 10d8bd36..04399ff4 100644
--- a/frontend/lib/tests/shop/stripe-webhook-contract.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-contract.test.ts
@@ -1,5 +1,5 @@
 import { NextRequest } from 'next/server';
-import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('@/lib/logging', async () => {
   const actual = await vi.importActual<any>('@/lib/logging');
diff --git a/frontend/lib/tests/shop/stripe-webhook-mismatch.test.ts b/frontend/lib/tests/shop/stripe-webhook-mismatch.test.ts
index 1a9a75df..77b50e8c 100644
--- a/frontend/lib/tests/shop/stripe-webhook-mismatch.test.ts
+++ b/frontend/lib/tests/shop/stripe-webhook-mismatch.test.ts
@@ -1,6 +1,6 @@
 import { sql } from 'drizzle-orm';
 import { NextRequest } from 'next/server';
-import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { db } from '@/db';
 
diff --git a/frontend/lib/validation/shop.ts b/frontend/lib/validation/shop.ts
index e578a599..8fe979d2 100644
--- a/frontend/lib/validation/shop.ts
+++ b/frontend/lib/validation/shop.ts
@@ -13,7 +13,7 @@ import {
   paymentProviderValues,
   paymentStatusValues,
 } from '@/lib/shop/payments';
-export type { PaymentProvider,PaymentStatus } from '@/lib/shop/payments';
+export type { PaymentProvider, PaymentStatus } from '@/lib/shop/payments';
 
 export const MAX_QUANTITY_PER_LINE = 20;
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ca3ca380..a9df03db 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9686,6 +9686,17 @@
         }
       }
     },
+    "node_modules/next-intl/node_modules/@swc/helpers": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/next-themes": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",

From 1ad1d7f36682867114512082ee844a325c5e24de Mon Sep 17 00:00:00 2001
From: Lesia Soloviova <106915140+LesiaUKR@users.noreply.github.com>
Date: Tue, 3 Feb 2026 20:14:18 +0200
Subject: [PATCH 22/24] (SP: 5) [Quiz] Redis caching + guest session fix +
 cleanup (#263)

* feat(quiz-ui): quiz UI polish - tabs, category accents, color scheme (issues #181, #193, #194)

- Refactor QaTabButton to shared CategoryTabButton component
- Add category accent colors to QuizCard, buttons, progress indicators
- Standardize colors with CSS variables, traffic light timer
- Add DynamicGridBackground to quizzes list page
- Border-only answer feedback, semi-transparent progress styles

* docs: update .gitignore

* fix(quiz): align disqualification threshold with warning banner

Changed violationsCount > 3 to >= 3 in QuizResult points block
to match the warning banner threshold at line 124.

* feat(quiz-testing): add quiz unit tests

- Configure Vitest for quiz module
- Add test factories and setup utilities
- Add quiz-crypto tests (13 tests)
- Add quiz-session tests (12 tests)

* test(quiz): add integration tests for verify-answer API and useAntiCheat hook (#199)

- verify-answer.test.ts: 8 tests for API endpoint
  - Correct/wrong answer verification
  - Validation errors (missing fields, tampered data)
  - Security: rejects modified encrypted answers

- quiz-anticheat.test.ts: 10 tests for useAntiCheat hook
  - Detects copy, paste, context-menu, tab-switch events
  - Respects isActive flag
  - Reset and cleanup functionality

Total quiz tests: 52 (9 setup + 25 unit + 18 integration)

* test(quiz): expand test coverage to 90%+ with hooks, API routes, and UI flow

Add 28 new tests covering:
- useQuizSession hook (6 tests)
- useQuizGuards hook (8 tests)
- guest-quiz storage (5 tests)
- guest-result API route (5 tests)
- quiz-slug API route (3 tests)
- QuizContainer UI flow (1 test)

Coverage: 35% -> 90.94% (quiz scope)
Tests: 52 -> 80

* chore: remove coverage-quiz from git, add to .gitignore

* chore: add coverage-quiz to .gitignore, fix quiz guards test

* fix(a11y): improve quiz accessibility and i18n compliance

* fix(sl/feat/quiz): replace with correct name for react icon

* feat(quiz): implement Redis caching + session fixes + cleanup

Closes #260, #261, #262

- Add quiz-answers-redis.ts with getOrCreateQuizAnswersCache()
- Cache correct answers per quiz (12h TTL)
- Replace AES-256-GCM decryption with O(1) Redis lookup
- Add initializeQuizCache server action
- Update verify-answer route to use Redis

- Allow restoring 'completed' sessions (not just 'in_progress')
- Only clear session for authenticated users after submit
- Guest result screen now survives language switch

- Delete PendingResultHandler.tsx (never executes)
- Delete start-session/route.ts (broken import, unused)
- Delete quiz-crypto.ts (AES replaced by Redis)
- Delete quiz-crypto.test.ts (tests dead code)
- Rewrite verify-answer.test.ts for Redis API (8 tests)
- Fix quiz-session.test.ts for completed session restore

* chore(quiz): delete unused start-session route

Part of #262 cleanup - route had broken import after Redis migration.

* git commit -m "fix(quiz): add NaN seed validation and cache/DB fallback

- Validate seed param to prevent NaN breaking question shuffle
- Add cache recovery in verify-answer when Redis cache expires
- Add DB fallback in getCorrectAnswer when Redis unavailable
---
 frontend/actions/quiz.ts                      |  21 ++-
 frontend/app/[locale]/dashboard/page.tsx      |  11 +-
 frontend/app/[locale]/quiz/[slug]/page.tsx    |  19 +-
 .../app/api/auth/github/callback/route.ts     |   2 +-
 .../app/api/auth/google/callback/route.ts     |   2 +-
 frontend/app/api/auth/login/route.ts          |   2 +-
 frontend/app/api/debug/redis-clear/route.ts   |  22 +++
 frontend/app/api/debug/redis/route.ts         |  27 +++
 .../app/api/questions/[category]/route.ts     |   2 +-
 frontend/app/api/quiz/verify-answer/route.ts  |  47 +++--
 frontend/app/api/sessions/activity/route.ts   |   2 +-
 .../components/about/CommunitySection.tsx     |   2 +-
 frontend/components/about/FeaturesSection.tsx |   2 +-
 frontend/components/about/HeroSection.tsx     |   2 +-
 frontend/components/about/InteractiveGame.tsx |   4 +-
 frontend/components/about/PricingSection.tsx  |   2 +-
 frontend/components/about/TopicsSection.tsx   |   2 +-
 frontend/components/auth/PostAuthQuizSync.tsx |   9 +-
 frontend/components/blog/BlogNavLinks.tsx     |   2 +-
 frontend/components/dashboard/StatsCard.tsx   |   2 +-
 frontend/components/header/AppMobileMenu.tsx  |   2 +-
 .../components/home/InteractiveCTAButton.tsx  |   2 +-
 frontend/components/q&a/AIWordHelper.tsx      |   2 +-
 frontend/components/q&a/AccordionList.tsx     |   2 +-
 frontend/components/q&a/CodeBlock.tsx         |   2 +-
 frontend/components/q&a/QaSection.tsx         |   2 +-
 frontend/components/q&a/useQaTabs.ts          |   2 +-
 frontend/components/quiz/CountdownTimer.tsx   |   7 +-
 .../components/quiz/PendingResultHandler.tsx  |  45 -----
 frontend/components/quiz/QuizCard.tsx         |   2 +-
 frontend/components/quiz/QuizContainer.tsx    |  63 ++++---
 frontend/components/quiz/QuizProgress.tsx     |   6 +-
 frontend/components/quiz/QuizQuestion.tsx     |  22 ++-
 frontend/components/quiz/QuizResult.tsx       |   9 +-
 frontend/components/quiz/QuizzesSection.tsx   |   4 +-
 .../shared/DynamicGridBackground.tsx          |   2 +-
 .../components/shared/GitHubStarButton.tsx    |   2 +-
 .../components/shared/LanguageSwitcher.tsx    |   4 +-
 .../components/tests/CookieBanner.test.tsx    |   4 +-
 .../components/tests/blog/blog-card.test.tsx  |   2 +-
 .../tests/blog/blog-category-grid.test.tsx    |   2 +-
 .../tests/blog/blog-filters.test.tsx          |   2 +-
 .../tests/blog/blog-header-search.test.tsx    |   2 +-
 .../tests/blog/blog-nav-links.test.tsx        |   2 +-
 .../tests/q&a/accordion-list.test.tsx         |   4 +-
 .../tests/q&a/ai-word-helper.test.tsx         |   4 +-
 .../components/tests/q&a/code-block.test.tsx  |   4 +-
 .../q&a/floating-explain-button.test.tsx      |   4 +-
 .../tests/q&a/highlight-cached-terms.test.tsx |   2 +-
 .../components/tests/q&a/pagination.test.tsx  |   2 +-
 .../tests/q&a/selectable-text.test.tsx        |   4 +-
 frontend/components/tests/q&a/types.test.ts   |   2 +-
 frontend/components/theme/ThemeToggle.tsx     |   2 +-
 frontend/components/ui/accordion.tsx          |   2 +-
 frontend/components/ui/tabs.tsx               |   2 +-
 frontend/data/about.ts                        |   2 +-
 frontend/db/queries/leaderboard.ts            |   2 +-
 frontend/db/queries/quiz.ts                   |   2 +-
 frontend/db/schema/emailVerificationTokens.ts |   2 +-
 frontend/db/schema/passwordResetTokens.ts     |   2 +-
 frontend/db/schema/sessions.ts                |   2 +-
 frontend/db/seed-quiz-angular-advanced.ts     |   2 +-
 frontend/db/seed-quiz-angular.ts              |   2 +-
 frontend/db/seed-quiz-nodejs-advanced.ts      |   2 +-
 frontend/db/seed-quiz-nodejs.ts               |   2 +-
 frontend/db/seed-quiz-react.ts                |   9 +-
 frontend/db/seed-quiz-vue.ts                  |   2 +-
 frontend/eslint.config.mjs                    |   8 +-
 frontend/i18n/request.ts                      |   2 +-
 frontend/i18n/routing.ts                      |   2 +-
 frontend/lib/quiz/quiz-answers-redis.ts       |  97 +++++++++++
 frontend/lib/quiz/quiz-crypto.ts              |  87 ----------
 frontend/lib/quiz/quiz-session.ts             |   2 +-
 .../lib/tests/blog/blog-author-route.test.ts  |   2 +-
 .../lib/tests/blog/blog-search-route.test.ts  |   2 +-
 .../lib/tests/quiz/guest-result-route.test.ts |   2 +-
 .../lib/tests/quiz/quiz-anticheat.test.ts     |   2 +-
 frontend/lib/tests/quiz/quiz-crypto.test.ts   | 162 ------------------
 frontend/lib/tests/quiz/quiz-session.test.ts  |   7 +-
 frontend/lib/tests/quiz/quiz-setup.test.ts    |   2 +-
 frontend/lib/tests/quiz/setup.ts              |   2 -
 .../lib/tests/quiz/use-quiz-guards.test.ts    |   2 +-
 .../lib/tests/quiz/use-quiz-session.test.ts   |   2 +-
 frontend/lib/tests/quiz/verify-answer.test.ts | 155 ++++++++---------
 frontend/lib/utils.ts                         |   2 +-
 frontend/package-lock.json                    |  38 ++--
 frontend/tsconfig.json                        |   2 +-
 87 files changed, 452 insertions(+), 569 deletions(-)
 create mode 100644 frontend/app/api/debug/redis-clear/route.ts
 create mode 100644 frontend/app/api/debug/redis/route.ts
 delete mode 100644 frontend/components/quiz/PendingResultHandler.tsx
 create mode 100644 frontend/lib/quiz/quiz-answers-redis.ts
 delete mode 100644 frontend/lib/quiz/quiz-crypto.ts
 delete mode 100644 frontend/lib/tests/quiz/quiz-crypto.test.ts

diff --git a/frontend/actions/quiz.ts b/frontend/actions/quiz.ts
index 20aac9fb..58ef6432 100644
--- a/frontend/actions/quiz.ts
+++ b/frontend/actions/quiz.ts
@@ -1,6 +1,6 @@
 'use server';
 
-import { and,eq, inArray } from 'drizzle-orm';
+import { eq, inArray } from 'drizzle-orm';
 
 import { db } from '@/db';
 import { awardQuizPoints, calculateQuizPoints } from '@/db/queries/points';
@@ -255,3 +255,22 @@ export async function submitQuizAttempt(
     };
   }
 }
+
+export async function initializeQuizCache(
+  quizId: string
+): Promise<{ success: boolean; error?: string }> {
+  try {
+    const { getOrCreateQuizAnswersCache } =
+      await import('@/lib/quiz/quiz-answers-redis');
+    const success = await getOrCreateQuizAnswersCache(quizId);
+
+    if (!success) {
+      return { success: false, error: 'Quiz not found' };
+    }
+
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to initialize quiz cache:', error);
+    return { success: false, error: 'Internal server error' };
+  }
+}
diff --git a/frontend/app/[locale]/dashboard/page.tsx b/frontend/app/[locale]/dashboard/page.tsx
index 15fe68e9..3e5a23a3 100644
--- a/frontend/app/[locale]/dashboard/page.tsx
+++ b/frontend/app/[locale]/dashboard/page.tsx
@@ -7,7 +7,6 @@ import { StatsCard } from '@/components/dashboard/StatsCard';
 import { getUserQuizStats } from '@/db/queries/quiz';
 import { getUserProfile } from '@/db/queries/users';
 import { redirect } from '@/i18n/routing';
-import { Link } from '@/i18n/routing';
 import { getCurrentUser } from '@/lib/auth';
 
 export async function generateMetadata({
@@ -85,17 +84,17 @@ export default async function DashboardPage({
         className="pointer-events-none absolute inset-0 -z-10"
         aria-hidden="true"
       >
-        <div className="absolute inset-0 bg-gradient-to-b from-sky-50 via-white to-rose-50 dark:from-slate-950 dark:via-slate-950 dark:to-black" />
-        <div className="absolute top-0 left-1/4 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-sky-300/20 blur-3xl dark:bg-sky-500/10" />
-        <div className="absolute right-0 bottom-0 h-[26rem] w-[26rem] rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" />
-        <div className="absolute bottom-10 left-10 h-[20rem] w-[20rem] rounded-full bg-pink-300/20 blur-3xl dark:bg-fuchsia-500/10" />
+        <div className="absolute inset-0 bg-linear-to-b from-sky-50 via-white to-rose-50 dark:from-slate-950 dark:via-slate-950 dark:to-black" />
+        <div className="absolute top-0 left-1/4 h-96 w-xl -translate-x-1/2 rounded-full bg-sky-300/20 blur-3xl dark:bg-sky-500/10" />
+        <div className="absolute right-0 bottom-0 h-104 w-104 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" />
+        <div className="absolute bottom-10 left-10 h-80 w-[20rem] rounded-full bg-pink-300/20 blur-3xl dark:bg-fuchsia-500/10" />
       </div>
 
       <div className="relative z-10 mx-auto max-w-5xl px-6 py-12">
         <header className="mb-12 flex flex-col justify-between gap-6 md:flex-row md:items-center">
           <div>
             <h1 className="text-4xl font-black tracking-tight drop-shadow-sm md:text-5xl">
-              <span className="bg-gradient-to-r from-sky-400 via-violet-400 to-pink-400 bg-clip-text text-transparent dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500">
+              <span className="bg-linear-to-r from-sky-400 via-violet-400 to-pink-400 bg-clip-text text-transparent dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500">
                 {t('title')}
               </span>
             </h1>
diff --git a/frontend/app/[locale]/quiz/[slug]/page.tsx b/frontend/app/[locale]/quiz/[slug]/page.tsx
index 9a782034..092ccc0d 100644
--- a/frontend/app/[locale]/quiz/[slug]/page.tsx
+++ b/frontend/app/[locale]/quiz/[slug]/page.tsx
@@ -1,12 +1,10 @@
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 
-import { PendingResultHandler } from '@/components/quiz/PendingResultHandler';
 import { QuizContainer } from '@/components/quiz/QuizContainer';
 import { stripCorrectAnswers } from '@/db/queries/quiz';
 import { getQuizBySlug, getQuizQuestionsRandomized } from '@/db/queries/quiz';
 import { getCurrentUser } from '@/lib/auth';
-import { createEncryptedAnswersBlob } from '@/lib/quiz/quiz-crypto';
 
 interface QuizPageProps {
   params: Promise<{ locale: string; slug: string }>;
@@ -29,10 +27,19 @@ export default async function QuizPage({
     notFound();
   }
 
-  const seed = seedParam ? parseInt(seedParam, 10) : Date.now();
+  if (!seedParam) {
+    // eslint-disable-next-line react-hooks/purity -- redirect throws, value never used in render
+    redirect(`/${locale}/quiz/${slug}?seed=${Date.now()}`);
+  }
+
+  const seed = Number.parseInt(seedParam, 10);
+  if (Number.isNaN(seed)) {
+     // eslint-disable-next-line react-hooks/purity -- redirect throws, value never used in render
+    redirect(`/${locale}/quiz/${slug}?seed=${Date.now()}`);
+  }
+  
   const questions = await getQuizQuestionsRandomized(quiz.id, locale, seed);
 
-  const encryptedAnswers = createEncryptedAnswersBlob(questions);
   const clientQuestions = stripCorrectAnswers(questions);
 
   if (!questions.length) {
@@ -73,13 +80,11 @@ export default async function QuizPage({
           quizSlug={slug}
           quizId={quiz.id}
           questions={clientQuestions}
-          encryptedAnswers={encryptedAnswers}
           userId={user?.id ?? null}
           timeLimitSeconds={quiz.timeLimitSeconds ?? questions.length * 30}
           seed={seed}
           categorySlug={quiz.categorySlug}
         />
-        {user && <PendingResultHandler userId={user.id} />}
       </div>
     </div>
   );
diff --git a/frontend/app/api/auth/github/callback/route.ts b/frontend/app/api/auth/github/callback/route.ts
index dc4ab439..2df81a6a 100644
--- a/frontend/app/api/auth/github/callback/route.ts
+++ b/frontend/app/api/auth/github/callback/route.ts
@@ -3,7 +3,7 @@ import { NextRequest, NextResponse } from 'next/server';
 
 import { db } from '@/db';
 import { users } from '@/db/schema/users';
-import { setAuthCookie,signAuthToken } from '@/lib/auth';
+import { setAuthCookie, signAuthToken } from '@/lib/auth';
 import { consumeOAuthState } from '@/lib/auth/oauth-state';
 import { authEnv } from '@/lib/env/auth';
 
diff --git a/frontend/app/api/auth/google/callback/route.ts b/frontend/app/api/auth/google/callback/route.ts
index c5fffe27..b25a79b5 100644
--- a/frontend/app/api/auth/google/callback/route.ts
+++ b/frontend/app/api/auth/google/callback/route.ts
@@ -3,7 +3,7 @@ import { NextRequest, NextResponse } from 'next/server';
 
 import { db } from '@/db';
 import { users } from '@/db/schema/users';
-import { setAuthCookie,signAuthToken } from '@/lib/auth';
+import { setAuthCookie, signAuthToken } from '@/lib/auth';
 import { consumeOAuthState } from '@/lib/auth/oauth-state';
 import { authEnv } from '@/lib/env/auth';
 
diff --git a/frontend/app/api/auth/login/route.ts b/frontend/app/api/auth/login/route.ts
index dfa987d2..21d1d5e5 100644
--- a/frontend/app/api/auth/login/route.ts
+++ b/frontend/app/api/auth/login/route.ts
@@ -6,7 +6,7 @@ import { z } from 'zod';
 
 import { db } from '@/db';
 import { users } from '@/db/schema/users';
-import { setAuthCookie,signAuthToken } from '@/lib/auth';
+import { setAuthCookie, signAuthToken } from '@/lib/auth';
 
 export const runtime = 'nodejs';
 
diff --git a/frontend/app/api/debug/redis-clear/route.ts b/frontend/app/api/debug/redis-clear/route.ts
new file mode 100644
index 00000000..ce9daf98
--- /dev/null
+++ b/frontend/app/api/debug/redis-clear/route.ts
@@ -0,0 +1,22 @@
+import { NextResponse } from 'next/server';
+
+import { getRedisClient } from '@/lib/redis';
+
+export async function DELETE() {
+  if (process.env.NODE_ENV !== 'development') {
+    return NextResponse.json({ error: 'Dev only' }, { status: 403 });
+  }
+
+  const redis = getRedisClient();
+  if (!redis) {
+    return NextResponse.json({ error: 'No Redis client' }, { status: 500 });
+  }
+
+  const keys = await redis.keys('quiz:answers:*');
+
+  if (keys.length > 0) {
+    await redis.del(...keys);
+  }
+
+  return NextResponse.json({ deleted: keys.length });
+}
diff --git a/frontend/app/api/debug/redis/route.ts b/frontend/app/api/debug/redis/route.ts
new file mode 100644
index 00000000..5ead471a
--- /dev/null
+++ b/frontend/app/api/debug/redis/route.ts
@@ -0,0 +1,27 @@
+import { NextResponse } from 'next/server';
+
+import { getRedisClient } from '@/lib/redis';
+
+export async function GET() {
+  if (process.env.NODE_ENV === 'production') {
+    return NextResponse.json({ error: 'Not available' }, { status: 403 });
+  }
+
+  const redis = getRedisClient();
+  if (!redis) {
+    return NextResponse.json({ error: 'Redis not configured' });
+  }
+
+  const keys = await redis.keys('quiz:answers:*');
+  const data: Record<string, unknown> = {};
+
+  for (const key of keys) {
+    data[key] = await redis.get(key);
+  }
+
+  return NextResponse.json({
+    count: keys.length,
+    keys,
+    data,
+  });
+}
diff --git a/frontend/app/api/questions/[category]/route.ts b/frontend/app/api/questions/[category]/route.ts
index 193e749b..76470c04 100644
--- a/frontend/app/api/questions/[category]/route.ts
+++ b/frontend/app/api/questions/[category]/route.ts
@@ -1,4 +1,4 @@
-import { and, eq, ilike,sql } from 'drizzle-orm';
+import { and, eq, ilike, sql } from 'drizzle-orm';
 import { NextResponse } from 'next/server';
 
 import { db } from '@/db';
diff --git a/frontend/app/api/quiz/verify-answer/route.ts b/frontend/app/api/quiz/verify-answer/route.ts
index bd00725d..5d4485c8 100644
--- a/frontend/app/api/quiz/verify-answer/route.ts
+++ b/frontend/app/api/quiz/verify-answer/route.ts
@@ -1,49 +1,48 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextResponse } from 'next/server';
 
-import { decryptAnswers } from '@/lib/quiz/quiz-crypto';
+import { getCorrectAnswer, getOrCreateQuizAnswersCache } from '@/lib/quiz/quiz-answers-redis';
 
-interface VerifyRequest {
-  questionId: string;
-  answerId: string;
-  encryptedAnswers: string;
-}
+export const runtime = 'nodejs';
 
-export async function POST(request: NextRequest) {
+export async function POST(req: Request) {
   try {
-    const body: VerifyRequest = await request.json();
-    const { questionId, answerId, encryptedAnswers } = body;
+    const body = await req.json().catch(() => null);
 
-    if (!questionId || !answerId || !encryptedAnswers) {
+    if (!body?.quizId || !body?.questionId || !body?.selectedAnswerId) {
       return NextResponse.json(
-        { error: 'Missing required fields' },
+        { success: false, error: 'Missing required fields' },
         { status: 400 }
       );
     }
 
-    const correctAnswersMap = decryptAnswers(encryptedAnswers);
+    const { quizId, questionId, selectedAnswerId } = body;
 
-    if (!correctAnswersMap) {
-      return NextResponse.json(
-        { error: 'Invalid encrypted data' },
-        { status: 400 }
-      );
-    }
+    let correctAnswerId = await getCorrectAnswer(quizId, questionId);
 
-    const correctAnswerId = correctAnswersMap[questionId];
+    if (!correctAnswerId) {
+      const cacheReady = await getOrCreateQuizAnswersCache(quizId);
+      if (cacheReady) {
+        correctAnswerId = await getCorrectAnswer(quizId, questionId);
+      }
+    }
 
     if (!correctAnswerId) {
       return NextResponse.json(
-        { error: 'Question not found' },
+        { success: false, error: 'Question not found in cache' },
         { status: 404 }
       );
     }
 
+    const isCorrect = selectedAnswerId === correctAnswerId;
+
     return NextResponse.json({
-      isCorrect: answerId === correctAnswerId,
+      success: true,
+      isCorrect,
     });
-  } catch {
+  } catch (error) {
+    console.error('Failed to verify answer:', error);
     return NextResponse.json(
-      { error: 'Internal server error' },
+      { success: false, error: 'Internal server error' },
       { status: 500 }
     );
   }
diff --git a/frontend/app/api/sessions/activity/route.ts b/frontend/app/api/sessions/activity/route.ts
index ee42a81c..ee2077ae 100644
--- a/frontend/app/api/sessions/activity/route.ts
+++ b/frontend/app/api/sessions/activity/route.ts
@@ -1,5 +1,5 @@
 import { randomUUID } from 'crypto';
-import { gte, lt,sql } from 'drizzle-orm';
+import { gte, lt, sql } from 'drizzle-orm';
 import { cookies } from 'next/headers';
 import { NextResponse } from 'next/server';
 
diff --git a/frontend/components/about/CommunitySection.tsx b/frontend/components/about/CommunitySection.tsx
index f86977e6..619f33e1 100644
--- a/frontend/components/about/CommunitySection.tsx
+++ b/frontend/components/about/CommunitySection.tsx
@@ -6,7 +6,7 @@ import { useTranslations } from 'next-intl';
 
 import { GradientBadge } from '@/components/ui/gradient-badge';
 import { SectionHeading } from '@/components/ui/section-heading';
-import { type Testimonial,TESTIMONIALS } from '@/data/about';
+import { type Testimonial, TESTIMONIALS } from '@/data/about';
 
 export function CommunitySection() {
   const t = useTranslations('about.community');
diff --git a/frontend/components/about/FeaturesSection.tsx b/frontend/components/about/FeaturesSection.tsx
index e048aac5..2dedfa1e 100644
--- a/frontend/components/about/FeaturesSection.tsx
+++ b/frontend/components/about/FeaturesSection.tsx
@@ -36,7 +36,7 @@ import {
   Zap,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect,useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { SectionHeading } from '@/components/ui/section-heading';
 import { Link } from '@/i18n/routing';
diff --git a/frontend/components/about/HeroSection.tsx b/frontend/components/about/HeroSection.tsx
index eccabb40..df3487df 100644
--- a/frontend/components/about/HeroSection.tsx
+++ b/frontend/components/about/HeroSection.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { ArrowDown,CheckCircle, Linkedin, Star, Users } from 'lucide-react';
+import { ArrowDown, CheckCircle, Linkedin, Star, Users } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
 import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
diff --git a/frontend/components/about/InteractiveGame.tsx b/frontend/components/about/InteractiveGame.tsx
index d2ef905e..642a33a3 100644
--- a/frontend/components/about/InteractiveGame.tsx
+++ b/frontend/components/about/InteractiveGame.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AnimatePresence,motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
   Bug,
   Heart,
@@ -12,7 +12,7 @@ import {
   Zap,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useCallback,useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 const GAME_WIDTH_DESKTOP = 540;
 const GAME_WIDTH_MOBILE = 320;
diff --git a/frontend/components/about/PricingSection.tsx b/frontend/components/about/PricingSection.tsx
index d134bd66..ace570f8 100644
--- a/frontend/components/about/PricingSection.tsx
+++ b/frontend/components/about/PricingSection.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { motion } from 'framer-motion';
-import { ArrowRight,Check, Heart, Server, Sparkles, X } from 'lucide-react';
+import { ArrowRight, Check, Heart, Server, Sparkles, X } from 'lucide-react';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
diff --git a/frontend/components/about/TopicsSection.tsx b/frontend/components/about/TopicsSection.tsx
index afe21842..10e28fda 100644
--- a/frontend/components/about/TopicsSection.tsx
+++ b/frontend/components/about/TopicsSection.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 
-import { type Topic,TOPICS } from '@/data/about';
+import { type Topic, TOPICS } from '@/data/about';
 
 export function TopicsSection() {
   const t = useTranslations('about.topics');
diff --git a/frontend/components/auth/PostAuthQuizSync.tsx b/frontend/components/auth/PostAuthQuizSync.tsx
index 834334ae..7cdc2aab 100644
--- a/frontend/components/auth/PostAuthQuizSync.tsx
+++ b/frontend/components/auth/PostAuthQuizSync.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 
 import {
@@ -9,8 +8,6 @@ import {
 } from '@/lib/quiz/guest-quiz';
 
 export function PostAuthQuizSync() {
-  const router = useRouter();
-
   useEffect(() => {
     queueMicrotask(() => {
       const pendingResult = getPendingQuizResult();
@@ -38,7 +35,6 @@ export function PostAuthQuizSync() {
           if (!result?.success) {
             throw new Error('Quiz save did not succeed');
           }
-
           sessionStorage.setItem(
             'quiz_just_saved',
             JSON.stringify({
@@ -50,13 +46,12 @@ export function PostAuthQuizSync() {
             })
           );
           clearPendingQuizResult();
-          router.refresh();
+          window.location.reload();
         } catch (error) {
           console.error('Failed to sync guest quiz result:', error);
         }
       })();
     });
-  }, [router]);
-
+  }, []);
   return null;
 }
diff --git a/frontend/components/blog/BlogNavLinks.tsx b/frontend/components/blog/BlogNavLinks.tsx
index 45c90c56..62740260 100644
--- a/frontend/components/blog/BlogNavLinks.tsx
+++ b/frontend/components/blog/BlogNavLinks.tsx
@@ -5,7 +5,7 @@ import { useSearchParams } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
 
 import { client } from '@/client';
-import { Link,usePathname } from '@/i18n/routing';
+import { Link, usePathname } from '@/i18n/routing';
 import { cn } from '@/lib/utils';
 
 type Category = {
diff --git a/frontend/components/dashboard/StatsCard.tsx b/frontend/components/dashboard/StatsCard.tsx
index b0cb5b77..2679c3f1 100644
--- a/frontend/components/dashboard/StatsCard.tsx
+++ b/frontend/components/dashboard/StatsCard.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { History,TrendingUp } from 'lucide-react';
+import { History, TrendingUp } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
 import { Link } from '@/i18n/routing';
diff --git a/frontend/components/header/AppMobileMenu.tsx b/frontend/components/header/AppMobileMenu.tsx
index e1252e62..9fbce6b0 100644
--- a/frontend/components/header/AppMobileMenu.tsx
+++ b/frontend/components/header/AppMobileMenu.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Home,LogIn, Menu, ShoppingBag, X } from 'lucide-react';
+import { Home, LogIn, Menu, ShoppingBag, X } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
diff --git a/frontend/components/home/InteractiveCTAButton.tsx b/frontend/components/home/InteractiveCTAButton.tsx
index 5221cfca..80d3dc2d 100644
--- a/frontend/components/home/InteractiveCTAButton.tsx
+++ b/frontend/components/home/InteractiveCTAButton.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AnimatePresence,motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { Heart } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import React from 'react';
diff --git a/frontend/components/q&a/AIWordHelper.tsx b/frontend/components/q&a/AIWordHelper.tsx
index 9bbd7aa3..c15c7648 100644
--- a/frontend/components/q&a/AIWordHelper.tsx
+++ b/frontend/components/q&a/AIWordHelper.tsx
@@ -17,7 +17,7 @@ import {
 } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import React, { useCallback, useEffect, useRef,useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { Link } from '@/i18n/routing';
 import {
diff --git a/frontend/components/q&a/AccordionList.tsx b/frontend/components/q&a/AccordionList.tsx
index da5fc73f..c68a50b7 100644
--- a/frontend/components/q&a/AccordionList.tsx
+++ b/frontend/components/q&a/AccordionList.tsx
@@ -34,7 +34,7 @@ import {
   AccordionTrigger,
 } from '@/components/ui/accordion';
 import { categoryTabStyles } from '@/data/categoryStyles';
-import { CACHE_KEY,getCachedTerms } from '@/lib/ai/explainCache';
+import { CACHE_KEY, getCachedTerms } from '@/lib/ai/explainCache';
 
 function isListItemBlock(value: ListEntry): value is ListItemBlock {
   return (
diff --git a/frontend/components/q&a/CodeBlock.tsx b/frontend/components/q&a/CodeBlock.tsx
index 636eea6e..6bd4965f 100644
--- a/frontend/components/q&a/CodeBlock.tsx
+++ b/frontend/components/q&a/CodeBlock.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Check,Copy } from 'lucide-react';
+import { Check, Copy } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Highlight, themes } from 'prism-react-renderer';
 import { useState } from 'react';
diff --git a/frontend/components/q&a/QaSection.tsx b/frontend/components/q&a/QaSection.tsx
index a07b9304..ddbc64af 100644
--- a/frontend/components/q&a/QaSection.tsx
+++ b/frontend/components/q&a/QaSection.tsx
@@ -7,7 +7,7 @@ import { Pagination } from '@/components/q&a/Pagination';
 import type { CategorySlug } from '@/components/q&a/types';
 import { useQaTabs } from '@/components/q&a/useQaTabs';
 import { CategoryTabButton } from '@/components/shared/CategoryTabButton';
-import { Tabs, TabsContent,TabsList } from '@/components/ui/tabs';
+import { Tabs, TabsContent, TabsList } from '@/components/ui/tabs';
 import { categoryData } from '@/data/category';
 import { categoryTabStyles } from '@/data/categoryStyles';
 import { cn } from '@/lib/utils';
diff --git a/frontend/components/q&a/useQaTabs.ts b/frontend/components/q&a/useQaTabs.ts
index d6c6f8e4..8a9af778 100644
--- a/frontend/components/q&a/useQaTabs.ts
+++ b/frontend/components/q&a/useQaTabs.ts
@@ -2,7 +2,7 @@
 
 import { useSearchParams } from 'next/navigation';
 import { useLocale } from 'next-intl';
-import { useCallback,useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import {
   type CategorySlug,
diff --git a/frontend/components/quiz/CountdownTimer.tsx b/frontend/components/quiz/CountdownTimer.tsx
index 56b4c27c..8d286c97 100644
--- a/frontend/components/quiz/CountdownTimer.tsx
+++ b/frontend/components/quiz/CountdownTimer.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AlertTriangle } from 'lucide-react';
+import { TriangleAlert } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 
@@ -112,7 +112,10 @@ export function CountdownTimer({
         <p className="mt-2 text-xs font-medium">
           {percentage <= 10 ? (
             <>
-              <AlertTriangle className="inline h-4 w-4 text-amber-500" />{' '}
+              <TriangleAlert
+                className="inline h-4 w-4 text-amber-500"
+                aria-hidden="true"
+              />{' '}
               {t('almostDone')}
             </>
           ) : (
diff --git a/frontend/components/quiz/PendingResultHandler.tsx b/frontend/components/quiz/PendingResultHandler.tsx
deleted file mode 100644
index 479bc06e..00000000
--- a/frontend/components/quiz/PendingResultHandler.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-import {
-  clearPendingQuizResult,
-  getPendingQuizResult,
-} from '@/lib/quiz/guest-quiz';
-
-interface Props {
-  userId: string;
-}
-
-export function PendingResultHandler({ userId }: Props) {
-  useEffect(() => {
-    const pending = getPendingQuizResult();
-    if (!pending) return;
-
-    if (pending) {
-      fetch('/api/quiz/guest-result', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          userId,
-          quizId: pending.quizId,
-          answers: pending.answers,
-          violations: pending.violations,
-          timeSpentSeconds: pending.timeSpentSeconds,
-        }),
-      })
-        .then(async res => {
-          if (res.ok) {
-            clearPendingQuizResult();
-          } else {
-            console.error('Guest-result API error:', res.status);
-          }
-        })
-        .catch(err => {
-          console.error('Guest-result fetch error:', err);
-        });
-    }
-  }, [userId]);
-
-  return null;
-}
diff --git a/frontend/components/quiz/QuizCard.tsx b/frontend/components/quiz/QuizCard.tsx
index eb23c28c..bd28c20b 100644
--- a/frontend/components/quiz/QuizCard.tsx
+++ b/frontend/components/quiz/QuizCard.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Clock,FileText } from 'lucide-react';
+import { Clock, FileText } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
 import { Badge } from '@/components/ui/badge';
diff --git a/frontend/components/quiz/QuizContainer.tsx b/frontend/components/quiz/QuizContainer.tsx
index 82c61d6a..4f963a9a 100644
--- a/frontend/components/quiz/QuizContainer.tsx
+++ b/frontend/components/quiz/QuizContainer.tsx
@@ -1,6 +1,5 @@
 'use client';
-
-import { AlertTriangle, Ban, Clock,FileText } from 'lucide-react';
+import { Ban, Clock, FileText, TriangleAlert } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import {
@@ -12,7 +11,7 @@ import {
 } from 'react';
 import { toast } from 'sonner';
 
-import { submitQuizAttempt } from '@/actions/quiz';
+import { initializeQuizCache, submitQuizAttempt } from '@/actions/quiz';
 import { Button } from '@/components/ui/button';
 import { ConfirmModal } from '@/components/ui/confirm-modal';
 import { categoryTabStyles } from '@/data/categoryStyles';
@@ -142,7 +141,6 @@ function quizReducer(state: QuizState, action: QuizAction): QuizState {
 interface QuizContainerProps {
   quizId: string;
   questions: QuizQuestionClient[];
-  encryptedAnswers: string;
   userId: string | null;
   quizSlug: string;
   timeLimitSeconds: number | null;
@@ -155,7 +153,6 @@ export function QuizContainer({
   quizSlug,
   quizId,
   questions,
-  encryptedAnswers,
   userId,
   timeLimitSeconds,
   seed,
@@ -194,11 +191,9 @@ export function QuizContainer({
   const currentQuestion = questions[state.currentIndex];
   const totalQuestions = questions.length;
 
-  const handleRestoreSession = useCallback(
-    (data: QuizSessionData) =>
-      dispatch({ type: 'RESTORE_SESSION', payload: data }),
-    []
-  );
+  const handleRestoreSession = useCallback((data: QuizSessionData) => {
+    dispatch({ type: 'RESTORE_SESSION', payload: data });
+  }, []);
 
   useQuizSession({
     quizId,
@@ -223,9 +218,20 @@ export function QuizContainer({
     }
   }, [seed, searchParams, router]);
 
-  const handleStart = () => {
-    window.history.pushState({ quizGuard: true }, '');
-    dispatch({ type: 'START_QUIZ' });
+  const handleStart = async () => {
+    try {
+      const result = await initializeQuizCache(quizId);
+
+      if (!result.success) {
+        toast.error('Failed to start quiz session');
+        return;
+      }
+
+      window.history.pushState({ quizGuard: true }, '');
+      dispatch({ type: 'START_QUIZ' });
+    } catch {
+      toast.error('Failed to start quiz session');
+    }
   };
 
   const verifyAnswer = async (answerId: string) => {
@@ -234,8 +240,8 @@ export function QuizContainer({
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         questionId: currentQuestion.id,
-        answerId,
-        encryptedAnswers,
+        selectedAnswerId: answerId,
+        quizId,
       }),
     });
 
@@ -301,10 +307,10 @@ export function QuizContainer({
   };
 
   const handleSubmit = () => {
-    clearQuizSession(quizId);
-
     const isIncomplete = state.answers.length < totalQuestions;
-
+    if (!isGuest) {
+      clearQuizSession(quizId);
+    }
     const correctAnswers = state.answers.filter(a => a.isCorrect).length;
     const percentage = (correctAnswers / totalQuestions) * 100;
     const timeSpentSeconds = state.startedAt
@@ -400,7 +406,10 @@ export function QuizContainer({
 
         <div className="space-y-4 text-gray-700 dark:text-gray-300">
           <div className="flex gap-3">
-            <FileText className="mt-0.5 h-5 w-5 flex-shrink-0 text-blue-500 dark:text-blue-400" />
+            <FileText
+              className="mt-0.5 h-5 w-5 shrink-0 text-blue-500 dark:text-blue-400"
+              aria-hidden="true"
+            />
             <div>
               <p className="font-medium">{tRules('general.title')}</p>
               <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -410,7 +419,10 @@ export function QuizContainer({
           </div>
 
           <div className="flex gap-3">
-            <Ban className="mt-0.5 h-5 w-5 flex-shrink-0 text-red-500 dark:text-red-400" />
+            <Ban
+              className="mt-0.5 h-5 w-5 shrink-0 text-red-500 dark:text-red-400"
+              aria-hidden="true"
+            />
             <div>
               <p className="font-medium">{tRules('forbidden.title')}</p>
               <ul className="list-inside list-disc space-y-1 text-sm text-gray-600 dark:text-gray-400">
@@ -423,7 +435,10 @@ export function QuizContainer({
           </div>
 
           <div className="flex gap-3">
-            <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500 dark:text-amber-400" />
+            <TriangleAlert
+              className="mt-0.5 h-5 w-5 shrink-0 text-amber-500 dark:text-amber-400"
+              aria-hidden="true"
+            />
             <div>
               <p className="font-medium">{tRules('control.title')}</p>
               <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -432,7 +447,10 @@ export function QuizContainer({
             </div>
           </div>
           <div className="flex gap-3">
-            <Clock className="mt-0.5 h-5 w-5 flex-shrink-0 text-blue-500 dark:text-blue-400" />
+            <Clock
+              className="mt-0.5 h-5 w-5 shrink-0 text-blue-500 dark:text-blue-400"
+              aria-hidden="true"
+            />
             <div>
               <p className="font-medium">{tRules('time.title')}</p>
               <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -495,6 +513,7 @@ export function QuizContainer({
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
+            aria-hidden="true"
           >
             <path
               strokeLinecap="round"
diff --git a/frontend/components/quiz/QuizProgress.tsx b/frontend/components/quiz/QuizProgress.tsx
index a6e84e01..42d5fb91 100644
--- a/frontend/components/quiz/QuizProgress.tsx
+++ b/frontend/components/quiz/QuizProgress.tsx
@@ -71,7 +71,7 @@ export function QuizProgress({ current, total, answers }: QuizProgressProps) {
                 key={`ellipsis-${idx}`}
                 className="px-2 text-sm text-gray-400 dark:text-gray-500"
               >
-                ...
+                …
               </span>
             );
           }
@@ -104,9 +104,9 @@ export function QuizProgress({ current, total, answers }: QuizProgressProps) {
               {isAnswered ? (
                 <span className="font-bold text-white">
                   {isCorrect ? (
-                    <Check className="h-3 w-3" />
+                    <Check className="h-3 w-3" aria-hidden="true" />
                   ) : (
-                    <X className="h-3 w-3" />
+                    <X className="h-3 w-3" aria-hidden="true" />
                   )}
                 </span>
               ) : (
diff --git a/frontend/components/quiz/QuizQuestion.tsx b/frontend/components/quiz/QuizQuestion.tsx
index 5435816a..ec0eb4a0 100644
--- a/frontend/components/quiz/QuizQuestion.tsx
+++ b/frontend/components/quiz/QuizQuestion.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { Check, Lightbulb,X } from 'lucide-react';
+import { Check, Lightbulb, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
-import { Button } from '@/components/ui/button';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { QuizQuestionClient } from '@/db/queries/quiz';
 import { cn } from '@/lib/utils';
@@ -62,8 +61,8 @@ export function QuizQuestion({
                 isSelected &&
                   isAnswering &&
                   'border-blue-500 bg-blue-50 dark:bg-blue-950',
-                showCorrect && 'border-1 border-green-500',
-                showIncorrect && 'border-1 border-red-500',
+                showCorrect && 'border border-green-500',
+                showIncorrect && 'border border-red-500',
                 !isAnswering && 'cursor-default'
               )}
             >
@@ -71,12 +70,14 @@ export function QuizQuestion({
               <span className="flex-1 text-base">{answer.answerText}</span>
               {showCorrect && (
                 <span className="text-sm font-medium text-green-600 dark:text-green-400">
-                  <Check className="inline h-4 w-4" /> {t('correct')}
+                  <Check className="inline h-4 w-4" aria-hidden="true" />{' '}
+                  {t('correct')}
                 </span>
               )}
               {showIncorrect && (
                 <span className="text-sm font-medium text-red-600 dark:text-red-400">
-                  <X className="inline h-4 w-4" /> {t('incorrect')}
+                  <X className="inline h-4 w-4" aria-hidden="true" />{' '}
+                  {t('incorrect')}
                 </span>
               )}
             </label>
@@ -87,7 +88,7 @@ export function QuizQuestion({
         <div
           className={cn(
             'animate-in fade-in rounded-xl border p-4 duration-300',
-            'border-1 border-blue-500 dark:border-blue-500'
+            'border border-blue-500 dark:border-blue-500'
           )}
         >
           <div className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
@@ -100,11 +101,14 @@ export function QuizQuestion({
         <div
           className={cn(
             'animate-in fade-in rounded-xl border p-4 duration-300',
-            'border-1 border-orange-500 dark:border-orange-500'
+            'border border-orange-500 dark:border-orange-500'
           )}
         >
           <div className="flex items-start gap-3">
-            <Lightbulb className="h-6 w-6 flex-shrink-0 text-amber-500" />
+            <Lightbulb
+              className="h-6 w-6 shrink-0 text-amber-500"
+              aria-hidden="true"
+            />
             <div className="flex-1">
               <h4 className="mb-1 font-semibold text-gray-900 dark:text-gray-100">
                 {t('recommendation.title')}
diff --git a/frontend/components/quiz/QuizResult.tsx b/frontend/components/quiz/QuizResult.tsx
index 3a0bee75..e0acf4c4 100644
--- a/frontend/components/quiz/QuizResult.tsx
+++ b/frontend/components/quiz/QuizResult.tsx
@@ -1,10 +1,10 @@
 'use client';
 
 import {
-  AlertTriangle,
   BookOpen,
   Clock,
   TrendingUp,
+  TriangleAlert,
   Trophy,
 } from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
@@ -34,7 +34,6 @@ export function QuizResult({
   violationsCount = 0,
   pointsAwarded,
   isGuest = false,
-  quizSlug = '',
   isIncomplete = false,
   onRestart,
   onBackToTopics,
@@ -131,7 +130,7 @@ export function QuizResult({
       {violationsCount >= 3 && (
         <div className="rounded-xl border border-orange-200 bg-orange-50 p-4 dark:border-orange-800 dark:bg-orange-900/20">
           <p className="text-center font-medium text-orange-800 dark:text-orange-200">
-            <AlertTriangle className="inline h-4 w-4" />{' '}
+            <TriangleAlert className="inline h-4 w-4" aria-hidden="true" />{' '}
             {t('violations', { count: violationsCount })}
           </p>
         </div>
@@ -169,7 +168,7 @@ export function QuizResult({
           <div className="flex flex-col justify-center gap-3 sm:flex-row">
             <Button
               onClick={() => {
-                const url = `/${locale}/login?returnTo=/quiz/${quizSlug}`;
+                const url = `/${locale}/login?returnTo=/dashboard`;
                 window.location.href = url;
               }}
             >
@@ -177,7 +176,7 @@ export function QuizResult({
             </Button>
             <Button
               onClick={() =>
-                (window.location.href = `/${locale}/signup?returnTo=/quiz/${quizSlug}`)
+                (window.location.href = `/${locale}/signup?returnTo=/dashboard`)
               }
               variant="secondary"
             >
diff --git a/frontend/components/quiz/QuizzesSection.tsx b/frontend/components/quiz/QuizzesSection.tsx
index 7ba69d1a..1965b178 100644
--- a/frontend/components/quiz/QuizzesSection.tsx
+++ b/frontend/components/quiz/QuizzesSection.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { useParams, useRouter,useSearchParams } from 'next/navigation';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 
 import { CategoryTabButton } from '@/components/shared/CategoryTabButton';
-import { Tabs, TabsContent,TabsList } from '@/components/ui/tabs';
+import { Tabs, TabsContent, TabsList } from '@/components/ui/tabs';
 import { categoryData } from '@/data/category';
 import { categoryTabStyles } from '@/data/categoryStyles';
 
diff --git a/frontend/components/shared/DynamicGridBackground.tsx b/frontend/components/shared/DynamicGridBackground.tsx
index 0d681be4..6eba3537 100644
--- a/frontend/components/shared/DynamicGridBackground.tsx
+++ b/frontend/components/shared/DynamicGridBackground.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { motion, useMotionTemplate, useMotionValue } from 'framer-motion';
-import type { MouseEvent,ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 
 import { cn } from '@/lib/utils';
 
diff --git a/frontend/components/shared/GitHubStarButton.tsx b/frontend/components/shared/GitHubStarButton.tsx
index c9776bdc..92a504c0 100644
--- a/frontend/components/shared/GitHubStarButton.tsx
+++ b/frontend/components/shared/GitHubStarButton.tsx
@@ -2,7 +2,7 @@
 
 import { Star } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useRef,useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 interface GitHubStarButtonProps {
   className?: string;
diff --git a/frontend/components/shared/LanguageSwitcher.tsx b/frontend/components/shared/LanguageSwitcher.tsx
index fc7baeea..5be57b6e 100644
--- a/frontend/components/shared/LanguageSwitcher.tsx
+++ b/frontend/components/shared/LanguageSwitcher.tsx
@@ -2,9 +2,9 @@
 
 import { Globe } from 'lucide-react';
 import { useParams, usePathname, useSearchParams } from 'next/navigation';
-import { useEffect,useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { type Locale,locales } from '@/i18n/config';
+import { type Locale, locales } from '@/i18n/config';
 import { Link } from '@/i18n/routing';
 
 const localeLabels: Record<Locale, string> = {
diff --git a/frontend/components/tests/CookieBanner.test.tsx b/frontend/components/tests/CookieBanner.test.tsx
index c964e659..d0f5d617 100644
--- a/frontend/components/tests/CookieBanner.test.tsx
+++ b/frontend/components/tests/CookieBanner.test.tsx
@@ -1,8 +1,8 @@
 /**
  * @vitest-environment jsdom
  */
-import { act, fireEvent,render, screen } from '@testing-library/react';
-import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { CookieBanner } from '@/components/shared/CookieBanner';
 
diff --git a/frontend/components/tests/blog/blog-card.test.tsx b/frontend/components/tests/blog/blog-card.test.tsx
index 809b098f..826bee0e 100644
--- a/frontend/components/tests/blog/blog-card.test.tsx
+++ b/frontend/components/tests/blog/blog-card.test.tsx
@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { fireEvent,render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
 import BlogCard from '@/components/blog/BlogCard';
diff --git a/frontend/components/tests/blog/blog-category-grid.test.tsx b/frontend/components/tests/blog/blog-category-grid.test.tsx
index 4f42df71..8ddec738 100644
--- a/frontend/components/tests/blog/blog-category-grid.test.tsx
+++ b/frontend/components/tests/blog/blog-category-grid.test.tsx
@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { fireEvent,render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { BlogCategoryGrid } from '@/components/blog/BlogCategoryGrid';
diff --git a/frontend/components/tests/blog/blog-filters.test.tsx b/frontend/components/tests/blog/blog-filters.test.tsx
index 9a0ee016..c4b8bcd6 100644
--- a/frontend/components/tests/blog/blog-filters.test.tsx
+++ b/frontend/components/tests/blog/blog-filters.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { render, screen, waitFor } from '@testing-library/react';
-import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { Author, Post } from '@/components/blog/BlogFilters';
 import BlogFilters from '@/components/blog/BlogFilters';
diff --git a/frontend/components/tests/blog/blog-header-search.test.tsx b/frontend/components/tests/blog/blog-header-search.test.tsx
index 0d2d9e68..53f06a99 100644
--- a/frontend/components/tests/blog/blog-header-search.test.tsx
+++ b/frontend/components/tests/blog/blog-header-search.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
 
diff --git a/frontend/components/tests/blog/blog-nav-links.test.tsx b/frontend/components/tests/blog/blog-nav-links.test.tsx
index c9b5f513..704ddb74 100644
--- a/frontend/components/tests/blog/blog-nav-links.test.tsx
+++ b/frontend/components/tests/blog/blog-nav-links.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { render, screen, waitFor } from '@testing-library/react';
-import { afterEach,describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { BlogNavLinks } from '@/components/blog/BlogNavLinks';
 
diff --git a/frontend/components/tests/q&a/accordion-list.test.tsx b/frontend/components/tests/q&a/accordion-list.test.tsx
index 9c690316..a7a3eced 100644
--- a/frontend/components/tests/q&a/accordion-list.test.tsx
+++ b/frontend/components/tests/q&a/accordion-list.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { fireEvent,render, screen } from '@testing-library/react';
-import { beforeEach,describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 const getCachedTermsMock = vi.fn();
 
diff --git a/frontend/components/tests/q&a/ai-word-helper.test.tsx b/frontend/components/tests/q&a/ai-word-helper.test.tsx
index 7b4d082a..29f87597 100644
--- a/frontend/components/tests/q&a/ai-word-helper.test.tsx
+++ b/frontend/components/tests/q&a/ai-word-helper.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
-import { act,render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import type React from 'react';
-import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const getCachedExplanationMock = vi.fn();
 const setCachedExplanationMock = vi.fn();
diff --git a/frontend/components/tests/q&a/code-block.test.tsx b/frontend/components/tests/q&a/code-block.test.tsx
index 54eba04e..a8671c7c 100644
--- a/frontend/components/tests/q&a/code-block.test.tsx
+++ b/frontend/components/tests/q&a/code-block.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { act,fireEvent, render, screen } from '@testing-library/react';
-import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('next-themes', () => ({
   useTheme: () => ({ resolvedTheme: 'light' }),
diff --git a/frontend/components/tests/q&a/floating-explain-button.test.tsx b/frontend/components/tests/q&a/floating-explain-button.test.tsx
index d3660a16..7eca395c 100644
--- a/frontend/components/tests/q&a/floating-explain-button.test.tsx
+++ b/frontend/components/tests/q&a/floating-explain-button.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { fireEvent,render, screen } from '@testing-library/react';
-import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => key,
diff --git a/frontend/components/tests/q&a/highlight-cached-terms.test.tsx b/frontend/components/tests/q&a/highlight-cached-terms.test.tsx
index 239f8c80..fbb9bfa3 100644
--- a/frontend/components/tests/q&a/highlight-cached-terms.test.tsx
+++ b/frontend/components/tests/q&a/highlight-cached-terms.test.tsx
@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { fireEvent,render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
 import HighlightCachedTerms from '@/components/q&a/HighlightCachedTerms';
diff --git a/frontend/components/tests/q&a/pagination.test.tsx b/frontend/components/tests/q&a/pagination.test.tsx
index aa239ab5..f5587e37 100644
--- a/frontend/components/tests/q&a/pagination.test.tsx
+++ b/frontend/components/tests/q&a/pagination.test.tsx
@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { fireEvent,render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 vi.mock('next-intl', () => ({
diff --git a/frontend/components/tests/q&a/selectable-text.test.tsx b/frontend/components/tests/q&a/selectable-text.test.tsx
index c4b56555..68621444 100644
--- a/frontend/components/tests/q&a/selectable-text.test.tsx
+++ b/frontend/components/tests/q&a/selectable-text.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { fireEvent,render } from '@testing-library/react';
-import { afterEach,beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import SelectableText from '@/components/q&a/SelectableText';
 
diff --git a/frontend/components/tests/q&a/types.test.ts b/frontend/components/tests/q&a/types.test.ts
index 54c72ec6..f81b7fdc 100644
--- a/frontend/components/tests/q&a/types.test.ts
+++ b/frontend/components/tests/q&a/types.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect,it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { qaConstants } from '@/components/q&a/types';
 
diff --git a/frontend/components/theme/ThemeToggle.tsx b/frontend/components/theme/ThemeToggle.tsx
index 460ebc6c..c97e6ac8 100644
--- a/frontend/components/theme/ThemeToggle.tsx
+++ b/frontend/components/theme/ThemeToggle.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { Monitor, Moon,Sun } from 'lucide-react';
+import { Monitor, Moon, Sun } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
diff --git a/frontend/components/ui/accordion.tsx b/frontend/components/ui/accordion.tsx
index aad668b6..b3cb453a 100644
--- a/frontend/components/ui/accordion.tsx
+++ b/frontend/components/ui/accordion.tsx
@@ -63,4 +63,4 @@ function AccordionContent({
   );
 }
 
-export { Accordion, AccordionContent,AccordionItem, AccordionTrigger };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
diff --git a/frontend/components/ui/tabs.tsx b/frontend/components/ui/tabs.tsx
index 2135ebb9..ce098ebf 100644
--- a/frontend/components/ui/tabs.tsx
+++ b/frontend/components/ui/tabs.tsx
@@ -63,4 +63,4 @@ function TabsContent({
   );
 }
 
-export { Tabs, TabsContent,TabsList, TabsTrigger };
+export { Tabs, TabsContent, TabsList, TabsTrigger };
diff --git a/frontend/data/about.ts b/frontend/data/about.ts
index 7e39a5fa..af4b9785 100644
--- a/frontend/data/about.ts
+++ b/frontend/data/about.ts
@@ -1,4 +1,4 @@
-import { Github,Linkedin, Twitter } from 'lucide-react';
+import { Github, Linkedin, Twitter } from 'lucide-react';
 
 export const TESTIMONIALS = [
   {
diff --git a/frontend/db/queries/leaderboard.ts b/frontend/db/queries/leaderboard.ts
index 4031adb4..d90c9d49 100644
--- a/frontend/db/queries/leaderboard.ts
+++ b/frontend/db/queries/leaderboard.ts
@@ -1,4 +1,4 @@
-import { desc, eq,sql } from 'drizzle-orm';
+import { desc, eq, sql } from 'drizzle-orm';
 import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
diff --git a/frontend/db/queries/quiz.ts b/frontend/db/queries/quiz.ts
index c95dcc07..710d472a 100644
--- a/frontend/db/queries/quiz.ts
+++ b/frontend/db/queries/quiz.ts
@@ -1,4 +1,4 @@
-import { and, desc, eq, inArray,sql } from 'drizzle-orm';
+import { and, desc, eq, inArray, sql } from 'drizzle-orm';
 import { unstable_cache } from 'next/cache';
 import { cache } from 'react';
 
diff --git a/frontend/db/schema/emailVerificationTokens.ts b/frontend/db/schema/emailVerificationTokens.ts
index db8f7ab6..921f1a9a 100644
--- a/frontend/db/schema/emailVerificationTokens.ts
+++ b/frontend/db/schema/emailVerificationTokens.ts
@@ -1,4 +1,4 @@
-import { index,pgTable, text, timestamp } from 'drizzle-orm/pg-core';
+import { index, pgTable, text, timestamp } from 'drizzle-orm/pg-core';
 
 export const emailVerificationTokens = pgTable(
   'email_verification_tokens',
diff --git a/frontend/db/schema/passwordResetTokens.ts b/frontend/db/schema/passwordResetTokens.ts
index c0bdda77..a76cea62 100644
--- a/frontend/db/schema/passwordResetTokens.ts
+++ b/frontend/db/schema/passwordResetTokens.ts
@@ -1,4 +1,4 @@
-import { index,pgTable, text, timestamp } from 'drizzle-orm/pg-core';
+import { index, pgTable, text, timestamp } from 'drizzle-orm/pg-core';
 
 export const passwordResetTokens = pgTable(
   'password_reset_tokens',
diff --git a/frontend/db/schema/sessions.ts b/frontend/db/schema/sessions.ts
index 18b7d0b6..11f0490d 100644
--- a/frontend/db/schema/sessions.ts
+++ b/frontend/db/schema/sessions.ts
@@ -1,4 +1,4 @@
-import { index,pgTable, text, timestamp } from 'drizzle-orm/pg-core';
+import { index, pgTable, text, timestamp } from 'drizzle-orm/pg-core';
 
 export const activeSessions = pgTable(
   'active_sessions',
diff --git a/frontend/db/seed-quiz-angular-advanced.ts b/frontend/db/seed-quiz-angular-advanced.ts
index 93e6626c..94ecb066 100644
--- a/frontend/db/seed-quiz-angular-advanced.ts
+++ b/frontend/db/seed-quiz-angular-advanced.ts
@@ -1,5 +1,5 @@
 import { eq } from 'drizzle-orm';
-import { existsSync,readFileSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
 
 import { db } from './index';
diff --git a/frontend/db/seed-quiz-angular.ts b/frontend/db/seed-quiz-angular.ts
index 1310f7a4..c9a4cdec 100644
--- a/frontend/db/seed-quiz-angular.ts
+++ b/frontend/db/seed-quiz-angular.ts
@@ -1,5 +1,5 @@
 import { eq } from 'drizzle-orm';
-import { existsSync,readFileSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
 
 import { db } from './index';
diff --git a/frontend/db/seed-quiz-nodejs-advanced.ts b/frontend/db/seed-quiz-nodejs-advanced.ts
index f40a76c1..b562b648 100644
--- a/frontend/db/seed-quiz-nodejs-advanced.ts
+++ b/frontend/db/seed-quiz-nodejs-advanced.ts
@@ -1,5 +1,5 @@
 import { eq } from 'drizzle-orm';
-import { existsSync,readFileSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
 
 import { db } from './index';
diff --git a/frontend/db/seed-quiz-nodejs.ts b/frontend/db/seed-quiz-nodejs.ts
index 0ca99c3e..de4fcdd1 100644
--- a/frontend/db/seed-quiz-nodejs.ts
+++ b/frontend/db/seed-quiz-nodejs.ts
@@ -1,5 +1,5 @@
 import { eq } from 'drizzle-orm';
-import { existsSync,readFileSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
 
 import { db } from './index';
diff --git a/frontend/db/seed-quiz-react.ts b/frontend/db/seed-quiz-react.ts
index b51bd4b2..9782bc26 100644
--- a/frontend/db/seed-quiz-react.ts
+++ b/frontend/db/seed-quiz-react.ts
@@ -989,7 +989,7 @@ async function seedReactQuiz() {
   }
 }
 
-async function cleanupReactQuiz() {
+async function _cleanupReactQuiz() {
   console.log('🧹 Cleaning up React quiz...');
 
   await db.delete(quizAnswerTranslations);
@@ -1008,10 +1008,3 @@ seedReactQuiz()
     console.error(error);
     process.exit(1);
   });
-
-// cleanupReactQuiz()
-//   .then(() => process.exit(0))
-//   .catch((error) => {
-//     console.error(error);
-//     process.exit(1);
-//   });
diff --git a/frontend/db/seed-quiz-vue.ts b/frontend/db/seed-quiz-vue.ts
index 5a7fea87..96f2fd08 100644
--- a/frontend/db/seed-quiz-vue.ts
+++ b/frontend/db/seed-quiz-vue.ts
@@ -1,5 +1,5 @@
 import { eq } from 'drizzle-orm';
-import { existsSync,readFileSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
 
 import { db } from './index';
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index 1062340c..d5f66b4e 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -8,7 +8,13 @@ export default defineConfig([
   ...nextVitals,
   ...nextTs,
 
-  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
+  globalIgnores([
+    '.next/**',
+    'out/**',
+    'build/**',
+    'next-env.d.ts',
+    '_dev-notes/**',
+  ]),
 
   {
     plugins: {
diff --git a/frontend/i18n/request.ts b/frontend/i18n/request.ts
index b4de421d..41bc764b 100644
--- a/frontend/i18n/request.ts
+++ b/frontend/i18n/request.ts
@@ -1,6 +1,6 @@
 import { getRequestConfig } from 'next-intl/server';
 
-import { defaultLocale,locales } from './config';
+import { defaultLocale, locales } from './config';
 
 export default getRequestConfig(async ({ requestLocale }) => {
   let locale = await requestLocale;
diff --git a/frontend/i18n/routing.ts b/frontend/i18n/routing.ts
index 9636ef56..fc0b7dce 100644
--- a/frontend/i18n/routing.ts
+++ b/frontend/i18n/routing.ts
@@ -1,7 +1,7 @@
 import { createNavigation } from 'next-intl/navigation';
 import { defineRouting } from 'next-intl/routing';
 
-import { defaultLocale,locales } from './config';
+import { defaultLocale, locales } from './config';
 
 export const routing = defineRouting({
   locales,
diff --git a/frontend/lib/quiz/quiz-answers-redis.ts b/frontend/lib/quiz/quiz-answers-redis.ts
new file mode 100644
index 00000000..b126c437
--- /dev/null
+++ b/frontend/lib/quiz/quiz-answers-redis.ts
@@ -0,0 +1,97 @@
+import { and, eq } from 'drizzle-orm';
+
+import { db } from '@/db';
+import { quizAnswers, quizQuestions } from '@/db/schema/quiz';
+import { getRedisClient } from '@/lib/redis';
+
+const QUIZ_CACHE_TTL_SECONDS = 60 * 60 * 12;
+
+interface QuizAnswersCache {
+  quizId: string;
+  answers: Record<string, string>; // questionId - correctAnswerId
+  cachedAt: number;
+}
+
+function getCacheKey(quizId: string): string {
+  return `quiz:answers:${quizId}`;
+}
+
+export async function getOrCreateQuizAnswersCache(
+  quizId: string
+): Promise<boolean> {
+  const redis = getRedisClient();
+  if (!redis) {
+    console.warn('Redis not configured, skipping cache');
+    return true; // Allow quiz to proceed without cache
+  }
+
+  const key = getCacheKey(quizId);
+
+  // Check if cache exists
+  const existing = await redis.get<QuizAnswersCache>(key);
+  if (existing) {
+    return true; // Cache hit
+  }
+
+  // Fetch correct answers from DB
+  const correctAnswers = await db
+    .select({
+      questionId: quizQuestions.id,
+      answerId: quizAnswers.id,
+    })
+    .from(quizAnswers)
+    .innerJoin(quizQuestions, eq(quizAnswers.quizQuestionId, quizQuestions.id))
+    .where(
+      and(eq(quizQuestions.quizId, quizId), eq(quizAnswers.isCorrect, true))
+    );
+
+  if (correctAnswers.length === 0) {
+    return false;
+  }
+
+  const answersMap: Record<string, string> = {};
+  for (const row of correctAnswers) {
+    answersMap[row.questionId] = row.answerId;
+  }
+
+  const cacheData: QuizAnswersCache = {
+    quizId,
+    answers: answersMap,
+    cachedAt: Date.now(),
+  };
+
+  await redis.set(key, cacheData, { ex: QUIZ_CACHE_TTL_SECONDS });
+  return true;
+}
+
+export async function getCorrectAnswer(
+  quizId: string,
+  questionId: string
+): Promise<string | null> {
+  const redis = getRedisClient();
+  
+  if (redis) {
+    const key = getCacheKey(quizId);
+    const cache = await redis.get<QuizAnswersCache>(key);
+    if (cache) {
+      return cache.answers[questionId] ?? null;
+    }
+  }
+
+  // DB fallback when Redis unavailable or cache miss
+  const result = await db
+    .select({ answerId: quizAnswers.id })
+    .from(quizAnswers)
+    .innerJoin(quizQuestions, eq(quizAnswers.quizQuestionId, quizQuestions.id))
+    .where(
+      and(
+        eq(quizQuestions.quizId, quizId),
+        eq(quizQuestions.id, questionId),
+        eq(quizAnswers.isCorrect, true)
+      )
+    )
+    .limit(1);
+
+  return result[0]?.answerId ?? null;
+}
+
diff --git a/frontend/lib/quiz/quiz-crypto.ts b/frontend/lib/quiz/quiz-crypto.ts
deleted file mode 100644
index b7f84c9e..00000000
--- a/frontend/lib/quiz/quiz-crypto.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { createCipheriv, createDecipheriv, randomBytes } from 'crypto';
-
-const ALGORITHM = 'aes-256-gcm';
-const IV_LENGTH = 16;
-const AUTH_TAG_LENGTH = 16;
-
-function getEncryptionKey(): Buffer {
-  const key = process.env.QUIZ_ENCRYPTION_KEY;
-  if (!key) {
-    throw new Error('QUIZ_ENCRYPTION_KEY environment variable is not set');
-  }
-  return Buffer.from(key, 'hex');
-}
-
-export interface CorrectAnswersMap {
-  [questionId: string]: string;
-}
-
-/**
- * Encrypts answers map. Returns base64 string: IV (16b) + AuthTag (16b) + CipherText
- */
-export function encryptAnswers(answers: CorrectAnswersMap): string {
-  const key = getEncryptionKey();
-  const iv = randomBytes(IV_LENGTH);
-  const cipher = createCipheriv(ALGORITHM, key, iv);
-
-  const plaintext = JSON.stringify(answers);
-  const encrypted = Buffer.concat([
-    cipher.update(plaintext, 'utf8'),
-    cipher.final(),
-  ]);
-
-  const authTag = cipher.getAuthTag();
-
-  const result = Buffer.concat([iv, authTag, encrypted]);
-  return result.toString('base64');
-}
-
-/**
- * Decrypts blob. Returns null if tampered or wrong key.
- */
-export function decryptAnswers(
-  encryptedBlob: string
-): CorrectAnswersMap | null {
-  try {
-    const key = getEncryptionKey();
-    const data = Buffer.from(encryptedBlob, 'base64');
-
-    const iv = data.subarray(0, IV_LENGTH);
-    const authTag = data.subarray(IV_LENGTH, IV_LENGTH + AUTH_TAG_LENGTH);
-    const ciphertext = data.subarray(IV_LENGTH + AUTH_TAG_LENGTH);
-
-    const decipher = createDecipheriv(ALGORITHM, key, iv);
-    decipher.setAuthTag(authTag);
-
-    const decrypted = Buffer.concat([
-      decipher.update(ciphertext),
-      decipher.final(),
-    ]);
-
-    return JSON.parse(decrypted.toString('utf8'));
-  } catch {
-    // Decryption failed - tampered data or wrong key
-    return null;
-  }
-}
-
-/**
- * Creates encrypted blob from quiz questions
- */
-export function createEncryptedAnswersBlob(
-  questions: Array<{
-    id: string;
-    answers: Array<{ id: string; isCorrect: boolean }>;
-  }>
-): string {
-  const answersMap: CorrectAnswersMap = {};
-
-  for (const question of questions) {
-    const correctAnswer = question.answers.find(a => a.isCorrect);
-    if (correctAnswer) {
-      answersMap[question.id] = correctAnswer.id;
-    }
-  }
-
-  return encryptAnswers(answersMap);
-}
diff --git a/frontend/lib/quiz/quiz-session.ts b/frontend/lib/quiz/quiz-session.ts
index 422cd0c1..48bb595a 100644
--- a/frontend/lib/quiz/quiz-session.ts
+++ b/frontend/lib/quiz/quiz-session.ts
@@ -46,7 +46,7 @@ export function loadQuizSession(quizId: string): QuizSessionData | null {
     }
 
     // Only restore in_progress sessions
-    if (data.status !== 'in_progress') {
+    if (data.status === 'rules') {
       clearQuizSession(quizId);
       return null;
     }
diff --git a/frontend/lib/tests/blog/blog-author-route.test.ts b/frontend/lib/tests/blog/blog-author-route.test.ts
index 4f8cc34f..c3e1262f 100644
--- a/frontend/lib/tests/blog/blog-author-route.test.ts
+++ b/frontend/lib/tests/blog/blog-author-route.test.ts
@@ -1,4 +1,4 @@
-import { afterEach,describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 const fetchMock = vi.fn();
 
diff --git a/frontend/lib/tests/blog/blog-search-route.test.ts b/frontend/lib/tests/blog/blog-search-route.test.ts
index c40441c9..f53efb91 100644
--- a/frontend/lib/tests/blog/blog-search-route.test.ts
+++ b/frontend/lib/tests/blog/blog-search-route.test.ts
@@ -1,4 +1,4 @@
-import { afterEach,describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 const fetchMock = vi.fn();
 
diff --git a/frontend/lib/tests/quiz/guest-result-route.test.ts b/frontend/lib/tests/quiz/guest-result-route.test.ts
index ad92d7e1..a1d62b45 100644
--- a/frontend/lib/tests/quiz/guest-result-route.test.ts
+++ b/frontend/lib/tests/quiz/guest-result-route.test.ts
@@ -19,7 +19,7 @@ vi.mock('@/db', () => ({
 }));
 
 import { db } from '@/db';
-import { awardQuizPoints,calculateQuizPoints } from '@/db/queries/points';
+import { awardQuizPoints, calculateQuizPoints } from '@/db/queries/points';
 import { getCurrentUser } from '@/lib/auth';
 
 const getCurrentUserMock = getCurrentUser as ReturnType<typeof vi.fn>;
diff --git a/frontend/lib/tests/quiz/quiz-anticheat.test.ts b/frontend/lib/tests/quiz/quiz-anticheat.test.ts
index 2e1351ff..a0f1de7e 100644
--- a/frontend/lib/tests/quiz/quiz-anticheat.test.ts
+++ b/frontend/lib/tests/quiz/quiz-anticheat.test.ts
@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { act,renderHook } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 // Mock next-intl before importing the hook
diff --git a/frontend/lib/tests/quiz/quiz-crypto.test.ts b/frontend/lib/tests/quiz/quiz-crypto.test.ts
deleted file mode 100644
index 5c414b9a..00000000
--- a/frontend/lib/tests/quiz/quiz-crypto.test.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-import { afterEach,beforeEach, describe, expect, it } from 'vitest';
-
-import {
-  createEncryptedAnswersBlob,
-  decryptAnswers,
-  encryptAnswers,
-} from '@/lib/quiz/quiz-crypto';
-
-import {
-  createCorrectAnswersMap,
-  createMockQuestions,
-  resetFactoryCounters,
-} from '../factories/quiz/quiz';
-import { cleanupQuizTestEnv,setupQuizTestEnv } from './setup';
-
-describe('quiz-crypto', () => {
-  // Setup: set encryption key before each test
-  beforeEach(() => {
-    setupQuizTestEnv();
-    resetFactoryCounters();
-  });
-
-  // Cleanup: remove encryption key after each test
-  afterEach(() => {
-    cleanupQuizTestEnv();
-  });
-
-  describe('encryptAnswers', () => {
-    it('returns a base64 string', () => {
-      const answers = { 'q-1': 'a-1' };
-
-      const result = encryptAnswers(answers);
-
-      // Base64 pattern: letters, numbers, +, /, ends with optional =
-      expect(result).toMatch(/^[A-Za-z0-9+/]+=*$/);
-    });
-
-    it('returns different output for same input (random IV)', () => {
-      const answers = { 'q-1': 'a-1' };
-
-      const result1 = encryptAnswers(answers);
-      const result2 = encryptAnswers(answers);
-
-      // Each encryption uses random IV, so outputs differ
-      expect(result1).not.toBe(result2);
-    });
-
-    it('handles empty object', () => {
-      const result = encryptAnswers({});
-
-      expect(result).toBeDefined();
-      expect(typeof result).toBe('string');
-    });
-
-    it('handles multiple questions', () => {
-      const answers = {
-        'q-1': 'a-1',
-        'q-2': 'a-2',
-        'q-3': 'a-3',
-      };
-
-      const result = encryptAnswers(answers);
-
-      expect(result).toBeDefined();
-      expect(result.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('decryptAnswers', () => {
-    it('decrypts back to original data', () => {
-      const original = { 'q-1': 'a-1', 'q-2': 'a-2' };
-
-      const encrypted = encryptAnswers(original);
-      const decrypted = decryptAnswers(encrypted);
-
-      expect(decrypted).toEqual(original);
-    });
-
-    it('returns null for tampered data', () => {
-      const original = { 'q-1': 'a-1' };
-      const encrypted = encryptAnswers(original);
-
-      // Tamper: change last 5 characters
-      const tampered = encrypted.slice(0, -5) + 'XXXXX';
-
-      const result = decryptAnswers(tampered);
-
-      expect(result).toBeNull();
-    });
-
-    it('returns null for invalid base64', () => {
-      const result = decryptAnswers('not-valid-base64!!!');
-
-      expect(result).toBeNull();
-    });
-
-    it('returns null for empty string', () => {
-      const result = decryptAnswers('');
-
-      expect(result).toBeNull();
-    });
-
-    it('returns null for truncated data', () => {
-      const original = { 'q-1': 'a-1' };
-      const encrypted = encryptAnswers(original);
-
-      // Truncate: remove half of the data
-      const truncated = encrypted.slice(0, encrypted.length / 2);
-
-      const result = decryptAnswers(truncated);
-
-      expect(result).toBeNull();
-    });
-  });
-
-  describe('createEncryptedAnswersBlob', () => {
-    it('creates encrypted blob from questions', () => {
-      const questions = createMockQuestions(3);
-
-      const blob = createEncryptedAnswersBlob(questions);
-
-      expect(blob).toBeDefined();
-      expect(typeof blob).toBe('string');
-      expect(blob.length).toBeGreaterThan(0);
-    });
-
-    it('encrypted blob decrypts to correct answers map', () => {
-      const questions = createMockQuestions(3);
-      const expectedMap = createCorrectAnswersMap(questions);
-
-      const blob = createEncryptedAnswersBlob(questions);
-      const decrypted = decryptAnswers(blob);
-
-      expect(decrypted).toEqual(expectedMap);
-    });
-
-    it('handles questions with no correct answer', () => {
-      const questions = [
-        {
-          id: 'q-no-correct',
-          answers: [
-            { id: 'a-1', isCorrect: false },
-            { id: 'a-2', isCorrect: false },
-          ],
-        },
-      ];
-
-      const blob = createEncryptedAnswersBlob(questions);
-      const decrypted = decryptAnswers(blob);
-
-      // Question with no correct answer is not included in map
-      expect(decrypted).toEqual({});
-    });
-
-    it('handles empty questions array', () => {
-      const blob = createEncryptedAnswersBlob([]);
-      const decrypted = decryptAnswers(blob);
-
-      expect(decrypted).toEqual({});
-    });
-  });
-});
diff --git a/frontend/lib/tests/quiz/quiz-session.test.ts b/frontend/lib/tests/quiz/quiz-session.test.ts
index 476544de..f4df2dee 100644
--- a/frontend/lib/tests/quiz/quiz-session.test.ts
+++ b/frontend/lib/tests/quiz/quiz-session.test.ts
@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import {
   clearQuizSession,
@@ -99,7 +99,7 @@ describe('quiz-session', () => {
       expect(loaded).not.toBeNull();
     });
 
-    it('returns null for completed session', () => {
+    it('returns completed session (for guest result screen language switch)', () => {
       const session = createMockQuizSession({ status: 'completed' });
       localStorage.setItem(
         'quiz_session_quiz-123',
@@ -108,7 +108,8 @@ describe('quiz-session', () => {
 
       const loaded = loadQuizSession('quiz-123');
 
-      expect(loaded).toBeNull();
+      expect(loaded).not.toBeNull();
+      expect(loaded?.status).toBe('completed');
     });
 
     it('returns null for rules session', () => {
diff --git a/frontend/lib/tests/quiz/quiz-setup.test.ts b/frontend/lib/tests/quiz/quiz-setup.test.ts
index c96245b7..b9771616 100644
--- a/frontend/lib/tests/quiz/quiz-setup.test.ts
+++ b/frontend/lib/tests/quiz/quiz-setup.test.ts
@@ -1,4 +1,4 @@
-import { afterEach,beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 import {
   createCorrectAnswersMap,
diff --git a/frontend/lib/tests/quiz/setup.ts b/frontend/lib/tests/quiz/setup.ts
index 22ac7a72..b534f2fe 100644
--- a/frontend/lib/tests/quiz/setup.ts
+++ b/frontend/lib/tests/quiz/setup.ts
@@ -1,5 +1,3 @@
-import { afterEach,beforeEach, vi } from 'vitest';
-
 /**
  * 32-byte hex key for AES-256 (64 hex characters)
  * Only used in tests — not a real secret
diff --git a/frontend/lib/tests/quiz/use-quiz-guards.test.ts b/frontend/lib/tests/quiz/use-quiz-guards.test.ts
index b101ff6c..17779239 100644
--- a/frontend/lib/tests/quiz/use-quiz-guards.test.ts
+++ b/frontend/lib/tests/quiz/use-quiz-guards.test.ts
@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { act,renderHook } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { useQuizGuards } from '@/hooks/useQuizGuards';
diff --git a/frontend/lib/tests/quiz/use-quiz-session.test.ts b/frontend/lib/tests/quiz/use-quiz-session.test.ts
index 2a2b7dc3..219f03d9 100644
--- a/frontend/lib/tests/quiz/use-quiz-session.test.ts
+++ b/frontend/lib/tests/quiz/use-quiz-session.test.ts
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { renderHook, waitFor } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { useQuizSession } from '@/hooks/useQuizSession';
 import {
diff --git a/frontend/lib/tests/quiz/verify-answer.test.ts b/frontend/lib/tests/quiz/verify-answer.test.ts
index 2b8f380e..22fb5018 100644
--- a/frontend/lib/tests/quiz/verify-answer.test.ts
+++ b/frontend/lib/tests/quiz/verify-answer.test.ts
@@ -1,19 +1,17 @@
 import { NextRequest } from 'next/server';
-import { afterEach,beforeEach, describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { POST } from '@/app/api/quiz/verify-answer/route';
-import { encryptAnswers } from '@/lib/quiz/quiz-crypto';
-
-import {
-  createCorrectAnswersMap,
-  createMockQuestions,
-  resetFactoryCounters,
-} from '../factories/quiz/quiz';
-import { cleanupQuizTestEnv,setupQuizTestEnv } from './setup';
-
-/**
- * Creates a mock NextRequest for POST /api/quiz/verify-answer
- */
+
+// Mock the Redis module
+vi.mock('@/lib/quiz/quiz-answers-redis', () => ({
+  getCorrectAnswer: vi.fn(),
+}));
+
+import { getCorrectAnswer } from '@/lib/quiz/quiz-answers-redis';
+
+const mockGetCorrectAnswer = vi.mocked(getCorrectAnswer);
+
 function createVerifyRequest(body: unknown): NextRequest {
   return new NextRequest('http://localhost/api/quiz/verify-answer', {
     method: 'POST',
@@ -22,97 +20,89 @@ function createVerifyRequest(body: unknown): NextRequest {
   });
 }
 
-describe('POST /api/quiz/verify-answer', () => {
+describe('POST /api/quiz/verify-answer (Redis)', () => {
   beforeEach(() => {
-    setupQuizTestEnv();
-    resetFactoryCounters();
-  });
-
-  afterEach(() => {
-    cleanupQuizTestEnv();
+    vi.clearAllMocks();
   });
 
   describe('successful verification', () => {
     it('returns isCorrect: true for correct answer', async () => {
-      const questions = createMockQuestions(3);
-      const correctAnswersMap = createCorrectAnswersMap(questions);
-      const encryptedAnswers = encryptAnswers(correctAnswersMap);
+      const quizId = 'quiz-123';
+      const questionId = 'question-1';
+      const correctAnswerId = 'answer-a';
 
-      const questionId = questions[0].id;
-      const correctAnswerId = correctAnswersMap[questionId];
+      mockGetCorrectAnswer.mockResolvedValue(correctAnswerId);
 
       const request = createVerifyRequest({
+        quizId,
         questionId,
-        answerId: correctAnswerId,
-        encryptedAnswers,
+        selectedAnswerId: correctAnswerId,
       });
 
       const response = await POST(request);
       const data = await response.json();
 
       expect(response.status).toBe(200);
+      expect(data.success).toBe(true);
       expect(data.isCorrect).toBe(true);
+      expect(mockGetCorrectAnswer).toHaveBeenCalledWith(quizId, questionId);
     });
 
     it('returns isCorrect: false for wrong answer', async () => {
-      const questions = createMockQuestions(3);
-      const correctAnswersMap = createCorrectAnswersMap(questions);
-      const encryptedAnswers = encryptAnswers(correctAnswersMap);
+      const quizId = 'quiz-123';
+      const questionId = 'question-1';
+      const correctAnswerId = 'answer-a';
+      const wrongAnswerId = 'answer-b';
 
-      const questionId = questions[0].id;
-      const wrongAnswerId = questions[0].answers[1].id; // second answer is wrong
+      mockGetCorrectAnswer.mockResolvedValue(correctAnswerId);
 
       const request = createVerifyRequest({
+        quizId,
         questionId,
-        answerId: wrongAnswerId,
-        encryptedAnswers,
+        selectedAnswerId: wrongAnswerId,
       });
 
       const response = await POST(request);
       const data = await response.json();
 
       expect(response.status).toBe(200);
+      expect(data.success).toBe(true);
       expect(data.isCorrect).toBe(false);
     });
   });
 
   describe('validation errors (400)', () => {
-    it('returns 400 for missing questionId', async () => {
-      const questions = createMockQuestions(1);
-      const correctAnswersMap = createCorrectAnswersMap(questions);
-      const encryptedAnswers = encryptAnswers(correctAnswersMap);
-
+    it('returns 400 for missing quizId', async () => {
       const request = createVerifyRequest({
-        answerId: 'some-answer',
-        encryptedAnswers,
+        questionId: 'q-1',
+        selectedAnswerId: 'a-1',
       });
 
       const response = await POST(request);
       const data = await response.json();
 
       expect(response.status).toBe(400);
+      expect(data.success).toBe(false);
       expect(data.error).toBe('Missing required fields');
     });
 
-    it('returns 400 for missing answerId', async () => {
-      const questions = createMockQuestions(1);
-      const correctAnswersMap = createCorrectAnswersMap(questions);
-      const encryptedAnswers = encryptAnswers(correctAnswersMap);
-
+    it('returns 400 for missing questionId', async () => {
       const request = createVerifyRequest({
-        questionId: questions[0].id,
-        encryptedAnswers,
+        quizId: 'quiz-123',
+        selectedAnswerId: 'a-1',
       });
 
       const response = await POST(request);
+      const data = await response.json();
 
       expect(response.status).toBe(400);
+      expect(data.error).toBe('Missing required fields');
     });
 
-    it('returns 400 for missing encryptedAnswers', async () => {
+    it('returns 400 for missing selectedAnswerId', async () => {
       const request = createVerifyRequest({
+        quizId: 'quiz-123',
         questionId: 'q-1',
-        answerId: 'a-1',
       });
 
       const response = await POST(request);
@@ -120,57 +110,58 @@ describe('POST /api/quiz/verify-answer', () => {
       expect(response.status).toBe(400);
     });
 
-    it('returns 400 for tampered encryptedAnswers', async () => {
-      const questions = createMockQuestions(1);
-      const correctAnswersMap = createCorrectAnswersMap(questions);
-      const encryptedAnswers = encryptAnswers(correctAnswersMap);
-
-      // Tamper with the encrypted data
-      const tamperedAnswers = encryptedAnswers.slice(0, -10) + 'XXXXXXXXXX';
-
-      const request = createVerifyRequest({
-        questionId: questions[0].id,
-        answerId: questions[0].answers[0].id,
-        encryptedAnswers: tamperedAnswers,
-      });
+    it('returns 400 for invalid JSON body', async () => {
+      const request = new NextRequest(
+        'http://localhost/api/quiz/verify-answer',
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: 'not-valid-json',
+        }
+      );
 
       const response = await POST(request);
-      const data = await response.json();
 
       expect(response.status).toBe(400);
-      expect(data.error).toBe('Invalid encrypted data');
     });
+  });
+
+  describe('not found (404)', () => {
+    it('returns 404 when question not in cache', async () => {
+      mockGetCorrectAnswer.mockResolvedValue(null);
 
-    it('returns 400 for invalid base64 encryptedAnswers', async () => {
       const request = createVerifyRequest({
-        questionId: 'q-1',
-        answerId: 'a-1',
-        encryptedAnswers: 'not-valid-base64!!!',
+        quizId: 'quiz-123',
+        questionId: 'unknown-question',
+        selectedAnswerId: 'a-1',
       });
 
       const response = await POST(request);
+      const data = await response.json();
 
-      expect(response.status).toBe(400);
+      expect(response.status).toBe(404);
+      expect(data.success).toBe(false);
+      expect(data.error).toBe('Question not found in cache');
     });
   });
 
-  describe('not found (404)', () => {
-    it('returns 404 for unknown questionId', async () => {
-      const questions = createMockQuestions(1);
-      const correctAnswersMap = createCorrectAnswersMap(questions);
-      const encryptedAnswers = encryptAnswers(correctAnswersMap);
+  describe('Redis integration', () => {
+    it('calls getCorrectAnswer with correct params', async () => {
+      mockGetCorrectAnswer.mockResolvedValue('correct-id');
 
       const request = createVerifyRequest({
-        questionId: 'unknown-question-id',
-        answerId: 'some-answer',
-        encryptedAnswers,
+        quizId: 'my-quiz',
+        questionId: 'my-question',
+        selectedAnswerId: 'my-answer',
       });
 
-      const response = await POST(request);
-      const data = await response.json();
+      await POST(request);
 
-      expect(response.status).toBe(404);
-      expect(data.error).toBe('Question not found');
+      expect(mockGetCorrectAnswer).toHaveBeenCalledTimes(1);
+      expect(mockGetCorrectAnswer).toHaveBeenCalledWith(
+        'my-quiz',
+        'my-question'
+      );
     });
   });
 });
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
index 1f5046c6..9ad0df42 100644
--- a/frontend/lib/utils.ts
+++ b/frontend/lib/utils.ts
@@ -1,4 +1,4 @@
-import { type ClassValue,clsx } from 'clsx';
+import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a9df03db..c0cde79d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1887,9 +1887,9 @@
       }
     },
     "node_modules/@neondatabase/serverless/node_modules/@types/node": {
-      "version": "22.19.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.7.tgz",
-      "integrity": "sha512-MciR4AKGHWl7xwxkBa6xUGxQJ4VBOmPTF7sL+iGzuahOFaO0jHCsuEfS80pan1ef4gWId1oWOweIhrDEYLuaOw==",
+      "version": "22.19.8",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.8.tgz",
+      "integrity": "sha512-ebO/Yl+EAvVe8DnMfi+iaAyIqYdK0q/q0y0rw82INWEKJOBe6b/P3YWE8NW7oOlF/nXFNrHwhARrN/hdgDkraA==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -3915,9 +3915,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.19.30",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
-      "integrity": "sha512-WJtwWJu7UdlvzEAUm484QNg5eAoq5QR08KDNx7g45Usrs2NtOPiX8ugDqmKdXkyL03rBqU5dYNYVQetEpBHq2g==",
+      "version": "20.19.31",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.31.tgz",
+      "integrity": "sha512-5jsi0wpncvTD33Sh1UCgacK37FFwDn+EG7wCmEvs62fCvBL+n8/76cAYDok21NF6+jaVWIqKwCZyX7Vbu8eB3A==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -4509,9 +4509,9 @@
       ]
     },
     "node_modules/@upstash/redis": {
-      "version": "1.36.1",
-      "resolved": "https://registry.npmjs.org/@upstash/redis/-/redis-1.36.1.tgz",
-      "integrity": "sha512-N6SjDcgXdOcTAF+7uNoY69o7hCspe9BcA7YjQdxVu5d25avljTwyLaHBW3krWjrP0FfocgMk94qyVtQbeDp39A==",
+      "version": "1.36.2",
+      "resolved": "https://registry.npmjs.org/@upstash/redis/-/redis-1.36.2.tgz",
+      "integrity": "sha512-C0Yt8hc12vLaQYRG1fMci8iPrLtnTdbJG0HR5T8vKnvEP/1RdMMblsOJs5/jp0JXZJ1oSzMnQz4J9EVezNpI6A==",
       "license": "MIT",
       "dependencies": {
         "uncrypto": "^0.1.3"
@@ -5915,9 +5915,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.283",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.283.tgz",
-      "integrity": "sha512-3vifjt1HgrGW/h76UEeny+adYApveS9dH2h3p57JYzBSXJIKUJAvtmIytDKjcSCt9xHfrNCFJ7gts6vkhuq++w==",
+      "version": "1.5.286",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
+      "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==",
       "dev": true,
       "license": "ISC"
     },
@@ -7482,12 +7482,12 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.29.3",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.3.tgz",
-      "integrity": "sha512-naVvtFA7IiRTU5n7w7Nj51QFVWu955bU0p9H0gGC4AbhHDQR0TcohoEYwdOZXWEkXrEYNTl95EDOxsjDqn1AvQ==",
+      "version": "12.30.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.30.1.tgz",
+      "integrity": "sha512-nt3NMBb9wrsC/TlPi6Blg3Zzzf8DkSidCT8dFa3ha3ierU8AF20tqP0eQ3CyGVZdwytVjd4vF/fWE0Uoa+qzdg==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.29.2",
+        "motion-dom": "^12.30.1",
         "motion-utils": "^12.29.2",
         "tslib": "^2.4.0"
       },
@@ -9487,9 +9487,9 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.29.2",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.29.2.tgz",
-      "integrity": "sha512-/k+NuycVV8pykxyiTCoFzIVLA95Nb1BFIVvfSu9L50/6K6qNeAYtkxXILy/LRutt7AzaYDc2myj0wkCVVYAPPA==",
+      "version": "12.30.1",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.30.1.tgz",
+      "integrity": "sha512-QXB+iFJRzZTqL+Am4a1CRoHdH+0Nq12wLdqQQZZsfHlp9AMt6PA098L/61oVZsDA+Ep3QSGudzpViyRrhYhGcQ==",
       "license": "MIT",
       "dependencies": {
         "motion-utils": "^12.29.2"
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 0ae2767f..8cc3cd93 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -13,7 +13,7 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "incremental": true,
-    "types": ["vitest/globals", "@testing-library/jest-dom"],
+    "types": ["vitest/globals", "@testing-library/jest-dom", "node"],
     "plugins": [
       {
         "name": "next"

From 6d678fc810a536b9021d2a3318607c5b9b788e81 Mon Sep 17 00:00:00 2001
From: Viktor Svertoka <victor.svertoka@gmail.com>
Date: Tue, 3 Feb 2026 23:55:11 +0200
Subject: [PATCH 23/24] chore: remove redis ttl for static quiz and qa caches
 (#265)

---
 frontend/components/q&a/AIWordHelper.tsx   |  4 ----
 frontend/components/q&a/SelectableText.tsx |  1 -
 frontend/lib/cache/qa.ts                   |  8 +-------
 frontend/lib/quiz/quiz-answers-redis.ts    | 16 +++++-----------
 frontend/lib/quiz/quiz-session.ts          |  4 +---
 5 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/frontend/components/q&a/AIWordHelper.tsx b/frontend/components/q&a/AIWordHelper.tsx
index c15c7648..9a31059a 100644
--- a/frontend/components/q&a/AIWordHelper.tsx
+++ b/frontend/components/q&a/AIWordHelper.tsx
@@ -303,7 +303,6 @@ export default function AIWordHelper({
 
     if (isOpen) {
       document.addEventListener('keydown', handleKeyDown);
-      // Calculate scrollbar width and add padding to prevent layout shift
       const scrollbarWidth =
         window.innerWidth - document.documentElement.clientWidth;
       document.body.style.overflow = 'hidden';
@@ -582,14 +581,12 @@ export default function AIWordHelper({
                             )}
                           </button>
 
-                          {/* Activity suggestions while waiting */}
                           <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-neutral-700">
                             <p className="mb-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400">
                               {messages.rateLimit.whileWaiting}
                             </p>
 
                             {rateLimitState.retryAttempts < 3 ? (
-                              // First suggestions: Take Quiz & Star GitHub
                               <div className="flex flex-col gap-2">
                                 <Link
                                   href="/quizzes"
@@ -640,7 +637,6 @@ export default function AIWordHelper({
                                 </a>
                               </div>
                             ) : (
-                              // After 3+ attempts: Sponsor & Review
                               <div className="flex flex-col gap-2">
                                 <a
                                   href="https://github.com/sponsors/DevLoversTeam"
diff --git a/frontend/components/q&a/SelectableText.tsx b/frontend/components/q&a/SelectableText.tsx
index f864d6e0..f2ece70c 100644
--- a/frontend/components/q&a/SelectableText.tsx
+++ b/frontend/components/q&a/SelectableText.tsx
@@ -19,7 +19,6 @@ export default function SelectableText({
   const onTextSelectRef = useRef(onTextSelect);
   const onSelectionClearRef = useRef(onSelectionClear);
 
-  // Keep refs updated with latest callbacks
   useEffect(() => {
     onTextSelectRef.current = onTextSelect;
     onSelectionClearRef.current = onSelectionClear;
diff --git a/frontend/lib/cache/qa.ts b/frontend/lib/cache/qa.ts
index 9b8b1a30..8607dc3d 100644
--- a/frontend/lib/cache/qa.ts
+++ b/frontend/lib/cache/qa.ts
@@ -1,7 +1,5 @@
 import { getRedisClient } from '@/lib/redis';
 
-const QA_CACHE_TTL_SECONDS = 60 * 60 * 12;
-
 type QaCacheKeyInput = {
   category: string;
   locale: string;
@@ -48,7 +46,7 @@ export async function setQaCache<T>(key: string, value: T) {
   const redis = getRedisClient();
   if (!redis) return;
 
-  await redis.set(key, value, { ex: QA_CACHE_TTL_SECONDS });
+  await redis.set(key, value);
 }
 
 export async function invalidateQaCacheByCategory(category: string) {
@@ -97,7 +95,3 @@ export async function invalidateAllQaCache() {
 
   return deleted;
 }
-
-export const qaCacheConfig = {
-  ttlSeconds: QA_CACHE_TTL_SECONDS,
-};
diff --git a/frontend/lib/quiz/quiz-answers-redis.ts b/frontend/lib/quiz/quiz-answers-redis.ts
index b126c437..bcb4daec 100644
--- a/frontend/lib/quiz/quiz-answers-redis.ts
+++ b/frontend/lib/quiz/quiz-answers-redis.ts
@@ -4,11 +4,9 @@ import { db } from '@/db';
 import { quizAnswers, quizQuestions } from '@/db/schema/quiz';
 import { getRedisClient } from '@/lib/redis';
 
-const QUIZ_CACHE_TTL_SECONDS = 60 * 60 * 12;
-
 interface QuizAnswersCache {
   quizId: string;
-  answers: Record<string, string>; // questionId - correctAnswerId
+  answers: Record<string, string>;
   cachedAt: number;
 }
 
@@ -22,18 +20,16 @@ export async function getOrCreateQuizAnswersCache(
   const redis = getRedisClient();
   if (!redis) {
     console.warn('Redis not configured, skipping cache');
-    return true; // Allow quiz to proceed without cache
+    return true;
   }
 
   const key = getCacheKey(quizId);
 
-  // Check if cache exists
   const existing = await redis.get<QuizAnswersCache>(key);
   if (existing) {
-    return true; // Cache hit
+    return true;
   }
 
-  // Fetch correct answers from DB
   const correctAnswers = await db
     .select({
       questionId: quizQuestions.id,
@@ -60,7 +56,7 @@ export async function getOrCreateQuizAnswersCache(
     cachedAt: Date.now(),
   };
 
-  await redis.set(key, cacheData, { ex: QUIZ_CACHE_TTL_SECONDS });
+  await redis.set(key, cacheData);
   return true;
 }
 
@@ -69,7 +65,7 @@ export async function getCorrectAnswer(
   questionId: string
 ): Promise<string | null> {
   const redis = getRedisClient();
-  
+
   if (redis) {
     const key = getCacheKey(quizId);
     const cache = await redis.get<QuizAnswersCache>(key);
@@ -78,7 +74,6 @@ export async function getCorrectAnswer(
     }
   }
 
-  // DB fallback when Redis unavailable or cache miss
   const result = await db
     .select({ answerId: quizAnswers.id })
     .from(quizAnswers)
@@ -94,4 +89,3 @@ export async function getCorrectAnswer(
 
   return result[0]?.answerId ?? null;
 }
-
diff --git a/frontend/lib/quiz/quiz-session.ts b/frontend/lib/quiz/quiz-session.ts
index 48bb595a..a615e7ee 100644
--- a/frontend/lib/quiz/quiz-session.ts
+++ b/frontend/lib/quiz/quiz-session.ts
@@ -1,5 +1,5 @@
 const STORAGE_KEY_PREFIX = 'quiz_session_';
-const SESSION_TTL_MS = 30 * 60 * 1000; // 30 minutes
+const SESSION_TTL_MS = 30 * 60 * 1000;
 
 export interface QuizSessionData {
   status: 'rules' | 'in_progress' | 'completed';
@@ -39,13 +39,11 @@ export function loadQuizSession(quizId: string): QuizSessionData | null {
 
     const data: QuizSessionData = JSON.parse(raw);
 
-    // Discard sessions older than 30 minutes
     if (Date.now() - data.savedAt > SESSION_TTL_MS) {
       clearQuizSession(quizId);
       return null;
     }
 
-    // Only restore in_progress sessions
     if (data.status === 'rules') {
       clearQuizSession(quizId);
       return null;

From 10f14347af46fed818cab9a8b892f8095b735ff3 Mon Sep 17 00:00:00 2001
From: Lesia Soloviova <106915140+LesiaUKR@users.noreply.github.com>
Date: Wed, 4 Feb 2026 00:06:53 +0200
Subject: [PATCH 24/24]  fix(layout): remove duplicate padding from quiz routes
 (#266)

* feat(quiz-ui): quiz UI polish - tabs, category accents, color scheme (issues #181, #193, #194)

- Refactor QaTabButton to shared CategoryTabButton component
- Add category accent colors to QuizCard, buttons, progress indicators
- Standardize colors with CSS variables, traffic light timer
- Add DynamicGridBackground to quizzes list page
- Border-only answer feedback, semi-transparent progress styles

* docs: update .gitignore

* fix(quiz): align disqualification threshold with warning banner

Changed violationsCount > 3 to >= 3 in QuizResult points block
to match the warning banner threshold at line 124.

* feat(quiz-testing): add quiz unit tests

- Configure Vitest for quiz module
- Add test factories and setup utilities
- Add quiz-crypto tests (13 tests)
- Add quiz-session tests (12 tests)

* test(quiz): add integration tests for verify-answer API and useAntiCheat hook (#199)

- verify-answer.test.ts: 8 tests for API endpoint
  - Correct/wrong answer verification
  - Validation errors (missing fields, tampered data)
  - Security: rejects modified encrypted answers

- quiz-anticheat.test.ts: 10 tests for useAntiCheat hook
  - Detects copy, paste, context-menu, tab-switch events
  - Respects isActive flag
  - Reset and cleanup functionality

Total quiz tests: 52 (9 setup + 25 unit + 18 integration)

* test(quiz): expand test coverage to 90%+ with hooks, API routes, and UI flow

Add 28 new tests covering:
- useQuizSession hook (6 tests)
- useQuizGuards hook (8 tests)
- guest-quiz storage (5 tests)
- guest-result API route (5 tests)
- quiz-slug API route (3 tests)
- QuizContainer UI flow (1 test)

Coverage: 35% -> 90.94% (quiz scope)
Tests: 52 -> 80

* chore: remove coverage-quiz from git, add to .gitignore

* chore: add coverage-quiz to .gitignore, fix quiz guards test

* fix(a11y): improve quiz accessibility and i18n compliance

* fix(sl/feat/quiz): replace with correct name for react icon

* feat(quiz): implement Redis caching + session fixes + cleanup

Closes #260, #261, #262

- Add quiz-answers-redis.ts with getOrCreateQuizAnswersCache()
- Cache correct answers per quiz (12h TTL)
- Replace AES-256-GCM decryption with O(1) Redis lookup
- Add initializeQuizCache server action
- Update verify-answer route to use Redis

- Allow restoring 'completed' sessions (not just 'in_progress')
- Only clear session for authenticated users after submit
- Guest result screen now survives language switch

- Delete PendingResultHandler.tsx (never executes)
- Delete start-session/route.ts (broken import, unused)
- Delete quiz-crypto.ts (AES replaced by Redis)
- Delete quiz-crypto.test.ts (tests dead code)
- Rewrite verify-answer.test.ts for Redis API (8 tests)
- Fix quiz-session.test.ts for completed session restore

* chore(quiz): delete unused start-session route

Part of #262 cleanup - route had broken import after Redis migration.

* git commit -m "fix(quiz): add NaN seed validation and cache/DB fallback

- Validate seed param to prevent NaN breaking question shuffle
- Add cache recovery in verify-answer when Redis cache expires
- Add DB fallback in getCorrectAnswer when Redis unavailable

* fix(layout): remove duplicate padding from quiz routes

Add isQuizzesPath to MainSwitcher to exclude /quiz and /quizzes routes
from extra px-6 padding, matching Q&A page behavior.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/app/[locale]/q&a/page.tsx          | 2 +-
 frontend/app/[locale]/quizzes/page.tsx      | 2 +-
 frontend/components/header/MainSwitcher.tsx | 8 +++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/app/[locale]/q&a/page.tsx b/frontend/app/[locale]/q&a/page.tsx
index 13f52f2c..69513907 100644
--- a/frontend/app/[locale]/q&a/page.tsx
+++ b/frontend/app/[locale]/q&a/page.tsx
@@ -30,7 +30,7 @@ export default async function QAPage({
     <DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
       <main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="mb-8">
-          <p className="text-sm font-semibold text-[var(--accent-primary)]">
+          <p className="text-sm font-semibold text-(--accent-primary)">
             {t('pretitle')}
           </p>
           <h1 className="text-3xl font-bold">{t('title')}</h1>
diff --git a/frontend/app/[locale]/quizzes/page.tsx b/frontend/app/[locale]/quizzes/page.tsx
index e3ae9850..1c49ac32 100644
--- a/frontend/app/[locale]/quizzes/page.tsx
+++ b/frontend/app/[locale]/quizzes/page.tsx
@@ -36,7 +36,7 @@ export default async function QuizzesPage({ params }: PageProps) {
     <DynamicGridBackground className="min-h-screen bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
       <main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="mb-8">
-          <p className="text-sm font-semibold text-[var(--accent-primary)]">
+          <p className="text-sm font-semibold text-(--accent-primary)">
             {t('practice')}
           </p>
           <h1 className="text-3xl font-bold">{t('title')}</h1>
diff --git a/frontend/components/header/MainSwitcher.tsx b/frontend/components/header/MainSwitcher.tsx
index 951d0bd3..37d7894c 100644
--- a/frontend/components/header/MainSwitcher.tsx
+++ b/frontend/components/header/MainSwitcher.tsx
@@ -28,6 +28,12 @@ function isHomePath(pathname: string): boolean {
   );
 }
 
+function isQuizzesPath(pathname: string): boolean {
+  const segments = pathname.split('/').filter(Boolean);
+  return segments[0] === 'quizzes' || segments[1] === 'quizzes' ||
+         segments[0] === 'quiz' || segments[1] === 'quiz';
+}
+
 type MainSwitcherProps = {
   children: ReactNode;
   userExists: boolean;
@@ -64,7 +70,7 @@ export function MainSwitcher({
   }
 
   return (
-    <main className={isQa || isHome ? 'mx-auto' : 'mx-auto min-h-[80vh] px-6'}>
+    <main className={isQa || isHome || isQuizzesPath(pathname) ? 'mx-auto' : 'mx-auto min-h-[80vh] px-6'}>
       {children}
     </main>
   );